/* ── Profil Page ── */
    .profile-banner {
      background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-950) 100%);
      border-radius: var(--radius-xl);
      padding: 40px; position: relative; overflow: hidden;
      margin-bottom: 28px;
    }
    .profile-banner::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 10% 0%, rgba(0,198,255,.2) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 100%, rgba(124,58,237,.2) 0%, transparent 60%);
    }
    .profile-banner-inner {
      position: relative; z-index: 1;
      display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    }
    .profile-avatar-lg {
      width: 96px; height: 96px; border-radius: var(--radius-xl);
      background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.1));
      border: 2px solid rgba(255,255,255,.25);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: white;
      flex-shrink: 0; position: relative;
    }
    .profile-avatar-edit {
      position: absolute; bottom: -4px; right: -4px;
      width: 30px; height: 30px; border-radius: 50%;
      background: white; color: var(--blue-700);
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; border: 2px solid var(--blue-950); cursor: pointer;
    }
    .profile-banner-info { flex: 1; min-width: 200px; }
    .profile-banner-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .profile-banner-name h1 {
      font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800;
      color: white; letter-spacing: -0.5px;
    }
    .verified-chip {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(16,185,129,.18); color: #6ee7b7;
      border: 1px solid rgba(16,185,129,.35);
      font-size: .7rem; font-weight: 700;
      padding: 3px 10px; border-radius: var(--radius-full);
    }
    .profile-banner-role { color: rgba(255,255,255,.6); font-size: .875rem; margin-top: 4px; }
    .profile-banner-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
    .profile-banner-meta span {
      display: flex; align-items: center; gap: 6px;
      font-size: .78rem; color: rgba(255,255,255,.65);
    }
    .profile-banner-actions { position: relative; z-index: 1; }

    /* Left column cards */
    .profile-side-card {
      background: var(--card-bg); border: 1px solid var(--border-color);
      border-radius: var(--radius-xl); padding: 22px; margin-bottom: 20px;
      box-shadow: var(--shadow-sm);
    }
    .profile-side-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .profile-side-title i { color: var(--blue-600); }

    .mini-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: .82rem; border-bottom: 1px dashed var(--border-color); }
    .mini-stat-row:last-child { border-bottom: none; }
    .mini-stat-row span:first-child { color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
    .mini-stat-row span:last-child { font-weight: 700; color: var(--text-primary); }

    .badge-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .earned-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: var(--radius-full);
      font-size: .72rem; font-weight: 700;
      background: rgba(245,158,11,.1); color: var(--warning);
      border: 1px solid rgba(245,158,11,.25);
    }
    .earned-badge.blue   { background: rgba(33,150,243,.1); color: var(--blue-600); border-color: rgba(33,150,243,.25); }
    .earned-badge.purple { background: rgba(124,58,237,.1); color: var(--accent2); border-color: rgba(124,58,237,.25); }
    .earned-badge.green  { background: rgba(16,185,129,.1); color: var(--success); border-color: rgba(16,185,129,.25); }

    .profile-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
    @media (max-width: 1024px) { .profile-layout { grid-template-columns: 1fr; } }
    @media (max-width: 640px) { .profile-banner-inner { flex-direction: column; text-align: center; } .profile-banner-meta { justify-content: center; } }