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.625rem 0.9375rem; padding-bottom: 3.125rem; } .card { background-color: #fff; border-radius: 0.625rem; padding: 0.9375rem; margin-bottom: 0.9375rem; } .section-header { display: flex; align-items: center; margin-bottom: 0.9375rem; } .orange-bar { width: 0.25rem; height: 1rem; background-color: #FF5722; border-radius: 0.125rem; margin-right: 0.5rem; } .section-title { font-size: 1rem; font-weight: bold; color: #333; flex: 1; } .tag-green { font-size: 0.75rem; color: #4CAF50; background-color: #E8F5E9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .tag-orange { font-size: 0.75rem; color: #FF9800; background-color: #FFF3E0; padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .tag-red { font-size: 0.75rem; color: #F44336; background-color: #FFEBEE; padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .tag-gray { font-size: 0.75rem; color: #999; background-color: #F5F5F5; padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .info-row { display: flex; justify-content: space-between; margin-bottom: 0.625rem; } .label { font-size: 0.875rem; color: #999; } .value { font-size: 0.875rem; color: #333; font-weight: 500; } .id-card-row { display: flex; justify-content: space-between; margin-top: 0.625rem; } .id-card-box { width: 48%; height: 5.625rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .green-bg { background-color: #E8F5E9; } .id-text { font-size: 1.125rem; color: #4CAF50; font-weight: bold; } .corner-tag { position: absolute; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 0.625rem; padding: 0.125rem 0.3125rem; border-top-left-radius: 0.25rem; } .tags-row { display: flex; flex-wrap: wrap; } .service-tag { background-color: #FFF3E0; color: #FF9800; font-size: 0.8125rem; padding: 0.3125rem 0.9375rem; border-radius: 0.9375rem; margin-right: 0.625rem; margin-bottom: 0.625rem; } .sub-title { font-size: 0.875rem; color: #666; margin-top: 0.3125rem; margin-bottom: 0.625rem; display: block; } .cert-row { display: flex; flex-wrap: wrap; margin-bottom: 0.625rem; } .cert-box { width: 5.625rem; height: 5.625rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; margin-right: 0.625rem; margin-bottom: 0.625rem; } .yellow-bg { background-color: #FFF8E1; } .blue-bg { background-color: #E3F2FD; } .green-light-bg { background-color: #F1F8E9; } .cert-text { font-size: 1rem; font-weight: bold; } .cert-text.orange { color: #FFA000; } .cert-text.blue { color: #2196F3; } .cert-text.green { color: #8BC34A; } .id-card-img, .cert-img { width: 100%; height: 100%; border-radius: 0.375rem; } .empty-text { font-size: 0.8125rem; color: #999; } .bottom-btn-area { margin-top: 1.25rem; text-align: center; } .action-btn { background-color: #fff; color: #FF5722; border: 1px solid #FF5722; font-size: 1rem; border-radius: 1.375rem; height: 2.75rem; line-height: 2.75rem; } .action-btn.disabled { background-color: #F5F5F5; color: #999; border: 1px solid #E0E0E0; } .tips { display: block; font-size: 0.75rem; color: #999; margin-top: 0.625rem; }