/* profile.css - profile page - split from index.html */

        /* ── PROFILE PAGE ── */
        .profile-page { max-width: 700px; margin: 0 auto; padding-bottom: 80px; }
        .profile-card-box {
            background: var(--bg2); border: 1px solid var(--card-border);
            border-radius: 18px; padding: 40px;
        }
        .profile-card-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
        .profile-login-hint {
            background: var(--bg3); border-left: 3px solid var(--red);
            border-radius: 0 10px 10px 0; padding: 16px 20px;
            font-size: 14px; color: var(--muted); line-height: 1.7;
        }
        .flex-user { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
        .user-details p { font-size: 14px; color: #ccc; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
        .user-details p i { color: var(--red); width: 16px; }
        /* Profile card */
        .profile-card {
            background: var(--bg2); border: 1px solid var(--card-border);
            border-radius: 18px; padding: 32px; transition: all var(--transition);
        }
        .flex-user {
            display:flex; align-items:center; gap:20px; flex-wrap:wrap;
            background: var(--bg3); padding: 18px; border-radius: 12px;
            border: 1px solid var(--card-border);
        }