/* 会员头像 + hover 下拉（AI 营销宝 / 控制台共用） */

.user-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 15px;
}

.ac-header-user-dropdown {
    margin-left: 0;
}

.user-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.user-icon--photo {
    background: #e8ecf0;
    overflow: hidden;
    padding: 0;
}

.user-icon--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 280px;
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    overflow: hidden;
}

.dropdown-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e4e7ed;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;
}

.user-avatar--photo {
    background: #e8ecf0;
    overflow: hidden;
    padding: 0;
}

.user-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-info .username {
    font-weight: 500;
    color: #303133;
    font-size: 14px;
}

.user-info .user-status {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
}

.dropdown-divider {
    height: 1px;
    background: #e4e7ed;
    margin: 4px 0;
}

.menu-items {
    padding: 8px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #606266;
}

.menu-item:hover {
    background-color: #f5f7fa;
}

.menu-item.logout {
    color: #f56c6c;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.member-menu-ic {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    background: center / contain no-repeat;
    vertical-align: middle;
}

.member-menu-ic--home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23606266' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.member-menu-ic--user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23606266' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.member-menu-ic--phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23606266' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E");
}

.member-menu-ic--logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23f56c6c' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.quick-info {
    padding: 12px 16px;
    background: #fafbfc;
    border-top: 1px solid #e4e7ed;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-row .label {
    color: #909399;
}

.info-row .value {
    color: #303133;
    font-weight: 500;
}

.info-row .value.expired {
    color: #f56c6c;
}

.quick-info .expired-notice {
    margin-top: 8px;
    padding: 8px;
    background: #fef0f0;
    border-radius: 4px;
    text-align: center;
}

.quick-info .expired-notice p {
    margin: 0;
    font-size: 12px;
    color: #f56c6c;
}

/* 账户详情弹窗 */
.user-info-content {
    padding: 20px 0;
}

.user-info-content .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.user-info-content .info-item:last-child {
    border-bottom: none;
}

.user-info-content .info-item .label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
}

.user-info-content .info-item .value {
    color: #333;
    font-weight: 400;
}

.user-info-content .info-item .value.expired {
    color: #f56c6c;
    font-weight: 500;
}

.user-info-content .expired-notice {
    margin-top: 20px;
    padding: 15px;
    background-color: #fef0f0;
    border: 1px solid #fde2e2;
    border-radius: 4px;
    text-align: center;
}

.user-info-content .expired-notice p {
    margin: 8px 0;
    color: #f56c6c;
}

.user-info-content .expired-notice .phone {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

.user-info-content .warnings-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.user-info-content .warn-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #303133;
}

.user-info-content .warning-item {
    font-size: 12px;
    color: #e6a23c;
    margin-bottom: 4px;
}

.quick-info .warnings-notice,
.quick-info .status-notice {
    margin-top: 8px;
    font-size: 12px;
}

.quick-info .warning-item {
    color: #e6a23c;
    margin-bottom: 4px;
}

.quick-info .status-notice p {
    margin: 0;
    color: #909399;
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}