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


    .page-profile {
      max-width: 100%;
      margin: auto;
    }

    .title-profile {
      margin-bottom: 30px;
    }

    .title-profile span {
      color: #ff4fa3;
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
    }

    .title-profile h1 {
      font-size: 42px;
      margin: 10px 0;
    }

    .title-profile p {
      color: #c9c9d6;
      max-width: 620px;
      line-height: 1.6;
    }

    .settings-layout-profile {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 24px;
    }

    .sidebar-profile,
    .card-profile {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 24px;
      backdrop-filter: blur(18px);
      box-shadow: 0 20px 50px rgba(0,0,0,.25);
    }

    .sidebar-profile {
      padding: 18px;
      height: fit-content;
    }

    .profile-mini-profile {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px;
      margin-bottom: 18px;
    }

    .avatar-profile {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff4fa3, #7c5cff);
      display: grid;
      place-items: center;
      font-size: 22px;
      font-weight: 800;
    }

    .profile-mini-profile small { color: #bdbdd0; }

    .tab-profile {
      width: 100%;
      border: 0;
      background: transparent;
      color: #d9d9e8;
      text-align: left;
      padding: 14px 16px;
      border-radius: 15px;
      cursor: pointer;
      font-size: 15px;
      margin-bottom: 6px;
    }

    .tab-profile.active,
    .tab-profile:hover {
      background: rgba(255,79,163,.16);
      color: #fff;
    }

    .card-profile {
      padding: 28px;
      display: none;
    }

    .card-profile.active { display: block; }

    .card-profile h2 {
      font-size: 26px;
      margin-bottom: 8px;
    }

    .card-profile > p {
      color: #bdbdd0;
      margin-bottom: 24px;
    }

    .form-grid-profile {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

     .form-grid-admin {
      display: grid;
      grid-template-columns: repeat(1,1fr);
      gap: 18px;
    }

    .field-profile {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .field-profile.full { grid-column: 1 / -1; }

    label {
      font-size: 14px;
      color: #d8d8e6;
    }

    .form-control{
      width: 100%;
      padding: 15px 15px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.25);
      color: #fff;
      outline: none;
      font-size: 15px;
    }

   

    .form-control:focus {
      border-color: #ff4fa3;
      box-shadow: 0 0 0 3px rgba(255,79,163,.18);
    }

    .switch-row-profile {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .switch-row-profile p {
      color: #aaaabd;
      margin-top: 5px;
      font-size: 14px;
    }

    .switch-profile input {
      width: 48px;
      height: 26px;
      accent-color: #ff4fa3;
      cursor: pointer;
    }

    .actions-profile {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 28px;
    }

    .btn-profile {
      border: 0;
      padding: 14px 22px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 700;
    }

    .btn-secondary-profile {
      background: rgba(255,255,255,.1);
      color: #fff;
    }

    .btn-primary-profile {
      background: linear-gradient(135deg, #ff4fa3, #7c5cff);
      color: #fff;
      box-shadow: 0 12px 28px rgba(255,79,163,.28);
    }

    .danger-profile {
      border: 1px solid rgba(255,70,90,.35);
      background: rgba(255,70,90,.08);
      padding: 20px;
      border-radius: 18px;
      margin-top: 20px;
    }

    .danger-profile h3 { color: #ff6b7a; }

    @media (max-width: 850px) {
      header { flex-direction: column; gap: 15px; }
      nav a { margin: 0 8px; }
      .settings-layout-profile { grid-template-columns: 1fr; }
      .form-grid-profile { grid-template-columns: 1fr; }
      .title-profile h1 { font-size: 32px; }
      
    }
@media (max-width: 476px) {
  #play-btn {
      left: 245px;
     }
     #favorites-delete {
    left: 205px;
    bottom: 128px;
  }
   .favorites {
      left: 240px;
      bottom: 128px;
    }
}
    @media (max-width: 376px) {
    .card-profile { 
      max-width: 100%;
      margin: auto;
      padding: auto;
     }
     #play-btn {
      left: 200px;
     }
     #favorites-delete {
    left: 155px;
    bottom: 128px;
  }
    .favorites {
    left: 240px;
    bottom: 128px;
  }
    }