body { background-color: #F8F8F8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .custom-header { position: fixed; top: 0; left: 0; width: 100%; height: 2.75rem; padding-top: var(--status-bar-height); background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding-left: 0.9375rem; padding-right: 0.9375rem; box-sizing: content-box; z-index: 100; } .header-placeholder { height: calc(2.75rem + var(--status-bar-height)); } .back-icon { width: 1.25rem; height: 1.25rem; } .header-title { font-size: 0.875rem; font-weight: bold; color: #333; } .header-right { width: 1.25rem; } .container { padding: 0.9375rem; } .bank-card { background: linear-gradient(135deg, #E53935, #C62828); border-radius: 0.625rem; padding: 1.25rem; color: #fff; margin-bottom: 1.875rem; position: relative; overflow: hidden; box-shadow: 0 0.3125rem 0.9375rem rgba(229, 57, 53, 0.3); } .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.875rem; position: relative; z-index: 2; } .bank-info { display: flex; align-items: center; } .bank-icon-circle { width: 1.875rem; height: 1.875rem; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 0.625rem; } .bank-icon-text { color: #C62828; font-weight: bold; font-size: 1rem; } .bank-name { font-size: 1rem; font-weight: bold; } .card-type { font-size: 0.75rem; border: 1px solid rgba(255,255,255,0.6); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .card-number { font-size: 1.5rem; font-family: monospace; letter-spacing: 0.125rem; position: relative; z-index: 2; text-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.2); } .card-bg-circle { position: absolute; top: -1.5625rem; right: -1.5625rem; width: 9.375rem; height: 9.375rem; background-color: rgba(255,255,255,0.1); border-radius: 50%; z-index: 1; } .action-btn { background-color: #FF5722; color: #fff; font-size: 1rem; border-radius: 1.375rem; height: 2.75rem; line-height: 2.75rem; margin-bottom: 0.9375rem; } .security-tip { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #999; } .shield-icon { width: 0.75rem; height: 0.75rem; margin-right: 0.3125rem; }