.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background: #222;
    border-radius: 6px;
    padding: 10px 0;
    min-width: 150px;
}

.user-dropdown a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
}

.user-menu.open .user-dropdown {
    display: block;
}

/* Аватар в профиле — pointer */
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    border: 4px solid rgba(255,255,255,0.03);
}

/* Профиль: контактная информация */
.profile-contact { margin-top:10px; color:#cfeff0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.profile-contact .label { color:#9fb6b6; min-width:110px; font-weight:600; }
.profile-contact .value { color:#e6f7ff; }
.profile-contact input[type="tel"] { padding:8px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:#e6f7ff; min-width:220px; }

/* Новый дизайн страницы профиля */
.profile-page { max-width:980px; margin:28px auto; padding:20px; }
.profile-card { display:flex; gap:24px; background: linear-gradient(180deg,#9e9e9f, #242b34); border-radius:14px; padding:20px; box-shadow: 0 12px 40px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03); }
.profile-left{ width:260px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.avatar-wrap{ position:relative; }
.avatar-wrap .profile-avatar{ width:160px; height:160px; border-radius:12px; border-radius:50%; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.avatar-change{ display:inline-block; margin-top:8px; background:rgba(255,255,255,0.03); color:#cfeff0; padding:6px 12px; border-radius:8px; cursor:pointer; font-weight:700; }
.profile-actions{ display:flex; gap:10px; flex-direction:column; width:auto; flex:1 1 auto; min-width:0; }
.profile-actions .admin-btn{ width:100%; text-align:center; box-sizing:border-box; min-width:0; }
.profile-right{ flex:1; display:flex; flex-direction:column; gap:18px; }
.profile-title{ margin:0; color:#eaffff; font-size:1.4rem; }
.profile-info-row{ display:flex; gap:12px; flex-wrap:wrap; }
.profile-field{ background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); min-width:200px; }
.profile-field .label{ color:#9fb6b6; font-weight:700; display:block; margin-bottom:6px; }
.profile-field .value{ color:#e6f7ff; font-weight:700; }
.profile-form .form-row{ display:flex; gap:10px; align-items:center; }
.profile-form input[type="tel"], .profile-form input[type="password"]{ padding:10px 12px; border-radius:8px; border:1px solid rgba(218, 215, 215, 0.184); background:transparent; color:#e6f7ff; min-width:220px; }
.profile-form .admin-btn{ padding:10px 14px; border-radius:8px; }
.divider{ height:1px; background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent); border-radius:2px; margin:6px 0; }
.subhead{ color:#cfeff0; margin:0; }

@media (max-width:880px){ .profile-card{ flex-direction:column; } .profile-left{ width:100%; flex-direction:row; justify-content:space-between; min-width:0; } .avatar-wrap .profile-avatar{ width:120px; height:120px; }
  /* ensure profile-actions fits next to avatar without causing overflow */
  .profile-actions{ width:auto; flex:1 1 auto; min-width:0; }
  .profile-actions .admin-btn{ max-width:100%; box-sizing:border-box; }
}

/* Small screens: prevent horizontal overflow on profile page */
@media (max-width:600px) {
  .profile-card { padding:12px; gap:12px; }
  .profile-page { padding:0px; }

  /* Stack form controls so inputs + buttons don't exceed viewport */
  .profile-form .form-row { flex-direction:column; align-items:stretch; gap:8px; }
  .profile-form input[type="tel"], .profile-form input[type="password"] { min-width:0; width:100%; box-sizing:border-box; }
  .profile-form .admin-btn { width:100%; }

  /* Make info fields full-width on narrow screens */
  .profile-info-row { gap:8px; }
  .profile-field { min-width:100%; box-sizing:border-box; }
}

/* Extra-small phones — ensure no element forces horizontal scroll */
@media (max-width:360px) {
  .profile-page { padding-left:0px; }
  .avatar-wrap .profile-avatar{ width:100px; height:100px; }
  .profile-title { font-size:1.15rem; }
  .profile-form .form-row { gap:6px; }
}


/* Кнопка (аватар + имя) */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Аватар */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Пункты меню */
.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: 0.2s;
}

/* Иконки */
.user-dropdown .icon {
    font-size: 18px;
}

/* Ховер эффект */
.user-dropdown a:hover {
    background: rgba(255, 255, 255, 0.12);
    padding-left: 18px;
}

.user-menu {
    position: relative;
    display: inline-block;
}

.user-menu::after {
    content: "";
    position: absolute;
    top: 35px;
    right: 0;
    width: 100%;
    height: 15px;
}

.user-dropdown {
    position: absolute;
    right: 0;
    top: 45px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 8px 0;
    min-width: 170px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 100;

    pointer-events: none;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}