/* 与门户共同视觉配合；沿用现有数据节点和响应式表格。 */
.header-inner { max-width: none; margin: 0; }
.center-shell { --center-sidebar-width: 226px; --center-header-height: var(--portal-header-height); width: 100%; max-width: none; margin: 0; gap: 0; padding: 0 0 72px; }
.center-sidebar { top: var(--center-header-height); left: 0; width: var(--center-sidebar-width); padding: 24px 16px 18px; border: 0; border-right: 1px solid var(--line); background: var(--surface-1); }
.center-nav { gap: 2px; min-height: 0; }
.center-nav button { position: relative; min-height: 35px; padding: 6px 12px; gap: 12px; border-radius: 6px; color: var(--text-4); font-size: 14px; font-weight: 500; line-height: 1.625; transition: background .15s ease, color .15s ease; }
.center-nav button:hover { color: var(--text-1); background: var(--surface-3); }
.center-nav button.active { color: var(--accent); background: var(--accent-soft-2); font-weight: 500; }
.center-nav button.active::before { content: none; }
.center-nav-icon { width: 16px; height: 16px; stroke-width: 1.5; }
.center-nav button[data-section="agreement"] { font-size: 13px; color: var(--text-4); border-top: 1px solid var(--line); padding-top: 14px; border-radius: 0; }
.center-nav #nav-logout { color: var(--text-4); margin-top: 2px; }
.center-nav #nav-logout:hover { color: var(--status-dead); background: var(--status-dead-bg); }
.center-main { width: 100%; max-width: none; margin-inline: 0; padding: 16px 24px 0; }
.center-menu-toggle, .center-menu-backdrop, .center-mobile-site-links { display: none; }
.center-head { margin-bottom: 24px; }
.center-head h1, .agreement-document h1 { max-width: none; margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.5px; }
.center-head h1 { display: flex; align-items: center; min-height: 36px; margin-bottom: 0; }
.center-head p { margin: 0; font-size: 14px; line-height: 1.625; color: var(--text-4); }
.center-section.active { animation: center-appear .2s ease both; }
.stat-grid { gap: 16px; margin-bottom: 24px; }
.stat-card { padding: 20px 24px; border-color: var(--line); border-radius: 8px; background: var(--surface-2); }
.stat-card .label { gap: 8px; font-size: 14px; font-weight: 400; color: var(--text-4); }
.stat-card .label svg { width: 15px; height: 15px; stroke-width: 1.5; }
.stat-card .value { margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -.6px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-row { gap: 14px; }
.stat-row .btn { min-height: 32px; padding: 5px 12px; font-size: 13px; margin-top: 12px; }
.stat-grid-3 .stat-card { padding: 20px 24px; }
.stat-grid-3 .value { font-size: 24px; }
.filter-bar { gap: 12px; margin: 24px 0 20px; }
.preset-group { gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-3); }
.preset { padding: 4px 12px; min-height: 28px; border-radius: 4px; color: var(--text-4); font-size: 13px; font-weight: 400; line-height: 20px; transition: color .15s ease, background .15s ease; }
.preset:hover { color: var(--text-1); }
.preset.active { color: var(--text-1); background: var(--surface-2); box-shadow: 0 1px 3px rgb(0 0 0 / 7%); font-weight: 500; }
.card { padding: 24px; margin-bottom: 24px; border-color: var(--line); border-radius: 8px; }
.card-title { margin-bottom: 20px; color: var(--text-1); font-size: 14px; font-weight: 500; }
.chart { height: 200px; gap: 12px; padding: 12px 4px 0; }
.chart-bar { width: 55%; max-width: 30px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 66%, var(--surface-2)); }
.chart-date { font-size: 12px; color: var(--text-4); }
.chart-empty { font-size: 12px; }
.table-scroll { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
table.data { color: var(--text-4); font-size: 14px; line-height: 1.625; }
table.data th { background: var(--surface-2); color: var(--text-4); font-size: 14px; font-weight: 500; }
table.data th, table.data td { padding: 10px 16px; border-color: var(--line); }
table.data tbody tr { transition: background .15s ease; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--tint-1); }
.pager { justify-content: flex-end; gap: 12px; margin-top: 16px; color: var(--text-4); font-size: 13px; }
.pager .btn { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.amt-credit, .amt-debit { font-weight: 500; }
.card.kv-card { padding: 10px 20px; }
.kv-row { min-height: 42px; gap: 12px; border-color: var(--line-soft); }
.kv-label { color: var(--text-4); font-size: 14px; }
.kv-value { border-radius: 6px; font-size: 13px; }
.calls-heading { margin: 30px 0 14px; }
.calls-heading h2 { font-size: 16px; font-weight: 500; }
#call-table th, #call-table td { padding: 12px 16px; }
#call-table { font-size: 14px; }
.call-main { color: var(--text-2); line-height: 1.625; }
.call-sub { margin-top: 4px; font-size: 12px; line-height: 1.625; color: var(--text-4); }
.call-flow { padding: 1px 6px; border-radius: 4px; font-size: 11px; line-height: 18px; }
.tag { padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 400; line-height: 18px; }
@container (max-width: 600px) {
  #call-table .call-row { gap: 12px 16px; padding: 16px 0; }
  #call-table .call-row td[data-label]::before { margin-bottom: 4px; font-size: 12px; }
}
.pkg-grid { gap: 16px; }
.pkg-card { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; }
.pkg-card:hover { border-color: var(--border-input-hover); box-shadow: var(--shadow-hover); }
.pkg-card .pkg-amount, .pkg-card .pkg-points, .pkg-card .pkg-points strong { font-weight: 500; }
.pay-tab { min-height: 32px; padding: 5px 16px; border-radius: 6px; color: var(--text-4); font-size: 14px; }
.pay-tab.active { border-color: var(--line-strong); color: var(--text-1); background: var(--surface-3); }
.pay-tabs[hidden], .pay-tab[hidden] { display: none; }
.form-row input, .ticket-filter select, .ticket-form input, .ticket-form textarea { border-radius: 6px; border-color: var(--border-input); background: var(--surface-2); }
.info-list { font-size: 14px; }
.info-label { font-size: 13px; }
.info-value { font-size: 14px; }
.community-card, .community-state { border-radius: 8px; }
.community-type { font-size: 14px; font-weight: 500; }
.community-value { font-size: 14px; }
.community-icon, .ticket-state-icon { background: var(--surface-3); color: var(--text-3); border-radius: 7px; }
.community-copy { min-height: 32px; border-radius: 6px; font-size: 13px; }
.ticket-list-subject { font-size: 14px; font-weight: 500; }
.ticket-list-time { font-size: 12px; }
.ticket-panel-title { font-size: 16px; font-weight: 500; }
.ticket-form input, .ticket-form textarea { font-size: 14px; }
.ticket-message { border-radius: 7px; }
.agreement-document { padding: 28px 32px; border-radius: 8px; }
.agreement-content { font-size: 14px; line-height: 1.9; }
.agreement-confirmation { border-radius: 7px; box-shadow: 0 2px 10px rgb(0 0 0 / 4%); }
#auth-gate { padding: 28px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 8px; }
.app-embedded .center-shell { --center-header-height: 0px; }

@keyframes center-appear { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) {
  .center-shell { --center-sidebar-width: 196px; padding-right: 0; }
  .center-main { padding: 16px 24px 0; }
  .stat-card { padding: 20px; }
}
@media (max-width: 760px) {
  body { min-width: 0; }
  .center-shell { --center-sidebar-width: 52px; padding: 0 0 48px; }
  html:not(.app-embedded) .center-shell { grid-template-columns: minmax(0, 1fr); }
  html:not(.app-embedded) .center-main { grid-column: 1; padding: 16px 12px 0; }
  .site-header .header-inner { padding-inline-start: 54px; padding-inline-end: 12px; gap: 8px; }
  .site-header nav, .site-header .brand span, .site-header .account-center-email { display: none; }
  .center-menu-toggle { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 6px; background: transparent; color: var(--text-1); cursor: pointer; }
  .center-menu-toggle:hover, .center-menu-toggle[aria-expanded="true"] { background: var(--surface-3); }
  .center-menu-backdrop:not([hidden]) { position: fixed; z-index: 9; inset: var(--center-header-height) 0 0; display: block; background: rgb(0 0 0 / 30%); }
  html:not(.app-embedded) .center-sidebar { flex-direction: column; width: min(280px, calc(100vw - 32px)); padding: 12px; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(-100%); transition: transform .18s ease, visibility .18s; }
  html:not(.app-embedded) .center-shell[data-menu-open] .center-sidebar { visibility: visible; transform: translateX(0); }
  html:not(.app-embedded) .center-nav { flex: none; }
  html:not(.app-embedded) .center-nav button { flex: none; justify-content: flex-start; min-height: 44px; padding: 8px 12px; border-radius: 6px; }
  html:not(.app-embedded) .center-nav button > span:not(.nav-badge) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  html:not(.app-embedded) .center-nav .nav-badge { position: static; margin-inline-start: auto; }
  .center-mobile-site-links { display: flex; flex-wrap: wrap; min-height: 0; gap: 12px; padding: 0 12px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
  .center-mobile-site-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-3); }
  .app-embedded .center-mobile-site-links { display: none; }
  .center-sidebar { left: 0; padding: 14px 0 12px; }
  .center-nav { gap: 3px; }
  .center-nav button { min-height: 44px; padding: 10px 0; border-radius: 0; }
  .center-nav-icon { width: 18px; height: 18px; }
  .center-nav button[data-section="agreement"] { padding-top: 10px; }
  .center-main { padding: 20px 18px 0; }
  .center-head { margin-bottom: 22px; }
  .center-head h1, .agreement-document h1 { font-size: 20px; }
  .center-head p { font-size: 14px; }
  .stat-grid { gap: 12px; margin-bottom: 20px; }
  .stat-card, .stat-grid-3 .stat-card { padding: 18px; }
  .stat-card .value { font-size: 24px; }
  .stat-grid-3 .value { font-size: 24px; }
  .card { padding: 18px; margin-bottom: 20px; }
  .filter-bar { margin-top: 22px; }
  .chart { height: 170px; gap: 7px; }
  .preset { min-height: 36px; padding-inline: 10px; }
  .pager { gap: 8px; flex-wrap: wrap; }
  .pager .btn { min-height: 40px; }
  .community-copy { min-height: 44px; }
  .ticket-form input, .ticket-form textarea, .ticket-filter select { font-size: 16px; }
  .agreement-document { padding: 20px 14px; }
  .agreement-content { font-size: 15px; }
  .agreement-confirmation label { font-size: 14px; }
  .kv-label { width: 100%; }
  .table-scroll:has(> .center-card-table) { overflow: visible; border: 0; background: transparent; }
  table.data.center-card-table, .center-card-table tbody { display: block; width: 100%; }
  :is(#ledger-table, #keys-table, #orders-table).center-card-table { min-width: 0; }
  .center-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.data.center-card-table tbody tr, #call-table.center-card-table .call-row {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
    margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
  }
  :is(#ledger-table, #keys-table, #call-table, #orders-table, #messages-table).center-card-table tbody tr td {
    display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere;
  }
  .center-card-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-4); font-size: 12px; font-weight: 400; }
  .center-card-table td:first-child { color: var(--text-1); font-weight: 500; }
  .center-card-table .btn.sm { min-height: 36px; margin-top: 4px; }
  #keys-table.center-card-table .key-cell-text, #messages-table.center-card-table .msg-title { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .center-main { padding-inline: 12px; }
  .stat-grid-2, .stat-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .stat-card, .stat-grid-3 .stat-card, .card { padding: 16px; }
  .center-head h1 { font-size: 20px; }
}
@media (max-height: 600px) {
  .center-sidebar { padding-top: 4px; padding-bottom: 4px; }
  .center-nav { gap: 0; }
  .center-nav button { flex: 1 1 0; min-height: 0; padding-top: 0; padding-bottom: 0; line-height: 1.1; }
  .center-nav button[data-section="agreement"] { padding-top: 0; }
}