/* 集中设置、双面认证和充值步骤；窄屏下保持所有输入和按钮可操作。 */
.deposit-wizard,
.settings-card {
  padding: 28px;
}
.identity-preview {
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 8px;
  background: #eef4f7;
}
.settings-card {
  max-width: 960px;
}
.settings-group {
  margin: 26px 0;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #e5edf4;
}
.setting-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #168d84;
}
.setting-row input[type="number"] {
  width: 150px;
}
.identity-cards,
.deposit-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.identity-card {
  border: 1px dashed #adc5d3;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f8fbfd;
}
.identity-card .ui-icon {
  width: 30px;
  height: 30px;
  color: #168d84;
}
.identity-card input {
  max-width: 100%;
}
.identity-card a {
  overflow-wrap: anywhere;
}
.deposit-steps {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 20px;
  margin: 26px 0;
}
.deposit-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #718395;
}
.deposit-steps span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e7edf2;
}
.deposit-steps .active,
.deposit-steps .done {
  color: #168d84;
}
.deposit-steps .active span,
.deposit-steps .done span {
  background: #d4f2eb;
}
.deposit-method {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  text-align: left;
  padding: 22px;
  gap: 12px;
  background: #fff;
  border: 1px solid #dce7ef;
  border-radius: 14px;
}
.deposit-method:not(:disabled):hover {
  border-color: #168d84;
  box-shadow: 0 4px 16px #168d8415;
}
.deposit-method small {
  grid-column: 2/4;
  white-space: normal;
  line-height: 1.6;
}
.deposit-method:disabled {
  opacity: 0.55;
}
.currency-tag {
  font-size: 12px;
  background: #edf3f7;
  padding: 3px 8px;
  border-radius: 8px;
}
.deposit-form,
.deposit-confirm {
  max-width: 540px;
  margin: auto;
}
.deposit-confirm dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
  background: #f5f9fc;
  border-radius: 14px;
}
.deposit-confirm dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.deposit-wizard .field {
  margin: 18px 0;
}
@media (max-width: 600px) {
  .identity-cards,
  .deposit-methods {
    grid-template-columns: 1fr;
  }
  .deposit-steps {
    gap: 9px;
    font-size: 12px;
  }
  .deposit-steps span {
    width: 23px;
    height: 23px;
  }
  .setting-row {
    gap: 10px;
  }
  .setting-row label {
    max-width: 70%;
  }
}

/* 认证审核直接预览私有证件；保留原始比例，弹窗本身负责滚动。 */
.document-previews {
  display: grid;
  gap: 18px;
}
.document-preview-card {
  margin: 0;
  padding: 14px;
  border: 1px solid #e5edf4;
  border-radius: 12px;
  min-width: 0;
}
.document-preview-card figcaption {
  font-weight: 600;
  margin-bottom: 12px;
}
.document-preview-card figcaption small {
  display: block;
  font-weight: normal;
  overflow-wrap: anywhere;
}
.document-preview-card img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #eef4f7;
  border-radius: 8px;
}
.document-preview-card iframe {
  width: 100%;
  height: 420px;
  border: 0;
}
input[readonly] {
  background: #f2f5f8;
  color: #66768a;
}

.withdrawal-summary { padding: 14px 16px; margin: 12px 0; border: 1px solid #dce8f2; border-radius: 12px; background: #f5f9fc; overflow-wrap: anywhere; }
.withdrawal-summary p { margin: 8px 0; }
/* 实名认证：资料、双面证件和操作分区；帮助文字统一留在页面底部。 */
.card.identity-profile { max-width: 1040px; padding: 28px; }
.identity-profile .identity-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.identity-profile .identity-heading h2 { margin: 0; }
.identity-profile .identity-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.identity-profile .identity-fields .field { margin: 0; min-width: 0; }
.identity-profile .identity-cards { margin: 26px 0; }
.identity-profile .identity-card { padding: 20px; border: 1px solid #dce6f1; background: #fbfcff; }
.identity-document-title { display: flex; align-items: center; gap: 10px; }
.identity-preview-frame { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1px dashed #cbd8e8; border-radius: 10px; background: #f2f6fc; color: #6b819e; }
.identity-preview-frame .identity-preview { height: 100%; background: transparent; }
.identity-profile .identity-upload { margin: auto 0 0; }
.identity-profile input[type="file"] { background: white; width: 100%; }
.identity-profile .identity-actions { border-top: 1px solid #e4eaf2; padding-top: 20px; margin-top: 0; }
.identity-profile .identity-notes { margin: 24px 0 0; padding: 16px 20px; }
.identity-profile .identity-notes p { margin: 4px 0; font-size: 12px; line-height: 1.8; }
@media (max-width: 720px) {
  .card.identity-profile { padding: 20px 16px; }
  .identity-profile .identity-fields, .identity-profile .identity-cards { grid-template-columns: 1fr; }
  .identity-profile .identity-heading { align-items: flex-start; flex-direction: column; }
  .identity-profile .identity-actions { flex-wrap: wrap; }
}

/* 一组流程说明使用单一容器；金额摘要、错误和确认独立。 */
.guidance-notes p { margin: 5px 0; line-height: 1.8; }
.withdrawal-notes { margin: 18px 0 0; }

/* 客户中心手机布局独立限定；不覆盖员工、IB 或管理后台。 */
.client-menu-toggle { display: none; }
/* 管理侧栏只做导航分组，子项仍沿用现有权限过滤。 */
nav .nav-group { margin: 0 0 7px; }
nav button.nav-group-toggle { display:flex; justify-content:space-between; width:100%; margin:0; padding:11px 12px; color:#9bb3ca; font-size:12px; font-weight:600; background:transparent; border:0; box-shadow:none; }
nav .contains-current > .nav-group-toggle { color:#8fe0d3; }
nav .nav-group-items { padding-inline-start:8px; border-inline-start:1px solid #ffffff18; margin-inline-start:8px; }
nav .nav-group-items button { width:100%; font-size:13px; padding:10px 12px; }
nav .nav-group-items button.active { background:#244c6c; box-shadow:inset 3px 0 #75d6cb; font-weight:600; }
nav .nav-group-items button:focus-visible, nav .nav-group-toggle:focus-visible { outline:2px solid #75d6cb; outline-offset:-2px; }
/* 管理入口使用独立的深蓝金色登录视觉，业务页面共用权限控制。 */
.management-auth .auth-layout { grid-template-columns: 40% 60%; }
.management-auth .auth-brand { background: linear-gradient(145deg,#101d32,#25344b); }
.management-auth .auth-brand h1 { font-size: 48px; letter-spacing: 3px; }
.management-auth .brand-pill { border-color: #ab9363; color: #e1cfaa; }
.management-auth .online-dot { background: #cfb57c; }
.management-auth .auth-panel { background: #f5f6f9; }
.management-auth .auth-inner { background: white; border: 1px solid #e0e5ec; border-radius: 18px; padding: 38px; box-shadow: 0 16px 50px #13243c0c; max-width: 480px; }
.management-auth .auth-welcome-icon { background: #f5efe3; color: #94773e; }
.management-auth .primary { background: #213650; border-color: #213650; }
@media(max-width:720px) { .management-auth .auth-layout { display: block; } .management-auth .auth-inner { padding:24px; } }
@media (max-width: 720px) {
  /* 页面本身不做横向滚动；需要滚动的表格留在自己的容器内。
     clip 不创建额外滚动容器，避免 iOS 页面左右拖动露出空白。 */
  html:has(.client-portal), body:has(.client-portal) { overflow-x: clip; overscroll-behavior-x: none; }
  .client-portal { min-width: 0; width: 100%; max-width: 100%; overflow-x: clip; }
  .client-portal .trading-workspace, .client-portal .trading-summary, .client-portal .trading-summary > div { min-width: 0; max-width: 100%; }
  .client-portal .trading-workspace select { width: 100%; text-overflow: ellipsis; }
  .client-portal .trading-workspace .filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .client-portal .trading-workspace p { overflow-wrap: anywhere; }
  .client-portal .identity-fields select:disabled { opacity: 1; color: #52667f; background: #f2f5f8; }
  .client-portal > aside { position: relative; padding: 14px 16px; min-height: 0; }
  .client-portal .brand { padding: 0; max-width: 48%; }
  .client-portal .brand .official-logo-image { width: 136px; }
  .client-portal .brand small { display: none; }
  .client-portal .client-menu-toggle { display: flex; position: absolute; inset-inline-end: 12px; top: 10px; max-width: 48%; min-height: 44px; color: white; background: #224761; border: 0; gap: 8px; }
  .client-portal > aside nav { display: none; }
  .client-portal > aside.mobile-expanded nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; overflow: visible; padding: 12px 0 0; margin: 12px 0 0; }
  .client-portal nav button { width: 100%; min-height: 46px; white-space: normal; text-align: start; }
  .client-portal .shell { margin: 0 !important; min-width: 0; }
  .client-portal header { padding: 8px 12px; height: auto; min-height: 58px; flex-wrap: wrap; }
  .client-portal .header-right { margin-inline-start: auto; }
  .client-portal .language-switch > button { display: none; }
  .client-portal .language-select { min-height: 40px; max-width: 125px; font-size: 14px; }
  .client-portal main { padding: 18px 12px 30px; min-width: 0; }
  .client-portal .page-title { margin-bottom: 18px; }
  .client-portal .page-title h1 { font-size: 23px; }
  .client-portal .page-title p { font-size: 13px; line-height: 1.6; }
  .client-portal button { min-height: 44px; touch-action: manipulation; }
  .client-portal input:not([type="checkbox"]):not([type="radio"]),
  .client-portal select, .client-portal textarea { font-size: 16px; max-width: 100%; min-width: 0; }
  .client-portal .card, .client-portal .summary, .client-portal .metric { min-width: 0; }
  .client-portal .card { padding: 16px; }
  .client-portal .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-portal .metric strong { font-size: clamp(18px,5vw,24px); overflow-wrap: anywhere; }
  .client-portal .form-grid, .client-portal .identity-fields, .client-portal .identity-cards { grid-template-columns: minmax(0,1fr); }
  .client-portal .field, .client-portal .form-grid > * { min-width: 0; }
  .client-portal .account-toolbar, .client-portal .toolbar, .client-portal .overview-actions, .client-portal .dialog-actions { flex-wrap: wrap; gap: 8px; }
  .client-portal .record-filters { display: grid; grid-template-columns: minmax(0,1fr); }
  .client-portal .account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .client-portal .notice, .client-portal .error, .client-portal .profile-record, .client-portal .account-detail-summary { overflow-wrap: anywhere; }
  .client-portal .table-wrap { overflow-x: auto; max-width: 100%; }
  .client-portal .client-record-table { display: block; width: 100%; min-width: 0 !important; }
  .client-portal .client-record-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .client-portal .client-record-table tbody { display: block; }
  .client-portal .client-record-table tbody tr { display: block; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #dce6f1; border-radius: 12px; background: white; }
  .client-portal .client-record-table tbody td { display: block; width: auto !important; min-width: 0 !important; padding: 9px 0; border: 0; white-space: normal; text-align: start; overflow-wrap: anywhere; }
  .client-portal .client-record-table tbody td + td { border-top: 1px solid #f0f3f8; }
  .client-portal .client-record-table td[data-label] { position: relative; padding-inline-start: 104px; min-height: 42px; }
  .client-portal .client-record-table td[data-label]::before { content: attr(data-label); position: absolute; inset-inline-start: 0; top: 10px; width: 94px; color: #687d96; font-size: 12px; line-height: 1.6; }
  .client-portal .client-record-table td small, .client-portal .client-record-table td span { white-space: normal; }
  .client-portal .modal-backdrop { padding: 8px; align-items: center; }
  .client-portal .modal { width: 100%; max-width: 100%; padding: 18px 16px max(18px,env(safe-area-inset-bottom)); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; }
  .client-portal .modal-heading { gap: 8px; margin-bottom: 18px; }
  .client-portal .modal-heading h2 { font-size: 19px; }
  .client-portal .modal .dialog-actions { padding-top: 14px; }
  .client-portal .modal .dialog-actions button { flex: 1 1 auto; }
  .client-portal .modal .withdrawal-notes { margin-top: 16px; }
}
/* Customer account controls and finance records: separate navigation from actions. */
.account-purpose-tabs { display:inline-flex; padding:5px; border-radius:12px; background:#e9eef6; gap:4px; margin-bottom:16px; }
.account-purpose-tabs button { border:0; box-shadow:none; }
.account-open-toolbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.account-open-toolbar > span { color:#62748b; }
.account-policy { margin-inline-start:auto; }
.account-policy summary,.account-help summary { cursor:pointer; color:#5e718b; padding:10px; }
.account-policy[open] { flex-basis:100%; }
.account-policy .account-opening-policy { margin:4px 0; }
.account-state-tabs { margin:0; padding:12px 20px 0; border-bottom:1px solid #e4ebf4; gap:20px; }
.account-state-tabs button { border:0; border-radius:0; background:transparent; box-shadow:none; color:#667891; padding:12px 0; border-bottom:3px solid transparent; }
.account-state-tabs button.primary { background:transparent; color:#1556d9; border-bottom-color:#1556d9; }
.client-account-list td { vertical-align:top; }
.client-account-list th:first-child { width:25%; }
.client-account-list th:nth-child(2) { width:35%; }
.account-quick-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:flex-start; }
.account-more { min-width:80px; }
.account-more summary { cursor:pointer; padding:9px 12px; border:1px solid #d6e1ef; border-radius:8px; list-style:none; font-size:13px; }
.account-more summary::-webkit-details-marker { display:none; }
.account-more[open] { flex-basis:100%; }
.account-more-content { margin-top:8px; display:grid; gap:8px; padding:12px; border:1px solid #e1e8f2; border-radius:10px; background:#f8fafd; }
.account-meta { margin:0 0 4px; color:#62748b; overflow-wrap:anywhere; font-size:12px; }
.account-secret-panel .account-secret { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.account-secret-panel code { overflow-wrap:anywhere; white-space:normal; }
.account-more-content .account-close-action { color:#b73943; border-top:1px solid #edcdd0; margin-top:8px; }
.account-help { margin-top:16px; }
.finance-primary-actions { margin:18px 0; gap:12px; }
.finance-primary-actions button { min-width:120px; }
.finance-records-toolbar { padding:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.finance-records-toolbar h2 { margin:0; font-size:17px; }
.finance-records-toolbar label { display:flex; align-items:center; gap:12px; margin:0; }
.finance-records-toolbar select { min-width:160px; }
@media(max-width:720px) {
 .client-portal .account-purpose-tabs { display:flex; width:100%; box-sizing:border-box; }
 .client-portal .account-purpose-tabs button { flex:1; }
 .client-portal .account-open-toolbar > button { width:100%; }
 .client-portal .account-open-toolbar > span { font-size:13px; }
 .client-portal .account-policy { margin-inline-start:0; }
 .client-portal .account-state-tabs { padding:8px 12px 0; display:flex; }
 .client-portal .account-state-tabs button { flex:1; }
 .client-portal .account-quick-actions { width:100%; }
 .client-portal .account-quick-actions > button { flex:1; padding-inline:8px; }
 .client-portal .account-more { width:100%; }
 .client-portal .finance-metrics { display:grid; grid-template-columns:1fr 1fr; gap:0; background:white; border:1px solid #e0e8f3; border-radius:14px; overflow:hidden; }
 .client-portal .finance-metrics .metric { margin:0; border:0; box-shadow:none; border-radius:0; padding:16px; min-width:0; }
 .client-portal .finance-metrics .metric:first-child { grid-column:1/-1; padding-bottom:8px; }
 .client-portal .finance-metrics .metric:not(:first-child) strong { font-size:19px; }
 .client-portal .finance-primary-actions { display:flex; }
 .client-portal .finance-primary-actions button { flex:1; min-width:0; }
 .client-portal .finance-records-toolbar { padding:16px; flex-direction:column; align-items:stretch; }
 .client-portal .finance-records-toolbar label { justify-content:space-between; }
 .client-portal .finance-records-toolbar select { width:auto; flex:1; min-width:0; }
}
@media(max-width:720px) {
 .client-portal .client-account-list td[data-label] { padding-inline-start:0; padding-top:30px; }
 .client-portal .client-account-list td[data-label]::before { width:auto; top:6px; }
 .client-portal .client-account-list .account-more summary { min-height:44px; display:flex; align-items:center; box-sizing:border-box; }
}
/* Account metadata stays visible; actions open in the top layer, without resizing rows. */
.account-policy { flex-basis:100%; margin:0; }
.client-account-list th:first-child,.client-account-list th:nth-child(2) { width:auto; }
.client-account-list .account-server { max-width:220px; overflow-wrap:anywhere; }
.account-quick-actions { flex-wrap:nowrap; margin:0; }
.account-quick-actions > button { white-space:nowrap; }
.account-more-content[popover] { position:fixed; inset:auto; margin:0; width:220px; box-sizing:border-box; padding:8px; max-height:calc(100dvh - 24px); overflow:auto; background:#fff; box-shadow:0 12px 36px #102a4326; border:1px solid #dce5ef; border-radius:12px; gap:2px; }
.account-more-content[popover]:not(:popover-open) { display:none; }
.account-more-content[popover] button { border:0; border-radius:6px; background:transparent; text-align:start; padding:11px 12px; box-shadow:none; }
.account-more-content[popover] button:hover { background:#eef4fc; }
.account-more-content .account-close-action { border-top:1px solid #e7edf5 !important; border-radius:0; }
.account-menu-title { padding:8px 12px; font-size:13px; color:#62748b; }
.account-password-dialog { color:#14304a; border:0; border-radius:16px; padding:24px; width:460px; max-width:calc(100vw - 32px); max-height:85dvh; box-sizing:border-box; overflow:auto; }
.account-password-dialog::backdrop { background:#13294177; }
.account-password-dialog h2 { margin-top:0; font-size:18px; }
.account-password-dialog .account-secret { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.account-password-dialog .account-secret small { flex-basis:100%; }
.account-password-dialog code { overflow-wrap:anywhere; white-space:normal; }
@media(max-width:720px) {
 .client-portal .client-account-list tbody tr { position:relative; }
 .client-portal .client-account-list tbody td:nth-child(5) { position:absolute; inset-inline-end:12px; top:12px; padding:0; border:0; }
 .client-portal .client-account-list tbody td:nth-child(5)::before { display:none; }
 .client-portal .client-account-list tbody td:first-child { padding-inline-end:90px; }
 .client-portal .client-account-list .account-server { max-width:none; }
 .client-portal .account-quick-actions { flex-wrap:wrap; }
 .account-more-content[popover] { inset:auto 0 0 0 !important; width:100%; max-height:80dvh; border-radius:18px 18px 0 0; padding:12px 16px max(16px,env(safe-area-inset-bottom)); }
 .account-more-content[popover]::backdrop { background:#13294166; }
 .account-more-content[popover] button { min-height:48px; font-size:15px; }
}
.account-more-content[popover] button { justify-content:flex-start; }

/* Shared loading feedback and table footer. */
.loading-status{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:12px 0;color:#24538b;background:#edf4ff;border:1px solid #dce8fa;border-radius:10px;font-size:13px}
.loading-spinner{width:16px;height:16px;border:2px solid #c5d8f6;border-top-color:#1456d9;border-radius:50%;animation:request-spin .8s linear infinite;flex-shrink:0}
@keyframes request-spin{to{transform:rotate(360deg)}}
.loading-placeholder{padding:24px;background:#fff;border-radius:14px;border:1px solid #e0e8f2}
.loading-placeholder>div{height:44px;margin:12px 0;background:linear-gradient(90deg,#f0f4fa,#e5edf8,#f0f4fa);background-size:200% 100%;border-radius:8px;animation:request-shimmer 1.4s ease infinite}
@keyframes request-shimmer{to{background-position:-200% 0}}
.record-pagination{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;padding:16px 20px;margin:0;border-top:1px solid #e4ebf5;color:#537095;font-size:13px;box-sizing:border-box;width:100%}
.record-pagination>span:first-child{margin-right:auto}
.record-pagination label{display:flex;align-items:center;gap:8px;margin:0}
.record-pagination select{width:70px;min-width:0;padding:8px;border:1px solid #d8e3f2;border-radius:8px;background:#fff;color:inherit}
.pagination-navigation{display:flex;align-items:center;gap:12px}
.record-pagination button{min-height:36px;white-space:nowrap}
@media(max-width:600px){.record-pagination{gap:12px;padding:14px 12px}.pagination-navigation{width:100%;justify-content:flex-end}.record-pagination>span:first-child{margin-right:auto}}
@media(prefers-reduced-motion:reduce){.loading-spinner,.loading-placeholder>div{animation:none}}

.page-loading{position:fixed;top:72px;right:24px;z-index:90;max-width:calc(100vw - 48px);box-shadow:0 4px 16px #14375b18;pointer-events:none}
@media(max-width:600px){.page-loading{top:126px;right:12px;max-width:calc(100vw - 24px)}}