/* Compact profile cover layout, using HeroUI v3 Avatar, Button and Tabs tokens.
 * Component sources retained under ../reference/heroui-home/, Apache-2.0.
 */
.profile-page .profile-header { height:220px; position:relative; overflow:hidden; border:0; border-radius:24px; background-size:cover; background-position:center; background-color:oklch(.2103 .0059 285.89); }
.profile-page .profile-header::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.65)); pointer-events:none; }
.profile-page .profile-header-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; position:absolute; left:16px; right:16px; bottom:16px; z-index:2; padding:0; margin:0; border:0; border-radius:0; background:transparent !important; color:#fff; font:400 14px/20px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; }
.profile-header-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.profile-page .profile-header-identity > .avatar-img { width:48px; height:48px; margin:0; object-fit:cover; border-radius:24px; flex-shrink:0; }
.profile-header-details { min-width:0; }
.profile-page .profile-header-username { display:block; font:500 16px/24px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; color:#fff !important; overflow-wrap:anywhere; }
.profile-header-groups { margin-top:4px; font-size:12px; }
.profile-page .profile-header-actions { display:flex; flex-shrink:0; }
.profile-page .profile-header-actions .btn-group { display:flex; gap:8px; }
.profile-page .profile-header-actions .btn { display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:36px; padding:0 12px; margin:0 !important; border:0 !important; border-radius:24px !important; background:oklch(27.4% .006 286.033) !important; color:#fff !important; box-shadow:none; }
.profile-page .profile-header-actions .btn-theme { background:oklch(.6204 .195 253.83) !important; }
.profile-page .profile-header-actions .btn:focus-visible { outline:2px solid white; outline-offset:2px; }
.profile-tabs-wrap { margin:16px 0; }
.profile-page .profile-tabs-new { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin:0; width:fit-content; max-width:100%; border:0; border-radius:24px; background:oklch(27.4% .006 286.033); }
.profile-page .profile-tabs-new .profile-nav-link { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; margin:0; border:0; border-radius:20px; color:oklch(70.5% .015 286.067) !important; font:500 14px/20px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; }
.profile-page .profile-tabs-new .profile-nav-link.active { color:oklch(.9911 0 0) !important; background:oklch(.2103 .0059 285.89); }
.profile-page .profile-tabs-new .profile-nav-link::after { display:none; }
.profile-page .profile-card { border-radius:24px; padding-top:0; }
@media(max-width:575px) { .profile-page .profile-header { height:180px; } .profile-page .profile-header-bottom { left:12px; right:12px; bottom:12px; gap:8px; } .profile-page .profile-header-actions .btn-group { gap:4px; } }

.container.profile-page { width:100%; max-width:1320px; margin-inline:auto; padding-inline:24px; }
@media(max-width:575px) { .container.profile-page { padding-inline:16px; } }

/* Individual Card blocks and Chip ranks: HeroUI v3 source utilities expanded. */
.profile-page .profile-header-identity { flex-wrap:wrap; gap:12px; }
.profile-page .profile-info-block { display:flex; flex-direction:column; gap:12px; padding:16px; border:0; border-radius:24px; background:oklch(.2103 .0059 285.89); box-shadow:0 0 0 0 transparent inset; min-width:0; }
.profile-page .profile-info-block__label { color:oklch(70.5% .015 286.067); font:400 14px/20px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; }
.profile-page .profile-info-block .profile-header-username { font-size:14px; line-height:24px; font-weight:500; }
.profile-page .profile-header-groups { display:flex; flex-wrap:wrap; gap:4px; margin:0; }
.profile-page .profile-rank-chip { display:inline-flex; align-items:center; gap:2px; width:fit-content; padding:2px 8px; border-radius:16px; background:oklch(27.4% .006 286.033); color:oklch(.9911 0 0); font:500 12px/20px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; }
.profile-page .profile-header-actions:has(.btn) { padding:16px; border-radius:24px; background:oklch(.2103 .0059 285.89); }
@media(max-width:575px) { .profile-page .profile-header-bottom { flex-wrap:wrap; } .profile-page .profile-header-actions:has(.btn) { padding:8px; } .profile-page .profile-info-block { padding:12px; gap:4px; } .profile-page .profile-header { min-height:220px; } }

/* Profile information sits below the cover, outside the image. */
.profile-page .profile-header-bottom { position:static; inset:auto; margin:16px 0 0; padding:0; flex-wrap:wrap; }
@media(max-width:575px) { .profile-page .profile-header { height:180px; min-height:0; } }

/* Unified HeroUI Card + Avatar + Chip + Separator identity panel. */
.profile-page .profile-identity-card { display:flex; flex-direction:column; align-items:center; gap:12px; width:240px; max-width:100%; padding:16px; border-radius:24px; background:oklch(.2103 .0059 285.89); font:400 14px/20px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; }
.profile-page .profile-identity-card__avatar { width:96px; height:96px; margin:0; border-radius:24px; object-fit:cover; }
.profile-page .profile-identity-card .profile-header-groups { justify-content:center; }
.profile-page .profile-identity-card__separator { flex-shrink:0; width:100%; height:1px; margin:0; border:0; border-radius:2px; background:oklch(25% .006 286.033); }
.profile-page .profile-identity-card__age { display:flex; flex-direction:column; align-items:center; gap:4px; }
.profile-page .profile-identity-card__age > span { color:oklch(70.5% .015 286.067); }
.profile-page .profile-identity-card__age > strong { font-weight:500; }
.profile-page .profile-header-bottom { align-items:flex-start; }

.profile-page .profile-identity-card { box-sizing:border-box; padding:10px; align-items:stretch; text-align:left; }
.profile-page .profile-identity-card__avatar { width:100%; height:auto; aspect-ratio:1; border-radius:20px; object-fit:cover; }
.profile-page .profile-identity-card > .profile-header-username,
.profile-page .profile-identity-card > .profile-header-groups,
.profile-page .profile-identity-card > .profile-identity-card__age { margin-inline:11px; }
.profile-page .profile-identity-card .profile-header-groups { justify-content:flex-start; }
.profile-page .profile-identity-card__separator { width:calc(100% - 22px); margin-inline:11px; }
.profile-page .profile-identity-card__age { align-items:flex-start; padding-bottom:11px; }

.profile-page .profile-identity-card__name-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-inline:11px; }

/* HeroUI v3 Button md primary, as used by Preview on Expo Go.
 * Source: packages/styles/components/button.css and themes/default/variables.css.
 * Verified against the rendered DisclosureGroup demo. Only label is changed.
 */
.profile-page .profile-rank-chip--admin {
 position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center;
 gap:8px; flex:none; box-sizing:border-box; width:fit-content; height:36px; padding:0 16px;
 border:0; border-radius:24px; background:oklch(.6204 .195 253.83); color:oklch(.9911 0 0);
 font:500 14px/20px BronzCategoryInter,Inter,ui-sans-serif,system-ui,sans-serif;
 letter-spacing:normal; white-space:nowrap; box-shadow:none; text-transform:none;
 transform-origin:center; user-select:none; transition:transform 250ms ease,background-color 100ms ease,box-shadow 100ms ease;
}
.profile-page .profile-rank-chip--admin svg { pointer-events:none; flex-shrink:0; align-self:center; width:16px; height:16px; margin:4px -2px; }
.profile-page .profile-rank-chip--admin:hover { background:color-mix(in oklab,oklch(.6204 .195 253.83) 90%,oklch(.9911 0 0) 10%); }
@media(max-width:767px) { .profile-page .profile-rank-chip--admin { height:40px; } }
@media(max-width:639px) { .profile-page .profile-rank-chip--admin svg { width:20px; height:20px; margin:2px -2px; } }
@media(prefers-reduced-motion:reduce) { .profile-page .profile-rank-chip--admin { transition:none; } }

.profile-page .profile-rank-chip--admin { height:22px; padding:0 8px; gap:4px; border-radius:14px; font-size:10px; line-height:14px; }
.profile-page .profile-rank-chip--admin svg { width:10px; height:10px; margin:1px -1px; }

.profile-page .profile-avatar-trigger { position:relative; display:block; width:100%; padding:0; margin:0; border:0; border-radius:20px; background:transparent; cursor:pointer; }
.profile-page .profile-avatar-trigger--static { cursor:default; }
.profile-page .profile-avatar-trigger:focus-visible { outline:2px solid oklch(.6204 .195 253.83); outline-offset:2px; }
.profile-page .profile-avatar-tooltip { position:absolute; z-index:20; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:max-content; max-width:240px; padding:8px 12px; border-radius:16px; background:oklch(27.4% .006 286.033); color:white; font:400 12px/16px BronzCategoryInter,Inter,sans-serif; box-shadow:0 4px 12px #0003; visibility:hidden; opacity:0; pointer-events:none; }
.profile-page .profile-avatar-trigger:hover .profile-avatar-tooltip, .profile-page .profile-avatar-trigger:focus-visible .profile-avatar-tooltip { visibility:visible; opacity:1; }

#profileAvatarModal .profile-banner-modal__preview { width: 160px; height: 160px; margin-inline: auto; border-radius: 20px; object-fit: cover; }

.profile-page .profile-banner-edit { position:absolute; right:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border:0; border-radius:24px; background:oklch(27.4% .006 286.033); color:#fff; font:500 14px/20px BronzCategoryInter,ui-sans-serif,system-ui,sans-serif; cursor:pointer; opacity:0; transition:opacity .15s ease,background .15s ease; }
.profile-page .profile-header:hover .profile-banner-edit,
.profile-page .profile-header:focus-within .profile-banner-edit { opacity:1; }
.profile-page .profile-banner-edit:hover { background:oklch(32% .006 286.033); }
.profile-page .profile-banner-edit:focus-visible { outline:2px solid #008fff; outline-offset:3px; }
@media (hover:none) { .profile-page .profile-banner-edit { opacity:1; } }

.profile-page .profile-header-bottom > .profile-identity-card { flex-shrink:0; }
.profile-page .profile-header-bottom > .profile-tabs-wrap { flex:1; min-width:0; margin:0; padding:0; }
.profile-page .profile-header-bottom > .profile-tabs-wrap .profile-tabs-new { margin-top:0; }
@media(max-width:575px) { .profile-page .profile-header-bottom > .profile-tabs-wrap { flex-basis:100%; } }

/* Match the profile tab group to the avatar card surface. */
.profile-page .profile-tabs-new { background:oklch(.2103 .0059 285.89); }
.profile-page .profile-tabs-new .profile-nav-link.active { background:oklch(.2103 .0059 285.89); }

.profile-page .profile-tabs-new .profile-nav-link.active { background:oklch(.1776 .0053 285.93); border-radius:20px; }

.profile-page .profile-main-column { flex:1; min-width:0; }
.profile-page .profile-main-column > .profile-tabs-wrap { margin:0 0 16px; }
.profile-page .profile-main-column > .profile-card { margin:0; width:100%; }
.profile-page .profile-main-column > .profile-header-actions { margin:0 0 16px; }
@media(max-width:767px) { .profile-page .profile-main-column { flex-basis:100%; } }

.profile-page .profile-identity-card { width:200px; gap:10px; }

.profile-page .profile-social-card { padding:20px; border-radius:20px; background:oklch(27.4% .006 286.033); }
.profile-page .profile-social-card h3 { margin:0 0 16px; color:#fff; font-size:16px; line-height:24px; font-weight:500; }
.profile-page .profile-social-card__items { display:flex; flex-wrap:wrap; gap:12px; }
.profile-page .profile-social-link { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:8px 14px; border-radius:16px; background:oklch(.2103 .0059 285.89); color:#fff; font-size:14px; line-height:20px; text-decoration:none; }
.profile-page .profile-social-link svg { flex-shrink:0; }
.profile-page .profile-social-link--telegram svg { color:#fff; }
.profile-page .profile-social-link--discord svg { color:#5865F2; }

.profile-page .profile-social-link small { display:block; max-width:240px; overflow-wrap:anywhere; font-size:12px; color:oklch(70.5% .015 286.067); }

.profile-page .profile-identity-card__name-row { flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.profile-page .profile-identity-card__name-row .profile-header-username { width:100%; text-align:center; }
.profile-page .profile-identity-card .profile-header-groups { justify-content:center; }
.profile-page .profile-identity-card .profile-rank-chip--admin { height:26px; padding:0 10px; gap:5px; border-radius:16px; font-size:11px; line-height:16px; }
.profile-page .profile-identity-card .profile-rank-chip--admin svg { width:12px; height:12px; margin:1px -1px; }

.profile-page .profile-social-card { background:oklch(.2103 .0059 285.89); }
.profile-page .profile-social-link { padding:0; border-radius:0; background:transparent; }
.profile-page .profile-social-card__items { gap:24px; }

/* Information contains one social card, without an enclosing card surface. */
.profile-page .profile-card:has(#user.active) { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.profile-page .profile-card:has(#user.active) > .main-card-body { padding:0 !important; background:transparent !important; }

.profile-page .profile-presence-card { margin-top:16px; padding:20px; border-radius:20px; background:oklch(.2103 .0059 285.89); }
.profile-page .profile-presence-card h3 { margin:0 0 12px; color:#fff; font-size:16px; line-height:24px; font-weight:500; }
.profile-page .profile-presence-status { display:inline-flex; align-items:center; gap:8px; color:oklch(70.5% .015 286.067); font-size:14px; line-height:20px; }
.profile-page .profile-presence-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0; }
.profile-page .profile-presence-status--online { color:#30c778; }

.profile-page .profile-bio-card { margin-bottom:16px; padding:20px; border-radius:20px; background:oklch(.2103 .0059 285.89); }
.profile-page .profile-bio-card h3 { margin:0 0 12px; color:#fff; font-size:16px; line-height:24px; font-weight:500; }
.profile-page .profile-bio-card p { margin:0; color:oklch(70.5% .015 286.067); font-size:14px; line-height:22px; }

.profile-page .profile-bio-content { margin-bottom:20px; }
.profile-page .profile-bio-content p { margin:0; color:oklch(70.5% .015 286.067); font-size:14px; line-height:22px; }

.profile-page .profile-social-card { display:flex; align-items:flex-start; gap:24px; }
.profile-page .profile-bio-content { flex:1; min-width:0; margin-bottom:0; }
.profile-page .profile-social-content { flex:1; min-width:0; }
@media(max-width:575px) { .profile-page .profile-social-card { gap:16px; } .profile-page .profile-social-card__items { flex-direction:column; gap:12px; } }

.profile-page .profile-identity-card__presence { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-inline:11px; }
.profile-page .profile-identity-card__presence-label { color:oklch(70.5% .015 286.067); font-size:14px; line-height:20px; }

.profile-page .profile-social-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; min-height:240px; align-content:start; }
.profile-page .profile-information-divider { grid-column:1 / -1; width:100%; height:1px; margin:0; border:0; background:rgba(255,255,255,.09); }
.profile-page .profile-awards-content { grid-column:1 / -1; min-height:68px; }
.profile-page .profile-awards-content h3 { margin-bottom:0; }
@media(max-width:575px) { .profile-page .profile-social-card { gap:16px; } }

.profile-page .profile-awards-list { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:16px; }
.profile-page .profile-award { display:block; width:64px; height:64px; object-fit:contain; transition:transform 180ms ease; transform-origin:center; }
.profile-page .profile-award:hover { transform:scale(1.2); }
@media(prefers-reduced-motion:reduce) { .profile-page .profile-award { transition:none; } }

.profile-page .profile-ban-trigger { position:relative; }
.profile-page .profile-ban-tooltip { position:absolute; z-index:30; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); padding:8px 12px; width:max-content; border-radius:12px; background:oklch(27.4% .006 286.033); color:#fff; font-size:12px; line-height:16px; font-weight:400; visibility:hidden; opacity:0; pointer-events:none; box-shadow:0 4px 12px #0003; }
.profile-page .profile-ban-trigger:hover .profile-ban-tooltip,
.profile-page .profile-ban-trigger:focus-visible .profile-ban-tooltip { opacity:1; visibility:visible; }
.profile-page .profile-ban-status { display:flex; flex-direction:column; gap:6px; margin-inline:11px; color:#ff7e87; font-size:12px; line-height:18px; overflow-wrap:anywhere; }
.profile-page .profile-ban-status strong { font-size:14px; }

/* Profile card surfaces. */
.profile-page .profile-identity-card,
.profile-page .profile-social-card,
.profile-page .profile-card,
.profile-page .profile-header-actions:has(.btn),
.profile-page .profile-tabs-new { background:#161616; }