.main-content:has(.profile-page) { background: var(--activities-canvas-background); }
.profile-page { margin: 0 auto; max-width: 1139px; min-height: 100%; padding: 32px clamp(32px, 27.35vw, 311.5px) 40px; }
.profile-tabs { background: var(--surface-background); border: 1px solid var(--border-faint); border-radius: 8px; display: grid; gap: 4px; grid-template-columns: repeat(4, 1fr); padding: 4px; }
.profile-tabs button, .profile-back { background: transparent; border: 0; color: var(--text-subtle); cursor: pointer; font-family: var(--font-display); font-size: 11px; min-height: 29px; }
.profile-tabs button.is-active { background: #181b22; border-radius: 6px; color: var(--text-primary); }
.profile-back { margin-top: 20px; padding: 0; text-align: left; }
.profile-heading { margin-top: 24px; }.profile-heading h1 { color: var(--text-primary); font-family: var(--font-display); font-size: 32px; line-height: 1; margin: 0; }.profile-heading p, .profile-help { color: var(--text-subtle); font-family: var(--font-display); font-size: 12px; margin: 6px 0 0; }.profile-eyebrow, .profile-section h2, .profile-delete-warning h2 { color: var(--text-subtle); display: block; font-family: var(--font-display); font-size: 10px; font-weight: 400; letter-spacing: .26em; margin: 0 0 12px; }
.profile-identity { align-items: center; display: flex; gap: 20px; margin-top: 32px; }.profile-avatar { align-items: center; background: linear-gradient(135deg, var(--accent-yellow), #c99000); border-radius: 50%; color: #0b0c0f; display: flex; font-family: var(--font-display); font-size: 20px; font-weight: 700; height: 56px; justify-content: center; width: 56px; }.profile-identity div { flex: 1; }.profile-identity strong { font-family: var(--font-display); font-size: 24px; }.profile-identity b { border: 1px solid rgb(232 184 10 / 30%); border-radius: 999px; color: var(--accent-yellow); font-family: var(--font-display); font-size: 12px; padding: 6px 10px; }
.profile-progress { margin-top: 20px; }.profile-progress p { color: var(--text-muted); display: flex; font-family: var(--font-display); font-size: 12px; justify-content: space-between; margin: 0; }.profile-progress p span:last-child { font-family: var(--font-mono); }.profile-progress > div { background: #181b22; border-radius: 999px; height: 5px; margin-top: 8px; overflow: hidden; }.profile-progress i { background: var(--accent-yellow); border-radius: inherit; box-shadow: 0 0 12px rgb(232 184 10 / 40%); display: block; height: 100%; }
.profile-section { margin-top: 40px; }.profile-card, .profile-delete-warning { background: var(--surface-background); border: 1px solid var(--border-faint); border-radius: var(--radius-card); overflow: hidden; }.profile-stats { margin: 0; }.profile-stats div { border-bottom: 1px solid var(--border-faint); display: flex; font-family: var(--font-display); font-size: 14px; justify-content: space-between; padding: 10px 0; }.profile-stats div:last-child { border: 0; }.profile-stats dt { color: var(--text-muted); }.profile-stats dd { color: var(--text-primary); font-weight: 600; margin: 0; }.profile-stats div:first-child dd { color: var(--accent-yellow); }
.profile-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--border-faint); color: var(--text-primary); cursor: pointer; display: flex; font-family: var(--font-display); justify-content: space-between; min-height: 45px; padding: 12px 16px; text-align: left; width: 100%; }.profile-row:last-child { border: 0; }.profile-row span { display: grid; gap: 2px; }.profile-row strong { font-size: 14px; }.profile-row small { color: var(--text-subtle); font-size: 12px; }.profile-row.is-danger strong { color: #ff6467; }.profile-danger { background: rgb(248 113 113 / 3%); border-color: rgb(248 113 113 / 14%); }
.passkey-list { display: grid; gap: 8px; margin-top: 24px; }.passkey-row { align-items: center; background: var(--surface-background); border: 1px solid var(--border-faint); border-radius: var(--radius-card); display: flex; gap: 16px; min-height: 72px; padding: 16px; }.passkey-row div { display: grid; flex: 1; gap: 3px; }.passkey-row strong { font-family: var(--font-display); font-size: 14px; }.passkey-row small { color: var(--text-subtle); font-family: var(--font-display); font-size: 11px; }.passkey-row button { background: transparent; border: 0; color: var(--text-subtle); cursor: pointer; font-family: var(--font-display); }
.profile-ghost-button, .profile-danger-button { background: transparent; border: 1px solid var(--border-faint); border-radius: var(--radius-card); color: var(--text-muted); cursor: pointer; display: block; font-family: var(--font-display); font-size: 14px; height: 46px; margin-top: 12px; width: 100%; }.profile-danger-button { border-color: rgb(248 113 113 / 22%); color: rgb(248 113 113 / 85%); }.profile-danger-button:disabled { cursor: not-allowed; opacity: .45; }
.profile-delete-warning { margin-top: 24px; padding: 16px 12px; }.profile-delete-warning ul { color: var(--text-muted); font-family: var(--font-display); font-size: 14px; line-height: 2; list-style: none; margin: 0; padding: 0; }.profile-delete-warning li::before { color: #ff6467; content: "•"; margin-right: 10px; }.profile-check { align-items: start; color: var(--text-muted); display: flex; font-family: var(--font-display); font-size: 14px; gap: 12px; margin-top: 26px; }.profile-check input { accent-color: var(--accent-yellow); height: 20px; width: 20px; }.profile-message, .profile-loading { background: var(--surface-background); border: 1px solid var(--border-faint); border-radius: var(--radius-card); color: #ff9a9a; font-family: var(--font-mono); margin: 24px 0 0; padding: 20px; }.profile-loading { color: var(--text-muted); }.profile-step-up { margin-top: 24px; }.profile-step-up label { color: var(--text-muted); display: grid; font-family: var(--font-display); font-size: 14px; gap: 8px; }.profile-step-up input { background: #181b22; border: 1px solid var(--border-faint); border-radius: 8px; color: var(--text-primary); padding: 12px; }
@media (max-width: 700px) { .profile-page { padding: 20px; }.profile-tabs button { font-size: 9px; }.profile-identity strong { font-size: 20px; }.profile-stats div { gap: 16px; }.profile-stats dd { text-align: right; } }