/* Launch readiness overrides 1.7 */
.page-heading,
.workspace {
  width: min(var(--workspace-width), calc(100% - 32px));
  max-width: var(--workspace-width);
}

/* Points redemption marketplace 1.9.8 */
.nav-label-short { display: none; }

body[data-page="rewards"] .page-heading { margin-bottom: 12px; }

.redemption-hero {
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: center;
  border-color: #dce5f5;
  background: #f8faff;
}

.redemption-hero h2 {
  margin: 9px 0 8px;
  color: #131722;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.18;
  letter-spacing: -.7px;
}

.redemption-hero p {
  max-width: 650px;
  color: #667185;
  font-size: 13px;
  line-height: 1.75;
}

.redemption-balance {
  padding: 20px;
  border-radius: 14px;
  color: #fff;
  background: #19243e;
}

.redemption-balance span,
.redemption-balance strong,
.redemption-balance small { display: block; }
.redemption-balance span { color: #bac7df; font-size: 11px; }
.redemption-balance strong { margin: 5px 0 2px; font-size: 34px; letter-spacing: -.5px; }
.redemption-balance small { color: #91a0bc; font-size: 9px; }

.redemption-assurance {
  margin: 12px 0;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid #e0e6f0;
  border-radius: 12px;
  color: #4f5d73;
  background: #fff;
}

.redemption-assurance span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.redemption-assurance b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2962ff;
  background: #edf3ff;
  font-size: 10px;
}
.redemption-assurance i { width: 44px; height: 1px; background: #dce3ef; }

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

.redemption-card {
  min-height: 330px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-color: #dfe5ef;
  box-shadow: 0 10px 30px rgba(33, 52, 88, .06);
}

.redemption-card.news { border-top: 3px solid #2962ff; }
.redemption-card.capital { border-top: 3px solid #f59e42; }
.redemption-card-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.redemption-card-top img { width: 64px; height: 64px; display: block; object-fit: contain; }
.redemption-card-top div > span { color: #2962ff; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.redemption-card.capital .redemption-card-top div > span { color: #bd6a16; }
.redemption-card-top h2 { margin-top: 5px; color: #131722; font-size: 19px; }
.redemption-state {
  padding: 6px 9px;
  border-radius: 999px;
  color: #2962ff;
  background: #edf3ff;
  font-size: 9px;
  white-space: nowrap;
}
.redemption-state.processing { color: #9a650a; background: #fff6df; }
.redemption-state.completed { color: #197a55; background: #e9f8f1; }
.redemption-state.rejected { color: #a2545b; background: #fff0f1; }
.redemption-card > p { margin: 19px 0 16px; color: #68758a; font-size: 12px; line-height: 1.75; }
.redemption-features { display: flex; flex-wrap: wrap; gap: 7px; }
.redemption-features span {
  padding: 7px 9px;
  border: 1px solid #e2e7ef;
  border-radius: 7px;
  color: #56647a;
  background: #fafbfc;
  font-size: 10px;
}
.redemption-card-foot {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #edf0f5;
}
.redemption-card-foot div span,
.redemption-card-foot div strong { display: block; }
.redemption-card-foot div strong { color: #131722; font-size: 27px; line-height: 1; }
.redemption-card-foot div span { margin-top: 5px; color: #8a93a3; font-size: 9px; }
.redemption-card-foot .button { min-width: 126px; }

.redemption-rules { margin-top: 14px; padding: 22px 24px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; }
.redemption-rules h3 { margin-top: 5px; color: #172033; font-size: 17px; }
.redemption-rules ul { margin: 0; padding-left: 18px; color: #68758a; font-size: 11px; line-height: 1.9; }

.redemption-history { margin-top: 22px; }
.redemption-history-list { overflow: hidden; }
.redemption-history-row {
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.redemption-history-row:last-child { border-bottom: 0; }
.redemption-history-row img { width: 42px; height: 42px; object-fit: contain; }
.redemption-history-row div strong,
.redemption-history-row div span,
.redemption-history-row div small { display: block; }
.redemption-history-row div strong { color: #172033; font-size: 12px; }
.redemption-history-row div span,
.redemption-history-row div small { margin-top: 4px; color: #8993a4; font-size: 9px; }
.redemption-history-row > b { color: #2962ff; font-size: 10px; }
.redemption-history-row > b.completed { color: #197a55; }
.redemption-history-row > b.rejected { color: #a2545b; }

.admin-redemption-head { margin-top: 24px; }
.admin-redemption-head > b { color: #2962ff; font-size: 11px; }
.admin-redemption-list { overflow: hidden; }
.admin-redemption-row {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.admin-redemption-row:last-child { border-bottom: 0; }
.admin-redemption-row img { width: 46px; height: 46px; object-fit: contain; }
.admin-redemption-row div strong,
.admin-redemption-row div span,
.admin-redemption-row div small { display: block; }
.admin-redemption-row div strong { color: #172033; font-size: 12px; }
.admin-redemption-row div span,
.admin-redemption-row div small { margin-top: 4px; color: #8993a4; font-size: 9px; }

.redemption-confirm,
.redemption-review { padding: 8px 4px 2px; }
.redemption-confirm-head { display: flex; align-items: center; gap: 15px; }
.redemption-confirm-head > img { width: 62px; height: 62px; object-fit: contain; }
.redemption-confirm-head > div { flex: 1; }
.redemption-confirm-head h2 { margin: 6px 0 3px; color: #131722; font-size: 21px; }
.redemption-confirm-head p { color: #7d8798; font-size: 10px; }
.redemption-confirm-summary {
  margin: 20px 0 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  background: #f4f7fc;
}
.redemption-confirm-summary div { text-align: center; }
.redemption-confirm-summary span,
.redemption-confirm-summary strong { display: block; }
.redemption-confirm-summary span { color: #7d8798; font-size: 9px; }
.redemption-confirm-summary strong { margin-top: 4px; color: #172033; font-size: 19px; }
.redemption-confirm-summary i { color: #a5afbf; font-style: normal; }
.redemption-agreement { margin: 14px 0; }
.redemption-point-help { width: 100%; margin-top: 12px; border: 0; color: #2962ff; background: transparent; font-size: 11px; }

@media (max-width: 700px) {
  #nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding-right: 5px; padding-left: 5px; }
  #nav .nav-item { padding: 0 1px; font-size: 11px; }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  body[data-page="rewards"] .workspace { padding-top: 8px; }
  .redemption-hero { padding: 18px 16px; grid-template-columns: 1fr; gap: 16px; }
  .redemption-hero h2 { margin-top: 7px; font-size: 23px; }
  .redemption-hero p { font-size: 11.5px; }
  .redemption-balance { padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .redemption-balance strong { grid-row: span 2; margin: 0; font-size: 30px; }
  .redemption-balance small { margin-top: 3px; }
  .redemption-assurance { padding: 11px 10px; gap: 7px; justify-content: space-between; }
  .redemption-assurance span { gap: 4px; font-size: 9px; }
  .redemption-assurance b { width: 19px; height: 19px; }
  .redemption-assurance i { width: 13px; }
  .redemption-grid { grid-template-columns: 1fr; gap: 10px; }
  .redemption-card { min-height: 0; padding: 17px 15px; border-radius: 13px; }
  .redemption-card-top { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
  .redemption-card-top img { width: 54px; height: 54px; }
  .redemption-card-top h2 { font-size: 17px; }
  .redemption-card > p { margin: 14px 0 12px; font-size: 11.5px; }
  .redemption-card-foot { padding-top: 16px; align-items: center; }
  .redemption-card-foot div strong { font-size: 24px; }
  .redemption-card-foot .button { min-width: 120px; min-height: 42px; padding: 0 13px; font-size: 11px; }
  .redemption-rules { padding: 17px 16px; grid-template-columns: 1fr; gap: 9px; }
  .redemption-rules ul { font-size: 10.5px; }
  .redemption-history-row { padding: 13px 12px; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .redemption-history-row img { width: 38px; height: 38px; }
  .admin-redemption-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .admin-redemption-row img { width: 42px; height: 42px; }
  .admin-redemption-row .button { grid-column: 2 / -1; width: 100%; }
  .redemption-confirm-head > img { width: 54px; height: 54px; }
  .redemption-confirm-summary { padding: 13px 10px; }
  .redemption-confirm-summary strong { font-size: 17px; }
}

body[data-page="forum"] .page-heading { display: none; }
body[data-page="forum"] .workspace { padding-top: 16px; }

.modal-card {
  width: min(520px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
}

.wechat-login-benefits {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wechat-login-benefits span {
  padding: 12px;
  border: 1px solid #dfe5f5;
  border-radius: 6px;
  background: #f7f9ff;
  text-align: left;
}

.wechat-login-benefits b,
.wechat-login-benefits small { display: block; }
.wechat-login-benefits b { color: #131722; font-size: 12px; }
.wechat-login-benefits small { margin-top: 4px; color: #787b86; font-size: 9px; line-height: 1.5; }

@media (max-width: 900px) {
  .page-heading,
  .workspace { width: min(100% - 20px, var(--workspace-width)); }
}

@media (max-width: 700px) {
  :root { --mobile-nav-height: 66px; }

  html { background: #f4f6fa; }
  body {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    background: #f4f6fa;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }

  button,
  input,
  select,
  textarea { touch-action: manipulation; }

  .site-header {
    height: 56px;
    border-bottom-color: #e5e7ec;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: none;
  }

  .header-inner {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .brand { min-width: 0; gap: 9px; }
  .brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 16px;
  }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small,
  .header-search,
  .header-actions .points-chip { display: none; }

  .header-actions { margin-left: auto; gap: 4px; }
  .notification-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .notification-button span { display: none; }
  .user-button {
    width: 40px;
    height: 40px;
    padding: 4px;
    justify-content: center;
  }
  .user-button > span { width: 32px; height: 32px; }
  .user-button > div,
  .user-button > i { display: none; }
  .role-menu {
    position: fixed;
    top: 52px;
    right: 10px;
    width: min(230px, calc(100vw - 20px));
    padding: 7px;
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(19, 23, 34, .18);
  }
  .role-menu button { min-height: 43px; padding: 10px 12px; font-size: 13px; }

  #nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    margin: 0;
    padding: 6px 8px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    overflow: visible;
    border-top: 1px solid #dfe1e6;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -6px 22px rgba(19, 23, 34, .07);
    backdrop-filter: blur(16px);
    z-index: 90;
  }

  #nav .nav-item {
    min-width: 0;
    min-height: 52px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #6a6d78;
    font-size: 12px;
    font-weight: 600;
  }
  #nav .nav-item:hover { background: transparent; }
  #nav .nav-item.active { color: #2962ff; background: #eef2ff; }
  #nav .nav-item.active::after { display: none; }
  #nav .staff-only,
  #nav .owner-only { display: none !important; }

  .risk-ticker {
    top: 56px;
    height: 30px;
    border-bottom-color: #f0cfd2;
    color: #a1454d;
    background: #fff4f5;
  }
  .risk-track { gap: 30px; font-size: 10px; line-height: 30px; }
  .risk-track span { padding-left: 18px; }

  .main { min-height: calc(100dvh - 86px); }
  .page-heading,
  .workspace { width: calc(100% - 20px); }
  .page-heading {
    min-height: 72px;
    padding: 15px 2px 11px;
    align-items: center;
  }
  .page-heading h1 { font-size: 22px; line-height: 1.25; }
  .page-heading p { max-width: 250px; margin-top: 4px; font-size: 12px; line-height: 1.45; }
  .heading-ask { min-height: 42px; padding: 0 13px; font-size: 13px; }

  body[data-page="home"] .page-heading,
  body[data-page="forum"] .page-heading,
  body[data-page="qmt"] .page-heading,
  body[data-page="ptrade"] .page-heading { display: none; }
  body[data-page="home"] .workspace,
  body[data-page="forum"] .workspace,
  body[data-page="qmt"] .workspace,
  body[data-page="ptrade"] .workspace { padding-top: 10px; }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 18px;
  }
  .content { min-width: 0; }
  .wallet-aside { display: none; }

  .card,
  .forum-head,
  .form-card,
  .draft-panel,
  .profile-center,
  .vip-reserve,
  .topic-detail-page,
  .platform-hero {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(19, 23, 34, .05);
  }

  .welcome.welcome-premium {
    padding: 22px 18px 19px;
    border-radius: 12px;
  }
  .welcome.welcome-premium .eyebrow { font-size: 11px; }
  .welcome.welcome-premium h2 {
    margin-top: 10px;
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -.55px;
  }
  .welcome.welcome-premium p { margin-top: 10px; font-size: 13px; line-height: 1.7; }
  .welcome.welcome-premium .welcome-actions {
    width: 100%;
    margin-top: 17px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .welcome.welcome-premium .welcome-actions .button {
    min-width: 0;
    min-height: 46px;
    padding: 0 8px;
    font-size: 13px;
  }
  .hero-trust {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .hero-trust span {
    min-width: 0;
    padding: 7px 4px;
    overflow: hidden;
    font-size: 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .software-hub { margin-top: 10px; padding: 13px; }
  .software-hub .home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .product-card {
    min-height: 116px;
    padding: 14px 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    text-align: center;
  }
  .product-card-copy > span { font-size: 10px; }
  .product-card-copy h3 { margin-top: 5px; font-size: 14px; line-height: 1.35; }
  .product-card-copy p,
  .product-enter { display: none; }
  .search-large { margin-top: 10px; }
  .search-large input {
    height: 48px;
    padding: 0 103px 0 13px;
    font-size: 15px;
  }
  .search-large .button { top: 4px; right: 4px; height: 40px; padding: 0 12px; font-size: 12px; }

  .guest-limit-tip {
    margin-top: 10px;
    padding: 14px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }
  .guest-limit-tip b { font-size: 14px; }
  .guest-limit-tip span { margin-top: 3px; font-size: 12px; line-height: 1.55; }
  .guest-limit-tip .wechat-entry { grid-column: 1 / -1; width: 100%; min-height: 44px; }

  .forum-head,
  .form-card,
  .draft-panel,
  .platform-hero,
  .topic-detail-page { padding: 16px; }
  .forum-head h2,
  .form-card h2 { font-size: 20px; }
  .forum-head p,
  .form-card > p { margin: 6px 0 15px; font-size: 12px; line-height: 1.6; }
  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .toolbar input { grid-column: 1 / -1; }
  .toolbar input,
  .toolbar select { width: 100%; height: 46px; font-size: 16px; }
  .toolbar .button { min-height: 46px; font-size: 13px; }

  .forum-tabs {
    margin: 9px 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    border-radius: 9px;
  }
  .forum-tab,
  .forum-tab.active,
  .forum-tab.qmt.active,
  .forum-tab.ptrade.active,
  .forum-tab.general.active {
    min-width: 0;
    min-height: 50px;
    padding: 6px 3px;
    justify-content: center;
    gap: 5px;
    border-radius: 7px;
  }
  .forum-tab-mark { width: 24px; height: 24px; flex: 0 0 24px; }
  .forum-tab b { font-size: 11px; }
  .forum-tab small { display: none; }

  .topic-list { border-radius: 10px; }
  .topic-row {
    display: block;
    padding: 15px 14px 13px 17px;
  }
  .topic-row::before { top: 15px; bottom: 15px; width: 3px; }
  .topic-tags { gap: 5px; }
  .tag { padding: 4px 6px; font-size: 10px; }
  .platform-tag { height: 24px; }
  .platform-tag strong { font-size: 10px; }
  .topic-row h4 {
    margin: 10px 0 6px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.45;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .topic-summary {
    margin-bottom: 9px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.6;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .topic-service-state {
    width: 100%;
    margin-top: 9px;
    padding: 8px 10px;
  }
  .topic-service-state b { font-size: 11px; }
  .topic-service-state small { font-size: 10px; }
  .topic-bottom { margin-top: 9px; padding-top: 9px; font-size: 10px; }
  .reward { font-size: 12px; }

  .platform-hero { align-items: flex-start; }
  .platform-hero h2 { font-size: 22px; }
  .platform-hero p { font-size: 13px; }
  .platform-hero .button { min-height: 44px; flex: 0 0 auto; }
  .qmt-sub-grid { grid-template-columns: 1fr; }
  .qmt-sub-card,
  .big-qmt-card,
  .qmt-data-card { padding: 16px; border-radius: 9px; }
  .qmt-sub-card b { font-size: 15px; }
  .qmt-sub-card p { font-size: 12px; }

  .form-grid { grid-template-columns: 1fr; gap: 15px; }
  .field.full { grid-column: auto; }
  .field label { margin-bottom: 7px; font-size: 13px; }
  .field input,
  .field select,
  .field textarea,
  .form-input { min-height: 48px; font-size: 16px; }
  .field textarea { min-height: 124px; }
  .field-help { font-size: 11px; }
  .ask-form-heading { align-items: stretch; }
  .ask-form-heading p { font-size: 12px; }
  .ask-quality { padding: 12px; }
  .code-toggle { min-height: 54px; }
  .form-actions { gap: 8px; }
  .form-actions .button { min-height: 46px; flex: 1; }

  .profile-center { padding: 15px; align-items: flex-start; }
  .profile-actions { width: 100%; justify-content: flex-start; }
  .profile-actions .button { min-height: 44px; flex: 1; }
  .mine-summary,
  .mine-summary.refined { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mine-summary.refined .summary-card { min-height: 88px; padding: 14px; }
  .transaction-row,
  .consultation-row,
  .account-row,
  .application-row,
  .trash-row { padding: 13px; }
  .service-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-timeline { grid-template-columns: 1fr; }

  .topic-back { min-height: 42px; font-size: 13px; }
  .detail-title { font-size: 23px; line-height: 1.35; }
  .detail-meta { font-size: 11px; line-height: 1.6; }
  .answer-card,
  .answer-review,
  .claim-status,
  .service-timeline,
  .question-actions { padding: 13px; }
  .customer-message-form textarea { min-height: 108px; font-size: 16px; }

  .floating-doc {
    top: auto;
    right: 10px;
    bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom));
    width: 42px;
    min-height: 42px;
    padding: 6px;
    border-radius: 9px;
    opacity: .94;
    transform: none;
  }
  .floating-doc:hover { transform: none; }
  .floating-doc span { width: 28px; height: 28px; }
  .floating-doc b { display: none; }

  .modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card,
  .modal-card:has(.wechat-login-panel) {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(19, 23, 34, .2);
  }
  .modal-card:has(.wechat-login-panel) .modal-close {
    top: 13px;
    right: 13px;
    width: 36px;
    height: 36px;
  }
  .wechat-login-panel {
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  }
  .wechat-login-brand { padding-right: 38px; }
  .wechat-login-brand > span { width: 38px; height: 38px; }
  .wechat-login-brand b { font-size: 14px; }
  .wechat-login-brand small { font-size: 10px; }
  .qr-kicker { margin-top: 22px; }
  .wechat-login-panel h2 { margin-top: 8px; font-size: 24px; }
  .wechat-login-panel > p { font-size: 13px; line-height: 1.7; }
  .wechat-qr-guide { margin-top: 16px; padding: 11px 5px; }
  .wechat-qr-guide span { font-size: 10px; }
  .wechat-login-benefits { margin-top: 15px; }
  .wechat-login-benefits span { padding: 11px; }
  .wechat-login-benefits b { font-size: 13px; }
  .wechat-login-benefits small { font-size: 10px; }
  .wechat-qr-status { font-size: 11px; }
  .wechat-agreement { margin: 15px 0 12px; min-height: 34px; }
  .agreement-check { font-size: 12px; line-height: 1.65; }
  .agreement-check input { width: 20px; height: 20px; flex: 0 0 20px; }
  .wechat-login-button { min-height: 54px; border-radius: 9px; }
  .wechat-login-button b { font-size: 15px; }
  .wechat-login-button small { font-size: 10px; }
  .account-login-toggle,
  .guest-continue { min-height: 44px; font-size: 13px; }
}

@media (max-width: 370px) {
  .welcome.welcome-premium h2 { font-size: 23px; }
  .welcome.welcome-premium .welcome-actions { grid-template-columns: 1fr; }
  .forum-tab { flex-direction: column; }
  .forum-tab-mark { width: 22px; height: 22px; flex-basis: 22px; }
  .detail-title { font-size: 21px; }
}

/* Pre-launch visual polish 1.8 */
:root {
  --workspace-width: 1320px;
  --launch-surface: #ffffff;
  --launch-canvas: #f5f7fb;
  --launch-line: #e3e6ed;
  --launch-shadow: 0 4px 18px rgba(19, 23, 34, .045);
}

body { background: var(--launch-canvas); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(41, 98, 255, .22);
  outline-offset: 2px;
}

@media (min-width: 701px) {
  .site-header {
    height: 60px;
    border-bottom-color: var(--launch-line);
    box-shadow: 0 1px 0 rgba(19, 23, 34, .02);
  }

  .header-inner {
    height: 60px;
    padding: 0 20px;
    gap: 14px;
  }

  .brand { min-width: 148px; gap: 10px; }
  .brand-logo { width: 36px; height: 36px; border-radius: 9px; font-size: 17px; }
  .brand-copy strong { font-size: 15px; letter-spacing: -.15px; }
  .brand-copy small { margin-top: 2px; font-size: 10px; }

  .header-search {
    width: clamp(210px, 21vw, 286px);
    height: 36px;
    flex-basis: 286px;
    padding: 0 10px 0 14px;
    border-radius: 8px;
    font-size: 12px;
  }
  .header-search kbd { padding: 3px 7px; font-size: 9px; }

  .nav-item { padding: 0 13px; font-size: 13px; }
  .nav-item.active::after { right: 13px; left: 13px; height: 3px; border-radius: 3px 3px 0 0; }
  .points-chip,
  .notification-button { height: 36px; border-radius: 8px; }
  .user-button { height: 42px; border-radius: 8px; }

  .risk-ticker { top: 60px; height: 30px; }
  .risk-track { font-size: 10.5px; line-height: 30px; }
  .main { min-height: calc(100vh - 90px); }

  .page-heading,
  .workspace { width: min(var(--workspace-width), calc(100% - 40px)); }
  .workspace {
    grid-template-columns: minmax(0, 1fr) 276px;
    gap: 14px;
    padding-bottom: 54px;
  }
  body[data-page="home"] .workspace,
  body[data-page="forum"] .workspace { padding-top: 16px; }
  .wallet-aside { top: 104px; gap: 12px; }

  .card,
  .welcome.welcome-premium,
  .forum-head,
  .form-card,
  .draft-panel,
  .profile-center,
  .vip-reserve,
  .topic-detail-page,
  .platform-hero {
    border-color: var(--launch-line);
    border-radius: 10px;
    box-shadow: var(--launch-shadow);
  }

  .button { height: 38px; padding: 0 16px; border-radius: 8px; font-size: 12px; }

  .welcome.welcome-premium { padding: 34px 36px 31px; }
  .welcome.welcome-premium::before { height: 3px; }
  .hero-kicker { font-size: 11px; }
  .welcome.welcome-premium h2 {
    margin-top: 14px;
    font-size: clamp(34px, 3vw, 42px);
    letter-spacing: -1.2px;
  }
  .welcome.welcome-premium p {
    max-width: 760px;
    margin-top: 13px;
    font-size: 13.5px;
    line-height: 1.72;
  }
  .welcome.welcome-premium .welcome-actions { margin-top: 21px; gap: 9px; }
  .welcome.welcome-premium .welcome-actions .button { height: 40px; padding: 0 18px; }
  .hero-trust { margin-top: 18px; gap: 7px; }
  .hero-trust span { padding: 7px 10px; border-radius: 7px; font-size: 10.5px; }

  .software-hub { margin-top: 14px; padding: 18px; }
  .product-section-head { margin-bottom: 13px; }
  .product-section-head h3 { margin-top: 4px; font-size: 17px; }
  .product-section-head > span { font-size: 10px; }
  .software-hub .home-product-grid { gap: 10px; }
  .product-card {
    min-height: 92px;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 13px;
    padding: 14px 15px;
    border-radius: 8px;
  }
  .product-visual { width: 46px; height: 46px; border-radius: 8px; }
  .product-card-copy > span { font-size: 10px; }
  .product-card-copy h3 { margin: 3px 0 4px; font-size: 14px; }
  .product-card-copy p { font-size: 10.5px; line-height: 1.55; }
  .product-enter { padding: 7px 9px; border-radius: 6px; font-size: 10px; }
  .search-large { margin-top: 11px; }
  .search-large input { height: 44px; padding-left: 14px; border-radius: 8px; font-size: 11.5px; }
  .search-large button { top: 3px; right: 3px; height: 38px; }

  .section-head { margin: 21px 3px 10px; }
  .section-head h3 { font-size: 17px; }
  .section-head p { margin-top: 4px; font-size: 10.5px; }
  .section-head button { font-size: 11px; }

  .topic-list { border-radius: 10px; }
  .topic-row {
    grid-template-columns: minmax(0, 1fr) 220px;
    column-gap: 20px;
    padding: 16px 17px 14px 20px;
  }
  .topic-row::before { top: 15px; bottom: 15px; width: 3px; }
  .topic-row h4 { margin: 9px 0 5px; font-size: 15.5px; line-height: 1.42; }
  .topic-summary { font-size: 11.5px; line-height: 1.6; }
  .topic-service-state { margin-top: 8px; padding: 9px 10px; border-radius: 8px; }
  .topic-service-state > span { width: 28px; height: 28px; }
  .topic-service-state b { font-size: 10.5px; }
  .topic-service-state small { margin-top: 2px; font-size: 9px; }
  .topic-bottom { margin-top: 10px; padding-top: 9px; font-size: 10px; }
  .tag { padding: 4px 7px; border-radius: 5px; font-size: 9px; }
  .platform-tag { height: 23px; border-radius: 5px; }
  .platform-tag i { width: 17px; height: 17px; border-radius: 4px; }
  .reward { font-size: 11px; }

  .wallet-card,
  .guest-wallet,
  .aside-list,
  .certification-aside,
  .consultation-aside { padding: 18px; border-radius: 10px; }
  .wallet-label { font-size: 10px; }
  .wallet-balance { font-size: 30px; }
  .wallet-tip,
  .aside-list p,
  .certification-aside > p,
  .consultation-aside > p { font-size: 10.5px; line-height: 1.65; }
  .aside-title,
  .guest-wallet-title { font-size: 14px; }
  .wallet-card .button { margin-top: 15px; }

  .forum-head { padding: 22px; }
  .forum-head h2,
  .form-card h2 { font-size: 20px; }
  .forum-head p,
  .form-card > p { margin: 6px 0 16px; font-size: 11.5px; line-height: 1.65; }
  .toolbar { gap: 8px; }
  .toolbar input,
  .toolbar select { height: 40px; border-radius: 7px; font-size: 11.5px; }
  .forum-tabs { margin: 10px 0; padding: 5px; border-radius: 9px; }
  .forum-tab,
  .forum-tab.active,
  .forum-tab.qmt.active,
  .forum-tab.ptrade.active,
  .forum-tab.general.active { min-height: 48px; padding: 7px 10px; border-radius: 7px; }
  .forum-tab-mark { width: 29px; height: 29px; border-radius: 6px; }
  .forum-tab b { font-size: 11.5px; }
  .forum-tab small { margin-top: 2px; font-size: 9px; }

  .floating-doc {
    top: auto;
    right: 16px;
    bottom: 18px;
    width: 58px;
    min-height: 58px;
    padding: 7px 5px;
    border-radius: 10px;
    transform: none;
  }
  .floating-doc:hover { transform: translateY(-2px); }
  .floating-doc b { font-size: 9px; }
}

/* Guided question and comment flow 1.9.6 */
.ask-stepper {
  margin: 4px 0 16px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  background: #f6f8fb;
}

.ask-stepper button {
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #69758a;
  background: transparent;
  text-align: left;
}

.ask-stepper button:hover { background: #fff; }
.ask-stepper button.active {
  border-color: #d9e4ff;
  color: #173b99;
  background: #fff;
  box-shadow: 0 5px 16px rgba(41, 98, 255, .08);
}
.ask-stepper button.completed { color: #2a5de8; }
.ask-stepper button i {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #69758a;
  background: #e8ecf3;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.ask-stepper button.active i,
.ask-stepper button.completed i { color: #fff; background: #2962ff; }
.ask-stepper b,
.ask-stepper small { display: block; }
.ask-stepper b { color: inherit; font-size: 11px; }
.ask-stepper small { margin-top: 2px; color: #8b95a6; font-size: 8px; line-height: 1.35; }

.ask-step-panel { display: none; }
.ask-step-panel.active { display: block; animation: ask-step-in .18s ease-out; }
@keyframes ask-step-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ask-step-intro {
  margin-bottom: 16px;
  padding-bottom: 13px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-bottom: 1px solid #edf0f5;
}
.ask-step-intro > span {
  padding: 5px 8px;
  border-radius: 7px;
  color: #2457e6;
  background: #edf3ff;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.ask-step-intro h3 { margin: 0; color: #17213a; font-size: 15px; }
.ask-step-intro p { margin: 4px 0 0; color: #7b8799; font-size: 9px; line-height: 1.55; }

.ask-publish-summary {
  margin-bottom: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid #dce6fb;
  border-radius: 10px;
  background: #f7faff;
}
.ask-publish-summary b { margin-right: 4px; color: #1b2a49; font-size: 11px; }
.ask-publish-summary span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #52617a;
  background: #fff;
  font-size: 8.5px;
}
.ask-step-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 18px -20px -20px;
  padding: 13px 20px;
  border-top: 1px solid #e7ebf2;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}
.ask-step-actions .button.primary { min-width: 150px; }

.topic-row-actions { display: flex; align-items: center; gap: 9px; }
.topic-row-actions button {
  padding: 4px 8px;
  border: 1px solid #dce3ef;
  border-radius: 6px;
  color: #53637c;
  background: #fff;
  font-size: 8.5px;
  font-weight: 700;
}
.topic-row-actions button:hover { border-color: #9bb3ff; color: #2457e6; background: #f6f9ff; }

.comment-login-gate {
  margin-top: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #dce5f7;
  border-radius: 10px;
  background: #f7faff;
}
.comment-login-gate > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.comment-login-gate > div > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #2962ff;
  background: #e9f0ff;
}
.comment-login-gate svg { width: 18px; height: 18px; }
.comment-login-gate b,
.comment-login-gate small { display: block; }
.comment-login-gate b { color: #1b2842; font-size: 10.5px; }
.comment-login-gate small { margin-top: 3px; color: #78859a; font-size: 8.5px; line-height: 1.45; }
.comment-login-gate .button { flex: 0 0 auto; }

@media (max-width: 700px) {
  .ask-form-heading { display: block; }
  .ask-search-first { width: 100%; margin-top: 12px; }
  .ask-stepper { gap: 3px; padding: 4px; }
  .ask-stepper button { padding: 8px 5px; justify-content: center; text-align: center; }
  .ask-stepper button i { width: 24px; height: 24px; flex-basis: 24px; }
  .ask-stepper button span { display: none; }
  .ask-step-intro h3 { font-size: 14px; }
  .ask-publish-summary { align-items: flex-start; }
  .ask-publish-summary b { width: 100%; }
  .ask-step-actions {
    margin: 16px -14px -14px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ask-step-actions .button { width: 100%; min-width: 0; }
  .comment-login-gate { align-items: stretch; flex-direction: column; }
  .comment-login-gate .button { width: 100%; }
  .topic-row-actions { gap: 6px; }
  .topic-row-actions button { min-height: 28px; }
}

@media (max-width: 700px) {
  body { background: var(--launch-canvas); }
  .page-heading,
  .workspace { width: calc(100% - 16px); }
  .workspace { gap: 11px; }

  .risk-ticker { height: 31px; }
  .risk-track { font-size: 9.5px; line-height: 31px; }

  .welcome.welcome-premium { padding: 20px 16px 17px; border-radius: 12px; }
  .welcome.welcome-premium h2 {
    margin-top: 9px;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -.5px;
    text-wrap: balance;
  }
  .welcome.welcome-premium p { margin-top: 9px; font-size: 12.5px; line-height: 1.65; }
  .welcome.welcome-premium .welcome-actions { margin-top: 15px; }
  .hero-trust { margin-top: 13px; }
  .hero-trust span {
    min-height: 42px;
    padding: 7px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
  }
  .hero-trust b { display: block; margin-bottom: 2px; font-size: 10.5px; }

  .software-hub { margin-top: 11px; padding: 14px; border-radius: 12px; }
  .product-section-head { margin-bottom: 10px; }
  .product-section-head h3 { font-size: 16px; }
  .product-card { min-height: 112px; padding: 13px 8px; border-radius: 10px; }
  .product-card-copy h3 { font-size: 14.5px; }
  .search-large { margin-top: 10px; }
  .search-large input { height: 46px; font-size: 14px; }
  .search-large .button { height: 38px; border-radius: 7px; }

  .section-head { margin: 18px 1px 9px; }
  .section-head h3 { font-size: 17px; }
  .section-head p { font-size: 10px; line-height: 1.45; }
  .section-head button { font-size: 11px; }

  .forum-head { padding: 16px 14px; border-radius: 12px; }
  .forum-head h2 { font-size: 21px; }
  .forum-head p { margin: 5px 0 13px; font-size: 12px; line-height: 1.6; }
  .toolbar { gap: 7px; }
  .toolbar input,
  .toolbar select { height: 44px; font-size: 15px; border-radius: 8px; }
  .toolbar .button { min-height: 44px; border-radius: 8px; }
  .forum-tabs { margin: 9px 0; border-radius: 11px; }
  .forum-tab,
  .forum-tab.active,
  .forum-tab.qmt.active,
  .forum-tab.ptrade.active,
  .forum-tab.general.active { min-height: 48px; border-radius: 8px; }

  .topic-list { border-radius: 12px; }
  .topic-row { padding: 14px 13px 12px 17px; }
  .topic-row::before { top: 14px; bottom: 14px; }
  .topic-row h4 { margin: 9px 0 5px; font-size: 15.5px; line-height: 1.42; }
  .topic-summary { margin-bottom: 6px; font-size: 11.5px; line-height: 1.55; }
  .topic-service-state {
    width: auto;
    margin: 8px 0 0;
    padding: 0;
    display: inline-flex;
    border: 0;
    background: transparent;
  }
  .topic-service-state > span { width: 24px; height: 24px; }
  .topic-service-state b { font-size: 10.5px; }
  .topic-service-state small { display: none; }
  .topic-bottom { margin-top: 8px; padding-top: 8px; }

  .auth-gate {
    padding: 30px 18px;
    border-radius: 12px;
    background: #fff;
  }
  .auth-gate-icon { width: 58px; height: 58px; border-radius: 16px; box-shadow: none; }
  .auth-gate-kicker { margin-bottom: 9px; font-size: 10px; }
  .auth-gate h2 { max-width: 280px; margin: 0 auto; font-size: 24px; line-height: 1.35; }
  .auth-gate p { margin: 10px auto 18px; font-size: 12.5px; line-height: 1.65; }
  .auth-gate-actions { margin-top: 18px; gap: 8px; }
  .auth-gate-actions .button { min-height: 44px; }

  .floating-doc {
    right: -1px;
    bottom: calc(var(--mobile-nav-height) + 10px + env(safe-area-inset-bottom));
    width: 38px;
    min-height: 42px;
    padding: 5px;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 5px 16px rgba(19, 23, 34, .12);
  }
  .floating-doc span { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .risk-track { animation: none !important; transform: none !important; }
}

/* Mobile visual refinement 1.9 */
.mobile-only,
.mobile-version,
.mobile-home-profile,
.mobile-discovery-nav,
.mobile-product-name,
.mobile-hero-actions { display: none; }

@media (max-width: 700px) {
  body { background: #f3f6fb; }
  body[data-page="home"],
  body[data-page="qmt"],
  body[data-page="ptrade"] { padding-bottom: 18px; }
  body[data-page="home"] #nav,
  body[data-page="qmt"] #nav,
  body[data-page="ptrade"] #nav { display: none; }

  .desktop-only { display: none !important; }
  .mobile-only { display: inline; }

  .site-header,
  .header-inner { height: 58px; }
  .header-inner { position: relative; justify-content: center; padding: 0 12px; }
  .brand {
    position: absolute;
    left: 50%;
    gap: 0;
    transform: translateX(-50%);
  }
  .brand { gap: 7px; }
  .brand-logo {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 8px;
  }
  .brand-copy strong { font-size: 16px; letter-spacing: -.2px; white-space: nowrap; }
  .header-actions { position: absolute; right: 11px; margin-left: 0; }

  .risk-ticker {
    position: relative;
    top: auto;
    width: calc(100% - 16px);
    height: auto;
    min-height: 62px;
    margin: 9px auto 0;
    padding: 10px 12px;
    align-items: flex-start;
    border: 1px solid #efc7ca;
    border-radius: 11px;
    color: #bd6268;
    background: #fff5f5;
    box-shadow: none;
  }
  .risk-track {
    min-width: 0;
    animation: none;
    white-space: normal;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.65;
  }
  .risk-track span { padding: 0; }
  .risk-track span:not(:first-child) { display: none; }

  .main { min-height: auto; }
  body[data-page="home"] .workspace,
  body[data-page="qmt"] .workspace,
  body[data-page="ptrade"] .workspace { padding-top: 10px; }
  .workspace { width: calc(100% - 16px); }

  .welcome.welcome-premium {
    padding: 18px 16px 17px;
    border-color: #d9e7fa;
    border-radius: 13px;
    background: #edf5ff;
    box-shadow: none;
  }
  .welcome.welcome-premium::before,
  .welcome.welcome-premium::after { display: none; }
  .welcome-copy { width: 100%; }
  .hero-kicker {
    padding: 0;
    color: #2962ff;
    background: transparent;
    font-size: 11.5px;
    font-weight: 800;
  }
  .hero-kicker i { display: none; }
  .mobile-version {
    position: absolute;
    top: 18px;
    right: 16px;
    padding: 4px 9px;
    display: inline-flex;
    border-radius: 999px;
    color: #2962ff;
    background: rgba(255, 255, 255, .86);
    font-size: 10px;
    font-weight: 800;
  }
  .welcome.welcome-premium h2 {
    margin-top: 9px;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -.55px;
  }
  .mobile-hero-summary {
    margin-top: 5px !important;
    display: block !important;
    color: #738198 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .desktop-hero-actions { display: none !important; }
  .mobile-hero-actions {
    width: 100%;
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr) !important;
    gap: 10px !important;
  }
  .mobile-hero-actions .button {
    min-height: 44px !important;
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-size: 13.5px !important;
    font-weight: 750;
  }
  .mobile-service-button {
    background: #c85f68;
    box-shadow: 0 5px 12px rgba(200, 95, 104, .13);
  }
  .hero-trust { display: none; }

  .mobile-home-profile {
    min-height: 110px;
    margin-top: 10px;
    padding: 13px;
    display: grid;
    grid-template-columns: minmax(118px, .85fr) minmax(0, 1.65fr);
    gap: 13px;
    align-items: center;
    border-color: #e7ebf2;
    border-radius: 13px;
    box-shadow: none;
  }
  .mobile-profile-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .mobile-profile-avatar {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #e3efff;
    border-radius: 14px;
    color: #fff;
    background: #2e3c57;
    font-size: 14px;
    font-weight: 800;
  }
  .mobile-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-profile-identity strong,
  .mobile-profile-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-profile-identity strong { color: #172033; font-size: 15px; }
  .mobile-profile-identity small { max-width: 105px; margin-top: 4px; color: #8792a5; font-size: 10px; }
  .mobile-profile-level { min-width: 0; padding-left: 13px; border-left: 1px solid #e7ebf2; }
  .mobile-level-heading { display: flex; align-items: baseline; gap: 5px; }
  .mobile-level-heading b { color: #2962ff; font-size: 17px; }
  .mobile-level-heading strong { color: #34405a; font-size: 12px; }
  .mobile-level-heading button { margin-left: auto; color: #2962ff; font-size: 10px; font-weight: 700; }
  .mobile-level-stats {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mobile-level-stats span { text-align: center; border-right: 1px solid #edf0f5; }
  .mobile-level-stats span:last-child { border-right: 0; }
  .mobile-level-stats b,
  .mobile-level-stats small { display: block; }
  .mobile-level-stats b { color: #26334c; font-size: 11px; }
  .mobile-level-stats small { margin-top: 2px; color: #9aa4b4; font-size: 8.5px; }
  .mobile-level-progress { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #e8edf5; }
  .mobile-level-progress i { height: 100%; display: block; border-radius: inherit; background: #2962ff; }

  .mobile-discovery-nav {
    margin-top: 10px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid #e6eaf1;
    border-radius: 12px;
    background: #f9fbff;
  }
  .mobile-discovery-item {
    min-width: 0;
    min-height: 45px;
    padding: 0 4px;
    border: 0;
    border-radius: 9px;
    color: #68758b;
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
  }
  .mobile-discovery-item.active { color: #2962ff; background: #fff; box-shadow: 0 4px 12px rgba(44, 62, 94, .06); }

  .software-hub {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .software-hub .product-section-head,
  .software-hub .search-large { display: none; }
  .software-hub .home-product-grid { gap: 10px; }
  .software-hub .product-card {
    min-height: 152px;
    padding: 20px 10px 17px;
    gap: 13px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(28, 45, 78, .035);
  }
  .software-hub .qmt-product { border-left: 3px solid #2962ff; }
  .software-hub .ptrade-product { border-left: 3px solid #f28b22; }
  .software-hub .product-card-copy { display: none; }
  .mobile-product-name { display: block; color: #172033; font-size: 20px; letter-spacing: -.3px; }
  .product-visual { width: 49px; height: 49px; border-radius: 13px; }

  .home-question-head { margin: 17px 2px 9px; }
  .home-question-head h3 { font-size: 18px; }
  .home-question-head p { display: none; }
  .home-question-head button { color: #2962ff; font-size: 12px; font-weight: 750; }
  body[data-page="home"] .topic-list {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-page="home"] .topic-row {
    padding: 15px 14px 13px 16px;
    border: 1px solid #e7ebf2;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(28, 45, 78, .035);
  }
  body[data-page="home"] .topic-row::before { top: 15px; bottom: 15px; left: 0; }
  body[data-page="home"] .topic-row + .topic-row { border-top: 1px solid #e7ebf2; }
  body[data-page="home"] .topic-row h4 { margin: 11px 0 6px; font-size: 16px; line-height: 1.45; }
  body[data-page="home"] .topic-summary { color: #7c889c; font-size: 12px; line-height: 1.6; }
  body[data-page="home"] .topic-service-state { display: none; }
  body[data-page="home"] .topic-bottom { color: #a0a8b6; border-top: 0; }
  body[data-page="home"] .reward { color: #2962ff; }

  .platform-hero {
    padding: 18px 16px;
    border-color: #dce8fa;
    border-radius: 13px;
    background: #edf5ff;
    box-shadow: none;
  }
  .platform-hero.ptrade { border-color: #f5dfca; background: #fff8ef; }
  .platform-hero h2 { margin-top: 6px; font-size: 21px; }
  .platform-hero p { margin-top: 6px; font-size: 12px; line-height: 1.6; }
  .platform-hero .button { min-height: 42px; border-radius: 9px; }
  body[data-page="qmt"] .guest-limit-tip,
  body[data-page="ptrade"] .guest-limit-tip {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
  }
  body[data-page="qmt"] .guest-limit-tip .wechat-entry,
  body[data-page="ptrade"] .guest-limit-tip .wechat-entry {
    grid-column: 1 / -1;
    min-height: 42px;
    border-radius: 9px;
  }
  .qmt-sub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .qmt-sub-card,
  .big-qmt-card,
  .qmt-data-card { min-height: 112px; padding: 14px; border-radius: 12px; }
  .qmt-sub-card b { font-size: 14px; }
  .qmt-sub-card p { margin-top: 6px; font-size: 10.5px; line-height: 1.55; }

  .floating-doc {
    top: 62%;
    right: 0;
    bottom: auto;
    width: 68px;
    min-height: 84px;
    padding: 8px 5px;
    border-radius: 12px 0 0 12px;
    transform: translateY(-50%);
    box-shadow: 0 8px 22px rgba(38, 55, 88, .14);
  }
  .floating-doc:hover { transform: translateY(-50%); }
  .floating-doc span { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
  .floating-doc b { margin-top: 5px; display: block; font-size: 10px; }
  body[data-page="home"] .floating-doc { top: clamp(540px, 76%, 640px); }
  body[data-page="qmt"] .floating-doc,
  body[data-page="ptrade"] .floating-doc { top: clamp(360px, 52%, 470px); }
}

/* Keep the six primary destinations readable after later mobile refinements. */
@media (max-width: 700px) {
  #nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    padding-right: 5px;
    padding-left: 5px;
  }
  #nav .nav-item { padding-right: 1px; padding-left: 1px; font-size: 11px; }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
body[data-page="rewards"] .floating-doc { display: none; }
}

/* Mobile WeChat login feedback 1.9.9 */
.simple-login-panel .wechat-agreement.needs-attention {
  outline: 2px solid rgba(196, 75, 85, .24);
  outline-offset: 2px;
  background: #fff4f5;
}

.simple-login-panel .wechat-qr-status.active {
  padding: 9px 11px;
  color: #2457d6;
  background: #eef4ff;
}

.simple-login-panel .wechat-qr-status.warning {
  padding: 9px 11px;
  color: #a1454d;
  background: #fff2f3;
}

/* Pre-launch mobile usability pass 1.10 */
.topic-row[role="link"] { cursor: pointer; }
.topic-row[role="link"]:focus-visible {
  outline: 3px solid rgba(41, 98, 255, .28);
  outline-offset: -3px;
}

@media (max-width: 700px) {
  .risk-ticker {
    min-height: 56px;
    padding: 8px 11px;
  }

  .risk-track {
    font-size: 10.5px;
    line-height: 1.55;
  }

  .topic-top { align-items: flex-start; gap: 8px; }
  .topic-tags { min-width: 0; flex: 1; }
  .reward { flex: 0 0 auto; padding-top: 3px; white-space: nowrap; }

  .topic-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .topic-row-actions {
    width: 100%;
    justify-content: space-between;
  }

  .topic-row-actions > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-meta { flex-wrap: wrap; }
  .detail-meta > * { white-space: nowrap; }

  .floating-doc,
  body[data-page="home"] .floating-doc,
  body[data-page="qmt"] .floating-doc,
  body[data-page="ptrade"] .floating-doc {
    top: auto;
    right: max(3px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 58px;
    min-height: 66px;
    padding: 7px 4px 6px;
    gap: 3px;
    border-radius: 14px 0 0 14px;
    transform: none;
    box-shadow: inset 0 3px 0 #2962ff, 0 8px 20px rgba(41, 98, 255, .18);
  }

  .floating-doc:hover { transform: none; }
  .floating-doc .floating-doc-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 15px;
  }
  .floating-doc b { margin-top: 1px; font-size: 9px; }
  .floating-doc small { display: none; }
}

@media (max-width: 370px) {
  .welcome.welcome-premium { padding-right: 13px; padding-left: 13px; }
  .welcome.welcome-premium h2 { font-size: 20px; }
  .mobile-hero-actions { gap: 7px !important; }
  .mobile-hero-actions .button { padding: 0 6px; font-size: 12px !important; }
  .mobile-home-profile {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 7px;
    padding-right: 8px;
    padding-left: 8px;
  }
  .mobile-profile-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .mobile-profile-identity small { max-width: 61px; }
  .mobile-profile-level { padding-left: 7px; }
}

@media (max-width: 410px) {
  .welcome.welcome-premium h2 { font-size: 22px; }
  .platform-hero { gap: 8px; }
  .platform-hero h2 { font-size: 19px; line-height: 1.28; }
  .platform-hero .button { padding: 0 12px; font-size: 12px; }
  .mobile-home-profile { grid-template-columns: 118px minmax(0, 1fr); gap: 9px; padding: 12px 10px; }
  .mobile-profile-avatar { width: 44px; height: 44px; flex-basis: 44px; }
  .mobile-profile-identity { gap: 7px; }
  .mobile-profile-identity strong { font-size: 13px; }
  .mobile-profile-identity small { max-width: 73px; font-size: 8.5px; }
  .mobile-profile-level { padding-left: 9px; }
  .mobile-level-heading b { font-size: 15px; }
  .mobile-level-heading strong { font-size: 10px; }
  .mobile-level-heading button { font-size: 9px; }
  .mobile-level-stats b { font-size: 10px; }
  .mobile-level-stats small { font-size: 8px; }
  .mobile-discovery-item { font-size: 11.5px; }
  .software-hub .product-card { min-height: 138px; }
  .mobile-product-name { font-size: 18px; }
}

/* Simplified WeChat login */
.modal-card:has(.simple-login-panel) {
  width: min(420px, calc(100vw - 28px));
  border-radius: 16px;
}

.simple-login-panel { padding: 30px 32px 27px; }

.simple-login-panel .wechat-login-brand {
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.simple-login-panel .wechat-login-brand > span {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 20px;
}

.simple-login-panel .wechat-login-brand b { font-size: 16px; }
.simple-login-panel .wechat-login-brand small { display: none; }
.simple-login-panel .qr-kicker { margin-top: 18px; }
.simple-login-panel h2 { margin: 8px 0 7px; font-size: 23px; letter-spacing: -.35px; }
.simple-login-panel > p { max-width: 300px; font-size: 12px; line-height: 1.65; }
.simple-login-panel .wechat-login-message { margin-top: 14px; }

.simple-login-panel .wechat-agreement {
  margin: 22px 0 13px;
  padding: 11px 12px;
  border-radius: 9px;
  background: #f7f8fb;
}

.simple-login-panel .wechat-login-button {
  min-height: 50px;
  border-radius: 10px;
  background: #2962ff;
  box-shadow: none;
}

.simple-login-panel .wechat-login-button:hover {
  background: #1f55ed;
  box-shadow: none;
  transform: none;
}

.simple-login-panel .wechat-login-button b { font-size: 14px; }
.simple-login-panel .wechat-login-button small { font-size: 9px; }

.simple-login-panel .wechat-qr-status {
  margin: 12px 0 0;
  padding: 0;
  color: #8a93a3;
  background: transparent;
  font-size: 9px;
  line-height: 1.55;
}

.simple-login-panel .wechat-qr-status.active,
.simple-login-panel .wechat-qr-status.warning { background: transparent; }

.simple-login-secondary {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #c0c5ce;
}

.simple-login-secondary .account-login-toggle,
.simple-login-secondary .guest-continue {
  width: auto;
  height: auto;
  min-height: 30px;
  margin: 0;
  padding: 4px 2px;
  border-radius: 0;
  color: #6b7485;
  background: transparent;
  font-size: 11px;
}

.simple-login-secondary .account-login-toggle:hover,
.simple-login-secondary .guest-continue:hover {
  color: #2962ff;
  background: transparent;
}

@media (max-width: 760px) {
  .modal-card:has(.simple-login-panel) {
    width: 100%;
    border-radius: 18px 18px 0 0;
  }

  .simple-login-panel {
    padding: 25px 22px calc(22px + env(safe-area-inset-bottom));
  }

  .simple-login-panel .wechat-login-brand { padding: 0; }
  .simple-login-panel .wechat-login-brand > span { width: 50px; height: 50px; }
  .simple-login-panel .qr-kicker { margin-top: 16px; }
  .simple-login-panel h2 { margin-top: 7px; font-size: 22px; }
  .simple-login-panel > p { font-size: 12px; line-height: 1.6; }
  .simple-login-panel .wechat-agreement { margin-top: 19px; font-size: 11px; }
  .simple-login-panel .wechat-login-button { min-height: 50px; }
}

/* Focused WeChat sign-in experience 1.9.4 */
.guest-wallet {
  position: relative;
  padding: 19px 18px 17px;
  border-color: #dce4f5;
  box-shadow: 0 10px 28px rgba(24, 38, 68, .08);
}

.guest-wallet::before {
  width: 100%;
  height: 3px;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px 6px 0 0;
  background: #2962ff;
}

.guest-login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.guest-login-brand .guest-wallet-icon {
  width: 44px;
  height: 44px;
  margin: 0;
  flex: 0 0 44px;
  border: 1px solid #d8e4ff;
  border-radius: 12px;
  color: #2962ff;
  background: #eef3ff;
}

.guest-login-brand > div:last-child span,
.guest-login-brand > div:last-child small {
  display: block;
}

.guest-login-brand > div:last-child span {
  color: #131722;
  font-size: 13px;
  font-weight: 750;
}

.guest-login-brand > div:last-child small {
  margin-top: 3px;
  color: #8a93a3;
  font-size: 9px;
}

.guest-wallet .guest-wallet-title {
  margin: 17px 0 7px;
  color: #131722;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.25px;
}

.guest-wallet .wallet-tip {
  margin: 0;
  color: #667085;
  font-size: 10px;
  line-height: 1.7;
}

.guest-login-points {
  margin: 15px 0 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.guest-login-points span {
  min-height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #e3e8f2;
  border-radius: 6px;
  color: #5f6b7d;
  background: #f8faff;
  font-size: 8.5px;
  font-weight: 650;
}

.guest-wallet .guest-login-button {
  height: 43px;
  margin-top: 13px;
  border-radius: 7px;
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(41, 98, 255, .18);
}

.guest-login-note {
  margin: 9px 0 0;
  color: #9aa3b2;
  font-size: 8px;
  line-height: 1.5;
  text-align: center;
}

.modal-card:has(.simple-login-panel) {
  border: 1px solid #dce4f5;
  box-shadow: 0 24px 70px rgba(24, 38, 68, .18);
}

.simple-login-panel {
  position: relative;
  padding: 31px 34px 28px;
}

.simple-login-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: #2962ff;
  content: "";
}

.simple-login-panel .wechat-login-brand > span {
  color: #fff;
  background: #2962ff;
  box-shadow: 0 10px 22px rgba(41, 98, 255, .2);
}

.simple-login-panel .wechat-login-button {
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 22px rgba(41, 98, 255, .2);
}

.simple-login-panel .wechat-login-button .wechat-mark {
  width: 25px;
  flex: 0 0 25px;
  transform: scale(.82);
}

.simple-login-panel .wechat-login-button > span:last-child {
  text-align: left;
}

@media (max-width: 760px) {
  .simple-login-panel::before { border-radius: 18px 18px 0 0; }
}

/* Brand and WeChat quick-login icons 1.9.7 */
.brand-logo {
  overflow: visible;
  color: transparent;
  background: transparent;
  box-shadow: none;
}

.brand-logo img,
.wechat-login-brand > span img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.wechat-mark {
  position: static;
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 24px;
  border-radius: 7px;
  object-fit: contain;
  transform: none;
}

.wechat-entry .wechat-mark,
.simple-login-panel .wechat-login-button .wechat-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  transform: none;
}

.auth-gate-icon,
.guest-tip-icon,
.guest-wallet-icon {
  overflow: visible;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.auth-gate-icon .wechat-mark,
.guest-wallet-icon .wechat-mark {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.guest-tip-icon .wechat-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.simple-login-panel .wechat-login-brand > span {
  overflow: hidden;
  color: transparent;
  background: transparent;
  box-shadow: 0 10px 24px rgba(41, 98, 255, .18);
}

/* Quant document floating entry 1.9.3 */
.floating-doc {
  top: 54%;
  right: max(14px, env(safe-area-inset-right));
  bottom: auto;
  width: 88px;
  min-height: 104px;
  padding: 12px 8px 10px;
  gap: 5px;
  border: 1px solid #cbd9ff;
  border-radius: 18px;
  color: #131722;
  background: #fff;
  box-shadow: inset 0 4px 0 #2962ff, 0 14px 34px rgba(41, 98, 255, .2);
  opacity: 1;
  overflow: hidden;
  transform: translateY(-50%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.floating-doc:hover {
  border-color: #8eabff;
  box-shadow: inset 0 4px 0 #2962ff, 0 18px 38px rgba(41, 98, 255, .27);
  transform: translateY(calc(-50% - 3px));
}

.floating-doc:focus-visible {
  outline: 3px solid rgba(41, 98, 255, .25);
  outline-offset: 3px;
}

.floating-doc .floating-doc-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: #2962ff;
  box-shadow: 0 7px 16px rgba(41, 98, 255, .28);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.floating-doc b {
  display: block;
  margin: 2px 0 0;
  color: #131722;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.floating-doc small {
  display: block;
  color: #6b7485;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .floating-doc {
    top: 61%;
    right: max(5px, env(safe-area-inset-right));
    bottom: auto;
    width: 74px;
    min-height: 91px;
    padding: 10px 6px 8px;
    gap: 4px;
    border-radius: 16px;
    box-shadow: inset 0 4px 0 #2962ff, 0 10px 25px rgba(41, 98, 255, .22);
    transform: translateY(-50%);
  }

  .floating-doc:hover { transform: translateY(-50%); }
  .floating-doc .floating-doc-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .floating-doc b { display: block; margin-top: 2px; font-size: 10.5px; }
  .floating-doc small { font-size: 7.5px; }
}

@media (max-width: 410px) {
  .floating-doc {
    right: max(3px, env(safe-area-inset-right));
    width: 70px;
    min-height: 87px;
    padding: 9px 5px 7px;
  }

  .floating-doc .floating-doc-icon { width: 36px; height: 36px; font-size: 17px; }
  .floating-doc b { font-size: 10px; }
}

/* Refined home hero 1.9.5 */
@media (min-width: 701px) {
  body[data-page="home"] .welcome.welcome-premium {
    position: relative;
    min-height: 286px;
    padding: 42px 44px 40px;
    overflow: hidden;
    border: 1px solid #dce4f0;
    border-radius: 14px;
    background:
      radial-gradient(circle at 94% 10%, rgba(41, 98, 255, .10), transparent 31%),
      linear-gradient(135deg, #ffffff 0%, #fbfcff 62%, #f5f8ff 100%);
    box-shadow: 0 16px 42px rgba(25, 45, 86, .07);
  }

  body[data-page="home"] .welcome.welcome-premium::before {
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 0;
    width: 4px;
    height: auto;
    display: block;
    border-radius: 0 4px 4px 0;
    background: #2962ff;
    content: "";
  }

  body[data-page="home"] .welcome-copy { max-width: 820px; }

  body[data-page="home"] .hero-kicker {
    padding: 7px 11px;
    gap: 8px;
    border-radius: 999px;
    color: #2457e6;
    background: #edf3ff;
    font-size: 10.5px;
    letter-spacing: .45px;
  }

  body[data-page="home"] .hero-kicker i {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px rgba(41, 98, 255, .10);
  }

  body[data-page="home"] .welcome.welcome-premium h2 {
    max-width: 780px;
    margin-top: 19px;
    font-size: clamp(38px, 3.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.7px;
  }

  body[data-page="home"] .welcome.welcome-premium p {
    max-width: 760px;
    margin-top: 17px;
    color: #5f6d84;
    font-size: 14px;
    line-height: 1.8;
  }

  body[data-page="home"] .welcome.welcome-premium .welcome-actions {
    margin-top: 26px;
    gap: 11px;
  }

  body[data-page="home"] .welcome.welcome-premium .welcome-actions .button {
    min-width: 126px;
    height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
  }

  body[data-page="home"] .welcome.welcome-premium .button.light {
    border-color: #ccd6e6;
    background: rgba(255, 255, 255, .88);
  }

  body[data-page="home"] .welcome.welcome-premium .button.light:hover {
    border-color: #2962ff;
    color: #2457e6;
    background: #fff;
  }
}

/* Mini-program entry, compact profile, and image preview refinements. */
.mini-guest-button {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid #d7dfef;
  border-radius: 10px;
  color: #53617a;
  background: #f7f9fd;
  font-size: 13px;
  font-weight: 700;
}

.mini-guest-button:hover {
  border-color: #b7c9ef;
  color: #2962ff;
  background: #f1f5ff;
}

.modal:has(.comment-image-modal-frame) {
  align-items: center;
  overflow: auto;
}

.modal-card:has(.comment-image-modal-frame) {
  display: flex;
  flex-direction: column;
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.modal-card:has(.comment-image-modal-frame) .comment-image-modal-head {
  flex: 0 0 auto;
  padding: 18px 52px 13px 20px;
}

.modal-card:has(.comment-image-modal-frame) .comment-image-modal-frame {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 0;
  padding: 10px;
  border-radius: 0;
  background: #151b2a;
}

.modal-card:has(.comment-image-modal-frame) .comment-image-modal {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 132px);
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 700px) {
  .profile-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }

  .profile-main {
    min-width: 0;
    gap: 10px;
  }

  .profile-main > .profile-avatar {
    flex: 0 0 48px;
  }

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

  .profile-main h2 {
    overflow: hidden;
    font-size: 17px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-main .profile-role,
  .profile-main .profile-account {
    overflow: hidden;
    margin: 4px 0 0;
    color: #7a8598;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-main .profile-account b {
    color: #5e6d87;
    font-weight: 650;
  }

  .profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 190px;
    gap: 7px;
  }

  .profile-actions .button {
    min-width: 0;
    min-height: 39px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .profile-actions .button:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }

  .modal:has(.comment-image-modal-frame) {
    align-items: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .modal-card:has(.comment-image-modal-frame) {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  .modal-card:has(.comment-image-modal-frame) .comment-image-modal-head {
    padding: 15px 46px 11px 15px;
  }

  .modal-card:has(.comment-image-modal-frame) .comment-image-modal-frame {
    min-height: 160px;
    padding: 8px;
  }

  .modal-card:has(.comment-image-modal-frame) .comment-image-modal {
    max-height: calc(100dvh - 118px);
    border-radius: 7px;
  }
}

@media (max-width: 430px) {
  .profile-center {
    grid-template-columns: minmax(0, 1fr) 152px;
    gap: 9px;
    padding: 12px;
  }

  .profile-main { gap: 8px; }
  .profile-main > .profile-avatar { flex-basis: 43px; }
  .profile-main h2 { font-size: 15px; }
  .profile-main .profile-role,
  .profile-main .profile-account { font-size: 11px; }
  .profile-actions { width: 152px; gap: 6px; }
  .profile-actions .button { min-height: 37px; padding: 0 4px; font-size: 11px; }
}

/* Question detail navigation and global filing footer */
.topic-back {
  width: min(100%, 920px);
  min-height: 44px;
  margin: 0 auto 12px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  border: 1px solid #dbe2ee;
  border-radius: 10px;
  color: #293449;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 3px 10px rgba(35, 50, 82, .045);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 720;
  text-align: left;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.topic-back:hover {
  border-color: #b9c8f6;
  color: #2f63ff;
  background: #ffffff;
  transform: translateX(-2px);
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1 0 auto;
}

.site-footer {
  flex: 0 0 auto;
  margin-top: 28px;
  border-top: 1px solid #dfe5ef;
  color: #778298;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .72);
}

.site-footer-inner {
  width: min(var(--workspace-width, 1320px), calc(100% - 40px));
  min-height: 64px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.site-footer a {
  color: #5b6f96;
  font-weight: 650;
  text-decoration: none;
  transition: color .18s ease;
}

.site-footer a:hover {
  color: #2f63ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .topic-back {
    min-height: 42px;
    margin-bottom: 10px;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 14px;
  }

  .site-footer {
    margin-top: 20px;
  }

  .site-footer-inner {
    width: calc(100% - 28px);
    min-height: 74px;
    padding: 14px 0;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
  }
}

/* Comment image upload 1.10.2 */
.customer-message-form > .comment-composer-media {
  margin-top: 9px;
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
}

.comment-image-picker {
  min-height: 54px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed #b9c8e8;
  border-radius: 9px;
  color: #2457d6;
  background: #f7faff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.comment-image-picker:hover {
  border-color: #7fa0f5;
  background: #eef4ff;
}

.comment-image-picker:focus-within {
  outline: 3px solid rgba(41, 98, 255, .12);
  outline-offset: 2px;
}

.comment-image-picker b {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
}

.comment-image-picker small {
  margin: 0;
  color: #7a879b;
  font-size: 9px;
  line-height: 1.45;
  text-align: right;
}

.comment-image-preview {
  padding: 9px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #dce4f2;
  border-radius: 10px;
  background: #fff;
}

.comment-image-preview img {
  width: 72px;
  height: 58px;
  display: block;
  object-fit: cover;
  border-radius: 7px;
  background: #eef1f6;
}

.comment-image-preview > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comment-image-preview b {
  min-width: 0;
  overflow: hidden;
  color: #34425a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-image-preview button {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  color: #a34e55;
  background: #fff1f2;
  font-size: 9px;
  font-weight: 700;
}

.customer-message-form > .comment-composer-actions {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comment-image-open {
  position: relative;
  width: min(680px, 100%);
  max-width: 100%;
  margin-top: 12px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 9px;
  background: #f4f6fa;
  cursor: zoom-in;
}

.comment-image-open:hover { border-color: #9fb6ed; }
.comment-image-open:focus-visible { outline: 3px solid rgba(41, 98, 255, .2); outline-offset: 2px; }
.comment-image-open img {
  width: 100%;
  max-width: 100%;
  max-height: 520px;
  display: block;
  object-fit: contain;
}

.comment-image-watermark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  color: rgba(255, 255, 255, .88);
  background: rgba(22, 29, 43, .25);
  box-shadow: 0 2px 8px rgba(8, 12, 22, .08);
  backdrop-filter: blur(3px);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .5px;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.comment-image-modal-head { padding-right: 36px; }
.comment-image-modal-head h2 { margin: 6px 0 0; color: #172033; font-size: 19px; }
.modal-card:has(.comment-image-modal-frame) {
  width: min(1100px, calc(100vw - 36px));
}
.comment-image-modal-frame {
  position: relative;
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f6f9;
}
.comment-image-modal {
  width: 100%;
  max-height: 82vh;
  margin-top: 0;
  display: block;
  object-fit: contain;
  border: 1px solid #e0e5ee;
  border-radius: 10px;
  background: #f4f6f9;
}
.comment-image-modal-frame .comment-image-watermark {
  right: 18px;
  bottom: 16px;
  padding: 7px 12px;
  font-size: 16px;
}

@media (max-width: 700px) {
  .comment-image-picker {
    min-height: 58px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }

  .comment-image-picker b { font-size: 12px; }
  .comment-image-picker small { font-size: 10px; text-align: left; }
  .comment-image-preview { grid-template-columns: 64px minmax(0, 1fr); }
  .comment-image-preview img { width: 64px; height: 54px; }
  .comment-image-open { width: 100%; max-width: 100%; margin-top: 11px; }
  .comment-image-open img { width: 100%; max-height: 420px; }
  .comment-image-watermark { right: 10px; bottom: 9px; padding: 5px 8px; font-size: 12px; }
  .comment-image-modal-head h2 { font-size: 17px; }
  .modal-card:has(.comment-image-modal-frame) { width: 100%; }
  .comment-image-modal-frame { border-radius: 10px 10px 0 0; }
  .comment-image-modal-frame .comment-image-watermark { right: 12px; bottom: 11px; padding: 6px 10px; font-size: 14px; }
}

/* Final mobile login feedback precedence 1.9.9 */
.simple-login-panel .wechat-agreement.needs-attention {
  outline: 2px solid rgba(196, 75, 85, .24);
  outline-offset: 2px;
  background: #fff4f5;
}

.simple-login-panel .wechat-qr-status.active {
  padding: 9px 11px;
  color: #2457d6;
  background: #eef4ff;
}

.simple-login-panel .wechat-qr-status.warning {
  padding: 9px 11px;
  color: #a1454d;
  background: #fff2f3;
}

/* Typography and status color alignment 1.10.1 */
.risk-ticker {
  border-color: #efc7ca;
  color: #a9535a;
  background: #fff5f5;
}

.risk-track,
.risk-track span,
.risk-track strong,
.risk-track b {
  color: inherit;
}

.risk-track { font-size: 11px; }

/* Bull brand and warm-gradient document entry 1.10.3 */
.brand-logo,
.simple-login-panel .wechat-login-brand > span {
  overflow: hidden;
  border: 1px solid rgba(113, 75, 39, .18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 14px rgba(74, 47, 24, .14);
}

.brand-logo img,
.simple-login-panel .wechat-login-brand > span img {
  object-fit: cover;
}

.floating-doc {
  isolation: isolate;
  border-color: rgba(225, 137, 47, .5);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .95) 0 8%, transparent 32%),
    linear-gradient(145deg, #fffaf0 0%, #ffe5b8 52%, #ffc06c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(201, 105, 17, .14),
    0 14px 34px rgba(184, 91, 10, .2),
    0 3px 8px rgba(91, 51, 15, .08);
}

.floating-doc::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .44), transparent 42%, rgba(207, 108, 19, .08));
  content: "";
  pointer-events: none;
}

.floating-doc:hover {
  border-color: rgba(218, 119, 25, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(201, 105, 17, .18),
    0 18px 40px rgba(184, 91, 10, .27),
    0 4px 10px rgba(91, 51, 15, .1);
}

.floating-doc:focus-visible {
  outline-color: rgba(226, 124, 27, .32);
}

.floating-doc .floating-doc-icon {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  background: linear-gradient(145deg, #ffad37 0%, #f47a20 55%, #d95b0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 8px 18px rgba(194, 84, 5, .3);
  text-shadow: 0 1px 2px rgba(112, 44, 0, .2);
}

.floating-doc b,
.floating-doc small {
  position: relative;
  z-index: 1;
}

.floating-doc b { color: #5d2f0b; }
.floating-doc small { color: #98602d; }

@media (min-width: 701px) {
  .page-heading p,
  .auth-gate p,
  .topic-summary,
  .detail-copy-block p,
  .wallet-aside p {
    font-size: 12px;
    line-height: 1.65;
  }

  .topic-bottom,
  .detail-meta {
    font-size: 11px;
    line-height: 1.5;
  }
}

/* Question and comment readability 1.10.4 */
.topic-row h4 {
  font-size: 16px;
  line-height: 1.5;
}

.topic-summary {
  font-size: 12px;
  line-height: 1.7;
}

.topic-bottom {
  font-size: 10.5px;
  line-height: 1.55;
}

.detail-title {
  font-size: 25px;
  line-height: 1.4;
}

.detail-meta { font-size: 10.5px; }
.detail-section > h4,
.customer-message-head h4 { font-size: 15px; }

.detail-copy-block > span,
.answer-card > b { font-size: 11px; }

.detail-copy-block > p,
.answer-card p {
  font-size: 14px;
  line-height: 1.85;
}

.customer-message-head p {
  font-size: 12px;
  line-height: 1.65;
}

.customer-message-item strong { font-size: 12px; }
.customer-message-item small { font-size: 10.5px; }
.customer-message-item p {
  font-size: 13.5px;
  line-height: 1.8;
}

.customer-message-empty {
  font-size: 12px;
  line-height: 1.65;
}

.customer-message-form textarea {
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 700px) {
  .topic-row h4 {
    font-size: 15px;
    line-height: 1.5;
  }

  .topic-summary {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.65;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .topic-bottom { font-size: 10.5px; }
  .detail-title { font-size: 22px; line-height: 1.42; }
  .detail-meta { font-size: 10.5px; line-height: 1.65; }

  .detail-copy-block > p,
  .answer-card p,
  .customer-message-item p {
    font-size: 14px;
    line-height: 1.8;
  }

  .customer-message-item strong { font-size: 12.5px; }
  .customer-message-item small { font-size: 10.5px; line-height: 1.55; }
  .customer-message-head p { font-size: 12.5px; }
  .customer-message-form textarea { font-size: 16px; }
}

@media (max-width: 700px) {
  .risk-ticker {
    border-color: #efc7ca;
    color: #a9535a;
  }

  .risk-track {
    font-size: 11px;
    line-height: 1.62;
  }

  .page-heading p,
  .welcome.welcome-premium p,
  .platform-hero p,
  .auth-gate p,
  .topic-summary,
  .detail-copy-block p {
    font-size: 12.5px;
    line-height: 1.65;
  }

  .topic-bottom,
  .detail-meta,
  .mobile-profile-identity small {
    font-size: 10px;
    line-height: 1.45;
  }

  .button,
  .heading-ask,
  .mobile-hero-actions .button {
    font-size: 12.5px;
  }

  .floating-doc,
  body[data-page="home"] .floating-doc,
  body[data-page="qmt"] .floating-doc,
  body[data-page="ptrade"] .floating-doc {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      inset 0 -1px 0 rgba(201, 105, 17, .14),
      0 9px 22px rgba(184, 91, 10, .23);
  }
}

/* Keep mobile question text comfortably readable after all launch overrides. */
@media (max-width: 700px) {
  .topic-row h4 { font-size: 15px; line-height: 1.5; }
  .topic-summary { font-size: 12.5px; line-height: 1.65; }
  .topic-bottom { font-size: 10.5px; line-height: 1.55; }
  .detail-title { font-size: 22px; line-height: 1.42; }
  .detail-meta { font-size: 10.5px; line-height: 1.65; }
  .detail-copy-block > p,
  .answer-card p,
  .customer-message-item p { font-size: 14px; line-height: 1.8; }
  .customer-message-item strong { font-size: 12.5px; }
  .customer-message-item small { font-size: 10.5px; line-height: 1.55; }
  .customer-message-head p { font-size: 12.5px; line-height: 1.65; }
  .customer-message-form textarea { font-size: 16px; line-height: 1.75; }
}

/* Web UX 1.0.1: readable type, simple asking and community interaction */
body {
  font-size: 15px;
  line-height: 1.65;
}

.nav-item,
.button,
.field label,
input,
select,
textarea {
  font-size: 14px;
}

.page-heading p,
.auth-gate p,
.welcome.welcome-premium p,
.platform-hero p,
.wallet-aside p {
  font-size: 14px;
  line-height: 1.72;
}

.topic-row h4 {
  font-size: 17px;
  line-height: 1.48;
}

.topic-summary {
  font-size: 14px;
  line-height: 1.72;
}

.topic-bottom,
.detail-meta {
  font-size: 12px;
  line-height: 1.6;
}

.detail-title {
  font-size: 27px;
  line-height: 1.38;
}

.detail-section > h4,
.customer-message-head h4 {
  font-size: 17px;
}

.detail-copy-block > span,
.answer-card > b,
.customer-message-item strong {
  font-size: 13px;
}

.detail-copy-block > p,
.answer-card p,
.customer-message-item p {
  font-size: 15px;
  line-height: 1.85;
}

.customer-message-item small,
.customer-message-head p,
.customer-message-empty {
  font-size: 12px;
  line-height: 1.65;
}

.simple-ask-form {
  max-width: 980px;
  margin-inline: auto;
  padding: 28px;
}

.compact-draft-panel {
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 0;
  overflow: hidden;
}

.compact-draft-panel > summary {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.compact-draft-panel > summary::-webkit-details-marker { display: none; }
.compact-draft-panel .draft-panel-head h3 { margin: 2px 0; font-size: 15px; }
.compact-draft-panel .draft-panel-head p { margin: 0; font-size: 11px; }
.compact-draft-panel .draft-list { padding: 0 16px 15px; }

.simple-ask-form .ask-form-heading {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e8f0;
}

.simple-ask-form .ask-form-heading h2 {
  margin: 5px 0 5px;
  font-size: 25px;
  line-height: 1.35;
}

.simple-ask-form .ask-form-heading p {
  margin: 0;
  color: #67738a;
  font-size: 14px;
}

.ask-simple-tip {
  margin-bottom: 20px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe5ff;
  border-radius: 10px;
  color: #536079;
  background: #f7f9ff;
  font-size: 13px;
}

.ask-simple-tip b {
  color: #245cff;
  font-size: 13px;
}

.ask-simple-tip small {
  margin-left: auto;
  color: #8a94a8;
  font-size: 12px;
}

.ask-core-fields {
  gap: 17px;
}

.simple-ask-form .field label {
  margin-bottom: 7px;
  color: #263248;
  font-weight: 700;
}

.simple-ask-form input,
.simple-ask-form select,
.simple-ask-form textarea {
  border-color: #d9dfeb;
  border-radius: 9px;
  color: #172033;
  background: #fff;
  font-size: 15px;
}

.simple-ask-form input:focus,
.simple-ask-form select:focus,
.simple-ask-form textarea:focus {
  border-color: #7d9cff;
  box-shadow: 0 0 0 3px rgba(41, 98, 255, .1);
}

.simple-ask-form #askContent {
  min-height: 150px;
}

.ask-image-tools,
.comment-composer-media {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: 12px;
}

.ask-image-picker,
.comment-image-picker {
  min-height: 82px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #b9c8ee;
  border-radius: 10px;
  color: #34425a;
  background: #f8faff;
  cursor: pointer;
}

.ask-image-picker:hover,
.comment-image-picker:hover {
  border-color: #5f82ec;
  background: #f3f6ff;
}

.ask-image-picker .upload-symbol {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #2962ff;
  font-size: 22px;
  line-height: 1;
}

.ask-image-picker > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ask-image-picker b,
.comment-image-picker b {
  color: #27334a;
  font-size: 13px;
}

.ask-image-picker small,
.comment-image-picker small {
  color: #7a869b;
  font-size: 11px;
  line-height: 1.5;
}

.ask-image-preview img {
  cursor: zoom-in;
}

#commentImagePreview {
  cursor: zoom-in;
}

.ask-optional-details {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #e0e5ee;
  border-radius: 11px;
  background: #fafbfc;
}

.ask-optional-details summary {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #263248;
  cursor: pointer;
  list-style: none;
}

.ask-optional-details summary::-webkit-details-marker { display: none; }
.ask-optional-details summary span { display: grid; gap: 2px; }
.ask-optional-details summary b { font-size: 14px; }
.ask-optional-details summary small { color: #7b879b; font-size: 11px; }
.ask-optional-details summary i { color: #2962ff; font-size: 12px; font-style: normal; }
.ask-optional-details[open] summary { border-bottom: 1px solid #e4e8f0; }
.ask-optional-details[open] summary i { font-size: 0; }
.ask-optional-details[open] summary i::after { content: '收起'; font-size: 12px; }
.ask-optional-details > .form-grid { padding: 17px; }

.ask-reward-panel {
  margin-top: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #e0e5ee;
  border-radius: 11px;
  background: #fff;
}

.ask-balance {
  display: grid;
  gap: 2px;
  color: #7b879b;
  font-size: 11px;
}

.ask-balance b { color: #172033; font-size: 14px; }
.ask-reward-panel .urgency-check { margin: 0; white-space: nowrap; }
.ask-simple-actions { justify-content: flex-end; }

.tag.featured {
  border-color: #f0cf84;
  color: #986113;
  background: #fff8e8;
}

.tag.hot {
  border-color: #efc6ca;
  color: #b44f58;
  background: #fff2f3;
}

.comment-image-open {
  width: 220px;
  height: 140px;
  max-width: 100%;
  background: #eef1f6;
}

.question-image-open {
  width: 300px;
  height: 188px;
}

.comment-image-open img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.question-image-section > small {
  margin-top: 7px;
  display: block;
  color: #7b879b;
  font-size: 11px;
}

.modal-card:has(.comment-image-modal-frame) {
  width: min(1200px, calc(100vw - 36px));
}

.comment-image-modal {
  max-height: 86vh;
}

.comment-image-modal-frame .comment-image-watermark {
  right: 22px;
  bottom: 20px;
  color: rgba(255, 255, 255, .72);
  background: rgba(22, 29, 43, .18);
  font-size: 18px;
}

.comment-author-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.comment-reply-reference {
  width: fit-content;
  margin: 7px 0 3px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #63708a;
  background: #f1f4f9;
  font-size: 11px;
}

.comment-reply-reference b { color: #315ed3; }

.comment-interactions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.comment-interactions button {
  min-height: 28px;
  padding: 4px 9px;
  border: 0;
  border-radius: 7px;
  color: #6c7890;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.comment-interactions button:hover {
  color: #245cff;
  background: #f1f5ff;
}

.comment-interactions .comment-like.liked {
  color: #245cff;
  background: #edf3ff;
  font-weight: 700;
}

.comment-replying {
  margin-bottom: 9px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  color: #59667f;
  background: #f2f5fa;
  font-size: 12px;
}

.comment-replying b { color: #245cff; }
.comment-replying button { border: 0; color: #6d7890; background: transparent; cursor: pointer; }

.owner-editorial-zone {
  border-color: #d7e0f4;
  background: #f7f9fe;
}

.owner-topic-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Ask form 1.0.1: keep only the account context field. */
.ask-account-scene select {
  max-width: 420px;
}

.structured-detail .environment-grid.account-only {
  grid-template-columns: minmax(220px, 420px);
}

/* Keep the brand mark centered on both thumbnails and enlarged images. */
.comment-image-open .comment-image-watermark,
.comment-image-modal-frame .comment-image-watermark {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .74);
  background: rgba(22, 29, 43, .16);
  border-color: rgba(255, 255, 255, .24);
  white-space: nowrap;
}

.comment-image-open .comment-image-watermark {
  font-size: clamp(13px, 1.35vw, 17px);
}

.comment-image-modal-frame .comment-image-watermark {
  padding: 8px 15px;
  font-size: clamp(18px, 2vw, 23px);
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .nav-item { font-size: 14px; }
  .button,
  .heading-ask,
  .mobile-hero-actions .button { font-size: 14px; }
  .page-heading p,
  .welcome.welcome-premium p,
  .platform-hero p,
  .auth-gate p { font-size: 14px; line-height: 1.7; }
  .topic-row h4 { font-size: 16.5px; line-height: 1.5; }
  .topic-summary { font-size: 14px; line-height: 1.68; }
  .topic-bottom { font-size: 11.5px; line-height: 1.55; }
  .detail-title { font-size: 23px; line-height: 1.42; }
  .detail-meta { font-size: 11.5px; line-height: 1.65; }
  .detail-section > h4,
  .customer-message-head h4 { font-size: 16px; }
  .detail-copy-block > p,
  .answer-card p,
  .customer-message-item p { font-size: 15px; line-height: 1.82; }
  .customer-message-item strong { font-size: 13.5px; }
  .customer-message-item small,
  .customer-message-head p { font-size: 12px; line-height: 1.6; }
  .field label { font-size: 14px; }
  input,
  select,
  textarea { font-size: 16px; }
  .risk-track { font-size: 12px; line-height: 1.62; }

  .simple-ask-form {
    width: 100%;
    padding: 17px 14px;
  }

  .simple-ask-form .ask-form-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .simple-ask-form .ask-form-heading h2 { font-size: 21px; }
  .ask-search-first { width: 100%; }
  .ask-account-scene select { max-width: none; }
  .structured-detail .environment-grid.account-only { grid-template-columns: 1fr; }
  .ask-simple-tip { align-items: flex-start; flex-wrap: wrap; }
  .ask-simple-tip small { width: 100%; margin-left: 0; }
  .ask-image-tools,
  .comment-composer-media { grid-template-columns: 1fr; }
  .ask-image-picker,
  .comment-image-picker { min-height: 70px; padding: 12px; flex-direction: row; }
  .ask-image-picker small,
  .comment-image-picker small { font-size: 11px; }
  .ask-reward-panel { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ask-reward-panel .urgency-check { grid-column: 1 / -1; white-space: normal; }
  .ask-simple-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .comment-image-open {
    width: 190px;
    height: 122px;
    max-width: 74vw;
  }

  .question-image-open {
    width: 230px;
    height: 145px;
  }

  .comment-image-modal-frame .comment-image-watermark {
    right: 13px;
    bottom: 12px;
    font-size: 15px;
  }

  .comment-author-row { align-items: flex-start; flex-direction: column; gap: 2px; }
  .comment-interactions { gap: 3px; }
  .comment-interactions button { min-height: 32px; padding: 5px 9px; font-size: 12px; }
  .owner-editorial-zone { align-items: stretch; flex-direction: column; }
  .owner-topic-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .comment-image-open .comment-image-watermark,
  .comment-image-modal-frame .comment-image-watermark {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .comment-image-open .comment-image-watermark { font-size: 14px; }
  .comment-image-modal-frame .comment-image-watermark { font-size: 19px; }
}

/* Comment avatars follow the signed-in profile and remain readable at a glance. */
.customer-message-item > .comment-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe6f3;
  background: #eef3ff;
  color: #315fda;
  font-size: 13px;
  box-shadow: 0 3px 10px rgba(23, 43, 77, 0.08);
}

.customer-message-item > .comment-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 700px) {
  .customer-message-item > .comment-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

/* Keep the official answer visually separate from the question and comments. */
.official-answer-section {
  margin-top: 28px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #304562;
  border-radius: 14px;
  color: #f7f9ff;
  background: linear-gradient(145deg, #253750 0%, #1d2a3f 58%, #172236 100%);
  box-shadow: 0 12px 30px rgba(22, 36, 58, 0.16);
}

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

.official-answer-title > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.official-answer-title > div > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #376df6;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(32, 88, 235, 0.28);
}

.official-answer-title small,
.official-answer-title h4 {
  display: block;
}

.official-answer-title small {
  color: #aebbd0;
  font-size: 11px;
}

.official-answer-title h4 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 16px;
}

.official-answer-title > b {
  padding: 6px 10px;
  border: 1px solid rgba(143, 178, 255, 0.22);
  border-radius: 999px;
  color: #cbd9ff;
  background: rgba(71, 112, 209, 0.15);
  font-size: 11px;
}

.official-answer-card {
  padding: 18px;
  border-color: rgba(199, 214, 241, 0.16);
  background: rgba(9, 17, 30, 0.24);
  box-shadow: none;
}

.official-answer-card > b {
  color: #8fb2ff;
  font-size: 13px;
}

.official-answer-card > p {
  color: #f3f6fc;
}

.official-answer-card .code-block-head {
  border-color: rgba(255, 255, 255, 0.1);
  background: #253047;
}

.official-answer-card .python-code {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #111827;
}

.official-answer-section .answer-decision {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 700px) {
  .official-answer-section {
    margin-top: 20px;
    padding: 15px;
    border-radius: 12px;
  }

  .official-answer-title {
    align-items: flex-start;
  }

  .official-answer-title > div > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
  }

  .official-answer-title h4 { font-size: 15px; }
  .official-answer-card { padding: 14px; }
}

/* A compact, identity-led comment editor for desktop and mobile. */
.customer-message-form {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #dfe5ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #f7f9fd 100%);
  box-shadow: 0 8px 24px rgba(27, 43, 70, 0.06);
}

.customer-message-form > .comment-composer-shell {
  margin-top: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #dce3ef;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.customer-message-form > .comment-composer-shell:focus-within {
  border-color: #7598f8;
  box-shadow: 0 0 0 4px rgba(49, 98, 255, 0.09);
}

.comment-composer-identity {
  padding: 12px 14px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-composer-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce5f3;
  border-radius: 50%;
  color: #315fda;
  background: #edf3ff;
  font-size: 12px;
  font-weight: 800;
}

.comment-composer-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.comment-composer-identity > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.comment-composer-identity b {
  overflow: hidden;
  color: #1d2940;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-composer-identity small {
  color: #8793a7;
  font-size: 10px;
}

.customer-message-form .comment-composer-shell > textarea {
  min-height: 116px;
  padding: 14px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  color: #27344b;
  background: transparent;
  box-shadow: none;
  outline: 0;
  font-size: 15px;
  line-height: 1.75;
}

.customer-message-form .comment-composer-shell > textarea:focus {
  border: 0;
  box-shadow: none;
}

.customer-message-form .comment-composer-shell > textarea::placeholder {
  color: #9aa6b8;
}

.comment-editor-toolbar {
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #edf0f5;
  background: #fafbfe;
}

.comment-editor-toolbar > .comment-image-picker.compact {
  width: auto;
  min-height: 34px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  border: 1px solid #d9e3f8;
  border-radius: 8px;
  color: #315fda;
  background: #f3f7ff;
}

.comment-editor-toolbar > .comment-image-picker.compact:hover {
  border-color: #9db6f7;
  background: #eaf1ff;
}

.comment-upload-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: #376df6;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
}

.comment-editor-toolbar > .comment-image-picker.compact b {
  color: #315fda;
  font-size: 11px;
}

.comment-editor-toolbar > .comment-image-picker.compact small {
  color: #7d8aa0;
  font-size: 10px;
  text-align: left;
}

.comment-friendly-tip {
  color: #8a95a7;
  font-size: 10px;
}

.customer-message-form > .comment-image-preview {
  margin-top: 10px;
  display: grid;
  border-color: #dce5f3;
  background: #fff;
}

.customer-message-form > .comment-image-preview.hidden {
  display: none;
}

.customer-message-form > .comment-composer-actions {
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comment-composer-actions #commentLength {
  padding: 4px 8px;
  border-radius: 999px;
  color: #8290a5;
  background: #edf1f7;
  font-size: 10px;
}

.comment-composer-actions #submitTopicComment {
  min-width: 126px;
  min-height: 42px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(41, 98, 255, 0.2);
}

@media (max-width: 700px) {
  .customer-message-form {
    padding: 11px;
    border-radius: 12px;
  }

  .customer-message-form > .comment-composer-shell {
    border-radius: 11px;
  }

  .comment-composer-identity {
    padding: 11px 11px 0;
  }

  .comment-composer-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .customer-message-form .comment-composer-shell > textarea {
    min-height: 106px;
    padding: 12px 11px;
    font-size: 16px;
  }

  .comment-editor-toolbar {
    padding: 8px;
    align-items: flex-start;
  }

  .comment-editor-toolbar > .comment-image-picker.compact {
    min-height: 36px;
    padding: 7px 9px;
    flex-direction: row;
  }

  .comment-friendly-tip { display: none; }
  .comment-composer-actions #submitTopicComment { min-width: 116px; }
}

/* Xueqiu-inspired comment threads: one root comment with replies grouped below. */
.customer-message-section {
  --comment-blue: #2962ff;
  --comment-muted: #7c879b;
  --comment-reply-bg: #f5f7fa;
}

.customer-message-section .customer-message-head {
  padding-bottom: 14px;
  border-bottom: 1px solid #e6eaf1;
}

.customer-message-section .customer-message-head h4 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 19px;
}

.customer-message-section .customer-message-head > span {
  padding: 6px 10px;
  color: #4164c7;
  background: #f1f5ff;
  font-size: 11px;
}

.customer-message-list {
  margin-top: 0;
  display: block;
}

.comment-thread-card {
  padding: 20px 0;
  border-bottom: 1px solid #e8ebf0;
}

.comment-thread-card:last-child {
  border-bottom: 0;
}

.comment-thread-card .customer-message-item {
  padding: 0;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.comment-thread-card .comment-main-comment {
  align-items: flex-start;
}

.comment-thread-card .comment-entry-body {
  min-width: 0;
  flex: 1;
}

.comment-thread-card .comment-entry-body > .comment-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comment-author-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.comment-thread-card .comment-author-identity strong {
  color: #172033;
  font-size: 14px;
  line-height: 1.4;
}

.comment-thread-card .comment-author-row > small {
  flex: 0 0 auto;
  color: #9aa4b5;
  font-size: 11px;
}

.comment-owner-badge,
.comment-answerer-badge {
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.comment-owner-badge {
  color: #2962ff;
  background: #eaf1ff;
}

.comment-answerer-badge {
  color: #78511c;
  background: #fff1d8;
}

.comment-thread-card .comment-copy {
  margin: 8px 0 0;
  color: #273246;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-inline-target {
  margin-right: 3px;
  color: #77839a;
}

.comment-inline-target b {
  color: #315ed3;
  font-weight: 650;
}

.comment-thread-card .comment-interactions {
  margin-top: 10px;
  gap: 3px;
}

.comment-thread-card .comment-interactions button {
  min-height: 32px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 7px;
  color: #748096;
  font-size: 12px;
}

.comment-thread-card .comment-interactions button > span {
  color: #7c889d;
  font-size: 16px;
  line-height: 1;
}

.comment-thread-card .comment-interactions button:hover,
.comment-thread-card .comment-interactions .comment-like.liked {
  color: var(--comment-blue);
  background: #eef3ff;
}

.comment-thread-card .comment-interactions .comment-like.liked > span {
  color: var(--comment-blue);
}

.comment-thread-card .comment-interactions .report-action {
  margin-left: auto;
  color: #a1a9b7;
}

.comment-thread-card .comment-interactions .comment-delete-action {
  color: #b34f59;
}

.comment-thread-card .comment-interactions .comment-delete-action:hover {
  color: #9f303d;
  background: #fff0f1;
}

.comment-thread-replies {
  margin: 12px 0 0 50px;
  padding: 3px 14px;
  overflow: hidden;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: var(--comment-reply-bg);
}

.comment-thread-card .comment-thread-reply {
  padding: 13px 0;
  align-items: flex-start;
  border-bottom: 1px solid #e5e9ef;
}

.comment-thread-card .comment-thread-reply:last-of-type {
  border-bottom: 0;
}

.comment-thread-card .comment-thread-reply > .comment-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  box-shadow: none;
}

.comment-thread-card .comment-thread-reply .comment-author-identity strong {
  font-size: 13px;
}

.comment-thread-card .comment-thread-reply .comment-author-row > small {
  font-size: 10.5px;
}

.comment-thread-card .comment-thread-reply .comment-copy {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
}

.comment-thread-card .comment-thread-reply .comment-image-open {
  max-width: 360px;
}

.comment-thread-toggle {
  min-height: 38px;
  padding: 8px 0;
  border: 0;
  color: #315ed3;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.comment-thread-toggle:hover {
  color: #1747c7;
}

.comment-replying span > small {
  margin-top: 2px;
  display: block;
  color: #8995a8;
  font-size: 10px;
}

@media (max-width: 700px) {
  .customer-message-section .customer-message-head {
    padding-bottom: 12px;
  }

  .customer-message-section .customer-message-head h4 {
    font-size: 17px;
  }

  .customer-message-section .customer-message-head p {
    max-width: 250px;
    font-size: 11.5px;
  }

  .comment-thread-card {
    padding: 17px 0;
  }

  .comment-thread-card .customer-message-item {
    gap: 9px;
  }

  .comment-thread-card .comment-entry-body > .comment-author-row {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .comment-thread-card .comment-copy {
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.7;
  }

  .comment-thread-card .comment-interactions {
    margin-top: 8px;
  }

  .comment-thread-card .comment-interactions button {
    padding: 5px 8px;
    font-size: 12px;
  }

  .comment-thread-replies {
    margin: 10px 0 0 42px;
    padding: 2px 10px;
    border-radius: 10px;
  }

  .comment-thread-card .comment-thread-reply {
    padding: 11px 0;
  }

  .comment-thread-card .comment-thread-reply > .comment-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .comment-thread-card .comment-thread-reply .comment-copy {
    font-size: 14px;
    line-height: 1.68;
  }

  .comment-thread-card .comment-interactions .report-action {
    margin-left: 0;
  }

  .comment-thread-card .comment-interactions .comment-delete-action {
    margin-left: auto;
  }
}

/* Dynamic question service progress */
.service-flow-panel {
  position: relative;
  isolation: isolate;
  margin: 18px 0 26px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(163, 184, 226, .46);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% -12%, rgba(47, 99, 255, .16), transparent 33%),
    radial-gradient(circle at -8% 115%, rgba(118, 151, 255, .10), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, .99) 0%, #f7faff 100%);
  box-shadow: 0 16px 38px rgba(43, 69, 123, .085), 0 2px 7px rgba(43, 69, 123, .035);
  animation: service-panel-enter .58s cubic-bezier(.2, .75, .25, 1) both;
}

.service-flow-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .74) 49%, transparent 61%);
  transform: translateX(-115%);
  animation: service-panel-sheen 7s ease-in-out 1.2s infinite;
}

.service-flow-panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -78px;
  right: -54px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(47, 99, 255, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(47, 99, 255, .028), 0 0 0 62px rgba(47, 99, 255, .018);
  pointer-events: none;
}

.service-flow-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.service-flow-title > span {
  display: block;
  color: #2f63ff;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 780;
  letter-spacing: .065em;
}

.service-flow-title > div {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-flow-heading h3 {
  margin: 0;
  color: #111827;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.45px;
}

.service-flow-title > div > em {
  min-width: 40px;
  padding: 3px 8px;
  border: 1px solid #dce6ff;
  border-radius: 999px;
  color: #2f63ff;
  background: #f2f6ff;
  font-size: 11px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.service-flow-status {
  width: min(350px, 40%);
  min-width: 290px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(202, 214, 239, .86);
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 28px rgba(45, 68, 116, .07), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
}

.service-flow-status > i {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e4e9f2;
  box-shadow: 0 0 0 5px rgba(170, 180, 197, .10);
}

.service-flow-status > i > span {
  width: 6px;
  height: 6px;
  border-radius: inherit;
  background: #8e9aae;
}

.service-flow-status.active > i > span {
  background: #2f63ff;
}

.service-flow-status.active > i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(47, 99, 255, .42);
  border-radius: inherit;
  animation: service-status-pulse 1.9s ease-out infinite;
}

.service-flow-status.completed > i > span {
  background: #158563;
}

.service-flow-status.needs-work > i > span {
  background: #c27a24;
}

.service-flow-status span,
.service-flow-status b,
.service-flow-status small {
  min-width: 0;
  display: block;
}

.service-flow-status b {
  color: #1d2940;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 760;
}

.service-flow-status small {
  margin-top: 2px;
  color: #748096;
  font-size: 11.5px;
  line-height: 1.45;
}

.service-flow-status > em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #667188;
  background: #eef2f7;
  font-size: 11px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 780;
  white-space: nowrap;
}

.service-flow-status.active > em {
  color: #2457e8;
  background: #eaf0ff;
}

.service-flow-status.completed > em {
  color: #147555;
  background: #e9f7f1;
}

.service-flow-status.needs-work > em {
  color: #9d6018;
  background: #fff2df;
}

.service-flow-panel .service-timeline {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.service-flow-panel .service-timeline::before,
.service-flow-panel .service-timeline::after {
  content: '';
  position: absolute;
  top: 35px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
}

.service-flow-panel .service-timeline::before {
  z-index: 0;
  background: #dde5f4;
}

.service-flow-panel .service-timeline::after {
  z-index: 1;
  background: linear-gradient(90deg, #2f63ff 0%, #7d9bff 48%, #2f63ff 100%);
  background-size: 190% 100%;
  transform: scaleX(var(--flow-progress, 0));
  transform-origin: left center;
  box-shadow: 0 0 13px rgba(47, 99, 255, .28);
  animation: service-track-reveal .9s cubic-bezier(.2, .75, .25, 1) both, service-line-flow 3s linear infinite;
}

.service-flow-panel .service-timeline .service-step {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 102px;
  padding: 13px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(213, 222, 239, .92);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 9px 24px rgba(39, 58, 99, .055);
  opacity: 1;
  animation: service-step-enter .52s cubic-bezier(.2, .75, .25, 1) both;
}

.service-flow-panel .service-step:nth-child(2) { animation-delay: .07s; }
.service-flow-panel .service-step:nth-child(3) { animation-delay: .14s; }
.service-flow-panel .service-step:nth-child(4) { animation-delay: .21s; }

.service-flow-panel .service-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15px;
  width: 38px;
  height: 3px;
  border-radius: 999px;
  background: #d9e0ec;
}

.service-flow-panel .service-step.done::before {
  background: linear-gradient(90deg, #2f63ff, #86a2ff);
}

.service-flow-panel .service-step.current {
  border-color: rgba(90, 128, 255, .60);
  background: linear-gradient(145deg, #ffffff 0%, #f1f5ff 100%);
  box-shadow: 0 15px 34px rgba(47, 99, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .72);
  transform: translateY(-2px);
}

.service-flow-panel .service-step.current::before {
  width: 50px;
  background: linear-gradient(90deg, #2f63ff, #8ba6ff, #2f63ff);
  background-size: 180% 100%;
  animation: service-line-flow 2.4s linear infinite;
}

.service-flow-panel .service-step.current::after {
  content: '';
  position: absolute;
  inset: -60% -35%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .68) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: service-card-sheen 4.6s ease-in-out 1s infinite;
}

.service-flow-panel .service-step > i {
  position: relative;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #dce3ef;
  border-radius: 13px;
  color: #8a95a7;
  background: #f3f5f9;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(38, 52, 82, .07);
}

.service-flow-panel .service-step > i > span {
  position: relative;
  z-index: 1;
}

.service-flow-panel .service-step.done > i {
  border-color: #2f63ff;
  color: #ffffff;
  background: linear-gradient(145deg, #4a77ff 0%, #2558eb 100%);
  box-shadow: 0 9px 20px rgba(47, 99, 255, .24);
}

.service-flow-panel .service-step.current > i {
  border-color: #7f9fff;
  color: #2f63ff;
  background: #ffffff;
  box-shadow: 0 0 0 5px rgba(47, 99, 255, .08), 0 10px 24px rgba(47, 99, 255, .15);
  animation: service-current-pulse 2s ease-in-out infinite;
}

.service-flow-panel .service-step-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 1px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
}

.service-flow-panel .service-step-copy > span {
  min-height: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.service-flow-panel .service-step-copy > span > em {
  color: #8a95a8;
  font-size: 10.5px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 760;
  letter-spacing: .05em;
}

.service-flow-panel .service-step-copy mark {
  padding: 2px 6px;
  border-radius: 999px;
  color: #2457e8;
  background: #e8efff;
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 760;
}

.service-flow-panel .service-step b,
.service-flow-panel .service-step small {
  display: block;
}

.service-flow-panel .service-step b {
  margin-top: 3px;
  color: #223049;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 760;
}

.service-flow-panel .service-step.current b {
  color: #2f63ff;
}

.service-flow-panel .service-step small {
  margin-top: 3px;
  color: #8792a5;
  font-size: 12px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.auto-accept-countdown {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid #d4e0fb;
  border-radius: 14px;
  background: linear-gradient(118deg, rgba(237, 243, 255, .96), rgba(248, 251, 255, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.auto-accept-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.auto-accept-summary > span,
.auto-accept-summary em,
.auto-accept-summary small {
  display: block;
}

.auto-accept-summary em {
  color: #45546f;
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 780;
}

.auto-accept-summary small {
  margin-top: 3px;
  color: #7b879b;
  font-size: 11.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.auto-accept-countdown strong {
  color: #2f63ff;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.25;
  font-weight: 820;
  letter-spacing: .02em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 5px 18px rgba(47, 99, 255, .13);
}

.auto-accept-meter {
  height: 7px;
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid rgba(190, 204, 233, .54);
  border-radius: 999px;
  background: rgba(211, 221, 240, .66);
}

.auto-accept-meter i {
  width: var(--auto-accept-progress, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f63ff 0%, #8da7ff 46%, #2f63ff 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 13px rgba(47, 99, 255, .30);
  transition: width .5s ease;
  animation: service-line-flow 2.8s linear infinite;
}

.auto-accept-rule {
  margin-top: 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.auto-accept-rule > span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #2f63ff;
  background: rgba(255, 255, 255, .82);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 760;
  white-space: nowrap;
}

.auto-accept-rule > small {
  color: #66748b;
  font-size: 12px;
  line-height: 1.62;
}

.auto-accept-countdown.is-ending {
  border-color: #f0d6ab;
  background: linear-gradient(118deg, #fff8ed, #fffdf9);
}

.auto-accept-countdown.is-ending strong,
.auto-accept-countdown.is-ending .auto-accept-rule > span {
  color: #b46b16;
}

.auto-accept-countdown.is-ending .auto-accept-meter i {
  background: linear-gradient(90deg, #d78220, #f2b763, #d78220);
}

.topic-detail-page .claim-status b,
.topic-detail-page .answer-decision b {
  font-size: 14px;
}

.topic-detail-page .claim-status p,
.topic-detail-page .answer-decision span {
  font-size: 12.5px;
  line-height: 1.6;
}

.topic-detail-page .answer-review b {
  font-size: 16px;
}

.topic-detail-page .answer-review p {
  font-size: 12.5px;
  line-height: 1.6;
}

.answer-decision.auto-accepted {
  border-color: #cbe8dc;
  background: linear-gradient(90deg, #eefaf5, #f7fcfa);
}

@keyframes service-status-pulse {
  0% { opacity: .9; transform: scale(.72); }
  75%, 100% { opacity: 0; transform: scale(1.8); }
}

@keyframes service-current-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(47, 99, 255, .07), 0 9px 20px rgba(47, 99, 255, .12); }
  50% { box-shadow: 0 0 0 9px rgba(47, 99, 255, .025), 0 12px 26px rgba(47, 99, 255, .21); }
}

@keyframes service-line-flow {
  from { background-position: 100% 0; }
  to { background-position: -80% 0; }
}

@keyframes service-panel-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes service-panel-sheen {
  0%, 70%, 100% { transform: translateX(-115%); }
  82% { transform: translateX(115%); }
}

@keyframes service-step-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes service-card-sheen {
  0%, 72%, 100% { transform: translateX(-70%); }
  86% { transform: translateX(70%); }
}

@keyframes service-track-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(var(--flow-progress, 0)); }
}

@keyframes service-track-reveal-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(var(--flow-progress, 0)); }
}

@media (max-width: 760px) {
  .service-flow-panel {
    margin: 13px 0 20px;
    padding: 15px 12px;
    border-radius: 17px;
  }

  .service-flow-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .service-flow-heading h3 {
    font-size: 20px;
  }

  .service-flow-title > div > em {
    min-width: 42px;
  }

  .service-flow-status {
    width: 100%;
    min-width: 0;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    padding: 10px 11px;
    border-radius: 12px;
  }

  .service-flow-status b {
    font-size: 13.5px;
  }

  .service-flow-status small {
    font-size: 11px;
  }

  .service-flow-panel .service-timeline {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .service-flow-panel .service-timeline::before,
  .service-flow-panel .service-timeline::after {
    top: 29px;
    bottom: 29px;
    left: 31px;
    right: auto;
    width: 3px;
    height: auto;
  }

  .service-flow-panel .service-timeline::after {
    transform: scaleY(var(--flow-progress, 0));
    transform-origin: center top;
    animation-name: service-track-reveal-y, service-line-flow;
  }

  .service-flow-panel .service-timeline .service-step {
    min-height: 78px;
    padding: 11px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    border-radius: 13px;
  }

  .service-flow-panel .service-step.current {
    transform: none;
  }

  .service-flow-panel .service-step > i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .service-flow-panel .service-step b {
    font-size: 15px;
  }

  .service-flow-panel .service-step small {
    font-size: 11.5px;
  }

  .auto-accept-countdown {
    margin-top: 12px;
    padding: 12px;
    border-radius: 13px;
  }

  .auto-accept-summary {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .auto-accept-countdown strong {
    font-size: 19px;
    text-align: left;
  }

  .auto-accept-rule {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .auto-accept-rule > span {
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-flow-panel,
  .service-flow-panel::before,
  .service-flow-status.active > i::after,
  .service-flow-panel .service-step,
  .service-flow-panel .service-step.current::before,
  .service-flow-panel .service-step.current::after,
  .service-flow-panel .service-step.current > i,
  .service-flow-panel .service-timeline::after,
  .auto-accept-meter i {
    animation: none;
  }
}

/* Mobile final override: must remain after all legacy responsive rules. */
.modal:has(.comment-image-modal-frame) {
  align-items: center;
  overflow: auto;
}

.modal-card:has(.comment-image-modal-frame) {
  display: flex;
  flex-direction: column;
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.modal-card:has(.comment-image-modal-frame) #modalContent {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.modal-card:has(.comment-image-modal-frame) .comment-image-modal-head {
  flex: 0 0 auto;
  padding: 18px 52px 13px 20px;
}

.modal-card:has(.comment-image-modal-frame) .comment-image-modal-frame {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 0;
  padding: 10px;
  border-radius: 0;
  background: #151b2a;
}

.modal-card:has(.comment-image-modal-frame) .comment-image-modal {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 132px);
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 700px) {
  .profile-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }

  .profile-main { min-width: 0; gap: 10px; }
  .profile-main > .profile-avatar { flex: 0 0 48px; }
  .profile-copy { min-width: 0; }
  .profile-main h2 { overflow: hidden; font-size: 17px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .profile-main .profile-role,
  .profile-main .profile-account { overflow: hidden; margin: 4px 0 0; color: #7a8598; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .profile-main .profile-account b { color: #5e6d87; font-weight: 650; }

  .profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 190px;
    gap: 7px;
  }

  .profile-actions .button { min-width: 0; min-height: 39px; padding: 0 7px; border-radius: 8px; font-size: 12px; line-height: 1.15; white-space: nowrap; }
  .profile-actions .button:last-child:nth-child(3) { grid-column: 1 / -1; }

  .modal:has(.comment-image-modal-frame) {
    align-items: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .modal-card:has(.comment-image-modal-frame) {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  .modal-card:has(.comment-image-modal-frame) .comment-image-modal-head { padding: 15px 46px 11px 15px; }
  .modal-card:has(.comment-image-modal-frame) .comment-image-modal-frame { min-height: 160px; padding: 8px; }
  .modal-card:has(.comment-image-modal-frame) .comment-image-modal { max-height: calc(100dvh - 118px); border-radius: 7px; }
}

@media (max-width: 430px) {
  .profile-center { grid-template-columns: minmax(0, 1fr) 152px; gap: 9px; padding: 12px; }
  .profile-main { gap: 8px; }
  .profile-main > .profile-avatar { flex-basis: 43px; }
  .profile-main h2 { font-size: 15px; }
  .profile-main .profile-role,
  .profile-main .profile-account { font-size: 11px; }
  .profile-actions { width: 152px; gap: 6px; }
  .profile-actions .button { min-height: 37px; padding: 0 4px; font-size: 11px; }
}

/* One persistent mobile navigation for every destination. */
@media (max-width: 700px) {
  :root { --mobile-nav-height: 66px; }

  body,
  body[data-page="home"],
  body[data-page="qmt"],
  body[data-page="ptrade"] {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  body[data-page="home"] #nav,
  body[data-page="qmt"] #nav,
  body[data-page="ptrade"] #nav {
    display: grid;
  }

  #nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    margin: 0;
    padding: 6px 5px env(safe-area-inset-bottom);
    gap: 2px;
    border-top: 1px solid rgba(215, 224, 240, .94);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 24px rgba(24, 40, 77, .08);
    backdrop-filter: blur(14px);
  }

  #nav .nav-item {
    min-width: 0;
    padding: 0 1px;
    font-size: 11px;
  }

  .mobile-discovery-nav { display: none !important; }

  .floating-doc {
    bottom: calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom));
  }
}

/* Owner account controls: point deductions and account deletion. */
.account-row {
  grid-template-columns: 30px 42px minmax(220px, 1fr) auto minmax(0, auto);
}

.account-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-row-actions .button {
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

.account-row-actions .account-deduct-button {
  color: #a96016;
  border-color: #f0d3ad;
  background: #fff9f1;
}

.account-row-actions .account-deduct-button:hover {
  color: #8e4d0d;
  border-color: #e9b973;
  background: #fff2df;
}

.account-row-actions .account-delete-button {
  color: #b6404b;
  border-color: #efc9cd;
  background: #fff7f7;
}

.account-row-actions .account-delete-button:hover {
  color: #fff;
  border-color: #c73541;
  background: #c73541;
}

.point-deduct-head > span {
  color: #fff;
  background: linear-gradient(145deg, #d58a32, #b85d23);
}

.point-deduct-balance {
  border-color: #f0dbc2;
  background: #fffaf4;
}

.point-deduct-balance .result b { color: #b85d23; }
.point-deduct-balance + .field input:focus { border-color: #d58a32; box-shadow: 0 0 0 3px rgba(213, 138, 50, .12); }
.form-note.warning { color: #87531d; background: #fff8ed; }

.delete-user-dialog { padding: 2px; }
.delete-user-head { margin-bottom: 18px; }
.delete-user-head > span {
  overflow: hidden;
  border: 1px solid #e7d5d8;
  background: #fff6f6;
}
.delete-user-head > span img { width: 100%; height: 100%; object-fit: cover; }
.delete-user-head small { display: block; margin-bottom: 4px; color: #b6404b; font-size: 11px; font-weight: 800; }
.delete-user-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.delete-user-summary div {
  padding: 13px 10px;
  text-align: center;
  border: 1px solid #e4e9f2;
  border-radius: 10px;
  background: #f8f9fc;
}
.delete-user-summary b,
.delete-user-summary span { display: block; }
.delete-user-summary b { color: #171b26; font-size: 20px; }
.delete-user-summary span { margin-top: 3px; color: #7b8597; font-size: 11px; }
.delete-user-warning {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #f1ced2;
  border-radius: 10px;
  color: #7f3038;
  background: #fff6f7;
}
.delete-user-warning b { display: block; margin-bottom: 5px; }
.delete-user-warning p { margin: 0; color: #8c5960; font-size: 12px; line-height: 1.7; }

@media (max-width: 1100px) {
  .account-row {
    grid-template-columns: 30px 42px minmax(0, 1fr) auto;
  }
  .account-row-actions {
    grid-column: 3 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .account-row { grid-template-columns: 28px 38px minmax(0, 1fr) auto; }
  .account-row-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .account-row-actions .button { width: 100%; min-height: 42px; padding: 0 8px; }
  .delete-user-summary { gap: 5px; }
  .delete-user-summary div { padding: 11px 5px; }
  .delete-user-summary b { font-size: 17px; }
}

/* Owner bulk-selection controls. */
.account-row {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.account-row.selected {
  background: linear-gradient(90deg, #f4f7ff 0%, #fff 62%);
  box-shadow: inset 3px 0 0 #3164f4;
}

.account-select {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.account-select input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.account-select span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #c9d2e3;
  border-radius: 6px;
  color: transparent;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  transition: all .16s ease;
}

.account-select:hover span { border-color: #7292f7; background: #f5f7ff; }
.account-select input:focus-visible + span { outline: 3px solid rgba(49, 100, 244, .16); outline-offset: 2px; }
.account-select input:checked + span { border-color: #3164f4; color: #fff; background: #3164f4; }

.admin-user-actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-user-actions .account-bulk-delete {
  border: 1px solid #e9bcc2;
  color: #b33643;
  background: #fff7f8;
}
.admin-user-actions .account-bulk-delete:not(:disabled):hover {
  border-color: #c73541;
  color: #fff;
  background: #c73541;
}
.admin-user-actions .account-bulk-delete b {
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #c73541;
  font-size: 10px;
}
.admin-user-actions .account-bulk-delete:not(:disabled):hover b { color: #c73541; background: #fff; }
.admin-user-actions .account-bulk-delete:disabled { opacity: .45; cursor: not-allowed; }

.bulk-delete-head > span {
  color: #fff;
  background: linear-gradient(145deg, #dc5965, #ac2735);
  font-size: 17px;
  font-weight: 900;
}

.bulk-delete-users {
  margin-bottom: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid #e5e9f1;
  border-radius: 10px;
  background: #fafbfe;
}
.bulk-delete-users span {
  min-height: 32px;
  padding: 4px 9px 4px 5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e1e5ee;
  border-radius: 999px;
  background: #fff;
}
.bulk-delete-users img,
.bulk-delete-users .avatar-image { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.bulk-delete-users b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.bulk-delete-users em { color: #778196; font-size: 11px; font-style: normal; }

@media (max-width: 700px) {
  .admin-user-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-user-actions .button { width: 100%; min-height: 42px; padding: 0 8px; }
  .account-select { width: 26px; height: 26px; }
  .account-select span { width: 19px; height: 19px; }
  .bulk-delete-users { max-height: 128px; overflow-y: auto; }
}

/* Final home-page placement: clear the mobile navigation and sit higher on desktop. */
body:not([data-page="home"]) .floating-doc {
  display: none !important;
}

.mine-redemption-entry {
  margin-top: 18px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #fff 0%, #f7f9ff 100%);
}
.mine-redemption-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #4a74ff, #2352e9); font-size: 20px; font-weight: 800; }
.mine-redemption-copy h3 { margin: 3px 0 5px; font-size: 20px; }
.mine-redemption-copy p { margin: 0; color: #748097; line-height: 1.55; }

@media (max-width: 700px) {
  .mine-redemption-entry { grid-template-columns: auto 1fr; padding: 18px; gap: 13px; }
  .mine-redemption-entry .button { grid-column: 1 / -1; width: 100%; }
  .mine-redemption-copy h3 { font-size: 18px; }
  .mine-redemption-copy p { font-size: 13px; }
}

body[data-page="home"] .floating-doc {
  top: 46%;
  bottom: auto;
}

@media (max-width: 700px) {
  body[data-page="home"] .floating-doc {
    top: auto;
    bottom: calc(var(--mobile-nav-height) + 20px + env(safe-area-inset-bottom));
    transform: none;
  }

  body[data-page="home"] .floating-doc:hover { transform: translateY(-2px); }
}

/* Share library: curated chapters and community articles. */
body[data-page="share"] .page-heading,
body[data-page="share"] .wallet-aside,
body[data-page="share"] .floating-doc { display: none !important; }

body[data-page="share"] .workspace {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1500px;
  padding-top: 24px;
}

body[data-page="share"] .content { max-width: none; min-width: 0; }

.share-library-hero {
  min-height: 250px;
  padding: 44px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
  position: relative;
  border: 1px solid #dbe3f2;
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 8%, rgba(62, 104, 255, .18), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f5f8ff 58%, #edf3ff 100%);
  box-shadow: 0 22px 60px rgba(36, 61, 112, .09);
}

.share-library-hero::after {
  content: '';
  width: 290px;
  height: 290px;
  position: absolute;
  right: -70px;
  bottom: -155px;
  border: 42px solid rgba(49, 100, 244, .06);
  border-radius: 50%;
}

.share-library-intro { max-width: 790px; position: relative; z-index: 1; }
.share-library-intro .eyebrow { color: #3164f4; font-size: 13px; letter-spacing: .08em; }
.share-library-intro h2 { margin: 12px 0 14px; color: #111827; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.share-library-intro > p { max-width: 720px; margin: 0; color: #657189; font-size: 17px; line-height: 1.8; }
.share-library-actions { margin-top: 28px; display: flex; align-items: center; gap: 18px; }
.share-library-actions .button { min-height: 48px; padding-inline: 24px; }
.share-library-actions span { color: #7b879d; font-size: 13px; }
.share-library-actions span b { margin-right: 4px; color: #17213a; font-size: 20px; }

.share-library-stat {
  width: 190px;
  min-width: 190px;
  height: 178px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, #18274a, #3164f4);
  box-shadow: 0 20px 45px rgba(41, 83, 204, .25);
}
.share-library-stat i { width: 50px; height: 50px; display: grid; place-items: center; position: absolute; top: 22px; left: 24px; border-radius: 16px; color: #214ccc; background: #fff; font-size: 25px; font-weight: 900; font-style: normal; }
.share-library-stat span { opacity: .76; font-size: 13px; }
.share-library-stat strong { margin-top: 3px; font-size: 22px; }

.share-chapter-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.share-chapter-card {
  min-height: 112px;
  padding: 20px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid #dce3ee;
  border-radius: 19px;
  color: #17213a;
  background: #fff;
  text-align: left;
  box-shadow: 0 12px 30px rgba(29, 48, 83, .06);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.share-chapter-card::after {
  content: '';
  width: 100px;
  height: 100px;
  position: absolute;
  right: -48px;
  bottom: -58px;
  border: 18px solid currentColor;
  border-radius: 50%;
  opacity: .035;
}

.share-chapter-card:hover { transform: translateY(-3px); border-color: #aebff0; box-shadow: 0 18px 38px rgba(29, 48, 83, .1); }
.share-chapter-card.active { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor, 0 18px 42px rgba(37, 82, 196, .12); }
.share-chapter-card > i { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: inherit; background: #eef3ff; font-size: 19px; font-weight: 900; font-style: normal; }
.share-chapter-card > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.share-chapter-card > span strong { font-size: 17px; }
.share-chapter-card > span small { overflow: hidden; color: #7b879a; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.share-chapter-card > b { min-width: 42px; color: inherit; font-size: 23px; text-align: right; }
.share-chapter-card > b em { margin-left: 3px; color: #9aa4b5; font-size: 10px; font-style: normal; font-weight: 500; }
.share-chapter-card.qmt { color: #3164f4; }
.share-chapter-card.ptrade { color: #d77818; }
.share-chapter-card.ptrade > i { background: #fff3e7; }
.share-chapter-card.python { color: #7252d9; }
.share-chapter-card.python > i { background: #f2edff; }

.share-toolbar {
  margin: 20px 0;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #dde4f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 32px rgba(33, 53, 90, .06);
}
.share-search { min-width: 320px; flex: 1; min-height: 48px; padding-left: 16px; display: flex; align-items: center; gap: 10px; border: 1px solid #dce3ee; border-radius: 13px; background: #f8faff; }
.share-search > span { color: #7c8ba5; font-size: 24px; line-height: 1; }
.share-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #17213a; background: transparent; font-size: 14px; }
.share-search button { align-self: stretch; padding: 0 20px; border: 0; border-radius: 11px; color: #fff; background: #3164f4; font-weight: 800; cursor: pointer; }
.share-all-filter { min-height: 48px; padding: 0 17px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #dce3ee; border-radius: 13px; color: #566277; background: #fff; font-weight: 800; cursor: pointer; }
.share-all-filter b { min-width: 27px; height: 25px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; color: #7f899a; background: #f0f3f8; font-size: 10px; }
.share-all-filter.active { border-color: #3164f4; color: #2454e6; background: #eef3ff; box-shadow: inset 0 0 0 1px #3164f4; }
.share-all-filter.active b { color: #fff; background: #3164f4; }
.share-chapters { display: flex; gap: 8px; }
.share-chapters button { min-height: 46px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e0e5ee; border-radius: 12px; color: #59657a; background: #fff; font-weight: 800; cursor: pointer; }
.share-chapters button b { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #8c97aa; background: #f0f3f8; font-size: 10px; }
.share-chapters button.active { border-color: #3164f4; color: #2454e6; background: #eef3ff; box-shadow: inset 0 0 0 1px #3164f4; }
.share-chapters button.active b { color: #fff; background: #3164f4; }

.share-library-layout { display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); align-items: start; gap: 20px; }
.share-directory,
.share-reader { border: 1px solid #dde4ef; border-radius: 20px; background: #fff; box-shadow: 0 16px 42px rgba(30, 49, 85, .07); }
.share-directory { position: sticky; top: 90px; overflow: hidden; }
.share-directory-head { min-height: 76px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8ecf3; background: linear-gradient(135deg, #fbfcff, #f4f7fd); }
.share-directory-head div { display: flex; align-items: baseline; gap: 8px; }
.share-directory-head span { color: #3164f4; font-size: 15px; font-weight: 900; }
.share-directory-head strong { color: #202a3e; font-size: 13px; }
.share-directory-head small { color: #9aa4b5; font-size: 11px; }
.share-directory-list { max-height: calc(100vh - 200px); padding: 8px; overflow: auto; scrollbar-width: thin; }
.share-directory-group + .share-directory-group { margin-top: 9px; padding-top: 8px; border-top: 1px solid #edf0f5; }
.share-directory-group-head { margin: 0 6px 4px; padding: 9px 8px 7px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: -8px; z-index: 2; color: #1e293d; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); }
.share-directory-group-head strong { font-size: 12px; letter-spacing: .04em; }
.share-directory-group-head span { color: #99a3b4; font-size: 10px; }
.mini-qmt-group .share-directory-group-head { margin-top: 5px; color: #a96112; border-radius: 9px; background: #fff8ec; }
.share-directory-item { width: 100%; padding: 15px 14px; display: block; border: 0; border-radius: 12px; color: inherit; background: transparent; text-align: left; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.share-directory-item:hover { background: #f5f7fc; transform: translateX(2px); }
.share-directory-item.active { background: linear-gradient(135deg, #eef3ff, #f7f9ff); box-shadow: inset 3px 0 #3164f4; }
.share-directory-item > span { display: flex; align-items: center; gap: 7px; }
.share-directory-item > span b { color: #3164f4; font-size: 11px; }
.share-directory-item > span em { color: #9aa4b5; font-size: 10px; font-style: normal; }
.share-directory-item > span em.mini-qmt { padding: 2px 6px; border-radius: 999px; color: #a96112; background: #fff0d8; font-weight: 800; }
.share-directory-item > strong { margin: 6px 0 7px; display: -webkit-box; overflow: hidden; color: #1a2336; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.share-directory-item > small { color: #96a0b2; font-size: 11px; }

.share-reader { min-height: 720px; overflow: hidden; }
.share-reader-head { padding: clamp(28px, 4vw, 54px); padding-bottom: 30px; border-bottom: 1px solid #e7ebf2; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); }
.share-reader-labels { display: flex; gap: 8px; }
.share-reader-labels span,
.share-reader-labels b { padding: 5px 9px; border-radius: 999px; font-size: 11px; }
.share-reader-labels span { color: #fff; background: #3164f4; }
.share-reader-labels b { color: #66738a; background: #edf1f7; }
.share-reader-labels b.mini-qmt { color: #9b5b0d; background: #fff0d8; }
.share-reader-head h1 { max-width: 980px; margin: 17px 0 12px; color: #121a2c; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3; letter-spacing: -.025em; }
.share-reader-head > p { max-width: 920px; margin: 0; color: #69758b; font-size: 16px; line-height: 1.8; }
.share-author-row { margin-top: 24px; display: flex; align-items: center; gap: 11px; }
.share-author-avatar { width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; border: 1px solid #e2e7ef; border-radius: 50%; background: #eef2f8; }
.share-author-avatar img,
.share-author-avatar .avatar-image { width: 100%; height: 100%; object-fit: cover; }
.share-author-row > div { display: flex; flex-direction: column; gap: 2px; }
.share-author-row strong { color: #17213a; font-size: 14px; }
.share-author-row span { color: #8a95a7; font-size: 11px; }
.share-delete-article { margin-left: auto; padding: 8px 11px; border: 1px solid #efcfd3; border-radius: 9px; color: #bd3f4b; background: #fff8f9; cursor: pointer; }

.share-reader-body { max-width: 980px; min-height: 430px; margin: auto; padding: clamp(30px, 5vw, 64px); color: #293246; font-size: 17px; line-height: 1.92; }
.share-reader-body p { margin: 0 0 1.25em; }
.share-reader-body h1,
.share-reader-body h2,
.share-reader-body h3,
.share-reader-body h4 { margin: 1.8em 0 .7em; color: #141c2e; line-height: 1.35; }
.share-reader-body h2 { padding-bottom: 10px; border-bottom: 1px solid #e5e9f1; font-size: 26px; }
.share-reader-body h3 { font-size: 21px; }
.share-reader-body ul,
.share-reader-body ol { margin: 1em 0; padding-left: 1.6em; }
.share-reader-body li { margin: .45em 0; }
.share-reader-body blockquote { margin: 1.5em 0; padding: 14px 18px; border-left: 4px solid #3164f4; border-radius: 0 10px 10px 0; color: #566279; background: #f3f6fd; }
.share-reader-body img { max-width: 100%; height: auto; margin: 18px auto; display: block; border: 1px solid #e0e5ed; border-radius: 12px; box-shadow: 0 10px 28px rgba(20, 35, 68, .09); }
.share-reader-body table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 14px; }
.share-reader-body th,
.share-reader-body td { padding: 10px 12px; border: 1px solid #dde3ec; text-align: left; }
.share-reader-body th { background: #f4f6fa; }
.share-reader-body pre { max-width: 100%; margin: 20px 0; padding: 20px; overflow: auto; border-radius: 13px; color: #e7ecf7; background: #151a28; font: 13px/1.8 Consolas, Monaco, monospace; }
.share-reader-body code { font-family: Consolas, Monaco, monospace; }
.share-article-image { margin: 0 0 32px; }
.share-article-image img { margin-bottom: 8px; }
.share-article-image figcaption { color: #9aa3b2; font-size: 11px; text-align: center; }
.share-article-code { margin-top: 32px; overflow: hidden; border-radius: 14px; background: #151a28; }
.share-article-code > div { padding: 11px 14px; display: flex; justify-content: space-between; border-bottom: 1px solid #2c3345; color: #aeb9ce; font-size: 12px; }
.share-article-code button { border: 0; color: #91a9ff; background: transparent; cursor: pointer; }
.share-article-code pre { margin: 0; border-radius: 0; }
.share-reader-foot { padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e5e9f1; color: #8994a7; background: #fafbfe; font-size: 12px; }
.share-reader-foot a { color: #3164f4; font-weight: 800; }
.share-reader-empty { min-height: 680px; display: grid; align-content: center; justify-items: center; color: #929caf; text-align: center; }
.share-reader-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: #3164f4; font-size: 24px; font-weight: 900; }
.share-reader-empty h3 { margin: 18px 0 5px; color: #222c40; }
.share-reader-empty p { margin: 0; }
.share-empty { padding: 50px 20px; display: flex; flex-direction: column; align-items: center; color: #8d98aa; text-align: center; }
.share-empty b { margin-bottom: 5px; color: #263147; }
.share-loading,
.share-error { margin-bottom: 18px; padding: 20px 24px; display: flex; align-items: center; gap: 12px; }
.share-loading i { width: 18px; height: 18px; border: 2px solid #d8e0f7; border-top-color: #3164f4; border-radius: 50%; animation: share-spin .8s linear infinite; }
.share-error { justify-content: space-between; }
.share-error > div { display: flex; flex-direction: column; gap: 3px; }
.share-error span { color: #8a94a6; font-size: 12px; }
@keyframes share-spin { to { transform: rotate(360deg); } }

.article-submit-modal { max-width: 860px; }
.article-submit-modal header { margin-bottom: 22px; }
.article-submit-modal header h2 { margin: 7px 0 6px; font-size: 28px; }
.article-submit-modal header p { margin: 0; color: #778298; }
.article-submit-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
.article-image-picker { margin: 4px 0 16px; padding: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px dashed #cbd6ea; border-radius: 13px; color: #8390a7; background: #f8faff; font-size: 12px; }
.article-image-picker:focus-within { border-color: #3164f4; }
#articleImagePreview { width: 100%; }
#articleImagePreview:empty { display: none; }
#articleImagePreview figure { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; }
#articleImagePreview img { width: 86px; height: 64px; object-fit: cover; border-radius: 9px; }
#articleImagePreview figcaption { flex: 1; color: #5e697e; }
#articleImagePreview button { border: 0; color: #bd3f4b; background: transparent; cursor: pointer; }
.article-code-panel { margin: 0 0 16px; border: 1px solid #dfe5ef; border-radius: 12px; background: #fbfcff; }
.article-code-panel summary { padding: 15px 16px; color: #273248; font-weight: 800; cursor: pointer; }
.article-code-panel .field { padding: 0 14px 14px; }
.article-code-panel textarea { font-family: Consolas, Monaco, monospace; }
.article-submit-note { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; color: #7b5a2c; background: #fff7e8; font-size: 12px; line-height: 1.65; }

@media (max-width: 900px) {
  body[data-page="share"] .workspace { padding: 12px 12px calc(var(--mobile-nav-height, 72px) + 24px); }
  .share-library-hero { min-height: auto; padding: 28px 24px; border-radius: 18px; }
  .share-library-stat { display: none; }
  .share-chapter-grid { grid-template-columns: 1fr; gap: 10px; }
  .share-chapter-card { min-height: 86px; padding: 15px 16px; grid-template-columns: 46px minmax(0, 1fr) auto; border-radius: 16px; }
  .share-chapter-card > i { width: 46px; height: 46px; border-radius: 13px; }
  .share-library-intro h2 { font-size: 32px; }
  .share-library-intro > p { font-size: 14px; line-height: 1.7; }
  .share-library-actions { margin-top: 21px; justify-content: space-between; }
  .share-toolbar { padding: 10px; display: block; border-radius: 15px; }
  .share-search { min-width: 0; width: 100%; }
  .share-all-filter { width: 100%; margin-top: 10px; justify-content: center; }
  .share-chapters { margin-top: 10px; padding-bottom: 2px; overflow-x: auto; }
  .share-chapters button { flex: 0 0 auto; }
  .share-library-layout { grid-template-columns: 1fr; }
  .share-directory { position: static; border-radius: 16px; }
  .share-directory-list { max-height: 360px; }
  .share-reader { min-height: 0; border-radius: 16px; scroll-margin-top: 12px; }
  .share-reader-head { padding: 28px 22px 24px; }
  .share-reader-head h1 { font-size: 27px; }
  .share-reader-head > p { font-size: 14px; }
  .share-reader-body { min-height: 0; padding: 28px 22px 38px; font-size: 16px; line-height: 1.88; }
  .share-reader-body h2 { font-size: 22px; }
  .share-reader-body h3 { font-size: 19px; }
  .share-reader-foot { align-items: flex-start; flex-direction: column; }
  .share-reader-empty { min-height: 330px; }
  .article-submit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .share-library-hero { padding: 24px 18px; }
  .share-chapter-card > span strong { font-size: 16px; }
  .share-chapter-card > span small { font-size: 11px; }
  .share-chapter-card > b { font-size: 20px; }
  .share-library-intro h2 { font-size: 27px; }
  .share-library-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .share-library-actions .button { width: 100%; }
  .share-search button { padding-inline: 14px; }
  .share-chapters button { min-height: 42px; padding-inline: 12px; }
  .share-reader-head h1 { font-size: 24px; }
  .share-author-row { align-items: flex-start; }
  .share-delete-article { margin-left: 4px; }
}

/* Homepage hero: focused, calm and free of instructional clutter. */
.home-hero-layout { display: block; }
.home-hero-layout .welcome-copy { min-width: 0; }

@media (min-width: 901px) {
  body[data-page="home"] .welcome.welcome-premium {
    min-height: 0;
    padding: 50px 64px 48px;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% -55%, rgba(41, 98, 255, .15), transparent 44%),
      radial-gradient(circle at 90% 82%, rgba(41, 98, 255, .055), transparent 28%),
      linear-gradient(135deg, #ffffff 0%, #fafcff 58%, #f3f7ff 100%);
  }

  body[data-page="home"] .welcome.welcome-premium::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background:
      linear-gradient(90deg,
        transparent 0 17%,
        rgba(41, 98, 255, .035) 17% 17.08%,
        transparent 17.08% 82.92%,
        rgba(41, 98, 255, .035) 82.92% 83%,
        transparent 83% 100%);
    content: "";
    pointer-events: none;
  }

  .home-hero-layout .welcome-copy {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
  }

  body[data-page="home"] .hero-kicker {
    justify-content: center;
  }

  body[data-page="home"] .welcome.welcome-premium h2 {
    max-width: none;
    margin-top: 17px;
    font-size: clamp(43px, 3.7vw, 58px);
    letter-spacing: -2px;
  }

  body[data-page="home"] .welcome.welcome-premium p {
    max-width: 820px;
    margin: 17px auto 0;
    font-size: 14px;
    line-height: 1.8;
  }

  body[data-page="home"] .welcome.welcome-premium .welcome-actions {
    justify-content: center;
    margin-top: 27px;
  }

  body[data-page="home"] .welcome.welcome-premium .welcome-actions .button {
    min-width: 144px;
    height: 46px;
  }
}

.account-opening-aside {
  width: 100%;
  min-height: 76px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-color: #e0e6f0;
  color: inherit;
  background: linear-gradient(135deg, #fff 0%, #fafbfd 100%);
  text-align: left;
  box-shadow: 0 8px 22px rgba(30, 49, 85, .045);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.account-opening-aside:hover {
  border-color: #c7d3e8;
  box-shadow: 0 11px 28px rgba(30, 49, 85, .075);
  transform: translateY(-1px);
}

.account-opening-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e1e7f1;
  border-radius: 13px;
  background: #f3f6fb;
}

.account-opening-icon img {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
}

.account-opening-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-opening-copy small {
  color: #9a7435;
  font-size: 9px;
  font-weight: 800;
}

.account-opening-copy strong {
  color: #222c40;
  font-size: 13px;
}

.account-opening-copy em {
  overflow: hidden;
  color: #8b95a6;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-opening-action {
  padding: 5px 7px;
  border-radius: 7px;
  color: #71809a;
  background: #f0f3f8;
  font-size: 9px;
  font-weight: 800;
}

@media (min-width: 901px) and (max-width: 1600px) {
  body[data-page="home"] .floating-doc {
    right: 8px;
    top: auto;
    bottom: 108px;
    transform: scale(.84);
    transform-origin: right center;
  }
}

@media (max-width: 700px) {
  .account-opening-aside { display: none; }
}