.copyWrap { display: inline-flex; align-items: center; } .copyableText, .temporaryLinkCell { display: grid; min-width: 0; align-items: center; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) var(--control-height); } .copyableText > span:first-child, .temporaryLinkCell > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .identity { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-3); } .avatar { display: inline-flex; width: 32px; height: 32px; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card-strong); color: var(--text-tertiary); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .identityText { display: inline-flex; min-width: 0; flex-direction: column; gap: 2px; } .identityId, .identityName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .identityId { color: var(--text-primary); font-weight: 700; } .identityName { color: var(--text-tertiary); font-size: var(--admin-font-size); } .toolbarActions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } .paymentTabsBar { flex: 0 0 auto; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-card); } .paymentEmbedded { display: flex; min-height: 0; flex: 1; flex-direction: column; } .thirdPartyLayout { display: grid; flex: 1; min-height: 0; overflow: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; gap: var(--space-4); grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } .channelList, .methodPanel { min-width: 0; } .channelList { display: flex; min-height: 0; flex-direction: column; gap: var(--space-2); overflow: auto; padding: var(--space-4) 0 var(--space-4) var(--space-4); } .channelRow { display: grid; width: 100%; min-height: 72px; flex: 0 0 auto; align-items: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer; gap: var(--space-2); grid-template-columns: 24px minmax(0, 1fr) auto; text-align: left; } .channelRow:hover, .channelRowActive { border-color: var(--primary-border); background: var(--active-surface); } .channelExpandIcon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); } .channelText { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .channelText span:first-child { overflow: hidden; color: var(--text-primary); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; } .channelText span:last-child { color: var(--text-tertiary); font-size: var(--admin-font-size); } .methodPanel { display: flex; min-height: 0; flex-direction: column; gap: var(--space-4); overflow: auto; padding: var(--space-4) var(--space-4) var(--space-4) 0; } .methodGroup { flex: 0 0 auto; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; overflow-y: hidden; background: var(--bg-card); } .methodGroupHeader { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-primary); font-weight: 720; } .methodGroupHeader span:last-child { color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 600; } .methodTable { display: grid; min-width: 760px; } .methodHeader, .methodRow { display: grid; align-items: center; gap: var(--space-3); grid-template-columns: minmax(180px, 1.1fr) 120px 100px minmax(220px, 0.9fr) 104px; } .methodHeader { min-height: 42px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-tertiary); font-size: var(--admin-font-size); font-weight: 720; } .methodRow { min-height: 64px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .methodRow:last-child { border-bottom: 0; } .methodName { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .methodIdentity { display: grid; min-width: 0; align-items: center; gap: var(--space-3); grid-template-columns: 56px minmax(0, 1fr); } .methodLogo, .methodLogoFallback { width: 56px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card-strong); } .methodLogo { display: block; object-fit: contain; } .methodLogoFallback { display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 12px; font-weight: 800; } .methodName strong, .methodName small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .methodName small { color: var(--text-tertiary); font-size: var(--admin-font-size); } .rateEditor { display: grid; align-items: center; gap: var(--space-2); grid-template-columns: minmax(96px, 1fr) auto; } .statusActive, .statusDisabled { display: inline-flex; min-width: 56px; height: 26px; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-size: 12px; font-weight: 720; } .statusActive { background: var(--success-surface); color: var(--success); } .statusDisabled { background: var(--bg-subtle); color: var(--text-tertiary); } .emptyMethods { display: flex; min-height: 280px; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-tertiary); } @media (max-width: 960px) { .thirdPartyLayout { grid-template-columns: 1fr; } .channelList { padding: var(--space-4) var(--space-4) 0; } .methodPanel { padding: 0 var(--space-4) var(--space-4); } }