.me-body{
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 50% 12%,rgba(174,48,255,.2),transparent 28%),
        radial-gradient(circle at 90% 60%,rgba(255,45,129,.08),transparent 24%),
        #07070d;
}

.me-page{
    width:min(100%,1100px);
    min-height:100vh;
    margin:auto;
    padding:18px 20px 150px;
}

.me-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    padding:3px 3px 0;
}

.me-kicker,
.profile-section-heading small{
    color:#ff4a9c;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.me-kicker{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--profile-accent,#ff4a9c);
}

.me-kicker i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 12px currentColor;
}

.me-topbar h1{
    margin-top:5px;
    font-size:clamp(30px,5vw,42px);
    line-height:.95;
    letter-spacing:-.045em;
}

.me-topbar h1 strong{
    color:var(--profile-accent,#ff4a9c);
    font-weight:900;
    text-shadow:0 0 24px color-mix(in srgb,var(--profile-accent,#ff4a9c) 28%,transparent);
}

.me-title-lockup > p{
    margin-top:8px;
    color:#777181;
    font-size:11px;
    font-weight:700;
}

.me-icon-button{
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#15131e;
    color:#d2ceda;
    cursor:pointer;
}

.me-icon-button svg{
    width:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-hero{
    position:relative;
    min-height:330px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:30px;
    overflow:hidden;
    background:#12101a;
    box-shadow:0 25px 70px rgba(0,0,0,.45),0 0 45px rgba(143,47,255,.14);
}

.profile-cover{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
}

.profile-cover-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to top,rgba(6,5,11,.98),rgba(6,5,11,.12) 70%),
        linear-gradient(to right,rgba(8,5,15,.5),transparent 54%);
}

.profile-avatar-wrap{
    position:absolute;
    left:30px;
    bottom:30px;
    z-index:2;
}

.profile-avatar{
    width:116px;
    height:116px;
    border:4px solid #ff3e96;
    border-radius:50%;
    display:block;
    object-fit:cover;
    box-shadow:0 0 0 5px rgba(6,5,11,.9),0 0 30px rgba(255,45,129,.45);
}

.profile-level{
    position:absolute;
    right:-8px;
    bottom:-3px;
    height:32px;
    padding:0 10px;
    border:2px solid #0a0810;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:3px;
    background:linear-gradient(90deg,#ff7334,#ff2d81,#bb41ed);
    color:white;
    font-size:11px;
    font-weight:900;
}

.profile-level img{
    width:22px;
    height:22px;
    object-fit:contain;
}

.profile-identity{
    position:absolute;
    left:178px;
    right:25px;
    bottom:30px;
    z-index:2;
}

.profile-identity h2{
    font-size:42px;
    line-height:1;
}

.profile-identity p{
    margin-top:8px;
    color:#bbb6c5;
    font-size:14px;
}

.profile-identity p i{
    display:inline-block;
    width:4px;
    height:4px;
    margin:0 7px 3px;
    border-radius:50%;
    background:#ff3a8c;
}

.profile-status{
    width:max-content;
    margin-top:12px;
    padding:7px 11px;
    border:1px solid rgba(38,231,196,.35);
    border-radius:999px;
    background:rgba(18,147,126,.15);
    color:#47f1d1;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.profile-status span{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:5px;
    border-radius:50%;
    background:#37eabb;
    box-shadow:0 0 10px #37eabb;
}

.profile-intro{
    padding:24px 8px 18px;
    text-align:center;
}

.profile-intro > p{
    max-width:680px;
    margin:auto;
    color:#d1ccd7;
    font-size:15px;
    line-height:1.6;
}

.profile-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:15px;
}

.profile-chips span{
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    background:#12101a;
    color:#aaa5b5;
    font-size:11px;
    font-weight:800;
}

.edit-profile-button{
    height:43px;
    margin-top:17px;
    padding:0 20px;
    border:1px solid #ff2d81;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,45,129,.08);
    color:#ff55a1;
    font-size:12px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
    cursor:pointer;
}

.edit-profile-button svg{
    width:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.profile-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(255,255,255,.1);
    border-radius:22px;
    background:#12111a;
    overflow:hidden;
}

.badge-grid.new-user-locked .badge-card{
    opacity:.36;
    filter:grayscale(1);
}

.badge-grid.new-user-locked .badge-card::after{
    content:"Locked";
    display:block;
    margin-top:8px;
    color:#777386;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.memory-empty{
    min-height:150px;
    border:1px dashed #312d42;
    border-radius:22px;
    background:rgba(17,15,26,.72);
    display:grid;
    place-content:center;
    gap:8px;
    padding:28px;
    text-align:center;
    color:#8d8999;
}

.memory-empty strong{color:#fff;font-size:17px}
.memory-empty span{max-width:390px;font-size:13px;line-height:1.5}
.new-user-hidden{display:none!important}

.profile-stats div{
    padding:18px 10px;
    text-align:center;
}

.profile-stats div + div{
    border-left:1px solid rgba(255,255,255,.08);
}

.profile-stats strong,
.profile-stats span{
    display:block;
}

.profile-stats strong{
    font-size:23px;
}

.profile-stats span{
    margin-top:4px;
    color:#817c8d;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.xp-card{
    margin-top:18px;
    padding:23px 25px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:25px;
    background:linear-gradient(135deg,#15131f,#100d19);
    box-shadow:0 16px 40px rgba(0,0,0,.25);
}

.xp-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
}

.xp-heading span{
    color:#918b9c;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.xp-heading h2{
    margin-top:4px;
    font-size:22px;
}

.xp-heading > strong{
    font-size:21px;
}

.xp-heading > strong i{
    color:#777282;
    font-style:normal;
}

.xp-track{
    height:12px;
    margin-top:18px;
    border-radius:999px;
    background:#322039;
    overflow:hidden;
}

.xp-track span{
    display:block;
    width:96.4%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#ff7938,#ff2d81,#a743ee);
    box-shadow:0 0 18px rgba(255,45,129,.4);
}

.xp-card > p{
    margin-top:12px;
    color:#8d8798;
    font-size:12px;
}

.xp-card > p strong{
    color:white;
}

.profile-section{
    margin-top:33px;
}

.profile-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.profile-section-heading > div{
    display:flex;
    align-items:center;
    gap:11px;
}

.profile-section-heading h2{
    margin-top:3px;
    font-size:22px;
}

.profile-section-heading > span,
.profile-section-heading button{
    border:0;
    background:transparent;
    color:#8c8798;
    font-size:11px;
    font-weight:800;
}

.profile-section-heading button{
    cursor:pointer;
}

.section-symbol{
    color:#ff3d98;
    font-size:25px;
}

.section-symbol.orange{
    color:#ff762e;
}

.badge-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:15px;
}

.badge-card{
    min-height:160px;
    padding:20px 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#111019;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.badge-card.featured{
    border-color:rgba(255,45,129,.34);
    background:linear-gradient(145deg,rgba(255,45,129,.12),#111019 60%);
    box-shadow:0 0 28px rgba(173,50,255,.18);
}

.badge-emoji{
    min-height:48px;
    font-size:39px;
}

.badge-card h3{
    margin-top:8px;
    font-size:16px;
}

.badge-card p{
    max-width:120px;
    margin-top:5px;
    color:#8e8998;
    font-size:11px;
    line-height:1.35;
}

.memory-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:12px;
    margin-top:15px;
}

.memory-card{
    position:relative;
    min-height:260px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:25px;
    overflow:hidden;
    background:#13111b;
}

.memory-card:nth-child(3){
    display:none;
}

.memory-grid.expanded .memory-card:nth-child(3){
    display:block;
}

.memory-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.memory-card-large img{
    object-position:center 24%;
}

.memory-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(5,4,10,.94),transparent 66%);
}

.memory-core{
    position:absolute;
    top:14px;
    left:14px;
    padding:7px 10px;
    border-radius:999px;
    background:linear-gradient(90deg,#b344e5,#ff2d81);
    color:white;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.memory-card > div:last-child{
    position:absolute;
    left:17px;
    right:17px;
    bottom:16px;
}

.memory-card h3{
    font-size:20px;
}

.memory-card p{
    margin-top:4px;
    color:#aaa5b5;
    font-size:11px;
}

.profile-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:2000000;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(4,3,9,.76);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
}

.profile-modal-backdrop.open{
    opacity:1;
    visibility:visible;
}

.photo-crop-backdrop{
    position:fixed;
    inset:0;
    z-index:3000000;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(3,2,8,.88);
    backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    transition:.22s ease;
}

.photo-crop-backdrop.open{
    opacity:1;
    visibility:visible;
}

.photo-crop-sheet{
    position:relative;
    width:min(100%,520px);
    padding:27px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:
        radial-gradient(circle at 85% 0,color-mix(in srgb,var(--profile-accent,#ff2d81) 20%,transparent),transparent 30%),
        #121019;
    box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 45px color-mix(in srgb,var(--profile-accent,#ff2d81) 16%,transparent);
}

.photo-crop-sheet > span{
    color:var(--profile-accent,#ff3d91);
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.photo-crop-sheet h2{
    margin-top:5px;
    padding-right:42px;
    font-size:27px;
}

.photo-crop-sheet > p{
    margin-top:7px;
    color:#8f8999;
    font-size:11px;
    line-height:1.5;
}

.photo-crop-stage{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    margin-top:18px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;
    overflow:hidden;
    background:#08070d;
    cursor:grab;
    touch-action:none;
    user-select:none;
    box-shadow:inset 0 0 30px rgba(0,0,0,.45);
}

.photo-crop-stage.avatar-mode{
    width:min(100%,360px);
    aspect-ratio:1;
    margin-inline:auto;
    border-radius:50%;
}

.photo-crop-stage.dragging{
    cursor:grabbing;
}

.photo-crop-stage canvas{
    width:100%;
    height:100%;
    display:block;
}

.photo-crop-guide{
    position:absolute;
    inset:0;
    border:2px solid rgba(255,255,255,.56);
    border-radius:inherit;
    pointer-events:none;
    box-shadow:inset 0 0 0 999px rgba(0,0,0,.05);
}

.photo-crop-stage.avatar-mode .photo-crop-guide{
    box-shadow:inset 0 0 32px rgba(255,45,129,.18);
}

.photo-crop-hint{
    position:absolute;
    left:50%;
    bottom:12px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    background:rgba(7,6,11,.68);
    color:#ddd8e3;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    transform:translateX(-50%);
    pointer-events:none;
    transition:.2s ease;
}

.photo-crop-stage.dragging .photo-crop-hint{
    opacity:0;
}

.photo-zoom-control{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
}

.photo-zoom-control svg{
    width:22px;
    height:22px;
    flex:0 0 22px;
    fill:none;
    stroke:var(--profile-accent,#ff2d81);
    stroke-width:1.8;
    stroke-linecap:round;
}

.photo-zoom-control input{
    width:100%;
    accent-color:var(--profile-accent,#ff2d81);
    cursor:pointer;
}

.photo-crop-actions{
    display:grid;
    grid-template-columns:1fr 1.7fr;
    gap:10px;
    margin-top:19px;
}

.photo-crop-actions button{
    height:46px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.photo-crop-actions button:first-child{
    border:1px solid rgba(255,255,255,.12);
    background:#1b1824;
    color:#9993a2;
}

.photo-crop-actions button:last-child{
    border:0;
    background:linear-gradient(90deg,#a844df,var(--profile-accent,#ff2d81));
    color:white;
    box-shadow:0 0 22px color-mix(in srgb,var(--profile-accent,#ff2d81) 28%,transparent);
}

.customization-backdrop{
    position:fixed;
    inset:0;
    z-index:2000000;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(3,2,8,.78);
    opacity:0;
    visibility:hidden;
    backdrop-filter:blur(18px);
    transition:.25s ease;
}

.customization-backdrop.open{
    opacity:1;
    visibility:visible;
}

.customization-sheet{
    position:relative;
    width:min(100%,500px);
    max-height:min(88vh,720px);
    overflow-y:auto;
    padding:28px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:
        radial-gradient(circle at 86% 4%,color-mix(in srgb,var(--profile-accent,#ff3d91) 22%,transparent),transparent 28%),
        #100e17;
    color:white;
    box-shadow:0 28px 90px rgba(0,0,0,.68),0 0 45px color-mix(in srgb,var(--profile-accent,#ff3d91) 14%,transparent);
}

.customization-sheet > span{
    color:var(--profile-accent,#ff3d91);
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.customization-sheet h2{
    margin-top:5px;
    font-size:27px;
}

.customization-intro{
    margin:7px 42px 20px 0;
    color:#8f8999;
    font-size:12px;
    line-height:1.5;
}

.customization-group,
.customization-row{
    margin-top:10px;
    padding:16px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:#15131d;
}

.customization-row{
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
}

.customization-copy{
    min-width:0;
    flex:1;
}

.customization-copy strong,
.customization-copy small{
    display:block;
}

.customization-copy strong{
    font-size:13px;
}

.customization-copy small{
    margin-top:4px;
    color:#827d8d;
    font-size:10px;
    line-height:1.4;
}

.accent-options{
    display:flex;
    gap:12px;
    margin-top:15px;
}

.accent-swatch{
    width:38px;
    height:38px;
    padding:0;
    border:3px solid transparent;
    border-radius:50%;
    cursor:pointer;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 0 18px color-mix(in srgb,currentColor 38%,transparent);
    transition:.2s ease;
}

.accent-swatch[aria-checked="true"]{
    border-color:#fff;
    transform:scale(1.12);
}

.accent-swatch.pink{background:#ff2d81;color:#ff2d81}
.accent-swatch.cyan{background:#20e4ef;color:#20e4ef}
.accent-swatch.violet{background:#9d42ff;color:#9d42ff}
.accent-swatch.orange{background:#ff762e;color:#ff762e}

.bitmoji-customizer{
    display:grid;
    grid-template-columns:105px 1fr;
    align-items:center;
    gap:18px;
    margin-top:16px;
}

.bitmoji-preview{
    position:relative;
    width:88px;
    height:102px;
    margin:auto;
    overflow:hidden;
    border:3px solid #fff;
    border-radius:42px 42px 25px 25px;
    background:linear-gradient(155deg,rgba(157,66,255,.42),rgba(255,45,129,.26));
    box-shadow:0 0 0 3px var(--profile-accent,#ff2d81),0 0 26px color-mix(in srgb,var(--profile-accent,#ff2d81) 60%,transparent);
    transition:.2s ease;
}

.bitmoji-preview img{
    position:absolute;
    top:-3px;
    left:50%;
    width:116px;
    transform:translateX(-50%);
}

.bitmoji-preview > span{
    position:absolute;
    z-index:2;
    top:29px;
    right:-1px;
    font-size:27px;
    transform-origin:25% 80%;
    animation:customBitmojiWave 1.25s ease-in-out infinite;
}

.bitmoji-preview.no-wave > span{
    animation:none;
    transform:rotate(-8deg);
}

.bitmoji-preview[data-frame="flare"]{
    border-color:#ffb14a;
    background:linear-gradient(155deg,#6d2118,#ff2d81 110%);
    box-shadow:0 0 0 3px #ff762e,0 0 30px rgba(255,88,41,.68);
}

.bitmoji-preview[data-frame="stealth"]{
    border-color:#777384;
    background:linear-gradient(155deg,#181722,#08070d);
    box-shadow:0 0 0 2px #302d3c,0 12px 28px rgba(0,0,0,.65);
}

.bitmoji-preview[data-size="small"]{
    scale:.86;
}

.bitmoji-preview[data-size="large"]{
    scale:1.1;
}

.bitmoji-controls{
    min-width:0;
}

.bitmoji-control-label{
    display:block;
    color:#8c8797;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.bitmoji-frame-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin-top:7px;
}

.bitmoji-frame-options button{
    min-height:34px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:#0e0c14;
    color:#898493;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}

.bitmoji-frame-options button[aria-checked="true"]{
    border-color:var(--profile-accent,#ff2d81);
    color:#fff;
    background:color-mix(in srgb,var(--profile-accent,#ff2d81) 20%,#0e0c14);
}

.bitmoji-size-control{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:12px;
    color:#aaa5b4;
    font-size:10px;
    font-weight:800;
}

.bitmoji-size-control select{
    min-width:92px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:#0e0c14;
    color:#fff;
    outline:none;
}

@keyframes customBitmojiWave{
    0%,100%{transform:rotate(-12deg)}
    35%{transform:rotate(26deg)}
    65%{transform:rotate(-2deg)}
}

.customization-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.custom-toggle{
    position:relative;
    width:48px;
    height:28px;
    flex:0 0 48px;
    border-radius:999px;
    background:#302d39;
    transition:.2s ease;
}

.custom-toggle::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 8px rgba(0,0,0,.35);
    transition:.2s ease;
}

.customization-row input:checked + .custom-toggle{
    background:var(--profile-accent,#ff2d81);
    box-shadow:0 0 16px color-mix(in srgb,var(--profile-accent,#ff2d81) 42%,transparent);
}

.customization-row input:checked + .custom-toggle::after{
    transform:translateX(20px);
}

.me-body.compact-profile .profile-section{
    margin-top:22px;
}

.me-body.compact-profile .badge-card{
    min-height:128px;
    padding:17px 10px;
}

.me-body.compact-profile .memory-card{
    min-height:190px;
}

.me-body[data-accent="cyan"]{--profile-accent:#20e4ef}
.me-body[data-accent="violet"]{--profile-accent:#9d42ff}
.me-body[data-accent="orange"]{--profile-accent:#ff762e}
.me-body[data-accent="pink"]{--profile-accent:#ff2d81}

.me-body .profile-avatar{
    border-color:var(--profile-accent,#ff3e96);
    box-shadow:0 0 24px color-mix(in srgb,var(--profile-accent,#ff3e96) 55%,transparent);
}

.me-body .edit-profile-button{
    border-color:var(--profile-accent,#ff2d81);
    color:var(--profile-accent,#ff4c9e);
}

.profile-modal{
    position:relative;
    width:min(100%,460px);
    padding:28px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:#15131e;
    box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 50px rgba(255,45,129,.12);
    max-height:min(88vh,760px);
    overflow-y:auto;
}

.profile-modal > span{
    color:#ff3d91;
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.profile-modal h2{
    margin-top:5px;
    font-size:27px;
}

.profile-photo-editor{
    position:relative;
    margin-top:18px;
    padding-bottom:6px;
}

.cover-photo-picker{
    position:relative;
    height:145px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:20px;
    overflow:hidden;
    background:#09080e;
}

.cover-photo-picker::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(5,4,10,.72),transparent 72%);
    pointer-events:none;
}

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

.cover-photo-picker > label{
    position:absolute;
    right:11px;
    bottom:11px;
    z-index:2;
    height:36px;
    margin:0;
    padding:0 14px 0 10px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:linear-gradient(135deg,rgba(18,14,27,.9),rgba(31,20,45,.92));
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:9px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--profile-accent,#ff2d81) 18%,transparent);
}

.cover-photo-picker svg,
.avatar-photo-picker svg{
    width:17px;
    height:17px;
    flex:0 0 17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cover-photo-picker input,
.avatar-photo-picker input{
    position:absolute;
    inset:auto;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    pointer-events:none;
}

.avatar-photo-picker{
    position:absolute;
    left:16px;
    bottom:-7px;
    z-index:3;
    width:82px;
    height:82px;
    border:4px solid #111019;
    border-radius:50%;
    background:#111019;
    box-shadow:0 0 0 3px var(--profile-accent,#ff2d81),0 0 24px color-mix(in srgb,var(--profile-accent,#ff2d81) 38%,transparent);
}

.avatar-photo-picker > img{
    width:100%;
    height:100%;
    display:block;
    border-radius:50%;
    object-fit:cover;
}

.avatar-photo-picker > label{
    position:absolute;
    right:-5px;
    bottom:0;
    width:32px;
    height:32px;
    margin:0;
    padding:0;
    border:2px solid #111019;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,var(--profile-accent,#ff2d81),#b13ff1);
    color:white;
    line-height:0;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(0,0,0,.4),0 0 16px color-mix(in srgb,var(--profile-accent,#ff2d81) 55%,transparent);
}

.avatar-photo-picker svg{
    width:15px;
    height:15px;
    flex-basis:15px;
    stroke-width:2.2;
}

.photo-editor-copy{
    min-height:65px;
    padding:12px 4px 0 116px;
}

.photo-editor-copy strong,
.photo-editor-copy small{
    display:block;
}

.photo-editor-copy strong{
    font-size:12px;
}

.photo-editor-copy small{
    margin-top:3px;
    color:#817b8b;
    font-size:9px;
    line-height:1.4;
}

.photo-editor-copy button{
    margin-top:7px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--profile-accent,#ff4a9c);
    font-size:9px;
    font-weight:900;
    cursor:pointer;
    text-transform:uppercase;
}

.profile-modal > label{
    display:block;
    margin-top:17px;
    color:#a29dad;
    font-size:11px;
    font-weight:800;
}

.profile-modal > label input,
.profile-modal > label textarea{
    width:100%;
    margin-top:7px;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:15px;
    outline:0;
    background:#0c0b12;
    color:white;
    font:inherit;
}

.profile-modal > label textarea{
    min-height:100px;
    resize:vertical;
}

.profile-modal-close{
    position:absolute;
    top:17px;
    right:17px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#25222f;
    color:#aaa5b4;
    font-size:26px;
    cursor:pointer;
}

.profile-save{
    width:100%;
    height:48px;
    margin-top:19px;
    border:0;
    border-radius:999px;
    background:linear-gradient(90deg,#a844df,#ff2d81);
    color:white;
    font-weight:900;
    cursor:pointer;
}

.signout-button{
    width:100%;
    height:46px;
    margin-top:11px;
    border:1px solid rgba(255,74,100,.38);
    border-radius:999px;
    background:rgba(255,48,80,.07);
    color:#ff667d;
    font-size:12px;
    font-weight:900;
    letter-spacing:.04em;
    cursor:pointer;
    transition:.2s ease;
}

.signout-button:hover{
    border-color:#ff526d;
    background:rgba(255,48,80,.14);
    color:#fff;
}

.profile-toast{
    position:fixed;
    left:50%;
    bottom:120px;
    z-index:3000000;
    padding:12px 18px;
    border-radius:999px;
    background:linear-gradient(90deg,#ff7433,#ff2d81);
    color:white;
    font-size:12px;
    font-weight:900;
    opacity:0;
    transform:translate(-50%,15px);
    pointer-events:none;
    transition:.2s ease;
}

.profile-toast.open{
    opacity:1;
    transform:translate(-50%,0);
}

@media (max-width:700px){
    .me-body{
        min-height:100dvh;
    }

    .me-page{
        min-height:100dvh;
        padding:calc(var(--safe-top) + 13px) 13px calc(var(--safe-bottom) + 112px);
    }

    .profile-hero{
        min-height:390px;
        border-radius:27px;
    }

    .me-title-lockup > p{
        display:none;
    }

    .profile-avatar-wrap{
        left:50%;
        bottom:126px;
        transform:translateX(-50%);
    }

    .profile-avatar{
        width:105px;
        height:105px;
    }

    .profile-identity{
        left:18px;
        right:18px;
        bottom:24px;
        text-align:center;
    }

    .profile-identity h2{
        font-size:34px;
    }

    .profile-status{
        margin:10px auto 0;
    }

    .badge-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .memory-grid{
        grid-template-columns:1fr 1fr;
    }

    .memory-card-large{
        grid-column:1/-1;
    }

    .memory-card{
        min-height:230px;
    }

    .profile-modal-backdrop,
    .photo-crop-backdrop,
    .customization-backdrop{
        padding:calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 8px);
    }

    .profile-modal,
    .photo-crop-sheet,
    .customization-sheet{
        width:100%;
        max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 18px);
        border-radius:27px;
    }

    .profile-modal{
        padding:24px 18px 20px;
    }

    .customization-sheet{
        padding:24px 18px 20px;
    }

    .profile-stats div{
        padding:16px 6px;
    }
}

@media (max-width:430px){
    .photo-crop-sheet{
        padding:23px 17px 18px;
    }

    .photo-crop-sheet h2{
        font-size:23px;
    }

    .photo-crop-stage.avatar-mode{
        width:min(100%,290px);
    }

    .bitmoji-customizer{
        grid-template-columns:1fr;
    }

    .bitmoji-preview{
        margin-bottom:4px;
    }

    .profile-stats strong{
        font-size:19px;
    }

    .profile-stats span{
        font-size:8px;
    }

    .xp-heading{
        align-items:flex-start;
    }

    .xp-heading > strong{
        font-size:17px;
    }

    .profile-section-heading h2{
        font-size:18px;
    }
}