.community-index #view-profile {
    --profile-cyan: #47dff2;
    --profile-violet: #9871ff;
    --profile-pink: #f255a2;
    --profile-mint: #48dea9;
    --profile-line: rgba(193, 202, 234, .13);
    --profile-panel: #151827;
}

.community-index #view-profile .profile-shell { overflow: visible; border-radius: 26px; background: #0f1220; }
.community-index #view-profile .profile-cover { height: clamp(190px, 21vw, 280px); overflow: hidden; border-radius: 25px 25px 0 0; }
.community-index #view-profile .profile-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,19,.68), transparent 52%); pointer-events: none; }
.community-index #view-profile .profile-header { align-items: flex-end; margin-top: -78px; }
.community-index #view-profile .profile-avatar { width: 142px; height: 142px; border-width: 7px; box-shadow: 0 18px 38px rgba(0,0,0,.35); }
.community-index #view-profile .profile-name { padding-bottom: 16px; }
.community-index #view-profile .profile-name h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.community-index #view-profile .profile-name p { color: #aeb5ca; font-weight: 650; }
.community-index #view-profile .profile-body { display: grid; gap: 22px; padding-top: 30px; }
.community-index #view-profile .profile-stats { gap: 9px; }
.community-index #view-profile .profile-stat { position: relative; min-height: 94px; overflow: hidden; padding: 18px; border-color: var(--profile-line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); }
.community-index #view-profile .profile-stat::after { content: ""; position: absolute; right: -21px; bottom: -29px; width: 68px; height: 68px; border: 1px solid rgba(71,223,242,.1); border-radius: 50%; }
.community-index #view-profile .profile-stat strong { font-size: 1.55rem; }
.community-index #view-profile .profile-stat span { color: #8d95ae; font-weight: 800; }

.community-index #view-profile .profile-settings-card { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); gap: 28px; padding: 22px; border: 1px solid var(--profile-line); border-radius: 20px; background: linear-gradient(135deg, rgba(152,113,255,.07), transparent 42%), var(--profile-panel); }
.community-index #view-profile .profile-settings-card header h2 { margin: 6px 0; font-size: 1.25rem; }
.community-index #view-profile .profile-settings-card header p { margin: 0; color: #9199b0; font-size: .78rem; line-height: 1.5; }
.community-index #view-profile .profile-settings-card .profile-form { margin: 0; padding: 0; border: 0; background: none; }
.community-index #view-profile .profile-settings-card .profile-form label { min-width: 0; }
.community-index #view-profile .profile-settings-card .profile-form input { min-height: 48px; }

.community-index #view-profile .profile-hub { margin-top: 8px; }
.community-index #view-profile .profile-beta-intro { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 12px; padding: 25px 27px; overflow: hidden; border: 1px solid rgba(71,223,242,.18); border-radius: 21px; background: radial-gradient(circle at 86% 35%, rgba(71,223,242,.13), transparent 25%), linear-gradient(112deg, rgba(54,20,76,.72), rgba(15,20,35,.94)); }
.community-index #view-profile .profile-beta-intro h2 { margin: 6px 0; font-size: clamp(1.5rem,3vw,2.4rem); }
.community-index #view-profile .profile-beta-intro p { margin: 0; color: #a8b0c7; }
.community-index #view-profile .profile-beta-intro .button { flex: 0 0 auto; }

.community-index #view-profile .profile-hub-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-bottom: 10px; padding: 7px; border: 1px solid var(--profile-line); border-radius: 18px; background: rgba(9,11,21,.62); }
.community-index #view-profile .profile-hub-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; min-height: 64px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #878fa8; cursor: pointer; text-align: left; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.community-index #view-profile .profile-hub-tabs button:hover { color: #e7eaf5; background: rgba(255,255,255,.04); }
.community-index #view-profile .profile-hub-tabs button:active { transform: scale(.97); }
.community-index #view-profile .profile-hub-tabs button.is-active { border-color: rgba(71,223,242,.2); background: linear-gradient(135deg, rgba(71,223,242,.1), rgba(152,113,255,.1)); color: #fff; }
.community-index #view-profile .profile-hub-tabs button:focus-visible { outline: 2px solid var(--profile-cyan); outline-offset: 2px; }
.community-index #view-profile .profile-hub-tabs span { min-width: 0; }
.community-index #view-profile .profile-hub-tabs strong,
.community-index #view-profile .profile-hub-tabs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-index #view-profile .profile-hub-tabs strong { font-size: .78rem; }
.community-index #view-profile .profile-hub-tabs small { margin-top: 3px; color: #737c96; font-size: .61rem; }
.community-index #view-profile .profile-hub-tabs b { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.06); color: #c7cde0; font-size: .7rem; }
.community-index #view-profile .profile-hub-tabs button.is-active b { background: rgba(71,223,242,.14); color: #aaf4ff; }

.community-index #view-profile .profile-hub-workspace { min-width: 0; }
.community-index #view-profile .profile-hub-panel { width: 100%; min-height: 360px; padding: 24px; border-radius: 20px; }
.community-index #view-profile .profile-hub-panel[hidden] { display: none; }
.community-index #view-profile .profile-hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; padding-bottom: 16px; border-bottom: 1px solid var(--profile-line); }
.community-index #view-profile .profile-hub-card-head > div > span { color: var(--profile-cyan); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.community-index #view-profile .profile-hub-card-head h3 { margin: 5px 0 3px; font-size: 1.35rem; }
.community-index #view-profile .profile-hub-card-head p { margin: 0; color: #8f98b0; font-size: .72rem; }
.community-index #view-profile .profile-hub-card-head > b { display: grid; place-items: center; min-width: 43px; height: 43px; border: 1px solid rgba(71,223,242,.18); border-radius: 12px; background: rgba(71,223,242,.08); color: #aaf4ff; font-size: 1rem; }
.community-index #view-profile .profile-hub-split { display: grid; grid-template-columns: minmax(260px,.68fr) minmax(0,1.32fr); gap: 22px; }
.community-index #view-profile .profile-hub-split > form { align-self: start; padding: 16px; border: 1px solid var(--profile-line); border-radius: 16px; background: rgba(5,7,16,.22); }
.community-index #view-profile .profile-hub-split > form > strong { margin-bottom: 3px; color: #d9ddec; font-size: .78rem; }
.community-index #view-profile .profile-hub-list { max-height: 520px; overflow: auto; padding-right: 3px; }
.community-index #view-profile .profile-hub-person { width: 100%; min-height: 66px; }
.community-index #view-profile .profile-hub-person > span:not(.profile-hub-avatar) { flex: 1; min-width: 0; }
.community-index #view-profile .profile-hub-person > .profile-hub-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
}
.community-index #view-profile .profile-hub-person > .profile-hub-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.community-index #view-profile .profile-hub-person strong,
.community-index #view-profile .profile-hub-person small { display: block; }
.community-index #view-profile .profile-hub-person small { margin-top: 3px; color: #7f879f; font-size: .67rem; }
.community-index #view-profile .profile-hub-person i { color: var(--profile-cyan); font-style: normal; }
.community-index #view-profile .profile-friends-panel { min-height: 440px; }
.community-index #view-profile .profile-chat-view { display: none; }
.community-index #view-profile .profile-friends-panel.is-chat-open .profile-friends-list-view { display: none; }
.community-index #view-profile .profile-friends-panel.is-chat-open .profile-chat-view { display: grid; grid-template-rows: auto minmax(220px, 1fr) auto; min-height: 390px; }
.community-index #view-profile .profile-chat-head { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--profile-line); }
.community-index #view-profile .profile-chat-head > button { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--profile-line); border-radius: 11px; background: rgba(255,255,255,.04); color: #e9ebf5; cursor: pointer; font-size: 1rem; }
.community-index #view-profile .profile-chat-head > button:hover { border-color: rgba(71,223,242,.34); background: rgba(71,223,242,.08); }
.community-index #view-profile .profile-chat-head > div { min-width: 0; }
.community-index #view-profile .profile-chat-head span,
.community-index #view-profile .profile-chat-head strong { display: block; }
.community-index #view-profile .profile-chat-head span { color: #7f889f; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.community-index #view-profile .profile-chat-head strong { margin-top: 2px; color: #f1f2f8; }
.community-index #view-profile .profile-chat-messages { align-content: end; max-height: 410px; margin: 0; padding: 18px 4px; }
.community-index #view-profile .profile-chat-messages p { display: grid; gap: 5px; width: fit-content; max-width: min(78%, 560px); padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.07); font-weight: 600; }
.community-index #view-profile .profile-chat-messages p.mine { border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, #8052ea, #6540ca); }
.community-index #view-profile .profile-chat-messages p small { color: rgba(255,255,255,.48); font-size: .58rem; font-weight: 600; }
.community-index #view-profile .profile-chat-view > form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding-top: 14px; border-top: 1px solid var(--profile-line); }
.community-index #view-profile .profile-chat-view > form input { min-height: 48px; }
.community-index #view-profile .profile-chat-view > form button { min-width: 105px; }
.community-index #view-profile .profile-chat-empty { display: grid; place-items: center; align-self: center; gap: 5px; color: #7f889f; text-align: center; }
.community-index #view-profile .profile-chat-empty strong { color: #d9ddea; }
.community-index #view-profile .profile-chat-empty span { font-size: .72rem; }
.community-index #view-profile .profile-hub-empty { display: grid; place-items: start; gap: 5px; min-height: 110px; padding: 24px; border: 1px dashed var(--profile-line); border-radius: 15px; color: #8c94aa; }
.community-index #view-profile .profile-hub-empty strong { color: #d9dce8; font-size: .85rem; }
.community-index #view-profile .profile-hub-empty span { font-size: .73rem; line-height: 1.45; }
.community-index #view-profile .score-submission-row { min-height: 64px; padding: 11px 13px; }
.community-index #view-profile .profile-hub-loading { display: grid; place-items: center; min-height: 260px; color: #8e97af; }
.community-index #view-profile .profile-hub-loading span { width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--profile-cyan); border-radius: 50%; animation: profileHubSpin .8s linear infinite; }
@keyframes profileHubSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .community-index #view-profile .profile-settings-card { grid-template-columns: 1fr; gap: 15px; }
    .community-index #view-profile .profile-hub-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .community-index #view-profile .profile-hub-split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .community-index #view-profile { min-width: 0; padding-bottom: 20px; overflow: clip; }
    .community-index #view-profile .profile-shell { width: 100%; min-width: 0; overflow: hidden; border-radius: 21px; }
    .community-index #view-profile .profile-cover { height: 145px; border-radius: 20px 20px 0 0; }
    .community-index #view-profile .profile-cover-edit { top: 14px; right: 14px; bottom: auto; width: auto; height: 38px; min-height: 38px; padding-inline: 12px; border-radius: 999px; }
    .community-index #view-profile .profile-header { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 11px; align-items: end; margin: -44px 14px 0; }
    .community-index #view-profile .profile-avatar { width: 88px; height: 88px; border-width: 5px; }
    .community-index #view-profile .profile-name { align-self: end; width: auto; min-width: 0; padding: 0 0 8px; }
    .community-index #view-profile .profile-name h1 { overflow: hidden; margin-bottom: 3px; font-size: 1.45rem; text-overflow: ellipsis; white-space: nowrap; }
    .community-index #view-profile .profile-name p { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
    .community-index #view-profile .profile-actions { width: 100%; margin: -4px 0 0; padding: 0; }
    .community-index #view-profile .profile-actions { grid-column: 1 / -1; }
    .community-index #view-profile .profile-actions .button { width: 100%; }
    .community-index #view-profile .profile-body { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr); gap: 15px; overflow: hidden; padding: 17px 12px 22px; }
    .community-index #view-profile .profile-body > *,
    .community-index #view-profile .profile-settings-card,
    .community-index #view-profile .profile-medals-index,
    .community-index #view-profile .profile-hub,
    .community-index #view-profile .profile-hub-workspace,
    .community-index #view-profile .profile-hub-panel { width: 100%; max-width: 100%; min-width: 0; }
    .community-index #view-profile .profile-stats { width: 100%; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .community-index #view-profile .profile-stat { min-width: 0; min-height: 78px; padding: 13px; }
    .community-index #view-profile .profile-stat strong { overflow: hidden; font-size: 1.2rem; text-overflow: ellipsis; }
    .community-index #view-profile .profile-stat span { overflow: hidden; font-size: .62rem; line-height: 1.25; overflow-wrap: anywhere; }
    .community-index #view-profile .profile-stat:last-child { grid-column: 1 / -1; }
    .community-index #view-profile .profile-settings-card { padding: 16px 14px; }
    .community-index #view-profile .profile-settings-card .profile-form { width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr); }
    .community-index #view-profile .profile-settings-card .profile-form > * { min-width: 0; grid-column: 1; }
    .community-index #view-profile .profile-beta-intro { align-items: stretch; flex-direction: column; gap: 14px; padding: 18px 16px; }
    .community-index #view-profile .profile-beta-intro .button { width: 100%; }
    .community-index #view-profile .profile-hub-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 5px; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .community-index #view-profile .profile-hub-tabs::-webkit-scrollbar { display: none; }
    .community-index #view-profile .profile-hub-tabs button { flex: 0 0 138px; min-height: 58px; padding: 8px 9px; scroll-snap-align: start; }
    .community-index #view-profile .profile-hub-panel { min-height: 300px; padding: 17px 14px; }
    .community-index #view-profile .profile-hub-card-head { align-items: flex-start; }
    .community-index #view-profile .profile-hub-card-head p { max-width: 210px; }
    .community-index #view-profile .profile-hub-split > form { min-width: 0; padding: 13px; }
    .community-index #view-profile .profile-hub-list { max-height: none; }
    .community-index #view-profile .profile-hub-person { min-width: 0; }
    .community-index #view-profile .profile-chat-view > form { grid-template-columns: 1fr; }
    .community-index #view-profile .profile-chat-view > form button { width: 100%; }
    .community-index #view-profile .profile-chat-messages p { max-width: 88%; }
    .community-index #view-profile + .profile-community,
    .community-index #view-profile .profile-community { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .community-index #view-profile .profile-hub-loading span { animation: none; }
}