/* DROPX PRIME SYSTEM — PROFILE HERO */

.dx-profile-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214,165,43,.25);
    border-radius: 24px;
    background: #07090b;
    box-shadow: 0 28px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

.dx-profile-cover {
    position: relative;
    height: clamp(230px, 28vw, 360px);
    overflow: hidden;
    background: #0b0d10;
}

.dx-profile-cover-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.dx-profile-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,5,7,.12) 0%, rgba(3,5,7,.08) 35%, rgba(3,5,7,.94) 100%);
}

.dx-profile-cover-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(214,165,43,.04) 1px, transparent 1px), linear-gradient(rgba(214,165,43,.035) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 80%);
    pointer-events: none;
}

.dx-profile-top-actions {
    position: absolute;
    z-index: 5;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dx-profile-top-actions-left {
    width: 42px;
    height: 42px;
}

.dx-profile-top-actions-right {
    display: flex;
    gap: 8px;
}

.dx-profile-icon-action {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #f5f7fa;
    background: rgba(7,9,11,.58);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0,0,0,.20);
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dx-profile-icon-action:hover {
    transform: translateY(-1px);
    border-color: rgba(214,165,43,.62);
    background: rgba(12,14,17,.78);
}

.dx-profile-icon-action svg { width: 18px; height: 18px; }

.dx-profile-hero-bottom {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 28px 22px;
    margin-top: -72px;
}

.dx-profile-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 138px;
    height: 138px;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f1c75b, #9a6d0f 75%);
    box-shadow: 0 0 0 7px rgba(5,7,9,.72), 0 18px 42px rgba(0,0,0,.45), 0 0 30px rgba(214,165,43,.18);
}

.dx-profile-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    background: #111;
}

.dx-profile-avatar-plus {
    position: absolute;
    right: -2px;
    bottom: 2px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #0a0c0e;
    background: linear-gradient(135deg, #6ee7ff, #1fc7ed);
    border: 4px solid #07090b;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.dx-profile-avatar-plus svg { width: 18px; height: 18px; stroke-width: 3; }

.dx-profile-online-dot {
    position: absolute;
    right: 14px;
    bottom: 11px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #35d98b;
    border: 3px solid #07090b;
    box-shadow: 0 0 14px rgba(53,217,139,.55);
}

.dx-profile-identity {
    min-width: 0;
    padding-bottom: 3px;
}

.dx-profile-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.dx-profile-name-line h1 {
    margin: 0;
    color: #fff;
    font: 800 clamp(1.55rem, 3vw, 2.45rem)/1 'Chakra Petch', sans-serif;
    letter-spacing: -.025em;
    text-shadow: 0 4px 22px rgba(0,0,0,.55);
}

.dx-profile-handle {
    margin-top: 5px;
    color: rgba(226,232,240,.58);
    font: 600 .78rem 'JetBrains Mono', monospace;
}

.dx-profile-role {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: #e7bb4d;
    font: 700 .7rem 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.dx-profile-role b { color: rgba(255,255,255,.22); }

.dx-profile-bio {
    max-width: 640px;
    margin: 9px 0 0;
    color: rgba(241,245,249,.78);
    font-size: .84rem;
    line-height: 1.5;
}

.dx-profile-badge {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
}

.dx-profile-badge svg { width: 14px; height: 14px; }
.dx-profile-badge.donor { color: #f1c75b; background: rgba(214,165,43,.12); }
.dx-profile-badge.warning { color: #ff7a7a; background: rgba(255,80,80,.10); }

.dx-profile-mini-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 9px;
}

.dx-profile-mini-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(226,232,240,.54);
    font: 600 .62rem/1 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.dx-profile-mini-stats b {
    color: #f4f6f8;
    font-weight: 800;
}

.dx-profile-mini-stats svg {
    width: 12px;
    height: 12px;
    color: #d6a52b;
}

.dx-profile-actions-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 28px 20px;
}

.dx-profile-primary-action,
.dx-profile-secondary-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border-radius: 11px;
    font: 700 .75rem 'Chakra Petch', sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.dx-profile-primary-action {
    color: #0b0d0f;
    background: linear-gradient(135deg, #f1c75b, #c38d1d);
    border: 1px solid rgba(255,220,120,.45);
}

.dx-profile-secondary-action {
    color: #e7ebef;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
}

.dx-profile-primary-action svg,
.dx-profile-secondary-action svg { width: 15px; height: 15px; }

.dx-profile-relation-form {
    display: flex;
    margin: 0;
    min-width: 0;
}

.dx-profile-relation-button {
    min-width: 168px;
    white-space: nowrap;
}

.dx-profile-relation-status {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border-radius: 11px;
    border: 1px solid rgba(214,165,43,.22);
    background: rgba(255,255,255,.05);
    color: #e7ebef;
    font: 700 .75rem 'Chakra Petch', sans-serif;
    white-space: nowrap;
}

.dx-profile-relation-status.is-friend {
    color: #7edc9b;
    border-color: rgba(80,190,112,.28);
    background: rgba(80,190,112,.08);
}

.dx-profile-relation-status.is-pending {
    color: #e8c66c;
    border-color: rgba(214,165,43,.28);
    background: rgba(214,165,43,.08);
}

.dx-profile-relation-status svg {
    width: 15px;
    height: 15px;
}

body.light-mode .dx-profile-relation-status {
    color: #5d4a38;
    background: rgba(255,248,236,.72);
    border-color: rgba(145,100,28,.25);
}

body.light-mode .dx-profile-relation-status.is-friend {
    color: #276d45;
    background: rgba(70,170,100,.10);
    border-color: rgba(70,150,90,.28);
}

body.light-mode .dx-profile-relation-status.is-pending {
    color: #7d5a20;
    background: rgba(214,165,43,.10);
}

body.light-mode .dx-profile-actions-row .dx-profile-secondary-action {
    color: #5a4328;
    background: rgba(255,248,236,.72);
    border-color: rgba(145,100,28,.28);
}

body.light-mode .dx-profile-actions-row .dx-profile-secondary-action.is-following {
    color: #276d45;
    border-color: rgba(70,150,90,.30);
    background: rgba(70,170,100,.10);
}

body.light-mode .dx-profile-hero {
    background: #f8f8f6;
    border-color: rgba(168,117,18,.22);
    box-shadow: 0 22px 55px rgba(40,50,60,.12);
}

body.light-mode .dx-profile-cover-shade { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.86)); }
body.light-mode .dx-profile-name-line h1 { color: #17191d; text-shadow: none; }
body.light-mode .dx-profile-handle,
body.light-mode .dx-profile-mini-stats span { color: #68717c; }
body.light-mode .dx-profile-bio { color: #505861; }
body.light-mode .dx-profile-mini-stats b { color: #20242a; }
body.light-mode .dx-profile-avatar-wrap { box-shadow: 0 0 0 7px #f8f8f6, 0 18px 42px rgba(40,50,60,.18); }
body.light-mode .dx-profile-avatar-plus { border-color: #f8f8f6; }

/* DROPX PROFILE V4 — COVER ACTIONS / MENU / POSITION EDITOR */
.dx-profile-cover-image {
    transform-origin: center center;
    transform: translate3d(calc(var(--dx-cover-x, 0) * 1%), calc(var(--dx-cover-y, 0) * 1%), 0) scale(var(--dx-cover-scale, 1)) rotate(var(--dx-cover-rotation, 0deg));
    transition: transform .16s ease-out;
}
.dx-profile-cover-actions {
    position:absolute;
    right:20px;
    bottom:18px;
    z-index:8;
    display:flex;
    align-items:center;
    gap:8px;
}
.dx-profile-cover-action { min-height:40px; box-shadow:0 10px 28px rgba(0,0,0,.28); }
.dx-profile-menu {
    position:absolute;
    top:50px;
    right:0;
    z-index:30;
    width:230px;
    padding:6px;
    border:1px solid rgba(214,165,43,.26);
    border-radius:14px;
    background:rgba(8,10,12,.96);
    box-shadow:0 18px 50px rgba(0,0,0,.48);
    backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px) scale(.98);
    transform-origin:top right;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.dx-profile-menu.active { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.dx-profile-menu-item {
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 11px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#dce2e8;
    font:700 .72rem 'Chakra Petch',sans-serif;
    text-decoration:none;
    cursor:pointer;
    box-sizing:border-box;
}
.dx-profile-menu-item:hover { background:rgba(214,165,43,.10); color:#fff; }
.dx-profile-menu-item svg { width:15px; height:15px; color:#d6a52b; }
.dx-profile-menu-logout { border-top:1px solid rgba(214,165,43,.12); margin-top:4px; padding-top:4px; }
.dx-profile-menu-logout svg { color:#b45b4b; }
.mobile-profile-edit { display:none; }
.dx-hidden-form { display:none; }
.dx-cover-position-modal {
    position:fixed;
    inset:0;
    z-index:99990;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(2,4,6,.72);
    backdrop-filter:blur(14px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
}
.dx-cover-position-modal.active { opacity:1; visibility:visible; pointer-events:auto; }
.dx-cover-position-dialog {
    width:min(860px,100%);
    max-height:min(90vh,760px);
    overflow:auto;
    padding:18px;
    border:1px solid rgba(214,165,43,.3);
    border-radius:18px;
    background:linear-gradient(180deg,#101316,#080a0c);
    box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.dx-cover-position-head,.dx-cover-position-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dx-cover-position-head { margin-bottom:14px; }
.dx-profile-kicker { display:block; color:#d6a52b; font:800 .55rem 'JetBrains Mono',monospace; letter-spacing:.16em; }
.dx-cover-position-head h3 { margin:3px 0 0; color:#f4f6f8; font:800 1.15rem 'Chakra Petch',sans-serif; }
.dx-cover-position-preview {
    position:relative;
    width:100%;
    aspect-ratio:21/7;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:#050607;
}
.dx-cover-position-preview img {
    width:100%; height:100%; object-fit:cover; display:block;
    transform-origin:center center;
    transform:translate3d(calc(var(--dx-cover-x, 0) * 1%), calc(var(--dx-cover-y, 0) * 1%), 0) scale(var(--dx-cover-scale, 1)) rotate(var(--dx-cover-rotation, 0deg));
}
.dx-cover-position-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.dx-cover-position-controls label { display:grid; gap:7px; color:#aeb7c2; font:700 .68rem 'Chakra Petch',sans-serif; }
.dx-cover-position-controls input[type=range] { width:100%; accent-color:#d6a52b; }
.dx-cover-position-actions { justify-content:flex-end; }

@media (max-width:700px) {
    .dx-profile-cover-actions { display:none; }
    .mobile-profile-edit { display:flex; }
    .dx-profile-menu {
        top:44px;
        right:0;
        width:220px;
    }
    .dx-cover-position-dialog { padding:13px; border-radius:15px; }
    .dx-cover-position-preview { aspect-ratio:16/7; }
    .dx-cover-position-controls { grid-template-columns:1fr; gap:9px; }
}
.dx-profile-avatar-plus { display:none; }
@media (max-width:700px) {
    .dx-profile-avatar-plus { display:grid; }
}
.dx-profile-cover-shade{pointer-events:none}

/* Profilkép műveleti menü — dinamikusan a body végére kerül, ezért önálló réteget kap. */
.dx-profile-avatar-choice-menu {
    position: fixed;
    z-index: 2147483646;
    width: min(230px, calc(100vw - 20px));
    padding: 7px;
    display: grid;
    gap: 4px;
    background: rgba(8, 10, 13, .97);
    border: 1px solid rgba(214, 165, 43, .42);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .58), 0 0 24px rgba(214, 165, 43, .08);
    backdrop-filter: blur(18px);
}

.dx-profile-avatar-choice-menu button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #f4f5f7;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.dx-profile-avatar-choice-menu button:hover,
.dx-profile-avatar-choice-menu button:focus-visible {
    background: rgba(214, 165, 43, .12);
    border-color: rgba(214, 165, 43, .34);
    outline: none;
    transform: translateX(1px);
}

.dx-profile-avatar-choice-menu svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #e6b72e;
}

.dx-profile-avatar.profile-media-clickable,
.dx-profile-cover-image.profile-media-clickable {
    cursor: pointer;
}

body.light-mode .dx-profile-avatar-choice-menu {
    background: rgba(250, 249, 246, .98);
    border-color: rgba(150, 115, 25, .34);
    box-shadow: 0 18px 50px rgba(30, 35, 40, .22), 0 0 24px rgba(150, 115, 25, .08);
}

body.light-mode .dx-profile-avatar-choice-menu button {
    color: #17191c;
}

body.light-mode .dx-profile-avatar-choice-menu button:hover,
body.light-mode .dx-profile-avatar-choice-menu button:focus-visible {
    background: rgba(181, 140, 30, .10);
    border-color: rgba(150, 115, 25, .26);
}

/* DROPX APP PROFILE — MOBILE COVER HARMONY
 * A világos témánál a cover fehér átmenete csak a kép legalján jelenjen meg,
 * hogy a borítókép nagyobb része valóban látható maradjon.
 */
@media (max-width: 700px) {
    body.light-mode .dx-profile-cover-shade {
        background: linear-gradient(
            180deg,
            rgba(255,255,255,.02) 0%,
            rgba(255,255,255,.02) 58%,
            rgba(255,255,255,.12) 76%,
            rgba(255,255,255,.68) 100%
        );
    }
}