:root{ --panel-max-width: 560px; }

    html,body{height:100%;}
    body {
      margin: 0;
      font-family: 'Montserrat', sans-serif;
      background: url('background.png') center/cover no-repeat fixed;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    #overlay {
      position: fixed;
      inset: 0;
      background: rgba(30, 30, 30, 0.9);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      cursor: pointer;
      z-index: 999;
      transition: opacity 0.7s ease;
    }
    #overlay.fade-out { opacity: 0; pointer-events: none; }

    .profile {
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 22px;
      padding: 3.5rem;
      text-align: center;
      width: min(92%, var(--panel-max-width));
      color: #fff;
      box-shadow: 0 18px 40px rgba(0,0,0,0.45);
      transform: translateY(200px);
      opacity: 0;
      transition: transform 0.7s cubic-bezier(.22,.9,.23,1), opacity 0.7s ease;
      will-change: transform, opacity;
      pointer-events: none;
    }
    .profile.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

    .profile img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 3px solid rgba(255,255,255,0.06); }
    .name { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.7rem; }
    .username { font-size: 1.05rem; opacity: 0.92; margin-bottom: 1.4rem; }

    .socials { display:flex; justify-content:center; gap:1.1rem; margin-top:1rem; flex-wrap:wrap; }
    .socials a {
      color: #fff;
      font-size: 1.8rem;
      text-decoration: none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px; height:44px; border-radius:10px;
      transition: transform 0.15s ease, background 0.15s ease;
      position: relative;
    }
    .socials a:hover { transform: scale(1.12); background: rgba(255,255,255,0.03); }

    #copyToast {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 32px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 10px 16px;
      border-radius: 10px;
      font-size: 0.95rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 150ms ease, transform 150ms ease;
      z-index: 2000;
      box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    }
    #copyToast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-6px); }

    @media (max-width:480px){
      .profile{ padding:2rem; }
      .name{ font-size:1.6rem; }
      .profile img{ width:100px; height:100px; }
    }