.profile-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--profile-accent) 28%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--profile-bg), #050506 58%, var(--profile-bg));
    color:var(--profile-text);
}

.profile-shell{
    width:min(94%, 1280px);
    margin:0 auto;
    padding:34px 0 82px;
}

.profile-alert{
    margin-bottom:18px;
    padding:14px 16px;
    border:1px solid color-mix(in srgb, var(--profile-accent) 45%, transparent);
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:var(--profile-title);
    font-weight:800;
}

.profile-hero{
    min-height:300px;
    display:grid;
    grid-template-columns:180px minmax(0, 1fr) auto;
    align-items:center;
    gap:28px;
    padding:34px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--profile-panel) 94%, black), rgba(255,255,255,.035));
    box-shadow:0 28px 90px rgba(0,0,0,.45);
}

.profile-avatar{
    width:180px;
    aspect-ratio:1;
    border-radius:8px;
    overflow:hidden;
    border:2px solid color-mix(in srgb, var(--profile-accent) 70%, white);
    background:#0b0b0d;
}

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

.profile-identity span,
.profile-card h2,
.profile-editor h2,
.profile-editor h3{
    color:var(--profile-title);
}

.profile-identity span{
    display:inline-flex;
    margin-bottom:10px;
    color:var(--profile-accent);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0;
}

.profile-identity h1{
    margin:0 0 10px;
    color:var(--profile-title);
    font-size:clamp(38px, 6vw, 78px);
    line-height:.95;
    letter-spacing:0;
}

.profile-identity p{
    max-width:760px;
    margin:0;
    color:var(--profile-text);
    font-size:17px;
    line-height:1.65;
}

.profile-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.profile-meta strong,
.profile-button,
.character-tabs a{
    border-radius:8px;
}

.profile-meta strong{
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.045);
    color:var(--profile-muted);
    font-size:13px;
}

.profile-actions{
    align-self:start;
    display:flex;
    gap:10px;
}

.profile-button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:1px solid color-mix(in srgb, var(--profile-accent) 50%, white);
    background:rgba(255,255,255,.045);
    color:var(--profile-title);
    font-weight:900;
    cursor:pointer;
}

.profile-button.primary{
    background:linear-gradient(180deg, color-mix(in srgb, var(--profile-accent) 88%, white), color-mix(in srgb, var(--profile-accent) 70%, black));
    color:#fff;
}

.profile-button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.character-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:18px 0 6px;
}

.character-tabs a{
    min-width:190px;
    display:grid;
    grid-template-columns:42px 1fr;
    grid-template-rows:auto auto;
    gap:2px 10px;
    align-items:center;
    padding:10px;
    border:1px solid rgba(255,255,255,.1);
    background:color-mix(in srgb, var(--profile-panel) 82%, black);
}

.character-tabs a.active{
    border-color:var(--profile-accent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--profile-accent) 45%, transparent);
}

.character-tabs img{
    grid-row:1 / span 2;
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:8px;
}

.character-tabs span{
    color:var(--profile-title);
    font-weight:900;
}

.character-tabs small{
    color:var(--profile-muted);
}

.profile-layout{
    display:grid;
    gap:18px;
    margin-top:18px;
}

.profile-card,
.editor-panel{
    padding:22px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:color-mix(in srgb, var(--profile-panel) 94%, black);
    box-shadow:0 16px 45px rgba(0,0,0,.22);
}

.profile-card h2,
.editor-panel h2{
    margin:0 0 16px;
    font-size:24px;
    letter-spacing:0;
}

.overview-grid,
.profile-slots,
.mini-items{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap:12px;
}

.stat-cloud{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
}

.profile-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 320px));
    align-items:start;
    gap:12px;
}

.overview-grid div,
.profile-slot,
.mini-items div,
.collection-list div{
    min-height:86px;
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.045);
}

.overview-grid span,
.profile-slot span,
.mini-items span,
.collection-list span{
    display:block;
    color:var(--profile-muted);
    font-size:13px;
}

.overview-grid strong,
.profile-slot strong,
.mini-items strong,
.collection-list strong{
    display:block;
    margin-top:6px;
    color:var(--profile-title);
    font-size:20px;
}

.stat-card{
    min-height:124px;
    padding:14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(0,0,0,.16);
    display:grid;
    grid-template-columns:48px 1fr;
    align-items:center;
    gap:10px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.stat-icon{
    width:46px;
    height:46px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, color-mix(in srgb, var(--profile-accent) 72%, #fff 8%), rgba(0,0,0,.22));
    color:#fff;
    font-size:16px;
    letter-spacing:.04em;
    font-weight:900;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.stat-main span{
    display:block;
    color:var(--profile-muted);
    font-size:13px;
    font-weight:800;
}

.stat-main strong{
    display:block;
    margin-top:2px;
    color:var(--profile-title);
    font-size:28px;
    line-height:1;
}

.stat-progress{
    grid-column:1 / -1;
    height:9px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(0,0,0,.32);
    border:1px solid rgba(255,255,255,.08);
}

.stat-progress i{
    display:block;
    height:100%;
    min-width:6px;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--profile-accent), #f4c65d);
    box-shadow:0 0 16px color-mix(in srgb, var(--profile-accent) 45%, transparent);
}

.stat-card small{
    grid-column:1 / -1;
    color:var(--profile-muted);
    font-size:12px;
    font-weight:800;
}

.profile-slot img,
.mini-items img,
.item-thumb{
    width:52px;
    height:52px;
    object-fit:contain;
    image-rendering:auto;
}

.item-thumb.missing{
    display:block;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    background:
        linear-gradient(135deg, transparent 46%, rgba(255,255,255,.28) 47%, rgba(255,255,255,.28) 53%, transparent 54%),
        linear-gradient(45deg, transparent 46%, rgba(255,255,255,.18) 47%, rgba(255,255,255,.18) 53%, transparent 54%),
        rgba(255,255,255,.08);
}

.mini-items div{
    display:grid;
    grid-template-columns:54px 1fr;
    align-items:center;
    gap:10px;
}

.mini-items span{
    grid-column:2;
}

.collection-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:14px;
}

.collection-category{
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:rgba(0,0,0,.14);
    overflow:hidden;
}

.collection-category-head{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:10px;
    align-items:center;
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.045);
}

.collection-category-head > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:color-mix(in srgb, var(--profile-accent) 60%, black);
    color:#fff;
    font-size:15px;
    letter-spacing:.04em;
    font-weight:900;
}

.collection-category-head strong{
    display:block;
    color:var(--profile-title);
    font-size:20px;
    font-weight:950;
}

.collection-category-head small{
    display:block;
    margin-top:2px;
    color:var(--profile-muted);
    font-size:12px;
    font-weight:800;
}

.collection-chips{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap:8px;
    padding:12px;
}

.collection-chips article{
    min-height:64px;
    padding:10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.035);
}

.collection-chips strong{
    display:block;
    color:var(--profile-title);
    font-size:14px;
    font-weight:950;
}

.collection-chips span{
    display:block;
    margin-top:4px;
    color:var(--profile-muted);
    font-size:12px;
    font-weight:800;
}

.collection-more{
    border-style:dashed;
}

.profile-gallery figure{
    position:relative;
    width:100%;
    max-width:320px;
    margin:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    background:rgba(255,255,255,.045);
}

.profile-gallery img{
    width:100%;
    height:clamp(170px, 24vw, 260px);
    object-fit:cover;
    display:block;
}

.profile-gallery figcaption{
    padding:10px;
    color:var(--profile-text);
}

.profile-gallery form{
    padding:0 10px 10px;
}

.profile-gallery button{
    width:100%;
    min-height:34px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    background:rgba(225,49,49,.18);
    color:#fff;
    cursor:pointer;
}

.profile-editor{
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr);
    gap:18px;
    margin-top:18px;
}

.editor-panel label{
    display:grid;
    gap:7px;
    margin-bottom:13px;
    color:var(--profile-muted);
    font-weight:800;
}

.editor-panel input[type="text"],
.editor-panel input:not([type]),
.editor-panel textarea,
.editor-panel input[type="file"]{
    width:100%;
    padding:11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:rgba(0,0,0,.24);
    color:var(--profile-title);
}

.color-grid,
.check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:10px;
    margin-bottom:18px;
}

.color-grid input{
    width:100%;
    height:42px;
    padding:2px;
}

.check-grid label{
    min-height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
    padding:10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.04);
}

.layout-sorter{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
    gap:10px;
    margin-bottom:18px;
}

.layout-sorter button{
    min-height:42px;
    border:1px solid color-mix(in srgb, var(--profile-accent) 40%, white);
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:var(--profile-title);
    cursor:grab;
    font-weight:900;
}

.upload-box{
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.04);
    margin-bottom:14px;
}

.empty-note{
    margin:0;
    color:var(--profile-muted);
}

@media (max-width: 860px){
    .profile-hero,
    .profile-editor{
        grid-template-columns:1fr;
    }

    .profile-avatar{
        width:min(180px, 70vw);
    }

    .profile-actions{
        align-self:auto;
    }
}