* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body { background: #f0f0f0; color: #333; -webkit-tap-highlight-color: transparent; }
.container { padding-bottom: 60px; min-height: 100vh; background: #f0f0f0; }
.header { background: #fff; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 10; }
.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: #fff; border-top: 1px solid #ddd; display: flex; z-index: 10; }
.footer-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: #666; border: none; background: none; cursor: pointer; }
.footer-tab.active { color: #0056b3; font-weight: bold; }
.footer-tab svg { width: 24px; height: 24px; margin-bottom: 2px; }
.p-4 { padding: 16px; }
.mb-4 { margin-bottom: 16px; }
.card { background: #fff; border: 1px solid #ddd; padding: 16px; margin-bottom: 16px; }
.btn { background: #0056b3; color: #fff; border: none; padding: 12px; width: 100%; font-size: 16px; font-weight: bold; text-align: center; display: block; cursor: pointer; }
.input { width: 100%; padding: 12px; border: 1px solid #ccc; margin-bottom: 16px; font-size: 16px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #ccc; }
.avatar-lg { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.text-center { text-align: center; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; color: #666; }
.font-bold { font-weight: bold; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.action-btn { background: #fff; border: 1px solid #ddd; padding: 8px; display: flex; flex-direction: column; align-items: center; font-size: 10px; cursor: pointer; }
.action-btn svg { width: 20px; height: 20px; margin-bottom: 4px; }
.horizontal-scroll { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px; }
.match-card { min-width: 120px; background: #fff; border: 1px solid #ddd; padding: 12px; text-align: center; cursor: pointer; }
.match-card img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 8px; object-fit: cover; }
.list-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ddd; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.list-item img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.list-item-content { flex: 1; }
.profile-hero { width: 100%; height: 300px; object-fit: cover; }
.action-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: #fff; border-top: 1px solid #ddd; display: flex; z-index: 10; }
.action-footer button { flex: 1; border: none; background: #fff; border-right: 1px solid #ddd; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.action-footer button:last-child { border-right: none; color: #d32f2f; }
.text-blue { color: #0056b3; }
.edit-list-item { display: flex; justify-content: space-between; padding: 16px; border-bottom: 1px solid #eee; background: #fff; cursor: pointer; }
.icon-btn { background: none; border: none; padding: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }