
.profile-page,.profile-editor-page{max-width:1180px;margin:auto;padding-top:14px}
.profile-public-hero{
    --profile-accent:#4bb8e8;
    position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    min-height:210px;align-items:end;gap:18px;overflow:hidden;padding:24px;
    border:1px solid var(--color-border);border-radius:18px;
    background:
      linear-gradient(180deg,rgba(10,16,24,.08),rgba(10,16,24,.92)),
      var(--profile-banner,radial-gradient(circle at 80% 10%,rgb(75 185 233 / 15%),transparent 34%)),
      var(--color-surface);
    background-size:cover;background-position:center;
}
.profile-public-hero.is-nitro{border-color:color-mix(in srgb,var(--profile-accent) 55%,var(--color-border))}
.profile-public-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,18,.38),transparent 60%);pointer-events:none}
.profile-public-avatar,.profile-public-copy,.profile-edit-button{position:relative;z-index:2}
.profile-public-avatar{
    display:grid;width:108px;height:108px;place-items:center;overflow:hidden;
    border:3px solid rgb(255 255 255 / 84%);border-radius:24px;
    background:#121b24;box-shadow:0 16px 35px rgb(0 0 0 / 35%);font-size:3.6rem
}
.profile-public-avatar img{width:100%;height:100%;object-fit:cover}
.profile-public-kicker{display:flex;align-items:center;gap:7px;color:#c9d5e1;font-size:.72rem;font-weight:800}
.profile-online-dot{width:7px;height:7px;border-radius:50%;background:#42df9e;box-shadow:0 0 10px #42df9e}
.profile-name-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.profile-name-line h1{margin:4px 0 2px;font-size:clamp(2rem,5vw,3.5rem);line-height:.96;letter-spacing:-.05em}
.profile-public-copy p{max-width:650px;margin:6px 0 0;color:#b7c2cf;font-size:.85rem}
.nitro-badge{display:inline-flex;padding:5px 8px;border:1px solid var(--profile-accent);border-radius:999px;background:rgb(0 0 0 / 20%);font-size:.62rem;font-weight:900;text-transform:uppercase}
.profile-edit-button{align-self:start}

.profile-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 20px}
.profile-stat-strip>div{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--color-border);border-radius:11px;background:var(--color-surface)}
.profile-stat-strip span{color:var(--color-text-muted);font-size:.64rem;text-transform:uppercase;font-weight:850}
.profile-stat-strip strong{font-size:1rem}

.profile-section{margin-top:18px}.profile-section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:9px}
.profile-section-head span{color:var(--color-primary);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.profile-section-head h2{margin:2px 0 0;font-size:1.15rem}.profile-section-head small{color:var(--color-text-muted)}
.profile-showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.showcase-sog{overflow:hidden;border:1px solid var(--color-border);border-radius:13px;background:var(--color-surface);transition:transform .15s,border-color .15s}
.showcase-sog:hover{transform:translateY(-3px);border-color:rgb(75 185 233 / 30%)}
.showcase-image-wrap{display:grid;aspect-ratio:1.12;place-items:center;overflow:hidden;background:#0b1219}
.showcase-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .1s ease}
.showcase-copy{display:grid;gap:2px;padding:9px 10px}.showcase-copy strong{font-size:.78rem}.showcase-copy span{color:var(--color-text-muted);font-size:.66rem}
.profile-empty-showcase{grid-column:1/-1;display:grid;justify-items:center;gap:5px;padding:44px;border:1px dashed var(--color-border);border-radius:13px;color:var(--color-text-muted)}
.profile-empty-showcase span{font-size:2rem}.profile-empty-showcase strong{color:var(--color-text)}
.profile-load-error{padding:30px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface)}

.profile-editor-hero{
    display:flex;align-items:end;justify-content:space-between;gap:20px;
    margin-bottom:12px;padding:18px 20px;border:1px solid var(--color-border);border-radius:16px;
    background:radial-gradient(circle at 90% 0,rgb(75 185 233 / 10%),transparent 28%),var(--color-surface)
}
.profile-editor-hero h1{margin:3px 0;font-size:clamp(2rem,5vw,3.25rem);line-height:.96;letter-spacing:-.05em}
.profile-editor-hero p{margin:0;color:var(--color-text-muted);font-size:.8rem}
.profile-editor-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);align-items:start;gap:11px}
.profile-editor-main,.profile-editor-side{display:grid;gap:11px}
.profile-editor-side{position:sticky;top:70px}
.profile-edit-card{padding:15px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface)}
.profile-edit-card-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:13px}
.profile-edit-card-head span{color:var(--color-primary);font-size:.59rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.profile-edit-card-head h2{margin:2px 0 0;font-size:1rem}
.profile-edit-card-head>strong{color:var(--color-text-muted);font-size:.72rem}

.profile-avatar-editor{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin-bottom:14px;padding:12px;border:1px solid var(--color-border);border-radius:12px;background:#0d141d}
.profile-avatar-preview{display:grid;width:82px;height:82px;place-items:center;overflow:hidden;border:2px solid rgb(255 255 255 / 75%);border-radius:18px;background:#131d27;font-size:2.5rem}
.profile-avatar-preview img{width:100%;height:100%;object-fit:cover}
.profile-avatar-editor p{margin:3px 0 8px;color:var(--color-text-muted);font-size:.68rem}
.profile-upload-actions{display:flex;gap:6px;flex-wrap:wrap}.profile-upload-button{cursor:pointer}

.profile-field{display:grid;gap:5px;margin-top:11px;color:var(--color-text-muted);font-size:.68rem;font-weight:800}
.profile-field>.input{width:100%;min-height:40px}.profile-bio-input{min-height:100px!important;resize:vertical;padding:10px}
.profile-field small{justify-self:end;color:var(--color-text-muted);font-weight:500}

.profile-sog-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-bottom:9px}
.profile-sog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px;max-height:640px;overflow:auto;padding-right:3px}
.profile-sog-card{overflow:hidden;padding:0;border:1px solid var(--color-border);border-radius:12px;background:#0c131c;color:inherit;text-align:left;cursor:pointer;transition:border-color .12s,transform .12s}
.profile-sog-card:hover{transform:translateY(-2px);border-color:rgb(75 185 233 / 28%)}
.profile-sog-card.is-selected{border-color:#4bb8e8;box-shadow:inset 0 0 0 1px rgb(75 185 233 / 18%)}
.profile-sog-image{position:relative;aspect-ratio:1.08;overflow:hidden;background:#091018}
.profile-sog-image img{width:100%;height:100%;object-fit:cover}
.profile-sog-add,.profile-sog-slot{position:absolute;top:7px;right:7px;display:grid;width:26px;height:26px;place-items:center;border:1px solid rgb(255 255 255 / 13%);border-radius:8px;background:rgb(8 13 20 / 88%);font-size:.72rem;font-weight:950}
.profile-sog-slot{background:#4bb8e8;color:#07131a}
.profile-sog-copy{display:grid;gap:2px;padding:8px}.profile-sog-copy strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-sog-copy span,.profile-sog-copy small{color:var(--color-text-muted);font-size:.61rem}
.profile-sog-empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--color-text-muted)}

.editor-preview-profile{--preview-accent:#4bb8e8;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:12px;border:1px solid color-mix(in srgb,var(--preview-accent) 30%,var(--color-border));border-radius:12px;background:#0c141d}
.editor-preview-avatar{display:grid;width:55px;height:55px;place-items:center;overflow:hidden;border-radius:13px;background:#121d27;font-size:1.8rem}
.editor-preview-avatar img{width:100%;height:100%;object-fit:cover}.editor-preview-profile>div:last-child{display:grid}.editor-preview-profile span{color:var(--preview-accent);font-size:.58rem}.editor-preview-profile strong{font-size:.9rem}.editor-preview-profile em{color:#c8a8ff;font-size:.55rem;font-style:normal}.editor-preview-profile p{margin:3px 0 0;color:var(--color-text-muted);font-size:.65rem}

.profile-banner-preview{display:grid;min-height:105px;place-items:center;margin-bottom:8px;border:1px solid var(--color-border);border-radius:11px;background:#0b1219 center/cover no-repeat;color:var(--color-text-muted);font-size:.7rem}
.nitro-perk-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:12px;color:#c7a6ff;font-size:.64rem}
.profile-save-dock{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border:1px solid var(--color-border);border-radius:13px;background:#111a24;box-shadow:0 16px 34px rgb(0 0 0 / 18%)}
.profile-save-dock>div{display:grid}.profile-save-dock strong{font-size:.75rem}.profile-save-dock span{color:var(--color-text-muted);font-size:.58rem}.profile-save-dock .button{min-width:120px}

[data-nitro-effect="glow"] .profile-public-hero{box-shadow:0 0 38px color-mix(in srgb,var(--profile-accent) 20%,transparent)}

@media(max-width:850px){.profile-editor-layout{grid-template-columns:1fr}.profile-editor-side{position:static}.profile-stat-strip{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.profile-public-hero{grid-template-columns:auto 1fr;align-items:center}.profile-edit-button{grid-column:1/-1;width:100%}.profile-public-avatar{width:78px;height:78px;border-radius:18px}.profile-stat-strip{grid-template-columns:1fr 1fr}.profile-editor-hero{align-items:flex-start;flex-direction:column}.profile-sog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.profile-exhibit-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:12px}
.profile-exhibit-slot{position:relative;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:6px}
.profile-exhibit-number{display:grid;width:25px;height:25px;place-items:center;border:1px solid var(--color-border);border-radius:7px;background:#0b1219;color:var(--color-text-muted);font-size:.61rem;font-weight:900}
.profile-exhibit-select{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:48px;padding:5px 8px;border:1px solid var(--color-border);border-radius:10px;background:#0b1219;color:var(--color-text);text-align:left;cursor:pointer}
.profile-exhibit-select:hover{border-color:rgb(75 185 233 / 35%)}
.profile-exhibit-select img{width:38px;height:38px;object-fit:cover;border-radius:7px}
.profile-exhibit-select>span{display:grid;min-width:0}.profile-exhibit-select strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem}.profile-exhibit-select small{color:var(--color-text-muted);font-size:.57rem;text-transform:uppercase}.profile-exhibit-select>b{color:var(--color-text-muted)}
.profile-exhibit-empty-icon{display:grid!important;width:38px;height:38px;place-items:center;border:1px dashed var(--color-border);border-radius:7px;font-size:1rem}
.profile-exhibit-remove{width:27px;height:27px;padding:0;border:1px solid var(--color-border);border-radius:7px;background:#121a24;color:#f58b9a;cursor:pointer}
.profile-exhibit-menu{position:absolute;z-index:30;top:54px;left:31px;right:33px;padding:7px;border:1px solid var(--color-border);border-radius:11px;background:#111923;box-shadow:0 18px 42px rgb(0 0 0 / 45%)}
.profile-exhibit-menu-search{width:100%;margin-bottom:6px}
.profile-exhibit-options{display:grid;gap:4px;max-height:280px;overflow:auto}
.profile-exhibit-option{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:5px;border:0;border-radius:8px;background:transparent;color:var(--color-text);text-align:left;cursor:pointer}
.profile-exhibit-option:hover:not(:disabled){background:rgb(75 185 233 / 9%)}.profile-exhibit-option:disabled{opacity:.42;cursor:not-allowed}
.profile-exhibit-option img{width:38px;height:38px;object-fit:cover;border-radius:7px}.profile-exhibit-option span{display:grid}.profile-exhibit-option strong{font-size:.66rem}.profile-exhibit-option small,.profile-exhibit-option em{color:var(--color-text-muted);font-size:.55rem;font-style:normal;text-transform:uppercase}
@media(max-width:650px){.profile-exhibit-slots{grid-template-columns:1fr}}
