/* =====================================================
   BIFF3EN ACCOUNT / PROFILE V3
   Presentation only - existing account logic preserved
===================================================== */

body.b3-account-profile-v3 .auth-modal {
    width: min(620px, calc(100vw - 28px)) !important;
    padding: 0 !important;
    overflow-x: hidden;
    border-radius: 28px !important;
    border: 1px solid rgba(190, 90, 255, .32) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(162, 72, 255, .20), transparent 34%),
        radial-gradient(circle at 100% 32%, rgba(255, 66, 191, .09), transparent 30%),
        linear-gradient(180deg, rgba(19, 12, 28, .995), rgba(7, 6, 11, .995)) !important;
    box-shadow:
        0 35px 110px rgba(0, 0, 0, .78),
        0 0 55px rgba(143, 61, 255, .13) !important;
}

body.b3-account-profile-v3 .auth-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black, transparent 68%);
}

body.b3-account-profile-v3 .auth-close {
    top: 16px !important;
    right: 18px !important;
    z-index: 30;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(5,4,8,.62) !important;
    backdrop-filter: blur(10px);
    font-size: 24px !important;
}

body.b3-account-profile-v3 #profilePanel {
    position: relative;
    z-index: 2;
    padding: 24px;
}

.b3-profile-v3-card {
    position: relative;
    overflow: hidden;
    margin: 18px 0 24px;
    padding: 28px 24px;
    border-radius: 24px;
    border: 1px solid rgba(193, 110, 255, .25);
    background:
        radial-gradient(circle at 0% 0%, rgba(172, 71, 255, .26), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.b3-profile-v3-card::after {
    content: "△  ○  ×  □";
    position: absolute;
    right: 22px;
    bottom: 17px;
    color: rgba(215, 142, 255, .23);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 8px;
    transform: rotate(-5deg);
}

.b3-profile-v3-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.b3-profile-v3-avatar {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    border: 2px solid rgba(225, 169, 255, .55);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(145deg, #a63fff, #6325d6 55%, #251040);
    color: white;
    font-size: 36px;
    font-weight: 950;
    text-transform: uppercase;
    box-shadow:
        0 0 28px rgba(170, 69, 255, .32),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.b3-profile-v3-details {
    min-width: 0;
    flex: 1;
}

.b3-profile-v3-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.b3-profile-v3-name {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 950;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

.b3-profile-v3-role {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(205, 142, 255, .40);
    background: rgba(144, 60, 238, .17);
    color: #e4baff;
    font-size: .69rem;
    font-weight: 950;
    letter-spacing: .09em;
}

.b3-profile-v3-role[data-role="owner"] {
    border-color: rgba(255, 214, 83, .46);
    background: rgba(255, 207, 48, .10);
    color: #ffe27b;
}

.b3-profile-v3-role[data-role="admin"] {
    color: #ff9bcf;
    border-color: rgba(255, 82, 169, .42);
    background: rgba(255, 63, 157, .10);
}

.b3-profile-v3-email {
    margin: 6px 0 0;
    color: rgba(255,255,255,.58);
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.b3-profile-v3-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: rgba(229, 194, 255, .70);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.b3-account-v2 {
    margin-top: 12px !important;
}

.b3-account-v2 > h3 {
    margin: 4px 0 14px !important;
    font-size: 1.18rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.b3-account-v2 .b3-settings-divider {
    height: 1px;
    margin: 20px 0 22px;
    background: linear-gradient(90deg, transparent, rgba(192, 115, 255, .32), transparent);
}

.b3-account-v2 .b3-setting-box {
    position: relative;
    margin: 13px 0;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.085);
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.b3-account-v2 .b3-setting-box:hover {
    border-color: rgba(182, 98, 255, .22);
}

.b3-account-v2 .b3-setting-box label {
    color: rgba(255,255,255,.70) !important;
    font-size: .79rem !important;
    font-weight: 850 !important;
}

.b3-account-v2 input {
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(4,3,7,.55) !important;
}

.b3-account-v2 input:focus {
    border-color: rgba(180, 96, 255, .72) !important;
    box-shadow: 0 0 0 3px rgba(167, 75, 255, .10) !important;
}

.b3-account-v2 button {
    border-radius: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .02em;
}

.b3-account-v2 .b3-setting-box:not(.b3-danger) button:not(.b3-secondary) {
    background: linear-gradient(135deg, #8d36e9, #b84fff) !important;
    border-color: rgba(218, 158, 255, .28) !important;
}

.b3-account-v2 .b3-secondary {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.10) !important;
}

.b3-account-v2 .b3-danger {
    margin-top: 24px;
    border-color: rgba(255, 76, 104, .30) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 45, 91, .09), transparent 35%),
        rgba(63, 7, 19, .18) !important;
}

.b3-account-v2 .b3-danger::before {
    content: "DANGER ZONE";
    display: inline-block;
    margin-bottom: 10px;
    color: #ff718b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .14em;
}

.b3-account-v2 .b3-danger button {
    background: linear-gradient(135deg, #8c1734, #d62951) !important;
    border-color: rgba(255, 103, 132, .35) !important;
}

.b3-settings-message {
    padding: 5px 2px;
    font-weight: 750;
}

@media (max-width: 620px) {
    body.b3-account-profile-v3 #profilePanel {
        padding: 17px;
    }

    .b3-profile-v3-card {
        padding: 22px 17px;
    }

    .b3-profile-v3-main {
        align-items: flex-start;
    }

    .b3-profile-v3-avatar {
        width: 68px;
        height: 68px;
        border-radius: 19px;
        font-size: 29px;
    }

    .b3-profile-v3-card::after {
        opacity: .55;
        font-size: 14px;
    }
}

/* B3 HIDE AUTH TABS LOGGED IN START */

body.b3-account-profile-v3.b3-user-logged-in #authTabs {
    display: none !important;
}

body.b3-account-profile-v3.b3-user-logged-in #profilePanel {
    padding-top: 22px !important;
}

/* B3 HIDE AUTH TABS LOGGED IN END */

/* B3 AVATAR UPLOAD V1 START */

.b3-profile-v3-avatar {
    overflow: hidden;
}

.b3-profile-v3-avatar.has-image {
    padding: 0;
    background: #08060d;
}

.b3-profile-v3-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.b3-avatar-controls {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.075);
}

.b3-avatar-controls button {
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid rgba(208,143,255,.25);
    background: linear-gradient(135deg,#8e35e9,#b64dff);
    color: white;
    font: inherit;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

.b3-avatar-controls .b3-avatar-remove {
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.11);
    color: rgba(255,255,255,.72);
}

.b3-avatar-status {
    flex-basis: 100%;
    min-height: 17px;
    color: rgba(216,177,255,.76);
    font-size: .74rem;
    font-weight: 700;
}

.b3-avatar-status.error {
    color: #ff8296;
}

@media (max-width:620px) {
    .b3-avatar-controls {
        align-items: stretch;
    }

    .b3-avatar-controls button {
        flex: 1 1 auto;
    }
}

/* B3 AVATAR UPLOAD V1 END */