/* Basic reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    :root{
      --bg: linear-gradient(45deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4);
      --card: #fff;
      --muted: #6b7280;
      --accent: linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
      --shadow: 0 6px 18px rgba(16,24,40,0.08);
      --radius: 12px;
      --gap: 16px;
    }

    .Container{
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: var(--bg);
      color: #0f172a;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    
    .profile-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      width: min(720px, 96%);
      padding: 20px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--gap);
      align-items: center;
      z-index: 1;
    }
    .profile-card img {
        height: 7rem;
        width: auto;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: var(--shadow);
    }
    /* Avatar */
    .avatar {
      width: auto;
      height: 105px;
      border-radius: 50%;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 28px;
      flex-shrink: 0;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

    /* user info (name + handle + follow button) */
    .user-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .user-top {
      display:flex;
      align-items:center;
      gap: 12px;
      justify-content: space-between;
    }

    .user-name {
      display:flex;
      flex-direction: column;
    }
    .user-name .name {
      font-size: 1.05rem;
      font-weight: 600;
    }
    .user-name .handle {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .follow-btn {
      background: transparent;
      border: 1px solid #e6e9ef;
      padding: 8px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
    }
    .follow-btn:focus { outline: 3px solid rgba(99,102,241,0.12); }

    /* stats row */
    .stats {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .stat {
      background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
      padding: 12px;
      border-radius: 10px;
      text-align: center;
      transition: transform .15s cubic-bezier(.2,.9,.2,1), box-shadow .15s;
      cursor: default;
    }
    .stat:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(2,6,23,0.06); }
    .stat .num {
      font-size: 1.1rem;
      font-weight: 700;
    }
    .stat .label {
      font-size: 0.77rem;
      color: var(--muted);
      margin-top: 6px;
    }

    /* small screens: avatar centered on top */
    @media (max-width:560px){
      .profile-card {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .user-top { flex-direction: column; gap: 8px; align-items: center; }
      .user-info { align-items: center; }
      .stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
      .avatar { width: 88px; height: 88px; font-size: 26px; }
    }