/* ================================================================
   STAGEXO V19 — Premium UCP / Profile
   Rank card preserved and elevated as the visual centerpiece.
   ================================================================ */

.sx-ucp-shell{
    --sx-bg:#050807;
    --sx-panel:#080d0c;
    --sx-panel-2:#0b1210;
    --sx-line:rgba(255,255,255,.075);
    --sx-soft:rgba(255,255,255,.045);
    --sx-text:#eef4f0;
    --sx-muted:#7f8c87;
    --sx-green:#a8d72c;
    --sx-green-bright:#c1f13f;
    position:relative;
    max-width:1580px;
    margin:0 auto;
    padding:30px 24px 80px;
    color:var(--sx-text);
    isolation:isolate;
}
.sx-ucp-shell *{box-sizing:border-box}
.sx-ucp-ambient{
    position:absolute;
    pointer-events:none;
    border-radius:50%;
    filter:blur(90px);
    opacity:.13;
    z-index:-1;
}
.sx-ucp-ambient-a{width:430px;height:430px;right:8%;top:80px;background:var(--sx-rank,#b8d923)}
.sx-ucp-ambient-b{width:360px;height:360px;left:0;bottom:10%;background:#247d58}

.sx-ucp-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:20px;
    align-items:start;
}

/* Sidebar */
.sx-ucp-sidebar{position:sticky;top:18px}
.sx-identity-card,
.sx-ucp-nav,
.sx-sidebar-foot,
.sx-ucp-hero,
.sx-dashboard-section,
.sx-character-panel{
    border:1px solid var(--sx-line);
    background:
        linear-gradient(145deg,rgba(12,19,17,.97),rgba(5,9,8,.98));
    box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.sx-identity-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    padding:25px 20px 18px;
    text-align:center;
}
.sx-identity-card:before{
    content:"";
    position:absolute;
    left:12%;right:12%;top:-70px;
    height:130px;
    border-radius:50%;
    background:var(--sx-rank,#b8d923);
    filter:blur(55px);
    opacity:.16;
}
.sx-avatar-wrap{position:relative;width:126px;margin:0 auto 17px}
.sx-avatar-ring{
    width:126px;height:126px;
    padding:4px;
    border-radius:26px;
    background:linear-gradient(145deg,var(--sx-rank,#b8d923),rgba(255,255,255,.08) 48%,#14231e);
    box-shadow:0 16px 35px rgba(0,0,0,.4),0 0 28px color-mix(in srgb,var(--sx-rank,#b8d923) 20%,transparent);
}
.sx-avatar{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    border-radius:22px;
    border:3px solid #07100d;
}
.sx-presence-dot{
    position:absolute;
    width:17px;height:17px;
    border-radius:50%;
    right:-2px;bottom:7px;
    background:#3aee83;
    border:3px solid #07100d;
    box-shadow:0 0 14px rgba(58,238,131,.8);
}
.sx-sidebar-kicker,
.sx-section-kicker,
.sx-meta-cell small,
.sx-overview-card small,
.sx-realm-title small{
    display:block;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.45px;
    text-transform:uppercase;
    color:#6f7e78;
}
.sx-sidebar-copy h2{
    margin:7px 0 8px;
    font-size:25px;
    line-height:1.08;
    font-weight:900;
    color:#f5f8f6;
}
.sx-sidebar-rank{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--sx-rank,#b8d923);
    font-size:12px;
    font-weight:900;
}
.sx-account-state{
    margin-top:18px;
    border:1px solid var(--sx-line);
    border-radius:11px;
    padding:12px;
    background:rgba(255,255,255,.025);
}
.sx-account-state span{
    display:block;
    color:#66746f;
    font-size:8px;
    font-weight:900;
    letter-spacing:1.3px;
}
.sx-account-state strong{
    display:block;
    margin-top:5px;
    color:#3ee783;
    font-size:12px;
}

.sx-ucp-nav{margin-top:13px;border-radius:18px;padding:10px}
.sx-nav-caption{
    padding:10px 11px 8px;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.4px;
    color:#5f6e68;
}
.sx-ucp-nav-item{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:56px;
    margin:3px 0;
    padding:9px 11px;
    border-radius:11px;
    color:#98a59f;
    text-decoration:none!important;
    border:1px solid transparent;
    transition:.18s ease;
}
.sx-ucp-nav-item:hover,
.sx-ucp-nav-item.active{
    color:#f3f7f4;
    border-color:rgba(255,255,255,.06);
    background:linear-gradient(90deg,color-mix(in srgb,var(--sx-rank,#b8d923) 12%,transparent),rgba(255,255,255,.015));
}
.sx-nav-icon{
    width:35px;height:35px;
    display:grid;
    place-items:center;
    border:1px solid var(--sx-line);
    border-radius:10px;
    background:#0c1411;
    color:var(--sx-rank,#b8d923);
}
.sx-ucp-nav-item strong{display:block;font-size:12px}
.sx-ucp-nav-item small{display:block;margin-top:2px;color:#5f6c67;font-size:9px}
.sx-sidebar-foot{
    margin-top:13px;
    padding:14px;
    border-radius:15px;
    display:flex;
    gap:10px;
    align-items:center;
}
.sx-sidebar-foot>i{color:#41e982;font-size:17px}
.sx-sidebar-foot strong{display:block;font-size:10px;color:#d8e2dd;letter-spacing:.5px}
.sx-sidebar-foot small{display:block;margin-top:3px;font-size:8px;color:#66736e;line-height:1.4}

/* Hero */
.sx-ucp-main{min-width:0}
.sx-ucp-hero{
    position:relative;
    min-height:390px;
    border-radius:22px;
    overflow:hidden;
}
.sx-hero-grid{
    position:absolute;inset:0;
    opacity:.13;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:38px 38px;
    mask-image:linear-gradient(to right,#000,transparent 75%);
}
.sx-hero-glow{
    position:absolute;
    width:500px;height:500px;
    border-radius:50%;
    top:-185px;right:70px;
    background:var(--sx-rank,#b8d923);
    opacity:.10;
    filter:blur(80px);
}
.sx-hero-content{
    position:relative;
    z-index:3;
    padding:52px 330px 112px 42px;
}
.sx-hero-eyebrow{
    display:flex;align-items:center;gap:8px;
    color:#8b9b94;
    font-size:9px;font-weight:900;letter-spacing:1.7px;
}
.sx-live-pulse{
    width:7px;height:7px;border-radius:50%;
    background:#3de682;
    box-shadow:0 0 12px rgba(61,230,130,.8);
}
.sx-hero-content h1{
    margin:13px 0 0;
    font-size:52px;
    line-height:.98;
    letter-spacing:-1.8px;
    color:#f6faf7;
    font-weight:950;
}
.sx-hero-rank-line{
    margin-top:14px;
    display:flex;align-items:center;gap:9px;
    color:var(--sx-rank,#b8d923);
    font-size:17px;font-weight:900;
}
.sx-rank-mark{
    width:27px;height:27px;
    display:grid;place-items:center;
    border:1px solid color-mix(in srgb,var(--sx-rank,#b8d923) 48%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--sx-rank,#b8d923) 10%,transparent);
    font-size:11px;
}
.sx-hero-content p{
    max-width:570px;
    margin:14px 0 0;
    color:#89968f;
    font-size:13px;
    line-height:1.7;
}
.sx-hero-actions{display:flex;gap:9px;margin-top:23px}
.sx-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:39px;
    padding:0 15px;
    border-radius:10px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.35px;
    text-decoration:none!important;
    transition:.18s ease;
}
.sx-btn-primary{
    color:#0b0e09!important;
    background:linear-gradient(135deg,var(--sx-rank,#b8d923),color-mix(in srgb,var(--sx-rank,#b8d923) 65%,#dff45c));
    box-shadow:0 9px 24px color-mix(in srgb,var(--sx-rank,#b8d923) 14%,transparent);
}
.sx-btn-primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sx-btn-ghost{
    color:#cbd5d0!important;
    border:1px solid var(--sx-line);
    background:rgba(255,255,255,.025);
}
.sx-btn-ghost:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}

/* Rank card — preserved */
.sx-rank-card{
    position:absolute;
    z-index:10;
    top:25px;
    right:25px;
    width:255px;
    min-height:285px;
    padding:17px 16px 16px;
    border-radius:17px;
    border:1px solid color-mix(in srgb,var(--sx-rank,#b8d923) 70%,rgba(255,255,255,.10));
    background:
        radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--sx-rank,#b8d923) 16%,transparent),transparent 45%),
        linear-gradient(180deg,#0b1210,#070b0a);
    box-shadow:
        0 22px 55px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 34px color-mix(in srgb,var(--sx-rank,#b8d923) 12%,transparent);
    text-align:center;
}
.sx-rank-topline{
    display:flex;align-items:center;justify-content:space-between;
}
.sx-rank-label{
    font-size:8px;
    font-weight:950;
    letter-spacing:1.4px;
    color:#8d9b95;
}
.sx-rank-chip{
    padding:4px 7px;
    border:1px solid color-mix(in srgb,var(--sx-rank,#b8d923) 35%,transparent);
    border-radius:999px;
    color:var(--sx-rank,#b8d923);
    background:color-mix(in srgb,var(--sx-rank,#b8d923) 7%,transparent);
    font-size:7px;
    font-weight:950;
    letter-spacing:.7px;
}
.sx-rank-art{
    position:relative;
    height:155px;
    display:grid;
    place-items:center;
    margin-top:4px;
}
.sx-rank-halo{
    position:absolute;
    width:120px;height:120px;
    border-radius:50%;
    background:var(--sx-rank,#b8d923);
    filter:blur(34px);
    opacity:.11;
}
.sx-rank-shield{
    position:relative;
    z-index:2;
    width:148px;height:148px;
    object-fit:contain;
    filter:drop-shadow(0 12px 19px rgba(0,0,0,.48));
}
.sx-rank-title{
    color:var(--sx-rank,#b8d923);
    font-size:20px;
    font-weight:950;
    letter-spacing:.2px;
}
.sx-rank-subtitle{margin-top:5px;color:#697671;font-size:8px}
.sx-rank-signature{
    display:flex;align-items:center;justify-content:center;gap:7px;
    margin-top:10px;
    color:var(--sx-rank,#b8d923);
    font-size:6px;
}
.sx-rank-signature span{display:block;width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--sx-rank,#b8d923))}
.sx-rank-signature span:last-child{transform:scaleX(-1)}

/* hero meta */
.sx-hero-meta{
    position:absolute;
    z-index:4;
    left:0;right:0;bottom:0;
    min-height:78px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--sx-line);
    background:rgba(3,7,6,.82);
    backdrop-filter:blur(12px);
}
.sx-meta-cell{
    display:flex;
    gap:11px;
    align-items:center;
    min-width:0;
    padding:14px 18px;
    border-right:1px solid var(--sx-line);
}
.sx-meta-cell:last-child{border-right:0}
.sx-meta-icon{
    flex:0 0 auto;
    width:34px;height:34px;
    display:grid;place-items:center;
    border:1px solid var(--sx-line);
    border-radius:9px;
    background:#0a110f;
    color:#8f9c96;
    font-size:12px;
}
.sx-meta-cell strong{
    display:block;
    margin-top:4px;
    max-width:155px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#dfe7e3;
    font-size:11px;
}
.sx-status-live{color:#42e582!important}

/* Overview */
.sx-dashboard-section,
.sx-character-panel{
    margin-top:16px;
    border-radius:19px;
    padding:18px;
}
.sx-section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:48px;
    margin-bottom:14px;
}
.sx-section-head h3{
    margin:4px 0 0;
    font-size:19px;
    font-weight:900;
    color:#edf4f0;
}
.sx-section-badge,
.sx-roster-count{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border:1px solid var(--sx-line);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:#73817b;
    font-size:8px;
    font-weight:900;
    letter-spacing:.7px;
}
.sx-section-badge i{color:var(--sx-rank,#b8d923)}
.sx-overview-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.sx-overview-card{
    min-height:106px;
    display:flex;
    gap:12px;
    align-items:center;
    padding:16px;
    border:1px solid var(--sx-line);
    border-radius:13px;
    background:linear-gradient(145deg,#0b1210,#080d0c);
    transition:.18s ease;
}
.sx-overview-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.12);
    background:linear-gradient(145deg,#0e1714,#09100e);
}
.sx-overview-highlight{
    border-color:color-mix(in srgb,var(--sx-rank,#b8d923) 24%,var(--sx-line));
    background:linear-gradient(145deg,color-mix(in srgb,var(--sx-rank,#b8d923) 7%,#0b1210),#080d0c);
}
.sx-card-icon{
    flex:0 0 auto;
    width:40px;height:40px;
    display:grid;place-items:center;
    border:1px solid var(--sx-line);
    border-radius:11px;
    background:#0d1512;
    color:var(--sx-rank,#b8d923);
    font-size:14px;
}
.sx-overview-card strong{
    display:block;
    margin-top:5px;
    color:#edf3ef;
    font-size:15px;
    font-weight:900;
}
.sx-overview-card em{
    display:block;
    margin-top:3px;
    color:#5f6c67;
    font-size:8px;
    font-style:normal;
}

/* Character roster */
.sx-character-panel{overflow:hidden}
.sx-character-content{min-width:0}
.sx-roster-realms{display:grid;gap:14px}
.sx-realm-roster{
    overflow:hidden;
    border:1px solid var(--sx-line);
    border-radius:15px;
    background:#070c0b;
}
.sx-realm-roster-head{
    min-height:66px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--sx-line);
    background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);
}
.sx-realm-title{display:flex;align-items:center;gap:10px}
.sx-realm-title h4{margin:3px 0 0;color:#edf4f0;font-size:14px;font-weight:900}
.sx-realm-orb{
    width:35px;height:35px;
    display:grid;place-items:center;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--sx-rank,#b8d923) 23%,var(--sx-line));
    color:var(--sx-rank,#b8d923);
    background:color-mix(in srgb,var(--sx-rank,#b8d923) 6%,#0b1210);
}
.sx-realm-count{
    color:#66736d;
    font-size:8px;
    font-weight:900;
    letter-spacing:.8px;
}
.sx-character-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding:11px;
}
.sx-character-card{
    position:relative;
    min-width:0;
    min-height:118px;
    display:grid;
    grid-template-columns:78px minmax(0,1fr) 74px;
    gap:13px;
    align-items:center;
    padding:13px;
    overflow:hidden;
    border:1px solid var(--sx-line);
    border-radius:13px;
    background:linear-gradient(135deg,#0b1210,#080d0c);
    transition:.18s ease;
}
.sx-character-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.13);
    box-shadow:0 15px 32px rgba(0,0,0,.24);
}
.sx-character-card-glow{
    position:absolute;
    width:150px;height:150px;
    left:-70px;top:-75px;
    border-radius:50%;
    background:var(--sx-rank,#b8d923);
    filter:blur(50px);
    opacity:.035;
    pointer-events:none;
}
.sx-character-portrait{
    position:relative;
    width:72px;height:72px;
    display:grid;place-items:center;
    border-radius:14px;
    background:#101815;
    border:1px solid var(--sx-line);
    overflow:hidden;
}
.sx-character-portrait img{
    width:100%;height:100%;
    object-fit:cover;
    image-rendering:auto;
}
.sx-character-level{
    position:absolute;
    right:4px;bottom:4px;
    min-width:26px;height:20px;
    padding:0 5px;
    display:grid;place-items:center;
    border-radius:6px;
    background:rgba(3,7,6,.92);
    border:1px solid rgba(255,255,255,.10);
    color:#dfe8e3;
    font-size:9px;
    font-weight:900;
}
.sx-character-info{min-width:0}
.sx-character-name-line{
    display:flex;
    align-items:center;
    gap:7px;
}
.sx-character-name-line h5{
    margin:0;
    max-width:calc(100% - 28px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px;
    font-weight:950;
}
.sx-character-class-icon{
    width:20px;height:20px;
    object-fit:contain;
    border-radius:5px;
}
.sx-character-tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:7px;
}
.sx-character-tags span{
    display:inline-flex;align-items:center;gap:4px;
    padding:4px 6px;
    border:1px solid var(--sx-line);
    border-radius:6px;
    color:#6e7c76;
    background:rgba(255,255,255,.02);
    font-size:8px;
    font-weight:800;
}
.sx-character-wallet{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:8px;
    font-size:8px;
    font-weight:800;
}
.sx-character-wallet span{display:inline-flex;align-items:center;gap:4px}
.sx-gold{color:#e2bd48}
.sx-silver{color:#aeb8b4}
.sx-copper{color:#c77847}
.sx-character-open{
    justify-self:end;
    width:66px;height:64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px solid var(--sx-line);
    border-radius:10px;
    color:#7c8983!important;
    background:rgba(255,255,255,.02);
    text-decoration:none!important;
    transition:.18s ease;
}
.sx-character-open span{font-size:7px;font-weight:950;letter-spacing:.7px}
.sx-character-open i{font-size:13px;color:var(--sx-rank,#b8d923)}
.sx-character-open:hover{
    color:#eef4f0!important;
    border-color:color-mix(in srgb,var(--sx-rank,#b8d923) 30%,var(--sx-line));
    background:color-mix(in srgb,var(--sx-rank,#b8d923) 6%,transparent);
}
.sx-empty-roster{
    padding:55px 20px;
    text-align:center;
    border:1px dashed rgba(255,255,255,.09);
    border-radius:14px;
}
.sx-empty-icon{
    width:55px;height:55px;
    margin:0 auto 12px;
    display:grid;place-items:center;
    border-radius:15px;
    background:#0b1210;
    border:1px solid var(--sx-line);
    color:#65736d;
    font-size:20px;
}
.sx-empty-roster h4{margin:0;color:#e8efeb;font-size:16px}
.sx-empty-roster p{margin:6px 0 0;color:#68756f;font-size:10px}

/* Responsive */
@media(max-width:1180px){
    .sx-ucp-layout{grid-template-columns:235px minmax(0,1fr)}
    .sx-hero-content{padding-right:300px}
    .sx-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sx-character-grid{grid-template-columns:1fr}
}
@media(max-width:850px){
    .sx-ucp-shell{padding:16px 10px 55px}
    .sx-ucp-layout{display:block}
    .sx-ucp-sidebar{position:static}
    .sx-ucp-nav{display:none}
    .sx-sidebar-foot{display:none}
    .sx-identity-card{display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:center;text-align:left}
    .sx-avatar-wrap{width:82px;margin:0}
    .sx-avatar-ring{width:82px;height:82px;border-radius:18px}
    .sx-avatar{border-radius:15px}
    .sx-account-state{margin:0;min-width:115px;text-align:center}
    .sx-ucp-main{margin-top:12px}
    .sx-ucp-hero{min-height:585px}
    .sx-hero-content{padding:35px 22px 330px}
    .sx-hero-content h1{font-size:38px}
    .sx-rank-card{top:215px;left:50%;right:auto;transform:translateX(-50%);width:245px}
    .sx-hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sx-character-card{grid-template-columns:68px minmax(0,1fr) 62px}
    .sx-character-portrait{width:62px;height:62px}
    .sx-character-open{width:56px}
}
@media(max-width:560px){
    .sx-identity-card{grid-template-columns:72px 1fr}
    .sx-avatar-wrap,.sx-avatar-ring{width:68px;height:68px}
    .sx-account-state{grid-column:1/-1}
    .sx-hero-actions{flex-direction:column;align-items:stretch}
    .sx-btn{justify-content:center}
    .sx-overview-cards{grid-template-columns:1fr}
    .sx-hero-meta{grid-template-columns:1fr 1fr}
    .sx-meta-cell{padding:11px 10px}
    .sx-meta-icon{display:none}
    .sx-character-panel,.sx-dashboard-section{padding:12px}
    .sx-character-grid{padding:8px}
    .sx-character-card{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:10px}
    .sx-character-portrait{width:52px;height:52px}
    .sx-character-open{
        grid-column:1/-1;
        width:100%;height:35px;
        flex-direction:row;
    }
}