@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bebas+Neue&family=Caveat:wght@400..700&family=Cinzel:wght@400..900&family=Comfortaa:wght@300..700&family=Montserrat:wght@300..900&family=Orbitron:wght@400..900&family=Pacifico&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:wght@300;400;500;600;700;800&family=Rajdhani:wght@300;400;500;600;700&family=Russo+One&family=Titillium+Web:wght@300;400;600;700&display=swap');

:root {
    --modern-bg: #0a0a0a;
    --modern-surface: #111111;
    --modern-surface-raised: #171717;
    --modern-border: rgba(255,255,255,.10);
    --modern-border-strong: rgba(255,255,255,.16);
    --modern-text: #e2e8f0;
    --modern-muted: #8993a4;
    --modern-accent: #4B69B6;
    --modern-accent-bright: #7692d8;
    --modern-accent-rgb: 75,105,182;
    --modern-shadow: 0 22px 60px rgba(0,0,0,.34);
}

body {
    position: relative;
    display: block;
    min-height: 100vh !important;
    padding-top: 90px !important;
    padding-bottom: 6rem !important;
    background-color: #080b12 !important;
    background-image:
        radial-gradient(circle at 16% 18%,rgba(75,105,182,.24),transparent 34%),
        radial-gradient(circle at 82% 10%,rgba(113,73,151,.16),transparent 30%),
        radial-gradient(circle at 72% 78%,rgba(42,126,146,.14),transparent 36%),
        linear-gradient(145deg,#090c13 0%,#0d111c 52%,#080a10 100%) !important;
    background-attachment: fixed !important;
    color: var(--modern-text);
    font-family: "Titillium Web", sans-serif !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(rgba(5,8,16,.24),rgba(5,8,16,.48));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ambient-bubbles {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

body > .site-content,
body > .footer {
    position: relative;
    z-index: 2;
}

.site-content {
    width: 100%;
}
.ambient-bubbles span {
    position: absolute;
    bottom: -160px;
    width: var(--bubble-size,70px);
    height: var(--bubble-size,70px);
    background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),rgba(118,146,216,.07) 38%,rgba(75,105,182,.02) 68%);
    border: 1px solid rgba(151,174,230,.1);
    border-radius: 50%;
    box-shadow: inset 0 0 28px rgba(118,146,216,.06),0 0 35px rgba(75,105,182,.04);
    opacity: .35;
    filter: blur(var(--bubble-blur,1px));
    animation: ambient-bubble var(--bubble-duration,22s) linear infinite;
    animation-delay: var(--bubble-delay,0s);
}
.ambient-bubbles span:nth-child(1) { left: 4%; --bubble-size:38px; --bubble-duration:19s; --bubble-delay:-7s; }
.ambient-bubbles span:nth-child(2) { left: 13%; --bubble-size:92px; --bubble-duration:28s; --bubble-delay:-20s; --bubble-blur:2px; }
.ambient-bubbles span:nth-child(3) { left: 25%; --bubble-size:54px; --bubble-duration:23s; --bubble-delay:-11s; }
.ambient-bubbles span:nth-child(4) { left: 36%; --bubble-size:124px; --bubble-duration:34s; --bubble-delay:-25s; --bubble-blur:3px; }
.ambient-bubbles span:nth-child(5) { left: 48%; --bubble-size:44px; --bubble-duration:21s; --bubble-delay:-15s; }
.ambient-bubbles span:nth-child(6) { left: 57%; --bubble-size:76px; --bubble-duration:27s; --bubble-delay:-4s; }
.ambient-bubbles span:nth-child(7) { left: 66%; --bubble-size:34px; --bubble-duration:18s; --bubble-delay:-13s; }
.ambient-bubbles span:nth-child(8) { left: 73%; --bubble-size:112px; --bubble-duration:32s; --bubble-delay:-28s; --bubble-blur:3px; }
.ambient-bubbles span:nth-child(9) { left: 82%; --bubble-size:61px; --bubble-duration:24s; --bubble-delay:-9s; }
.ambient-bubbles span:nth-child(10) { left: 91%; --bubble-size:42px; --bubble-duration:20s; --bubble-delay:-17s; }
.ambient-bubbles span:nth-child(11) { left: 31%; --bubble-size:28px; --bubble-duration:17s; --bubble-delay:-2s; }
.ambient-bubbles span:nth-child(12) { left: 62%; --bubble-size:48px; --bubble-duration:25s; --bubble-delay:-22s; }
@keyframes ambient-bubble {
    0% { transform: translate3d(0,0,0) scale(.78); opacity: 0; }
    12% { opacity: .3; }
    55% { transform: translate3d(22px,-58vh,0) scale(1); opacity: .38; }
    88% { opacity: .18; }
    100% { transform: translate3d(-14px,-125vh,0) scale(1.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ambient-bubbles span { animation: none; opacity: .12; }
}

/* Optional server-wide seasonal editions */
.seasonal-effects {
    position: fixed;
    z-index: 3;
    inset: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
}
.seasonal-effects span { position: absolute; }

body.season-christmas {
    --modern-accent: #b91c32;
    --modern-accent-bright: #72d6c0;
    --modern-accent-rgb: 185,28,50;
    background-image:
        radial-gradient(circle at 14% 12%,rgba(202,42,62,.25),transparent 30%),
        radial-gradient(circle at 83% 14%,rgba(42,143,112,.22),transparent 31%),
        radial-gradient(circle at 65% 82%,rgba(105,179,220,.16),transparent 36%),
        linear-gradient(145deg,#071112 0%,#102426 48%,#090e16 100%) !important;
}
body.season-christmas::before {
    background: linear-gradient(rgba(4,15,17,.18),rgba(4,10,15,.5));
    backdrop-filter: blur(7px) saturate(1.08);
}
body.season-christmas .ambient-bubbles { opacity: .35; }
body.season-christmas .seasonal-effects { display: block; }
body.season-christmas .seasonal-effects span {
    top: -12vh;
    width: var(--season-size,7px);
    height: var(--season-size,7px);
    left: var(--season-x,5%);
    background:
        radial-gradient(circle,rgba(255,255,255,1) 0 30%,rgba(222,247,255,.9) 36% 58%,rgba(255,255,255,0) 72%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(200,241,255,.7);
    opacity: .82;
    filter: blur(var(--snow-blur,0));
    animation: christmas-snow var(--season-speed,13s) linear var(--season-delay,0s) infinite;
}
body.season-christmas .site-navbar,
body.season-christmas .site-footer,
body.season-christmas .card,
body.season-christmas .profile-panel,
body.season-christmas .chat-shell {
    border-color: rgba(174,226,218,.17);
    box-shadow: 0 18px 50px rgba(0,0,0,.3),inset 0 1px rgba(235,255,252,.035);
}
body.season-christmas .card-header,
body.season-christmas .profile-panel > header {
    background: linear-gradient(90deg,rgba(31,119,91,.14),rgba(174,28,51,.08));
}
body.season-christmas .site-navbar::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -2px;
    left: 18px;
    height: 2px;
    background: repeating-linear-gradient(90deg,#d22943 0 20px,#f5f8fb 20px 40px,#2c9b78 40px 60px);
    opacity: .72;
}
@keyframes christmas-snow {
    0% { transform: translate3d(0,-12vh,0) rotate(0) scale(.72); opacity: 0; }
    8% { opacity: .9; }
    48% { transform: translate3d(var(--season-drift,35px),52vh,0) rotate(130deg) scale(1); opacity: .86; }
    100% { transform: translate3d(-18px,116vh,0) rotate(280deg) scale(.8); opacity: .18; }
}

body.season-halloween {
    --modern-accent: #e46b16;
    --modern-accent-bright: #c78aff;
    --modern-accent-rgb: 228,107,22;
    background-image:
        radial-gradient(circle at 16% 14%,rgba(235,101,16,.24),transparent 31%),
        radial-gradient(circle at 82% 12%,rgba(115,45,160,.24),transparent 32%),
        radial-gradient(circle at 68% 80%,rgba(115,36,127,.16),transparent 38%),
        linear-gradient(145deg,#0d070e 0%,#170c1c 48%,#08070c 100%) !important;
}
body.season-halloween::before {
    background: linear-gradient(rgba(12,4,14,.18),rgba(7,3,10,.56));
    backdrop-filter: blur(8px) saturate(1.12);
}
body.season-halloween .ambient-bubbles span {
    background: radial-gradient(circle at 35% 30%,rgba(255,145,52,.2),rgba(145,54,183,.07) 45%,transparent 70%);
    border-color: rgba(224,106,31,.1);
}
body.season-halloween .seasonal-effects { display: block; }
body.season-halloween .seasonal-effects span {
    bottom: var(--pumpkin-y,8%);
    width: var(--season-size,30px);
    height: var(--season-size,30px);
    left: var(--season-x,5%);
    background:
        radial-gradient(ellipse at 31% 52%,rgba(255,176,55,.42) 0 29%,transparent 31%),
        radial-gradient(ellipse at 69% 52%,rgba(255,176,55,.42) 0 29%,transparent 31%),
        linear-gradient(90deg,#c84c0a 0%,#f68118 24%,#ff9d24 50%,#f68118 76%,#b83d08 100%);
    border: 1px solid rgba(255,175,61,.55);
    border-radius: 44% 44% 48% 48% / 43% 43% 55% 55%;
    clip-path: none;
    box-shadow: inset 0 -4px 7px rgba(91,20,0,.38),inset 0 3px 5px rgba(255,193,79,.3);
    filter: drop-shadow(0 0 10px rgba(235,95,16,.58));
    opacity: 0;
    animation: halloween-pumpkin var(--season-speed,12s) ease-in-out var(--season-delay,0s) infinite;
}
body.season-halloween .seasonal-effects span::before {
    content: "";
    position: absolute;
    top: -18%;
    left: 43%;
    width: 22%;
    height: 28%;
    background: linear-gradient(90deg,#315a1e,#65912d);
    border-radius: 45% 45% 18% 18%;
    transform: rotate(7deg);
}
body.season-halloween .seasonal-effects span::after {
    content: "";
    position: absolute;
    inset: 25% 16% 19%;
    background:
        linear-gradient(145deg,transparent 38%,#351008 39% 63%,transparent 64%) 4% 0/30% 32% no-repeat,
        linear-gradient(215deg,transparent 38%,#351008 39% 63%,transparent 64%) 96% 0/30% 32% no-repeat,
        linear-gradient(25deg,transparent 38%,#351008 39% 63%,transparent 64%) 0 100%/31% 31% no-repeat,
        linear-gradient(-25deg,transparent 38%,#351008 39% 63%,transparent 64%) 100% 100%/31% 31% no-repeat,
        linear-gradient(#351008,#351008) 50% 82%/52% 16% no-repeat;
    filter: drop-shadow(0 0 4px rgba(255,214,83,.75));
}
body.season-halloween .site-navbar,
body.season-halloween .site-footer,
body.season-halloween .card,
body.season-halloween .profile-panel,
body.season-halloween .chat-shell {
    border-color: rgba(221,113,37,.17);
    box-shadow: 0 20px 54px rgba(0,0,0,.38),0 0 28px rgba(91,35,122,.055);
}
body.season-halloween .card-header,
body.season-halloween .profile-panel > header {
    background: linear-gradient(90deg,rgba(207,83,20,.13),rgba(111,44,154,.1));
}
@keyframes halloween-pumpkin {
    0%, 100% { transform: translate3d(0,14px,0) rotate(-7deg) scale(.55); opacity: 0; }
    12% { opacity: .16; }
    24% { transform: translate3d(7px,-4px,0) rotate(4deg) scale(1); opacity: .72; }
    52% { transform: translate3d(var(--season-drift,24px),-20px,0) rotate(-3deg) scale(.92); opacity: .55; }
    72% { transform: translate3d(11px,-8px,0) rotate(6deg) scale(1.04); opacity: .78; }
    88% { opacity: .08; }
}

.seasonal-effects span:nth-child(1) { --season-x:3%;--season-size:6px;--season-speed:13s;--season-delay:-7s;--season-drift:24px; }
.seasonal-effects span:nth-child(2) { --season-x:10%;--season-size:11px;--season-speed:18s;--season-delay:-14s;--season-drift:-31px; }
.seasonal-effects span:nth-child(3) { --season-x:18%;--season-size:7px;--season-speed:15s;--season-delay:-4s;--season-drift:48px; }
.seasonal-effects span:nth-child(4) { --season-x:27%;--season-size:14px;--season-speed:21s;--season-delay:-18s;--season-drift:-24px; }
.seasonal-effects span:nth-child(5) { --season-x:34%;--season-size:5px;--season-speed:12s;--season-delay:-9s;--season-drift:29px; }
.seasonal-effects span:nth-child(6) { --season-x:42%;--season-size:9px;--season-speed:17s;--season-delay:-2s;--season-drift:-40px; }
.seasonal-effects span:nth-child(7) { --season-x:49%;--season-size:6px;--season-speed:14s;--season-delay:-11s;--season-drift:35px; }
.seasonal-effects span:nth-child(8) { --season-x:57%;--season-size:13px;--season-speed:22s;--season-delay:-19s;--season-drift:-28px; }
.seasonal-effects span:nth-child(9) { --season-x:64%;--season-size:8px;--season-speed:16s;--season-delay:-6s;--season-drift:45px; }
.seasonal-effects span:nth-child(10) { --season-x:71%;--season-size:5px;--season-speed:12s;--season-delay:-3s;--season-drift:-18px; }
.seasonal-effects span:nth-child(11) { --season-x:78%;--season-size:12px;--season-speed:20s;--season-delay:-16s;--season-drift:28px; }
.seasonal-effects span:nth-child(12) { --season-x:84%;--season-size:7px;--season-speed:15s;--season-delay:-8s;--season-drift:-36px; }
.seasonal-effects span:nth-child(13) { --season-x:90%;--season-size:10px;--season-speed:18s;--season-delay:-13s;--season-drift:32px; }
.seasonal-effects span:nth-child(14) { --season-x:95%;--season-size:5px;--season-speed:13s;--season-delay:-5s;--season-drift:-22px; }
.seasonal-effects span:nth-child(15) { --season-x:23%;--season-size:9px;--season-speed:19s;--season-delay:-17s;--season-drift:39px; }
.seasonal-effects span:nth-child(16) { --season-x:68%;--season-size:6px;--season-speed:14s;--season-delay:-10s;--season-drift:-33px; }
.seasonal-effects span:nth-child(17) { --season-x:6%;--season-size:9px;--season-speed:17s;--season-delay:-12s;--season-drift:41px;--pumpkin-y:28%; }
.seasonal-effects span:nth-child(18) { --season-x:14%;--season-size:5px;--season-speed:11s;--season-delay:-6s;--season-drift:-18px;--pumpkin-y:61%; }
.seasonal-effects span:nth-child(19) { --season-x:21%;--season-size:12px;--season-speed:20s;--season-delay:-16s;--season-drift:28px;--pumpkin-y:14%; }
.seasonal-effects span:nth-child(20) { --season-x:30%;--season-size:7px;--season-speed:14s;--season-delay:-3s;--season-drift:-35px;--pumpkin-y:43%; }
.seasonal-effects span:nth-child(21) { --season-x:38%;--season-size:10px;--season-speed:18s;--season-delay:-13s;--season-drift:23px;--pumpkin-y:72%; }
.seasonal-effects span:nth-child(22) { --season-x:45%;--season-size:6px;--season-speed:12s;--season-delay:-8s;--season-drift:-26px;--pumpkin-y:21%; }
.seasonal-effects span:nth-child(23) { --season-x:53%;--season-size:13px;--season-speed:22s;--season-delay:-19s;--season-drift:38px;--pumpkin-y:53%; }
.seasonal-effects span:nth-child(24) { --season-x:60%;--season-size:5px;--season-speed:11s;--season-delay:-5s;--season-drift:-17px;--pumpkin-y:80%; }
.seasonal-effects span:nth-child(25) { --season-x:67%;--season-size:9px;--season-speed:16s;--season-delay:-11s;--season-drift:31px;--pumpkin-y:34%; }
.seasonal-effects span:nth-child(26) { --season-x:74%;--season-size:7px;--season-speed:13s;--season-delay:-1s;--season-drift:-29px;--pumpkin-y:66%; }
.seasonal-effects span:nth-child(27) { --season-x:81%;--season-size:12px;--season-speed:21s;--season-delay:-18s;--season-drift:27px;--pumpkin-y:17%; }
.seasonal-effects span:nth-child(28) { --season-x:88%;--season-size:6px;--season-speed:15s;--season-delay:-9s;--season-drift:-37px;--pumpkin-y:48%; }
.seasonal-effects span:nth-child(29) { --season-x:94%;--season-size:10px;--season-speed:19s;--season-delay:-14s;--season-drift:25px;--pumpkin-y:76%; }
.seasonal-effects span:nth-child(30) { --season-x:25%;--season-size:5px;--season-speed:12s;--season-delay:-4s;--season-drift:-21px;--pumpkin-y:88%; }
.seasonal-effects span:nth-child(31) { --season-x:56%;--season-size:8px;--season-speed:16s;--season-delay:-15s;--season-drift:34px;--pumpkin-y:9%; }
.seasonal-effects span:nth-child(32) { --season-x:86%;--season-size:6px;--season-speed:13s;--season-delay:-7s;--season-drift:-24px;--pumpkin-y:39%; }

body.season-halloween .seasonal-effects span {
    --season-size: calc(22px + var(--season-pumpkin-scale, 0px));
}
body.season-halloween .seasonal-effects span:nth-child(3n) { --season-size: 34px; }
body.season-halloween .seasonal-effects span:nth-child(4n) { --season-size: 25px; }
body.season-halloween .seasonal-effects span:nth-child(5n) { --season-size: 40px; }
body.season-halloween .seasonal-effects span:nth-child(4n+1) { --pumpkin-y: 16%; }
body.season-halloween .seasonal-effects span:nth-child(4n+2) { --pumpkin-y: 39%; }
body.season-halloween .seasonal-effects span:nth-child(4n+3) { --pumpkin-y: 63%; }
body.season-halloween .seasonal-effects span:nth-child(4n) { --pumpkin-y: 82%; }
body.season-christmas .seasonal-effects span:nth-child(3n) { --snow-blur: .7px; opacity: .58; }
body.season-christmas .seasonal-effects span:nth-child(5n) { box-shadow: 0 0 12px rgba(225,248,255,.9); }

.seasonal-theme-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.seasonal-theme-option { margin: 0; cursor: pointer; }
.seasonal-theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.seasonal-theme-option > span {
    display: grid;
    min-height: 125px;
    padding: 18px;
    place-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
    background: rgba(12,17,27,.74);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.seasonal-theme-option i { font-size: 1.5rem; }
.seasonal-theme-option small { color: var(--modern-muted); }
.seasonal-theme-option input:checked + span { border-color: var(--modern-accent-bright); box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb),.16); transform: translateY(-2px); }
.seasonal-theme-option-christmas i { color: #70d4bd; text-shadow: 0 0 12px rgba(112,212,189,.45); }
.seasonal-theme-option-halloween i { color: #f2812c; text-shadow: 0 0 12px rgba(242,129,44,.45); }
.seasonal-theme-option-modern i { color: #7692d8; }

@media (max-width: 767.98px) {
    .seasonal-theme-options { grid-template-columns: 1fr; }
    .seasonal-theme-option > span { min-height: 95px; }
}
@media (prefers-reduced-motion: reduce) {
    .seasonal-effects span { animation: none !important; opacity: .12 !important; }
}

/* CS 1.6 Fastcup */
.fastcup-page { display: grid; gap: 1.25rem; }
.fastcup-hero,
.fastcup-match-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 190px;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(8, 13, 23, .96), rgba(20, 33, 62, .88)),
        url("https://image.gametracker.com/images/maps/160x120/cs/de_dust2.jpg") center/cover;
    border: 1px solid rgba(105, 145, 236, .35);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}
.fastcup-hero::after,
.fastcup-match-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 78% 35%, rgba(75, 105, 182, .32), transparent 33%);
}
.fastcup-hero > *,
.fastcup-match-hero > * { position: relative; z-index: 1; }
.fastcup-hero span,
.fastcup-match-hero > div:first-child > span {
    color: #8aaafa;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}
.fastcup-hero h1,
.fastcup-match-hero h1 { margin: .35rem 0 .55rem; color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; }
.fastcup-hero p,
.fastcup-match-hero p { max-width: 720px; margin: 0; color: rgba(225, 233, 250, .72); }
.fastcup-hero-mark {
    display: grid;
    width: 110px;
    height: 110px;
    flex: 0 0 110px;
    place-items: center;
    color: #a8bcf4;
    font-size: 3.1rem;
    background: rgba(75, 105, 182, .14);
    border: 1px solid rgba(137, 169, 247, .38);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(75, 105, 182, .27);
}
.fastcup-current-match {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    color: #fff;
    text-decoration: none !important;
    background: linear-gradient(100deg, rgba(75, 105, 182, .9), rgba(73, 70, 165, .82));
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
}
.fastcup-current-match > span { display: grid; width: 42px; height: 42px; place-items: center; background: rgba(255, 255, 255, .12); border-radius: 50%; }
.fastcup-current-match div { display: grid; flex: 1; }
.fastcup-current-match small { color: rgba(255, 255, 255, .7); }
.fastcup-overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 1.25rem; }
.fastcup-queue-meter { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: .15rem .85rem; margin-bottom: 1rem; }
.fastcup-queue-meter strong { color: #fff; font-size: 2.4rem; line-height: 1; }
.fastcup-queue-meter strong small { color: #7786a8; font-size: 1rem; }
.fastcup-queue-meter > span { color: #8e9ab8; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.fastcup-queue-meter > div { grid-column: 1 / -1; height: 8px; overflow: hidden; background: rgba(255, 255, 255, .07); border-radius: 999px; }
.fastcup-queue-meter > div i { display: block; height: 100%; background: linear-gradient(90deg, #4b69b6, #81a5ff); border-radius: inherit; }
.fastcup-queue-list { display: grid; gap: .45rem; }
.fastcup-queue-list a { display: flex; align-items: center; gap: .8rem; padding: .65rem .75rem; color: #dfe7fb; text-decoration: none; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .065); border-radius: 9px; }
.fastcup-queue-list a b { display: grid; width: 27px; height: 27px; place-items: center; color: #91abed; background: rgba(75, 105, 182, .18); border-radius: 50%; }
.fastcup-queue-list a span { flex: 1; }
.fastcup-queue-list a small { color: #65d994; }
.fastcup-queue-list p,
.fastcup-no-matches { margin: 1rem 0; color: #7f8aa4; text-align: center; }
.fastcup-steps { display: grid; gap: 1.15rem; }
.fastcup-steps > div { display: flex; align-items: center; gap: 1rem; }
.fastcup-steps > div > b { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; color: #a8bdf4; background: rgba(75, 105, 182, .16); border: 1px solid rgba(99, 135, 224, .32); border-radius: 50%; }
.fastcup-steps span { display: grid; }
.fastcup-steps strong { color: #edf2ff; }
.fastcup-steps small { color: #7f8ba7; }
.fastcup-match-list { display: grid; gap: .55rem; }
.fastcup-match-list > a { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: .8rem 1rem; color: #e6edff; text-decoration: none; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .065); border-radius: 10px; }
.fastcup-match-list > a:hover { border-color: rgba(99, 135, 224, .45); transform: translateY(-1px); }
.fastcup-match-id { color: #8da9ed; font-weight: 800; }
.fastcup-match-list > a div { display: grid; }
.fastcup-match-list > a small { color: #77839e; }
.fastcup-state { display: inline-flex; align-items: center; justify-content: center; padding: .28rem .62rem; color: #d8e3ff; font-size: .7rem; font-weight: 800; text-transform: uppercase; background: rgba(75, 105, 182, .18); border: 1px solid rgba(98, 133, 220, .3); border-radius: 999px; }
.fastcup-state-live { color: #b9ffd2; background: rgba(45, 184, 100, .15); border-color: rgba(45, 184, 100, .35); }
.fastcup-state-finished, .fastcup-state-cancelled { color: #a2aac0; background: rgba(120, 126, 144, .12); border-color: rgba(140, 145, 160, .2); }
.fastcup-empty { padding: 4rem 1rem; color: #7e8aa6; text-align: center; }
.fastcup-empty > i { margin-bottom: 1rem; color: #5875be; font-size: 2.5rem; }
.fastcup-empty h2 { color: #e7edfc; }
.fastcup-match-summary { display: grid; min-width: 220px; gap: .4rem; justify-items: end; }
.fastcup-match-summary strong { color: #fff; font-size: 1.3rem; text-transform: uppercase; }
.fastcup-match-summary small { color: #9aa9c8; }
.fastcup-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fastcup-team { overflow: visible; }
.fastcup-team .card-header { display: flex; justify-content: space-between; align-items: center; }
.fastcup-team .card-header span { display: flex; align-items: center; gap: .55rem; }
.fastcup-team-1 .card-header i { color: #70a9ff; }
.fastcup-team-2 .card-header i { color: #efb35f; }
.fastcup-team .card-header b { color: #71809f; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.fastcup-team .card-body { display: grid; gap: .55rem; }
.fastcup-player { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto 24px; align-items: center; gap: .8rem; min-height: 66px; padding: .55rem .7rem; color: #edf2ff; text-decoration: none !important; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .065); border-radius: 10px; }
.fastcup-player:hover { border-color: rgba(89, 124, 211, .5); background: rgba(75, 105, 182, .08); }
.fastcup-player-avatar { position: relative; display: grid; width: 46px; height: 46px; place-items: center; background: #111827; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; }
.fastcup-player-avatar > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fastcup-player-avatar .profile-avatar-border { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); max-width: none; pointer-events: none; }
.fastcup-player-main { display: grid; min-width: 0; }
.fastcup-player-main strong { width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fastcup-player-main small { color: #75829f; font-size: .72rem; }
.fastcup-player-main small img { margin-right: .15rem; vertical-align: 1px; }
.fastcup-player-main .fastcup-player-uid { max-width: 100%; overflow: hidden; color: #59657e; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.fastcup-player-steam { display: grid; grid-template-columns: 32px auto; max-width: 150px; align-items: center; column-gap: .45rem; }
.fastcup-player-steam img, .fastcup-player-steam > i { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; object-fit: cover; color: #6c86a6; background: #182635; border-radius: 50%; }
.fastcup-player-steam small { color: #6d7b96; font-size: .62rem; text-transform: uppercase; }
.fastcup-player-steam strong { overflow: hidden; color: #b9c8df; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.fastcup-captain { position: absolute; top: -5px; right: -5px; display: grid; width: 20px; height: 20px; place-items: center; color: #ffd66b; font-size: .65rem; background: #252016; border: 1px solid rgba(255, 214, 107, .4); border-radius: 50%; }
.fastcup-player-ready { display: grid; width: 24px; height: 24px; place-items: center; color: #59647c; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.fastcup-player-ready.is-ready { color: #baffd0; background: rgba(45,184,100,.15); border-color: rgba(45,184,100,.38); box-shadow: 0 0 16px rgba(45,184,100,.18); }
.fastcup-ready-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; background: rgba(13,20,34,.88); border: 1px solid rgba(100,135,222,.25); border-radius: 13px; }
.fastcup-ready-panel > div { display: flex; align-items: center; gap: .85rem; }
.fastcup-ready-panel > div > div { display: grid; }
.fastcup-ready-panel strong { color: #edf3ff; }
.fastcup-ready-panel small { color: #7d8aa6; }
.fastcup-ready-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #7edc9f; background: rgba(45,184,100,.12); border: 1px solid rgba(45,184,100,.3); border-radius: 50%; }
.fastcup-scoreboard { display: grid; grid-template-columns: 1fr minmax(180px, .8fr) 1fr; align-items: center; text-align: center; }
.fastcup-scoreboard > div { display: grid; justify-items: center; }
.fastcup-scoreboard > div strong { color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; }
.fastcup-scoreboard > div small { color: #8190af; text-transform: uppercase; letter-spacing: .12em; }
.fastcup-scoreboard > span { display: grid; color: #9aabd0; }
.fastcup-scoreboard > span b { color: #dce6ff; }
.fastcup-scoreboard > span small { color: #71809f; }
.fastcup-match-notes { margin: 1rem 0 0; padding: .85rem 1rem; color: #aab6cf; white-space: pre-wrap; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.065); border-radius: 9px; }
.fastcup-section-copy { color: #7e8aa5; }
.fastcup-map-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
.fastcup-map-card { position: relative; overflow: hidden; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; }
.fastcup-map-card.has-vote { border-color: rgba(45,184,100,.5); box-shadow: inset 0 0 0 1px rgba(45,184,100,.12); }
.fastcup-map-card.has-ban { border-color: rgba(239,109,124,.5); box-shadow: inset 0 0 0 1px rgba(239,109,124,.12); }
.fastcup-map-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #111827; }
.fastcup-map-card > div:nth-of-type(1) { display: grid; padding: .65rem .7rem .35rem; }
.fastcup-map-card strong { color: #eef3ff; }
.fastcup-map-card small { color: #697895; font-size: .68rem; }
.fastcup-map-card > span { display: flex; gap: .75rem; padding: 0 .7rem .65rem; color: #91a0bf; font-size: .72rem; }
.fastcup-map-card > span b { display: flex; align-items: center; gap: .25rem; }
.fastcup-map-card > span b:first-child i { color: #65d994; }
.fastcup-map-card > span b:last-child i { color: #ef6d7c; }
.fastcup-map-actions { display: grid !important; grid-template-columns: 1fr 1fr; padding: 0 !important; border-top: 1px solid rgba(255, 255, 255, .06); }
.fastcup-map-actions button { padding: .5rem; color: #9aabd0; font-size: .7rem; background: transparent; border: 0; cursor: pointer; }
.fastcup-map-actions button + button { border-left: 1px solid rgba(255, 255, 255, .06); }
.fastcup-map-actions button:hover { color: #fff; background: rgba(75, 105, 182, .15); }
.fastcup-map-actions button.active { color: #fff; background: rgba(75,105,182,.24); }
.fastcup-server-form { display: grid; grid-template-columns: 1fr auto; gap: .7rem; margin-bottom: 1rem; }
.fastcup-server-list { display: grid; gap: .55rem; }
.fastcup-server-list > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: .75rem .85rem; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 9px; }
.fastcup-server-list > div span { display: flex; align-items: center; gap: .65rem; color: #e5ecff; }
.fastcup-server-list > div span i { color: #7290dc; }
.fastcup-server-list > div small { color: #8390ac; }
.fastcup-server-list > p { margin: 1rem 0; color: #7985a0; text-align: center; }

@media (max-width: 1199px) {
    .fastcup-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fastcup-player-steam { display: none; }
}
@media (max-width: 767px) {
    .fastcup-hero, .fastcup-match-hero { min-height: 160px; }
    .fastcup-hero-mark { display: none; }
    .fastcup-overview-grid, .fastcup-teams { grid-template-columns: 1fr; }
    .fastcup-match-hero { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
    .fastcup-match-summary { min-width: 0; justify-items: start; }
    .fastcup-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fastcup-match-list > a { grid-template-columns: auto 1fr auto; }
    .fastcup-match-list > a > i { display: none; }
    .fastcup-server-form { grid-template-columns: 1fr; }
    .fastcup-ready-panel { align-items: stretch; flex-direction: column; }
    .fastcup-ready-panel .btn { width: 100%; }
    .fastcup-scoreboard { grid-template-columns: 1fr auto 1fr; }
}
@media (max-width: 420px) {
    .fastcup-map-grid { grid-template-columns: 1fr; }
    .fastcup-player { grid-template-columns: 46px minmax(0, 1fr) 24px; }
    .fastcup-server-list > div { grid-template-columns: 1fr auto; }
    .fastcup-server-list > div button { grid-column: 1 / -1; }
}

/* Steam community game statistics */
.steam-stats-page { display: grid; gap: 22px; }
.steam-stats-hero {
    position: relative; display: flex; min-height: 250px; align-items: center; justify-content: space-between;
    overflow: hidden; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(102,192,244,.25); border-radius: 18px;
    background:
        radial-gradient(circle at 84% 45%, rgba(102,192,244,.22), transparent 25%),
        linear-gradient(125deg, rgba(10,23,38,.96), rgba(27,48,71,.92));
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
}
.steam-stats-hero::after {
    position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .17;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 35px 35px; mask-image: linear-gradient(90deg, transparent, #000);
}
.steam-stats-hero-copy { position: relative; z-index: 1; max-width: 650px; }
.steam-stats-kicker, .steam-section-heading span { color: #66c0f4; font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.steam-stats-hero h1 { margin: 8px 0; color: #fff; font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 800; }
.steam-stats-hero p { margin: 0 0 18px; color: rgba(225,233,248,.75); font-size: 1.05rem; }
.steam-stats-hero small { color: rgba(225,233,248,.52); }
.steam-stats-hero-orbit {
    position: relative; z-index: 1; display: grid; width: 155px; height: 155px; flex: 0 0 155px; place-items: center;
    border: 1px solid rgba(102,192,244,.38); border-radius: 50%; box-shadow: inset 0 0 35px rgba(102,192,244,.12), 0 0 35px rgba(102,192,244,.12);
}
.steam-stats-hero-orbit::before { position: absolute; width: 120%; height: 45%; content: ""; border: 1px solid rgba(102,192,244,.24); border-radius: 50%; transform: rotate(-17deg); }
.steam-stats-hero-orbit > i { position: absolute; color: rgba(102,192,244,.12); font-size: 6rem; }
.steam-stats-hero-orbit > span { position: relative; display: grid; color: #fff; font-size: 2rem; font-weight: 800; text-align: center; }
.steam-stats-hero-orbit small { color: #66c0f4; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.steam-stats-alert { display: flex; gap: 13px; align-items: center; margin: 0; }
.steam-stats-alert > i { font-size: 1.4rem; }.steam-stats-alert div { display: grid; }.steam-stats-alert span { opacity: .8; }
.steam-stat-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steam-stat-metrics article {
    display: flex; gap: 14px; align-items: center; padding: 19px; background: rgba(16,25,39,.82);
    border: 1px solid rgba(255,255,255,.09); border-radius: 13px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.steam-stat-metrics i { display: grid; width: 42px; height: 42px; place-items: center; color: #66c0f4; background: rgba(102,192,244,.1); border-radius: 11px; }
.steam-stat-metrics article div { display: grid; }.steam-stat-metrics strong { color: #fff; font-size: 1.45rem; }.steam-stat-metrics span { color: var(--modern-muted); font-size: .78rem; text-transform: uppercase; }
.steam-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.steam-chart-card { min-width: 0; overflow: hidden; }
.steam-chart-card > header { display: flex; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.steam-chart-card > header span { color: #fff; font-weight: 700; }.steam-chart-card > header i { margin-right: 8px; color: #66c0f4; }.steam-chart-card > header small { color: var(--modern-muted); }
.steam-ranking-list { display: grid; padding: 7px 12px 12px; }
.steam-ranking-list > a { display: grid; grid-template-columns: 28px 42px minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 9px 6px; color: var(--modern-text); border-bottom: 1px solid rgba(255,255,255,.06); }
.steam-ranking-list > a:last-child { border-bottom: 0; }
.steam-ranking-list > a:hover { color: #fff; text-decoration: none; background: rgba(102,192,244,.05); }
.steam-ranking-list > a > b { color: #66c0f4; font-size: .72rem; text-align: center; }
.steam-ranking-list > a > span:nth-child(3) { display: grid; min-width: 0; }
.steam-ranking-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steam-ranking-list small { color: var(--modern-muted); font-size: .67rem; }
.steam-ranking-list em { color: #fff; font-size: .76rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.steam-ranking-image { position: relative; display: grid; width: 38px; height: 38px; place-items: center; color: #66c0f4; background: #172537; border-radius: 50%; }
.steam-ranking-image > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.steam-ranking-image .profile-avatar-border { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); max-width: none; pointer-events: none; }
.steam-ranking-game-image { overflow: hidden; border: 1px solid rgba(102,192,244,.22); }
.steam-ranking-player-avatar { width: 42px; height: 42px; color: #151923; background: #d9d9d9; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; }
.steam-ranking-player-avatar > img:not(.profile-avatar-border) { border-radius: 8px; }
.steam-ranking-player-avatar .profile-avatar-border {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 52px !important;
    height: 52px !important;
    transform: translate(-50%,-50%);
    transform-origin: center;
}
.steam-chart-wrap { min-height: 290px; padding: 15px; }.steam-chart-donut { max-width: 620px; margin: auto; }
.steam-section { display: grid; gap: 16px; }
.steam-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.steam-section-heading h2 { margin: 3px 0 0; color: #fff; font-size: 1.45rem; }.steam-section-heading p { margin: 0; color: var(--modern-muted); }
.steam-section-heading > div > small { color: var(--modern-muted); font-size: .72rem; }
.steam-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.steam-game-card {
    position: relative; min-height: 180px; overflow: hidden; color: #fff; background: #101927; border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px; box-shadow: 0 13px 28px rgba(0,0,0,.22); transition: transform .2s ease, border-color .2s ease;
}
.steam-game-card:hover { color: #fff; text-decoration: none; border-color: rgba(102,192,244,.55); transform: translateY(-3px); }
.steam-game-card > img, .steam-game-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steam-game-shade { background: linear-gradient(0deg, rgba(5,10,18,.98), rgba(5,10,18,.08) 75%); }
.steam-game-card > div { position: absolute; right: 17px; bottom: 15px; left: 17px; }.steam-game-card small { color: #66c0f4; font-weight: 700; text-transform: uppercase; }
.steam-game-card h3 { margin: 3px 0 7px; font-size: 1.15rem; }.steam-game-card p { display: flex; justify-content: space-between; margin: 0; color: rgba(255,255,255,.75); font-size: .78rem; }
.steam-game-card p b { color: #fff; }.steam-game-card p span { color: rgba(255,255,255,.52); }
.steam-game-search { display: flex; align-items: center; min-width: 260px; padding: 0 13px; background: rgba(16,25,39,.75); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.steam-game-search i { color: #66c0f4; }.steam-game-search input { width: 100%; padding: 10px; color: #fff; background: transparent; border: 0; outline: 0; }
.steam-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.steam-library-game { overflow: hidden; background: rgba(16,25,39,.86); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; }
.steam-library-art { position: relative; display: block; height: 130px; overflow: hidden; }.steam-library-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.steam-library-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(7,12,21,.7), transparent); }
.steam-library-art span { position: absolute; z-index: 1; right: 10px; bottom: 9px; padding: 5px 8px; color: #fff; background: rgba(0,0,0,.7); border-radius: 6px; font-size: .7rem; opacity: 0; transition: opacity .2s ease; }
.steam-library-art:hover img { transform: scale(1.04); }.steam-library-art:hover span { opacity: 1; }
.steam-library-body { padding: 14px; }.steam-library-title { display: flex; gap: 10px; align-items: center; }.steam-library-title img { width: 32px; height: 32px; border-radius: 5px; }
.steam-library-title h3 { margin: 0; overflow: hidden; color: #fff; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }.steam-library-title div { min-width: 0; }.steam-library-title small { color: var(--modern-muted); }
.steam-library-numbers { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 13px 0; }
.steam-library-numbers span { display: grid; padding: 7px; color: var(--modern-muted); background: rgba(255,255,255,.04); border-radius: 7px; font-size: .65rem; text-align: center; text-transform: uppercase; }
.steam-library-numbers b { color: #fff; font-size: .78rem; text-transform: none; }
.steam-library-players { display: grid; gap: 4px; }.steam-library-players a { display: flex; justify-content: space-between; color: rgba(225,233,248,.72); font-size: .72rem; }.steam-library-players a:hover { color: #66c0f4; text-decoration: none; }
.steam-library-empty { display: none; gap: 8px; justify-content: center; padding: 30px; color: var(--modern-muted); }
.steam-games-more { width: max-content; margin: 2px auto 0; gap: 8px; align-items: center; }
.steam-player-table-card { overflow: hidden; }.steam-library-state { display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.steam-library-state.is-public { color: #75d69c; background: rgba(62,180,105,.12); }.steam-library-state.is-private { color: #adb7c6; background: rgba(173,183,198,.1); }
.steam-privacy-note { display: flex; gap: 13px; align-items: center; padding: 16px 18px; color: var(--modern-muted); background: rgba(102,192,244,.06); border: 1px solid rgba(102,192,244,.16); border-radius: 12px; }
.steam-privacy-note > i { color: #66c0f4; font-size: 1.2rem; }.steam-privacy-note p { display: grid; margin: 0; }.steam-privacy-note strong { color: #fff; }
@media (max-width: 991.98px) {
    .steam-stat-metrics { grid-template-columns: repeat(2,1fr); }.steam-game-grid, .steam-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    .steam-stats-hero-orbit { display: none; }.steam-chart-grid { grid-template-columns: 1fr; }
    .steam-section-heading { align-items: stretch; flex-direction: column; }.steam-game-search { min-width: 0; }.steam-game-grid, .steam-library-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
    .steam-stat-metrics { grid-template-columns: 1fr; }.steam-stats-hero { padding: 25px 20px; }.steam-chart-card > header { align-items: flex-start; flex-direction: column; gap: 4px; }
    .steam-ranking-list > a { grid-template-columns: 22px 38px minmax(0,1fr); gap: 8px; }
    .steam-ranking-list em { grid-column: 3; font-size: .68rem; }
    .steam-ranking-image { width: 34px; height: 34px; }
}

/* Reape.rs landing page */
.home-landing { display: grid; gap: 25px; }
.home-hero {
    position: relative; display: grid; min-height: 560px; grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr);
    align-items: center; overflow: hidden; padding: clamp(38px,6vw,76px); border: 1px solid rgba(105,137,211,.25);
    border-radius: 22px; background:
        radial-gradient(circle at 76% 48%, rgba(75,105,182,.28), transparent 26%),
        radial-gradient(circle at 18% 15%, rgba(102,192,244,.1), transparent 25%),
        linear-gradient(135deg, rgba(7,11,20,.97), rgba(17,27,48,.96));
    box-shadow: 0 28px 70px rgba(0,0,0,.34); isolation: isolate;
}
.home-hero::before {
    position: absolute; inset: 0; z-index: -1; content: ""; opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size: 42px 42px; mask-image: radial-gradient(circle at 72% 50%,#000,transparent 72%);
}
.home-hero-glow { position: absolute; z-index: -1; right: 8%; width: 340px; height: 340px; background: #4b69b6; border-radius: 50%; filter: blur(125px); opacity: .19; }
.home-hero-copy { max-width: 690px; }
.home-eyebrow,.home-intro span,.home-feature-card > span,.home-vip-copy > span { color: var(--modern-accent-bright); font-size: .7rem; font-weight: 800; letter-spacing: .17em; }
.home-hero h1 { max-width: 700px; margin: 12px 0 18px; color: #fff; font-size: clamp(2.65rem,6vw,5.2rem); font-weight: 850; letter-spacing: -.055em; line-height: .98; }
.home-hero-copy > p { max-width: 640px; margin: 0; color: rgba(224,232,247,.72); font-size: 1.08rem; line-height: 1.75; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }.home-hero-actions .btn { border-radius: 10px; }
.home-live-summary { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; color: rgba(224,232,247,.58); font-size: .76rem; }
.home-live-summary span { display: flex; gap: 7px; align-items: center; }.home-live-summary strong { color: #fff; }.home-live-summary i,.home-online header span i { width: 7px; height: 7px; background: #39d98a; border-radius: 50%; box-shadow: 0 0 13px #39d98a; animation: home-live-pulse 2s ease-in-out infinite; }
.home-logo-stage { position: relative; display: grid; min-height: 360px; place-items: center; }
.home-logo-stage > img { position: relative; z-index: 2; width: min(310px,78%); max-height: 250px; object-fit: contain; filter: drop-shadow(0 22px 38px rgba(0,0,0,.42)); }
.home-logo-stage > small { position: absolute; bottom: 6%; color: rgba(224,232,247,.48); font-size: .64rem; font-weight: 800; letter-spacing: .24em; }
.home-logo-ring { position: absolute; width: 330px; height: 330px; border: 1px solid rgba(102,192,244,.2); border-radius: 50%; animation: home-ring 12s linear infinite; }
.home-logo-ring:nth-child(2) { width: 245px; height: 245px; border-style: dashed; animation-direction: reverse; animation-duration: 18s; }
.home-logo-ring::before { position: absolute; top: 20px; left: 58px; width: 8px; height: 8px; content: ""; background: #66c0f4; border-radius: 50%; box-shadow: 0 0 18px #66c0f4; }
.home-intro { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: 50px; align-items: end; padding: 22px 8px; }
.home-intro h2 { max-width: 520px; margin: 5px 0 0; color: #fff; font-size: clamp(1.8rem,4vw,3rem); letter-spacing: -.03em; }
.home-intro p { margin: 0; color: var(--modern-muted); font-size: .98rem; line-height: 1.8; }
.home-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.home-feature-card {
    position: relative; display: flex; min-height: 280px; flex-direction: column; align-items: flex-start; padding: 25px;
    color: var(--modern-text); background: linear-gradient(145deg,rgba(21,29,45,.94),rgba(11,16,27,.94));
    border: 1px solid rgba(255,255,255,.085); border-radius: 15px; box-shadow: 0 15px 35px rgba(0,0,0,.18);
    transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.home-feature-card::after { position: absolute; right: 0; bottom: 0; width: 90px; height: 90px; content: ""; background: radial-gradient(circle at 100% 100%,rgba(75,105,182,.2),transparent 67%); }
.home-feature-card:hover { color: var(--modern-text); text-decoration: none; border-color: rgba(102,192,244,.35); box-shadow: 0 20px 42px rgba(0,0,0,.27); transform: translateY(-4px); }
.home-feature-card > i { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 24px; color: #8eabef; background: rgba(75,105,182,.14); border: 1px solid rgba(105,137,211,.2); border-radius: 12px; font-size: 1.15rem; }
.home-feature-card h3 { margin: 6px 0 10px; color: #fff; font-size: 1.2rem; }.home-feature-card p { margin: 0 0 20px; color: var(--modern-muted); font-size: .82rem; line-height: 1.65; }
.home-feature-card b { display: flex; gap: 8px; align-items: center; margin-top: auto; color: var(--modern-accent-bright); font-size: .74rem; }.home-feature-card b i { transition: transform .2s ease; }.home-feature-card:hover b i { transform: translateX(4px); }
.home-feature-profile { background: linear-gradient(145deg,rgba(38,51,83,.96),rgba(15,21,35,.95)); border-color: rgba(105,137,211,.28); }
.home-online { overflow: hidden; background: rgba(12,17,28,.84); border: 1px solid rgba(255,255,255,.085); border-radius: 17px; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.home-online > header { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; background: linear-gradient(90deg,rgba(75,105,182,.11),transparent); border-bottom: 1px solid rgba(255,255,255,.07); }
.home-online header span { display: flex; gap: 8px; align-items: center; color: #65dca0; font-size: .67rem; font-weight: 800; letter-spacing: .14em; }
.home-online h2 { margin: 3px 0; color: #fff; font-size: 1.6rem; }.home-online header p { margin: 0; color: var(--modern-muted); font-size: .78rem; }
.home-online-count { display: grid; min-width: 90px; text-align: center; }.home-online-count strong { color: #fff; font-size: 2rem; }.home-online-count small { color: var(--modern-muted); font-size: .68rem; text-transform: uppercase; }
.home-online-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.06); }
.home-online-client { display: grid; min-width: 0; grid-template-columns: 46px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 15px; color: var(--modern-text); background: rgba(12,17,28,.96); transition: background .18s ease; }
.home-online-client:hover { color: #fff; text-decoration: none; background: rgba(75,105,182,.11); }
.home-online-avatar { position: relative; display: grid; width: 42px; height: 42px; place-items: center; background: #252d3b; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; }
.home-online-avatar > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }.home-online-avatar > b { color: #fff; font-size: .74rem; }
.home-online-avatar > .profile-avatar-border { inset: -4px; width: 50px !important; height: 50px !important; }
.home-online-avatar > i { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; background: #39d98a; border: 2px solid #0c111c; border-radius: 50%; }
.home-online-name { display: grid; min-width: 0; }.home-online-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.home-online-name small { color: var(--modern-muted); font-size: .68rem; }
.home-online-flag { align-self: center; object-fit: cover; }.home-online-empty { display: grid; gap: 5px; place-items: center; padding: 45px; color: var(--modern-muted); }.home-online-empty i { margin-bottom: 6px; font-size: 1.5rem; }
.home-online-viewer { display: flex; gap: 8px; justify-content: center; padding: 14px; color: var(--modern-accent-bright); background: rgba(75,105,182,.07); border-top: 1px solid rgba(255,255,255,.06); font-size: .78rem; font-weight: 700; }
.home-online-viewer:hover { color: #fff; text-decoration: none; }
.home-vip { display: grid; grid-template-columns: auto minmax(260px,1fr) minmax(260px,.8fr) auto; gap: 24px; align-items: center; padding: 30px; overflow: hidden; background: linear-gradient(110deg,rgba(53,37,84,.94),rgba(18,20,29,.96) 58%); border: 1px solid rgba(170,136,255,.3); border-radius: 16px; }
.home-vip-mark { display: inline-flex; width: 70px; height: 70px; align-items: center; justify-content: center; color: #aa88ff; background: rgba(170,136,255,.12); border: 1px solid rgba(170,136,255,.32); border-radius: 50%; box-shadow: 0 0 35px rgba(170,136,255,.18); font-size: 1.5rem; line-height: 1; }
.home-vip-mark i { display: block; width: auto; margin: 0; line-height: 1; transform: translateY(-1px); }
.home-vip h2 { margin: 5px 0 7px; color: #fff; font-size: 1.5rem; }.home-vip p { margin: 0; color: rgba(230,229,224,.65); font-size: .8rem; line-height: 1.6; }
.home-vip-copy > span { color: #c5adff; }
.home-vip-perks { display: grid; gap: 8px; }.home-vip-perks span { color: rgba(255,255,255,.78); font-size: .76rem; }.home-vip-perks i { width: 22px; color: #aa88ff; }
.home-vip .btn-warning { color: #fff; background: #8969d8; border-color: #aa88ff; }
.home-vip .btn-warning:hover { background: #aa88ff; border-color: #c4adff; }
@keyframes home-ring { to { transform: rotate(360deg); } }
@keyframes home-live-pulse { 50% { opacity: .45; box-shadow: 0 0 4px #39d98a; } }
@media (max-width: 1199.98px) {
    .home-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.home-online-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .home-vip { grid-template-columns: auto 1fr auto; }.home-vip-perks { grid-column: 2; }
}
@media (max-width: 991.98px) {
    .home-hero { min-height: 0; grid-template-columns: 1fr; }.home-logo-stage { min-height: 280px; grid-row: 1; }.home-logo-stage > img { max-height: 185px; }
    .home-intro { grid-template-columns: 1fr; gap: 15px; }.home-online-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    .home-feature-grid { grid-template-columns: 1fr; }.home-feature-card { min-height: 245px; }.home-vip { grid-template-columns: 1fr; text-align: center; }.home-vip-mark { margin: auto; }.home-vip-perks { grid-column: auto; }.home-vip .btn { justify-self: center; }
}
@media (max-width: 575.98px) {
    .home-hero { padding: 27px 19px; border-radius: 14px; }.home-logo-stage { min-height: 220px; }.home-logo-ring { width: 220px; height: 220px; }.home-logo-ring:nth-child(2) { width: 165px; height: 165px; }
    .home-hero h1 { font-size: 2.55rem; }.home-hero-actions { display: grid; }.home-live-summary { gap: 10px 16px; }.home-online > header { align-items: flex-start; }.home-online header p { display: none; }
    .home-online-grid { grid-template-columns: 1fr; }.home-online-client { padding: 13px 16px; }.home-intro { padding: 12px 3px; }.home-vip { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-logo-ring,.home-live-summary i,.home-online header span i { animation: none; }
}

p, tbody, .card .card-body, .modal .modal-body {
    font-family: "Titillium Web", sans-serif !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--modern-text) !important; }
a { color: var(--modern-accent-bright); }
a:hover { color: #fff; }

/* Public navigation and footer */
#main-navbar.site-navbar {
    min-height: 64px;
    padding: .4rem 0;
    background: rgba(17,17,17,.96) !important;
    border-bottom: 1px solid var(--modern-border) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.24);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
#main-navbar.site-navbar .navbar-brand {
    display: flex;
    align-items: center;
    color: var(--modern-text) !important;
    font-weight: 700;
}
#main-navbar.site-navbar .navbar-brand img {
    border-radius: 9px;
    box-shadow: 0 0 0 1px var(--modern-border);
}
#main-navbar.site-navbar .navbar-nav,
#main-navbar.site-navbar .navbar-nav li {
    border: 0 !important;
}
#main-navbar.site-navbar .nav-item {
    position: relative;
    padding: 0 !important;
    background: transparent !important;
}
#main-navbar.site-navbar .nav-item::after { display: none !important; }
#main-navbar.site-navbar .nav-link {
    display: flex;
    align-items: center;
    min-width: 42px;
    height: 42px;
    margin: 0 .12rem;
    padding: 0 .72rem;
    overflow: hidden;
    color: var(--modern-muted) !important;
    text-transform: none !important;
    white-space: nowrap;
    background: rgba(255,255,255,.025);
    border: 1px solid transparent;
    border-radius: 11px;
    transition: color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#main-navbar.site-navbar .nav-link > i {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    text-align: center;
}
#main-navbar.site-navbar .site-nav-label {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-7px);
    transition: max-width .3s cubic-bezier(.2,.8,.2,1),margin-left .3s ease,opacity .2s ease,transform .3s ease;
}
#main-navbar.site-navbar .nav-item:hover .site-nav-label,
#main-navbar.site-navbar .nav-item:focus-within .site-nav-label,
#main-navbar.site-navbar .nav-item.show .site-nav-label {
    max-width: 130px;
    margin-left: .55rem;
    opacity: 1;
    transform: translateX(0);
}
#main-navbar.site-navbar .nav-item:hover .nav-link,
#main-navbar.site-navbar .nav-item:focus-within .nav-link,
#main-navbar.site-navbar .nav-item.show .nav-link,
#main-navbar.site-navbar .nav-item.active .nav-link {
    color: #fff !important;
    background: rgba(75,105,182,.2) !important;
    border-color: rgba(118,146,216,.32);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}
#main-navbar.site-navbar .dropdown-toggle::after {
    flex: 0 0 auto;
    margin-left: .35rem;
    transition: transform .2s ease;
}
#main-navbar.site-navbar .dropdown.show .dropdown-toggle::after { transform: rotate(180deg); }

.site-footer {
    position: absolute !important;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .75rem 0 !important;
    color: var(--modern-muted);
    line-height: 1.3 !important;
    background: rgba(17,17,17,.96) !important;
    border-top: 1px solid var(--modern-border);
    box-shadow: 0 -12px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.site-footer-shell {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.25rem;
}
.site-footer-brand { display: flex; align-items: center; gap: .65rem; }
.site-footer-brand > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg,var(--modern-accent-bright),#344f96);
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(75,105,182,.25);
}
.site-footer-brand i { margin: 0; }
.site-footer-brand strong,.site-footer-brand small { display: block; }
.site-footer-brand strong { color: var(--modern-text); font-size: .86rem; }
.site-footer-brand small { color: var(--modern-muted); font-size: .68rem; }
.site-footer-links { display: flex; align-items: center; gap: .25rem; }
.site-footer-links a {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    color: var(--modern-muted);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
}
.site-footer-links a:hover { color: #fff; background: rgba(75,105,182,.16); }
.site-footer-links i { margin: 0; color: var(--modern-accent-bright); }
.site-footer-message { margin: 0; color: var(--modern-muted); font-size: .75rem; text-align: center; }
.site-footer-credit { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; font-size: .7rem; }
.site-footer-credit a { color: var(--modern-accent-bright); font-weight: 700; }

.dropdown-menu, .modal .modal-content, .popover {
    color: var(--modern-text);
    background: rgba(17,17,17,.97) !important;
    border: 1px solid var(--modern-border) !important;
    box-shadow: var(--modern-shadow);
    backdrop-filter: blur(16px);
}
.dropdown-item { color: var(--modern-muted) !important; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
}

.account-dropdown {
    width: 250px;
    padding: .45rem;
    border-radius: 14px;
}
.account-dropdown-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .7rem .8rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--modern-border);
}
.account-dropdown-header > i {
    margin: 0;
    color: var(--modern-accent-bright);
    font-size: 1.8rem;
}
.navbar-user-avatar {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;
}
.navbar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-dropdown-avatar {
    position: relative;
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--modern-accent-bright);
    background: rgba(75,105,182,.13);
    border: 1px solid var(--modern-border);
    border-radius: 10px;
}
.account-dropdown-avatar > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.account-dropdown-avatar > i { margin: 0; font-size: 1.1rem; }
.account-dropdown-avatar > .profile-avatar-border { inset: -5px; width: 52px !important; height: 52px !important; }
.account-dropdown-header strong,
.account-dropdown-header small { display: block; }
.account-dropdown-header small { color: var(--modern-muted); font-size: .72rem; }
.account-dropdown .dropdown-item {
    padding: .6rem .7rem;
    border-radius: 8px;
}
.account-dropdown .dropdown-divider { border-color: var(--modern-border); }
.account-dropdown .account-admin-link { color: #ff626e !important; }
.account-dropdown .account-admin-link:hover {
    color: #fff !important;
    background: rgba(220,53,69,.18) !important;
}
.site-notification-toggle { position: relative; }
.site-notification-toggle > b {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 17px;
    padding: 1px 4px;
    color: #fff;
    background: #e34f65;
    border: 2px solid #111;
    border-radius: 10px;
    font-size: .56rem;
    line-height: 1.2;
    text-align: center;
}
.site-notification-dropdown { width: min(370px,calc(100vw - 1.5rem)); padding: .45rem; border-radius: 14px; }
.site-notification-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: .55rem .65rem .7rem; border-bottom: 1px solid var(--modern-border); }
.site-notification-dropdown-head strong { color: #fff; font-size: .82rem; }
.site-notifications-read { color: var(--modern-accent-bright); background: transparent; border: 0; font-size: .68rem; }
.site-notification-entry {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr);
    gap: .7rem;
    align-items: center;
    padding: .65rem !important;
    border-radius: 9px;
    white-space: normal;
}
.site-notification-entry > span:nth-child(2),
.site-notification-page-row > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.site-notification-entry strong,
.site-notification-page-row strong { color: var(--modern-text); font-size: .73rem; font-weight: 600; line-height: 1.35; }
.site-notification-entry small,
.site-notification-page-row small { margin-top: .2rem; color: var(--modern-muted); font-size: .62rem; }
.site-notification-avatar {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--modern-accent-bright);
    background: rgba(var(--modern-accent-rgb),.12);
    border: 1px solid var(--modern-border);
    border-radius: 9px;
}
.site-notification-avatar > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.site-notification-avatar > .profile-avatar-border { inset: -5px; width: 46px !important; height: 46px !important; }
.site-notification-avatar > i { margin: 0; }
.site-notification-view-all { display: block; padding: .6rem; color: var(--modern-accent-bright); border-top: 1px solid var(--modern-border); font-size: .72rem; text-align: center; }
.site-notification-empty { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.2rem; color: var(--modern-muted); font-size: .75rem; }
.site-notification-empty i { color: #61d394; }
.site-notifications-page-list { display: grid; gap: .6rem; }
.site-notification-page-row {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 14px;
    gap: .8rem;
    align-items: center;
    padding: .8rem;
    color: var(--modern-text);
    background: rgba(var(--modern-accent-rgb),.055);
    border: 1px solid rgba(var(--modern-accent-rgb),.18);
    border-radius: 11px;
}
.site-notification-page-row:hover { color: #fff; border-color: rgba(var(--modern-accent-rgb),.42); text-decoration: none; }
.site-notification-page-row.is-read { background: rgba(255,255,255,.018); border-color: var(--modern-border); opacity: .7; }
.site-notification-page-row > i { color: var(--modern-muted); font-size: .7rem; }

.card {
    background: rgba(17,17,17,.94) !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(0,0,0,.20);
}
.card .card-header {
    color: var(--modern-text) !important;
    background: rgba(255,255,255,.025) !important;
    border-bottom: 1px solid var(--modern-border) !important;
    font-weight: 600;
}
.card.card-accent > .card-header {
    position: relative;
    overflow: hidden;
    border-radius: 15px 15px 0 0 !important;
}
.card.card-accent > .card-header::before {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: auto !important;
    background: var(--modern-accent) !important;
    border-radius: 15px 0 0 0 !important;
    opacity: .7;
}

.btn { border-radius: 10px; font-weight: 600; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
    color: #fff !important;
    background: var(--modern-accent-bright) !important;
    border-color: var(--modern-accent-bright) !important;
}
.btn-primary:hover, .btn-primary:focus {
    color: #fff !important;
    background: var(--modern-accent) !important;
    border-color: var(--modern-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--modern-accent-rgb),.22) !important;
}

.form-control, .custom-select {
    color: var(--modern-text) !important;
    background: #0d0d0d !important;
    border: 1px solid var(--modern-border) !important;
    border-radius: 10px;
}
.form-control:focus, .custom-select:focus {
    color: #fff !important;
    background: #0d0d0d !important;
    border-color: var(--modern-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(145,164,199,.14) !important;
}

.badge-secondary { color: var(--modern-text); background: rgba(255,255,255,.08) !important; }
@media (max-width: 991px) {
    body { padding-top: 90px !important; }
    #main-navbar.site-navbar .navbar-collapse {
        max-height: calc(100vh - 80px);
        margin-top: .55rem;
        padding: .55rem;
        overflow-y: auto;
        background: rgba(17,17,17,.98);
        border: 1px solid var(--modern-border);
        border-radius: 13px;
        box-shadow: var(--modern-shadow);
    }
    #main-navbar.site-navbar .nav-link {
        width: 100%;
        margin: .12rem 0;
        padding: 0 .8rem;
    }
    #main-navbar.site-navbar .site-nav-label {
        max-width: 220px;
        margin-left: .55rem;
        opacity: 1;
        transform: none;
    }
    .site-footer-shell { grid-template-columns: 1fr; text-align: center; }
    .site-footer-brand,.site-footer-links,.site-footer-credit { justify-content: center; }
    .site-footer-links { flex-wrap: wrap; }
    body { padding-bottom: 7.5rem !important; }
}
@media (max-width: 575px) {
    .site-footer { padding: .8rem 0 !important; }
    .site-footer-links { gap: .1rem; }
    .site-footer-links a { padding: .4rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
    #main-navbar.site-navbar .site-nav-label,
    #main-navbar.site-navbar .nav-link { transition: none; }
}

.server-status p {
    padding: .42rem 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
}
.server-status p:last-child { border-bottom: 0; }
.server-status .data .badge { color: var(--modern-text) !important; background: rgba(255,255,255,.07) !important; }

.profile-page { max-width: 1050px; margin: 1rem auto 2rem; }
.profile-focus-card {
    position: relative;
    overflow: hidden;
    max-width: 620px;
    margin: 1rem auto 1.4rem;
    padding: 2.25rem 2rem 2rem;
    text-align: center;
    background: rgba(17,17,17,.97);
    border: 1px solid var(--modern-border-strong);
    border-radius: 24px;
    box-shadow: var(--modern-shadow), inset 0 1px rgba(255,255,255,.035);
}
.profile-focus-glow {
    position: absolute;
    width: 280px;
    height: 180px;
    left: 50%;
    top: -125px;
    transform: translateX(-50%);
    background: rgba(126,151,195,.22);
    filter: blur(60px);
    pointer-events: none;
}
.profile-avatar-wrap { display: inline-block; position: relative; z-index: 1; }
.profile-avatar {
    width: 104px;
    height: 104px;
    border: 1px solid var(--modern-border-strong);
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08);
}
.profile-avatar-fallback {
    display: grid;
    place-items: center;
    color: var(--modern-accent-bright);
    background: linear-gradient(145deg,#222936,#101319);
    font-size: 2.5rem;
}
.profile-avatar-fallback i { margin: 0; }
.profile-presence {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 18px;
    height: 18px;
    border: 4px solid #111;
    border-radius: 50%;
}
.profile-presence-online, .profile-state-online { background: #4ade80; color: #4ade80; }
.profile-presence-offline, .profile-state-offline { background: #64748b; color: #64748b; }
.profile-name-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin-top: 1.05rem;
}
.profile-name-line h1 { margin: 0; font-size: 2rem; letter-spacing: .08em; }
.profile-flag {
    display: inline-block;
    width: 16px !important;
    min-width: 16px;
    height: 11px !important;
    object-fit: fill;
    border-radius: 1px;
    image-rendering: auto;
}
.viewer-container .client-icons .icon-flag {
    width: 16px !important;
    height: 11px !important;
    object-fit: fill;
    border-radius: 1px;
    vertical-align: -1px;
}
.profile-bio {
    max-width: 500px;
    margin: .7rem auto 0;
    color: var(--modern-muted);
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.profile-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.25rem;
}
.profile-summary span {
    padding: .45rem .72rem;
    color: #b4bdcc;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    font-size: .85rem;
}
.profile-summary i { margin-right: .42rem; }
.profile-summary .fa-circle { font-size: .45rem; vertical-align: middle; background: transparent; }
.profile-edit-toggle { margin-top: 1.25rem; }
.profile-edit-card { max-width: 860px; margin: 0 auto 1.4rem; }

.profile-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
    gap: 1rem;
}
.profile-main-column, .profile-side-column { display: grid; align-content: start; gap: 1rem; }
.profile-section {
    padding: 1.15rem;
    background: rgba(17,17,17,.94);
    border: 1px solid var(--modern-border);
    border-radius: 16px;
    box-shadow: 0 14px 38px rgba(0,0,0,.18);
}
.profile-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .85rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid rgba(255,255,255,.065);
}
.profile-section-title > div { display: flex; align-items: baseline; gap: .6rem; }
.profile-section-title span {
    color: var(--modern-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
}
.profile-section-title h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: .025em; }
.profile-section-title > i { margin: 0; color: #596579; }
.profile-data-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.profile-data-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    padding: .8rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
}
.profile-data-item > i { grid-row: 1 / 3; align-self: center; color: #68758b; }
.profile-data-item span { color: var(--modern-muted); font-size: .75rem; }
.profile-data-item strong {
    min-width: 0;
    color: var(--modern-text);
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.profile-groups { display: flex; flex-wrap: wrap; gap: .55rem; }
.profile-group {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .58rem .85rem;
    color: #cad3e1;
    background: rgba(145,164,199,.07);
    border: 1px solid rgba(145,164,199,.16);
    border-radius: 9px;
    font-size: .92rem;
}
.profile-group img { width: 16px; height: 16px; object-fit: contain; }
.profile-empty {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--modern-muted);
    padding: .65rem;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 10px;
}
.profile-empty i { margin: 0; color: #596579; }
.profile-identity-list { margin: 0; display: grid; gap: .5rem; }
.profile-identity-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: .58rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.profile-identity-list > div:last-child { border: 0; }
.profile-identity-list dt { color: var(--modern-muted); font-weight: 400; }
.profile-identity-list dd { margin: 0; color: var(--modern-text); font-weight: 600; text-align: right; }
.profile-identity-list .profile-uid { display: block; }
.profile-identity-list .profile-uid dd {
    display: block;
    margin-top: .25rem;
    overflow: hidden;
    color: #a9b5c9;
    font-family: Consolas, monospace;
    font-size: .75rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discord-card > header i { color: #8b95ff; text-shadow: 0 0 10px rgba(88,101,242,.65); }
.steam-card > header i { color: #66c0f4; text-shadow: 0 0 10px rgba(102,192,244,.55); }
.discord-presence, .steam-presence { min-height: 158px; }
.discord-user, .steam-user { display: flex; align-items: center; gap: .7rem; }
.discord-avatar-wrap, .steam-avatar-wrap { position: relative; flex: 0 0 46px; width: 46px; height: 46px; }
.discord-user img, .steam-avatar-wrap img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.discord-copy { min-width: 0; }
.discord-copy strong, .discord-copy small { display: block; }
.discord-copy small { color: var(--modern-muted); }
.discord-status-label {
    margin-left: auto;
    padding: .28rem .55rem;
    color: #c9ceff;
    background: rgba(88,101,242,.1);
    border: 1px solid rgba(88,101,242,.25);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: capitalize;
}
.discord-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border: 3px solid #111;
    border-radius: 50%;
}
.discord-online { background: #4ade80; }
.discord-idle { background: #fbbf24; }
.discord-dnd { background: #f87171; }
.discord-offline { background: #64748b; }
.discord-activity {
    display: grid;
    margin-top: .85rem;
    padding: .65rem .75rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
}
.discord-activity span { color: var(--modern-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.discord-activity strong { font-size: .88rem; font-weight: 600; }
.discord-custom-status {
    border-color: rgba(88, 101, 242, .2);
    background: rgba(88, 101, 242, .07);
}
.discord-custom-status strong { color: #c9ceff; }

.steam-presence {
    --steam-state: #898989;
    --steam-state-rgb: 137, 137, 137;
}
.steam-state-online .steam-presence { --steam-state: #66c0f4; --steam-state-rgb: 102, 192, 244; }
.steam-state-busy .steam-presence { --steam-state: #e35e5e; --steam-state-rgb: 227, 94, 94; }
.steam-state-away .steam-presence { --steam-state: #d7a94b; --steam-state-rgb: 215, 169, 75; }
.steam-state-snooze .steam-presence { --steam-state: #a879d6; --steam-state-rgb: 168, 121, 214; }
.steam-state-trade .steam-presence { --steam-state: #57cbde; --steam-state-rgb: 87, 203, 222; }
.steam-state-play .steam-presence { --steam-state: #a4d007; --steam-state-rgb: 164, 208, 7; }
.steam-avatar-wrap {
    display: grid;
    place-items: center;
    color: #66c0f4;
    background: #1b2838;
    border: 2px solid rgba(var(--steam-state-rgb), .72);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(var(--steam-state-rgb), .18);
}
.steam-avatar-wrap img { width: 42px; height: 42px; border-radius: 6px; }
.steam-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 13px;
    height: 13px;
    background: var(--steam-state);
    border: 3px solid #171c27;
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(var(--steam-state-rgb), .7);
}
.steam-copy { min-width: 0; }
.steam-copy strong, .steam-copy small { display: block; }
.steam-copy strong { color: #fff; }
.steam-copy small { color: var(--modern-muted); }
.steam-status-label {
    margin-left: auto;
    padding: .28rem .55rem;
    color: var(--steam-state);
    background: rgba(var(--steam-state-rgb), .1);
    border: 1px solid rgba(var(--steam-state-rgb), .28);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: capitalize;
}
.discord-activity, .steam-activity {
    display: flex;
    flex-direction: column;
    margin-top: .85rem;
    padding: .7rem .8rem;
    border-radius: 9px;
}
.steam-activity {
    background: linear-gradient(90deg, rgba(var(--steam-state-rgb), .1), rgba(27, 40, 56, .18));
    border: 1px solid rgba(var(--steam-state-rgb), .16);
}
.steam-activity span { color: #66c0f4; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.steam-activity strong { color: var(--modern-text); font-size: .88rem; font-weight: 600; }
.steam-activity.has-game { display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: .75rem; padding: .5rem; }
.steam-activity.has-game > img { width: 86px; height: 48px; object-fit: cover; border-radius: 7px; }
.steam-activity.has-game > div { display: grid; min-width: 0; }
.steam-activity.has-game strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steam-activity.has-game small { color: var(--modern-muted); font-size: .68rem; }
.presence-header-link { margin-left: auto; color: #66c0f4; font-size: .72rem; }
.presence-header-link:hover { color: #fff; text-decoration: none; }

.community-overview-compact { margin: 1rem 0; }
.community-overview-compact .community-country-list,
.community-overview-compact .community-award-explain {
    max-height: none;
    overflow: visible;
}
.community-award-explain.compact > div { padding-top: .55rem; padding-bottom: .55rem; }
.community-award-explain.compact > div > i { width: 34px; height: 34px; }
.community-stats-page .leaderboard-tabs { flex-wrap: wrap; }
.community-data-table tbody tr { cursor: default; }
.community-level-pill {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.24), transparent 30%), linear-gradient(145deg, var(--modern-accent-bright), var(--modern-accent));
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), 0 5px 15px rgba(var(--modern-accent-rgb),.3);
    font-size: .78rem;
    font-weight: 800;
}

.viewer-profile-link { color: inherit; text-decoration: none !important; }
.nickname-style {
    position: relative;
    display: inline-block;
    isolation: isolate;
    overflow: visible;
    font-weight: 700;
    line-height: 1.25;
}
.nickname-font-default { font-family: inherit !important; }
.nickname-font-comfortaa { font-family: "Comfortaa", sans-serif !important; }
.nickname-font-poppins { font-family: "Poppins", sans-serif !important; }
.nickname-font-montserrat { font-family: "Montserrat", sans-serif !important; }
.nickname-font-orbitron { font-family: "Orbitron", sans-serif !important; }
.nickname-font-rajdhani { font-family: "Rajdhani", sans-serif !important; }
.nickname-font-cinzel { font-family: "Cinzel", serif !important; }
.nickname-font-playfair { font-family: "Playfair Display", serif !important; }
.nickname-font-bebas { font-family: "Bebas Neue", sans-serif !important; letter-spacing: .045em; }
.nickname-font-pacifico { font-family: "Pacifico", cursive !important; font-weight: 400 !important; }
.nickname-font-caveat { font-family: "Caveat", cursive !important; }
.nickname-font-audiowide { font-family: "Audiowide", sans-serif !important; }
.nickname-font-russo { font-family: "Russo One", sans-serif !important; }
.nickname-style-default { color: inherit; font-weight: inherit; }
.nickname-style-neon { color: #68e8dc !important; text-shadow: 0 0 8px rgba(104,232,220,.55); }
.nickname-style-sunset { background: linear-gradient(90deg,#ff9770,#f378ae); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-ice { background: linear-gradient(90deg,#e8fbff,#72c7ef); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-gold { background: linear-gradient(90deg,#fff0a8,#d8a94b); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-matrix { color: #78e69a !important; font-family: Consolas, monospace; }
.nickname-style-royal { background: linear-gradient(90deg,#ae9cff,#dc9de8); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-fire { background: linear-gradient(90deg,#ffd166,#ff7657,#ee568e); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-ocean { background: linear-gradient(90deg,#b8f3ff,#4ea8de,#4361ee); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-candy { background: linear-gradient(90deg,#ff70a6,#ff9770,#ffd670,#70d6ff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nickname-style-toxic { color: #b7ff5a !important; text-shadow: 0 0 5px #79d800,0 0 13px rgba(121,216,0,.65); font-family: Consolas,monospace; }
.nickname-style-chrome { background: linear-gradient(180deg,#fff 0,#8d98aa 45%,#f7f8fa 52%,#596273 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: 0 1px rgba(255,255,255,.18); }
.nickname-style-shadow { color: #f2f4f8 !important; text-shadow: 2px 2px 0 #4b69b6,4px 4px 0 rgba(0,0,0,.55); }
.nickname-style-outline { color: transparent !important; -webkit-text-stroke: 1px #8aa5ec; text-shadow: 0 0 8px rgba(75,105,182,.75); }
.nickname-style-aurora,
.nickname-style-rainbow,
.nickname-style-shimmer,
.nickname-style-cyber,
.nickname-style-lava,
.nickname-style-galaxy,
.nickname-style-scanline {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-position: 0 50%;
    background-repeat: repeat;
    background-size: 250% auto;
    will-change: background-position;
}
.nickname-style-aurora {
    background-image: linear-gradient(90deg,#68e8dc,#8c7cf0,#ef7ac8,#68e8dc);
    animation: nickname-gradient 4s linear infinite;
    text-shadow: 0 0 12px rgba(104,232,220,.18);
}
.nickname-style-rainbow {
    background-image: linear-gradient(90deg,#ff595e,#ffca3a,#8ac926,#5ad7ff,#8b5cf6,#ff595e);
    animation: nickname-gradient 3s linear infinite;
}
.nickname-style-shimmer {
    background-image: linear-gradient(105deg,#798396 20%,#fff 42%,#fff 48%,#798396 70%);
    animation: nickname-shimmer 2.4s ease-in-out infinite;
}
.nickname-style-cyber {
    background-image: linear-gradient(90deg,#00f5d4,#00bbf9,#9b5de5,#00f5d4);
    animation: nickname-gradient 2.6s linear infinite;
    font-family: Consolas,monospace;
    letter-spacing: .035em;
    filter: drop-shadow(0 0 5px rgba(0,187,249,.55));
}
.nickname-style-pulse {
    color: #9cb6ff !important;
    animation: nickname-pulse 1.8s ease-in-out infinite;
}
.nickname-style-glitch {
    color: #f7f7ff !important;
    animation: nickname-glitch 2.8s steps(1,end) infinite;
}
.nickname-style-serif {
    color: #f3ead7 !important;
    font-family: Georgia,"Times New Roman",serif;
    font-weight: 700;
    letter-spacing: .025em;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.nickname-style-mono-bold {
    color: #d5e7ff !important;
    font-family: "Courier New",Consolas,monospace;
    font-weight: 900;
    letter-spacing: .045em;
}
.nickname-style-handwritten {
    color: #ffd0e5 !important;
    font-family: "Segoe Print","Bradley Hand",cursive;
    font-weight: 700;
    transform: rotate(-1deg);
}
.nickname-style-gothic {
    color: #e8e0ff !important;
    font-family: "Palatino Linotype",Palatino,Georgia,serif;
    font-variant: small-caps;
    font-weight: 900;
    letter-spacing: .055em;
    text-shadow: 1px 1px 0 #3c274f;
}
.nickname-style-elegant {
    color: #fff4de !important;
    font-family: Garamond,Georgia,serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: .06em;
}
.nickname-style-lavender,
.nickname-style-emerald-wave,
.nickname-style-solar,
.nickname-style-arctic,
.nickname-style-rose-gold {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.nickname-style-lavender { background-image: linear-gradient(90deg,#efe5ff,#b794f6,#f0abfc); }
.nickname-style-emerald-wave { background-image: linear-gradient(90deg,#d9f99d,#34d399,#22d3ee); }
.nickname-style-solar { background-image: linear-gradient(90deg,#fff7ae,#fbbf24,#f97316); }
.nickname-style-arctic { background-image: linear-gradient(90deg,#fff,#a5f3fc,#60a5fa); text-shadow: 0 0 10px rgba(96,165,250,.22); }
.nickname-style-rose-gold { background-image: linear-gradient(90deg,#ffe4e6,#fb7185,#fdba74,#ffe4e6); }
.nickname-style-electric-underline,
.nickname-style-double-underline,
.nickname-style-comet-underline { width: max-content; max-width: 100%; padding-bottom: 3px; }
.nickname-style-electric-underline { color: #c8d8ff !important; text-shadow: 0 0 7px rgba(96,165,250,.45); }
.nickname-style-electric-underline::after {
    position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: "";
    background: linear-gradient(90deg,#2563eb,#67e8f9,#8b5cf6);
    border-radius: 999px; box-shadow: 0 0 7px #60a5fa;
}
.nickname-style-double-underline {
    color: #f7e8ba !important;
    text-decoration-line: underline;
    text-decoration-color: #d6a84a;
    text-decoration-style: double;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nickname-style-comet-underline { color: #e4edff !important; }
.nickname-style-comet-underline::after {
    position: absolute; bottom: 0; left: 0; width: 42%; height: 2px; content: "";
    background: linear-gradient(90deg,transparent,#fff 45%,#60a5fa);
    border-radius: 999px; box-shadow: 0 0 8px #60a5fa;
    animation: nickname-comet 1.8s ease-in-out infinite alternate;
}
.nickname-style-lava {
    background-image: linear-gradient(90deg,#ffec99,#ff7a18,#ff1744,#8e24aa,#ffec99);
    animation: nickname-gradient 2.2s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,72,32,.45));
}
.nickname-style-galaxy {
    background-image: linear-gradient(90deg,#67e8f9,#818cf8,#d946ef,#f9a8d4,#67e8f9);
    animation: nickname-gradient 4.8s linear infinite;
    filter: drop-shadow(0 0 5px rgba(129,140,248,.42));
}
.nickname-style-scanline {
    background-image: repeating-linear-gradient(180deg,#f8fbff 0 2px,#60a5fa 2px 4px,#172554 4px 5px);
    background-size: 100% 18px;
    animation: nickname-scanline 1.7s linear infinite;
    font-family: Consolas,monospace;
}
.nickname-style-bounce {
    color: #a7f3d0 !important;
    transform-origin: center bottom;
    animation: nickname-bounce 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
.nickname-style-flicker {
    color: #fff7c2 !important;
    text-shadow: 0 0 5px #facc15,0 0 13px rgba(250,204,21,.65);
    animation: nickname-flicker 2.7s linear infinite;
}
.nickname-style-stardust,
.nickname-style-sparks { z-index: 0; }
.nickname-style-stardust {
    color: #f2e9ff !important;
    text-shadow: 0 0 8px rgba(196,181,253,.75);
}
.nickname-style-stardust::before,
.nickname-style-stardust::after,
.nickname-style-sparks::before,
.nickname-style-sparks::after {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.nickname-style-stardust::before {
    top: -8px; left: 12%; content: "\2726  \00b7  \2727";
    color: #ddd6fe; font-size: .58em; letter-spacing: .65em;
    animation: nickname-particle-rise 2.4s ease-in-out infinite;
}
.nickname-style-stardust::after {
    right: 3%; bottom: -7px; content: "\00b7  \2726";
    color: #93c5fd; font-size: .52em; letter-spacing: .45em;
    animation: nickname-particle-rise 2.9s ease-in-out -1.2s infinite reverse;
}
.nickname-style-sparks {
    color: #ffe7a3 !important;
    text-shadow: 0 0 5px #fb923c,0 0 12px rgba(249,115,22,.65);
}
.nickname-style-sparks::before {
    top: -7px; right: 10%; content: "\2727  \00b7";
    color: #fbbf24; font-size: .58em;
    animation: nickname-spark 1.5s steps(4,end) infinite;
}
.nickname-style-sparks::after {
    bottom: -6px; left: 8%; content: "\00b7  \2726";
    color: #fb7185; font-size: .5em;
    animation: nickname-spark 1.9s steps(4,end) -.8s infinite reverse;
}
@keyframes nickname-gradient {
    from { background-position: 0 50%; }
    to { background-position: 250% 50%; }
}
@keyframes nickname-shimmer {
    0%,20% { background-position: 160% center; }
    70%,100% { background-position: -80% center; }
}
@keyframes nickname-pulse {
    0%,100% { text-shadow: 0 0 4px rgba(118,146,216,.35); transform: scale(1); }
    50% { color: #fff !important; text-shadow: 0 0 8px #7692d8,0 0 18px rgba(118,146,216,.85); transform: scale(1.035); }
}
@keyframes nickname-glitch {
    0%,89%,100% { text-shadow: 2px 0 #00e5ff,-2px 0 #ff3d81; transform: translate(0); }
    90% { text-shadow: -3px 0 #00e5ff,3px 0 #ff3d81; transform: translate(1px,-1px); }
    93% { text-shadow: 3px 0 #00e5ff,-3px 0 #ff3d81; transform: translate(-1px,1px); }
    96% { text-shadow: -1px 0 #00e5ff,1px 0 #ff3d81; transform: translate(0); }
}
@keyframes nickname-comet {
    from { left: 0; width: 35%; opacity: .55; }
    to { left: 58%; width: 42%; opacity: 1; }
}
@keyframes nickname-scanline {
    from { background-position: 0 0; }
    to { background-position: 0 18px; }
}
@keyframes nickname-bounce {
    0%,100% { transform: translateY(0) scaleY(1); }
    45% { transform: translateY(-3px) scaleY(1.03); }
    55% { transform: translateY(-3px) scaleY(.98); }
}
@keyframes nickname-flicker {
    0%,18%,22%,62%,66%,100% { opacity: 1; }
    20%,64% { opacity: .42; }
    21%,65% { opacity: .76; }
}
@keyframes nickname-particle-rise {
    0%,100% { opacity: .25; transform: translate3d(0,3px,0) scale(.82); }
    50% { opacity: 1; transform: translate3d(3px,-4px,0) scale(1.08); }
}
@keyframes nickname-spark {
    0%,100% { opacity: .15; transform: translate(0,2px) rotate(0); }
    45% { opacity: 1; transform: translate(3px,-3px) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .nickname-style-aurora,
    .nickname-style-rainbow,
    .nickname-style-shimmer,
    .nickname-style-pulse,
    .nickname-style-glitch,
    .nickname-style-cyber,
    .nickname-style-lava,
    .nickname-style-galaxy,
    .nickname-style-scanline,
    .nickname-style-bounce,
    .nickname-style-flicker,
    .nickname-style-comet-underline::after,
    .nickname-style-stardust::before,
    .nickname-style-stardust::after,
    .nickname-style-sparks::before,
    .nickname-style-sparks::after { animation-duration: 10s; }
}

.admin-status .admin-profile-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.admin-status .admin-profile-link:hover {
    color: var(--site-secondary-color);
    text-decoration: none;
}
.admin-status .status-container {
    position: relative;
    overflow: visible;
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
}
.admin-status,
.admin-status.admin-status-grouped > div { overflow: visible; }
.admin-status .status-container .nickname {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: visible;
    padding: 7px 5px;
    margin: -7px -5px;
}
.admin-status .status-container .nickname > .name-decoration-icon {
    flex: 0 0 auto;
    margin: 0 0 0 .32rem;
}
.admin-status .status-container .status { position: relative; z-index: 3; flex: 0 0 auto; margin-left: .55rem; }
.admin-status .nickname-style-stardust,
.admin-status .nickname-style-sparks { margin-top: 2px; margin-bottom: 2px; }
.steam-presence-title-link { text-decoration: none !important; }
.steam-presence-title-link:hover { text-decoration: none !important; }

/* Dedicated linked Steam profile */
.steam-user-page { display: grid; gap: 20px; }
.steam-user-hero {
    position: relative; display: grid; min-height: 285px; grid-template-columns: auto minmax(0,1fr) auto;
    gap: 24px; align-items: end; overflow: hidden; padding: 34px; background: linear-gradient(135deg,#111c29,#1b2b3c);
    border: 1px solid rgba(102,192,244,.24); border-radius: 18px; box-shadow: 0 22px 55px rgba(0,0,0,.28);
}
.steam-user-hero-art,.steam-user-hero-shade { position: absolute; inset: 0; }
.steam-user-hero-art { background-position: center; background-size: cover; opacity: .55; filter: saturate(.8); }
.steam-user-hero-shade { background: linear-gradient(90deg,rgba(5,10,17,.97),rgba(8,15,25,.79) 56%,rgba(8,15,25,.56)),linear-gradient(0deg,rgba(5,10,17,.97),transparent 75%); }
.steam-user-avatar {
    position: relative; z-index: 1; display: grid; width: 126px; height: 126px; place-items: center; color: #66c0f4;
    background: #152333; border: 4px solid rgba(13,24,36,.95); border-radius: 13px; box-shadow: 0 15px 35px rgba(0,0,0,.4); font-size: 3rem;
}
.steam-user-avatar:hover { color: #fff; text-decoration: none; }.steam-user-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.steam-user-status-dot { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; background: var(--steam-state,#7f8994); border: 4px solid #0b1420; border-radius: 50%; box-shadow: 0 0 12px rgba(var(--steam-state-rgb,127,137,148),.65); }
.steam-user-identity { position: relative; z-index: 1; min-width: 0; }.steam-user-identity h1 { margin: 7px 0; color: #fff; font-size: clamp(2rem,5vw,3.5rem); letter-spacing: -.04em; }
.steam-user-identity p { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }.steam-user-identity p > span { color: rgba(225,233,248,.52); font-size: .75rem; }
.steam-user-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; color: var(--steam-state,#7f8994); font-size: .82rem; font-weight: 700; }
.steam-user-state > i { font-size: .48rem; }.steam-user-state b { padding: 4px 7px; color: #fff; background: rgba(var(--steam-state-rgb,127,137,148),.16); border-radius: 5px; font-size: .72rem; }
.steam-user-hero-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }.steam-user-hero-actions .btn { white-space: nowrap; }
.steam-state-online { --steam-state:#66c0f4;--steam-state-rgb:102,192,244; }.steam-state-busy { --steam-state:#e35e5e;--steam-state-rgb:227,94,94; }
.steam-state-away { --steam-state:#d7a94b;--steam-state-rgb:215,169,75; }.steam-state-snooze { --steam-state:#a879d6;--steam-state-rgb:168,121,214; }
.steam-state-trade { --steam-state:#57cbde;--steam-state-rgb:87,203,222; }.steam-state-play { --steam-state:#a4d007;--steam-state-rgb:164,208,7; }
.steam-user-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.steam-user-metrics article { display: flex; gap: 11px; align-items: center; min-width: 0; padding: 16px; background: rgba(16,25,39,.84); border: 1px solid rgba(255,255,255,.085); border-radius: 12px; }
.steam-user-metrics article > i { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; color: #66c0f4; background: rgba(102,192,244,.1); border-radius: 9px; }
.steam-user-metrics article > div { display: grid; min-width: 0; }.steam-user-metrics strong { overflow: hidden; color: #fff; font-size: 1.18rem; text-overflow: ellipsis; }.steam-user-metrics span { color: var(--modern-muted); font-size: .62rem; text-transform: uppercase; }
.steam-user-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 15px; }
.steam-user-layout .profile-panel { margin: 0; }.steam-user-layout .profile-panel > header { display: flex; justify-content: space-between; }.steam-user-layout .profile-panel > header small { color: var(--modern-muted); }
.steam-user-account dl { margin: 0; }.steam-user-account dl > div { display: grid; grid-template-columns: minmax(130px,.75fr) minmax(0,1.25fr); gap: 15px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.steam-user-account dl > div:last-child { border: 0; }.steam-user-account dt { color: var(--modern-muted); font-weight: 400; }.steam-user-account dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.steam-user-progress .profile-panel-body { display: grid; justify-items: center; padding: 26px; text-align: center; }
.steam-level-emblem { position: relative; display: grid; width: 100px; height: 100px; place-items: center; background: radial-gradient(circle,rgba(102,192,244,.17),rgba(21,40,58,.7)); border: 4px solid #66c0f4; border-radius: 50%; box-shadow: 0 0 24px rgba(102,192,244,.2); }
.steam-level-emblem strong { position: absolute; top: 50%; left: 50%; color: #fff; font-size: 2rem; line-height: 1; transform: translate(-50%,-56%); }.steam-level-emblem span { position: absolute; right: 0; bottom: 14px; left: 0; color: #66c0f4; font-size: .52rem; text-align: center; text-transform: uppercase; }
.steam-xp-copy { display: grid; margin: 16px 0 11px; }.steam-xp-copy b { color: #fff; font-size: 1.1rem; }.steam-xp-copy span,.steam-user-progress small { color: var(--modern-muted); font-size: .72rem; }
.steam-xp-bar { width: 100%; height: 8px; overflow: hidden; margin-bottom: 8px; background: rgba(255,255,255,.07); border-radius: 999px; }.steam-xp-bar i { display: block; height: 100%; background: linear-gradient(90deg,#4b69b6,#66c0f4); border-radius: inherit; }
.steam-user-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.steam-user-game { display: grid; grid-template-columns: 180px minmax(0,1fr); min-width: 0; overflow: hidden; background: rgba(16,25,39,.86); border: 1px solid rgba(255,255,255,.085); border-radius: 12px; }
.steam-user-game > a { display: block; min-height: 155px; }.steam-user-game > a > img { width: 100%; height: 100%; object-fit: cover; }
.steam-user-game > div { min-width: 0; padding: 13px; }.steam-user-game header { display: flex; gap: 9px; align-items: center; }.steam-user-game header > img { width: 32px; height: 32px; border-radius: 5px; }
.steam-user-game header > span { display: grid; min-width: 0; }.steam-user-game header strong { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }.steam-user-game header small { color: var(--modern-muted); }
.steam-user-game-time { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px; align-items: baseline; margin: 14px 0; }.steam-user-game-time b { color: #fff; }.steam-user-game-time span { color: var(--modern-muted); font-size: .65rem; text-transform: uppercase; }
.steam-user-platforms { display: flex; flex-wrap: wrap; gap: 6px; }.steam-user-platforms span { display: inline-flex; gap: 5px; align-items: center; padding: 4px 6px; color: rgba(225,233,248,.7); background: rgba(255,255,255,.04); border-radius: 5px; font-size: .65rem; }
@media (max-width: 1199.98px) {
    .steam-user-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }.steam-user-library { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .steam-user-hero { grid-template-columns: 88px minmax(0,1fr); gap: 15px; padding: 24px 18px; }.steam-user-avatar { width: 88px; height: 88px; }
    .steam-user-hero-actions { grid-column: 1/-1; flex-direction: row; flex-wrap: wrap; }.steam-user-layout { grid-template-columns: 1fr; }.steam-user-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
    .steam-user-hero { grid-template-columns: 1fr; align-items: center; text-align: center; }.steam-user-avatar { margin: auto; }.steam-user-identity p,.steam-user-state,.steam-user-hero-actions { justify-content: center; }
    .steam-user-metrics { grid-template-columns: 1fr; }.steam-user-account dl > div { grid-template-columns: 1fr; gap: 2px; }.steam-user-game { grid-template-columns: 1fr; }.steam-user-game > a { height: 150px; min-height: 0; }
}

.btn-steam {
    color: #fff !important;
    background: linear-gradient(135deg,#1b2838,#2a475e);
    border: 1px solid #66c0f4;
}
.btn-steam:hover { color: #fff !important; background: #2a475e; }
.login-divider { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; color: var(--modern-muted); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--modern-border); }
.profile-editor-focused { max-width: 1080px; margin: 1rem auto 2rem; }
.profile-editor-focused .profile-panel > header { justify-content: space-between; }
.profile-editor-shell {
    overflow: visible;
    background:
        radial-gradient(circle at 92% 4%,rgba(var(--modern-accent-rgb),.16),transparent 26%),
        rgba(12,15,22,.92);
}
.profile-editor-shell > header {
    position: sticky;
    z-index: 30;
    top: 8px;
    min-height: 50px;
    backdrop-filter: blur(18px);
    background: rgba(15,19,28,.88);
    border-radius: 13px 13px 0 0;
}
.profile-editor-shell > .profile-panel-body { padding: 1.25rem; }
.profile-editor-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 1.4rem;
    background:
        linear-gradient(120deg,rgba(var(--modern-accent-rgb),.18),rgba(8,11,17,.52)),
        radial-gradient(circle at 85% 20%,rgba(129,156,231,.2),transparent 30%);
    border: 1px solid rgba(var(--modern-accent-rgb),.3);
    border-radius: 16px;
}
.profile-editor-intro > div:first-child > span {
    color: var(--modern-accent-bright);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
}
.profile-editor-intro h1 { margin: .25rem 0 .3rem; color: #fff; font-size: clamp(1.45rem,3vw,2.15rem); }
.profile-editor-intro p { margin: 0; color: var(--modern-muted); }
.profile-editor-progress {
    display: grid;
    flex: 0 0 155px;
    min-height: 112px;
    place-items: center;
    align-content: center;
    padding: 1rem;
    text-align: center;
    background: rgba(5,8,13,.42);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
}
.profile-editor-progress > i { margin: 0 0 .55rem; color: var(--modern-accent-bright); font-size: 1.35rem; }
.profile-editor-progress strong,.profile-editor-progress small { display: block; }
.profile-editor-progress small { margin-top: .2rem; color: var(--modern-muted); font-size: .65rem; }
.profile-editor-preview-stage {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr);
    gap: .8rem;
    margin-bottom: 1rem;
}
.nickname-preview-card {
    display: grid;
    gap: .35rem;
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: center;
    background: rgba(75,105,182,.09);
    border: 1px solid rgba(75,105,182,.28);
    border-radius: 12px;
}
.nickname-preview-card span { color: var(--modern-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.nickname-preview-card strong { font-size: 1.55rem; }
.profile-avatar-source { display: flex; gap: 1.5rem; }
.profile-edit-avatar-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 126px;
    margin: 0;
    padding: 1.1rem;
    background: linear-gradient(135deg,rgba(var(--modern-accent-rgb),.12),rgba(255,255,255,.018));
    border: 1px solid var(--modern-border);
    border-radius: 14px;
}
.profile-edit-avatar-preview .profile-legacy-avatar {
    flex-basis: 88px;
    width: 88px;
    height: 88px;
    margin: 0;
}
.profile-edit-avatar-preview strong,
.profile-edit-avatar-preview small { display: block; }
.profile-edit-avatar-preview > div:last-child > span {
    color: var(--modern-accent-bright);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.profile-edit-avatar-preview > div:last-child > strong { margin: .2rem 0; font-size: 1.25rem; }
.profile-edit-avatar-preview small { margin-top: .25rem; color: var(--modern-muted); }
.profile-editor-preview-badges {
    min-width: 0;
    min-height: 126px;
    padding: 1rem;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--modern-border);
    border-radius: 14px;
}
.profile-editor-preview-badges > span {
    display: block;
    margin-bottom: .7rem;
    color: var(--modern-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.profile-editor-preview-badges > div { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4rem; }
.profile-editor-preview-badges > div > small { color: var(--modern-muted); }
.profile-avatar-border {
    position: absolute !important;
    inset: 0;
    z-index: 3;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    pointer-events: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.profile-legacy-avatar > .profile-avatar-border {
    inset: -8px;
    width: calc(100% + 16px) !important;
    height: calc(100% + 16px) !important;
}
.profile-border-choice-avatar > .profile-avatar-border {
    inset: -5px;
    width: calc(100% + 10px) !important;
    height: calc(100% + 10px) !important;
}
.profile-border-editor > p { margin: -.35rem 0 .85rem; font-size: .82rem; }
.profile-border-options {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(92px,1fr));
    gap: .65rem;
}
.profile-border-option {
    min-width: 0;
    margin: 0;
    cursor: pointer;
}
.profile-border-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.profile-border-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-height: 112px;
    padding: .6rem .45rem;
    color: var(--modern-muted);
    background: rgba(255,255,255,.025);
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    transition: border-color .18s ease,background .18s ease,transform .18s ease;
}
.profile-border-option:hover .profile-border-choice {
    transform: translateY(-2px);
    color: var(--modern-text);
    border-color: rgba(118,146,216,.45);
}
.profile-border-option > input:checked + .profile-border-choice {
    color: #fff;
    background: rgba(75,105,182,.16);
    border-color: var(--modern-accent-bright);
    box-shadow: 0 0 0 2px rgba(75,105,182,.15);
}
.profile-border-choice-avatar,
.profile-border-none {
    position: relative;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
}
.profile-border-choice-avatar .profile-avatar-image,
.profile-border-choice-avatar .profile-avatar-initials {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    object-fit: cover;
    color: #111;
    background: #d9d9d9;
    border-radius: 10px;
}
.profile-border-choice-avatar .profile-avatar-initials { font-size: 1rem; }
.profile-border-none {
    color: #677186;
    background: rgba(255,255,255,.035);
    border: 1px dashed var(--modern-border-strong);
    border-radius: 12px;
    font-size: 1.25rem;
}
.profile-border-choice small {
    display: block;
    overflow: hidden;
    width: 100%;
    font-size: .7rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-editor-section label i { width: 20px; color: var(--modern-accent-bright); }
.profile-editor-section {
    margin: .85rem 0;
    padding: 1rem;
    background: rgba(255,255,255,.018);
    border: 1px solid var(--modern-border);
    border-radius: 14px;
}
.profile-editor-section h3 { margin: 0; font-size: 1rem; }
.profile-editor-section-heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}
.profile-editor-section-heading > i {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    margin: 0;
    color: var(--modern-accent-bright);
    background: rgba(var(--modern-accent-rgb),.13);
    border: 1px solid rgba(var(--modern-accent-rgb),.22);
    border-radius: 11px;
}
.profile-editor-section-heading > div { min-width: 0; flex: 1; }
.profile-editor-section-heading p { margin: .18rem 0 0; color: var(--modern-muted); font-size: .75rem; }
.profile-editor-shell .form-control {
    min-height: 42px;
    color: var(--modern-text);
    background: rgba(5,8,13,.6);
    border-color: rgba(255,255,255,.1);
    border-radius: 10px;
}
.profile-editor-shell textarea.form-control { min-height: 110px; }
.profile-editor-shell .form-control:focus {
    color: #fff;
    background: rgba(5,8,13,.78);
    border-color: rgba(var(--modern-accent-rgb),.75);
    box-shadow: 0 0 0 .2rem rgba(var(--modern-accent-rgb),.13);
}
.profile-editor-shell form > .btn-primary:last-child {
    position: sticky;
    z-index: 20;
    bottom: 12px;
    display: flex;
    min-width: 180px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1rem 0 0 auto;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.profile-custom-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
}
.profile-custom-select { position: relative; }
.profile-custom-select-toggle {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    color: var(--modern-text);
    background: rgba(5,8,13,.6);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    text-align: left;
}
.profile-custom-select-toggle:hover,.profile-custom-select.is-open .profile-custom-select-toggle {
    color: #fff;
    border-color: rgba(var(--modern-accent-rgb),.65);
}
.profile-custom-select-toggle span,.profile-custom-select-toggle small,.profile-custom-select-toggle strong { display: block; }
.profile-custom-select-toggle small { color: var(--modern-muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.profile-custom-select-toggle strong { margin-top: .1rem; font-size: .8rem; }
.profile-custom-select-toggle > i { margin: 0; color: var(--modern-muted); transition: transform .18s ease; }
.profile-custom-select.is-open .profile-custom-select-toggle > i { transform: rotate(180deg); }
.profile-custom-select-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    display: none;
    max-height: 360px;
    overflow-y: auto;
    padding: .45rem;
    background: rgba(10,13,20,.98);
    border: 1px solid rgba(var(--modern-accent-rgb),.35);
    border-radius: 12px;
    box-shadow: 0 22px 50px rgba(0,0,0,.48);
    backdrop-filter: blur(18px);
}
.profile-custom-select.is-open .profile-custom-select-menu { display: block; }
.profile-custom-select-group > span {
    display: block;
    padding: .5rem .55rem .3rem;
    color: var(--modern-accent-bright);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.profile-custom-select-menu button {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: .1rem .6rem;
    padding: .55rem .65rem;
    color: var(--modern-text);
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
}
.profile-custom-select-menu button:hover,.profile-custom-select-menu button.active { background: rgba(var(--modern-accent-rgb),.14); }
.profile-custom-select-menu button strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-custom-select-menu button small { grid-column: 1; color: var(--modern-muted); font-size: .62rem; }
.profile-custom-select-menu button > i { display: none; grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--modern-accent-bright); }
.profile-custom-select-menu button.active > i { display: block; }
.profile-custom-select-fonts button strong { font-size: 1rem; }
.profile-color-controls {
    display: grid;
    grid-template-columns: minmax(180px,1.2fr) minmax(130px,.7fr) minmax(130px,.7fr) minmax(180px,1fr);
    gap: .75rem;
    margin: .15rem 0 1rem;
    padding: .8rem;
    background: rgba(var(--modern-accent-rgb),.055);
    border: 1px solid rgba(var(--modern-accent-rgb),.15);
    border-radius: 12px;
}
.profile-color-controls .form-group { margin: 0; }
.profile-color-picker { min-height: 42px; padding: .25rem !important; cursor: pointer; }
.profile-code-editor {
    min-height: 240px !important;
    font-family: SFMono-Regular,Consolas,"Liberation Mono",monospace;
    font-size: .76rem;
    line-height: 1.55;
    tab-size: 4;
}
.profile-achievement-selection-count {
    flex: 0 0 auto;
    padding: .35rem .6rem;
    color: var(--modern-muted);
    background: rgba(255,255,255,.035);
    border-radius: 999px;
    font-size: .68rem;
}
.profile-achievement-selection-count b { color: #fff; }
.profile-achievement-actions { display: flex; justify-content: flex-end; gap: .4rem; margin: -.35rem 0 .7rem; }
.profile-achievement-options {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
    gap: .6rem;
}
.profile-achievement-option { min-width: 0; margin: 0; cursor: pointer; }
.profile-achievement-option > input { position: absolute; opacity: 0; pointer-events: none; }
.profile-achievement-option > span {
    position: relative;
    display: grid;
    min-height: 96px;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: .15rem .65rem;
    padding: .75rem;
    color: var(--modern-muted);
    background: rgba(5,8,13,.5);
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    transition: transform .16s ease,border-color .16s ease,background .16s ease;
}
.profile-achievement-option:hover > span { transform: translateY(-2px); border-color: rgba(var(--modern-accent-rgb),.45); }
.profile-achievement-option > span > i:first-child {
    display: grid;
    width: 38px;
    height: 38px;
    grid-row: 1 / span 2;
    place-items: center;
    margin: 0;
    color: var(--badge-color);
    background: var(--badge-background);
    border-radius: 10px;
}
.profile-achievement-option strong { overflow: hidden; color: var(--modern-text); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-achievement-option small { display: -webkit-box; overflow: hidden; grid-column: 2 / -1; font-size: .63rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.profile-achievement-option > span > b { align-self: start; color: var(--badge-color); font-size: .68rem; }
.profile-achievement-option em {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: transparent;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    font-size: .6rem;
    font-style: normal;
}
.profile-achievement-option em i { margin: 0; }
.profile-achievement-option > input:checked + span {
    color: #b8c3d6;
    background: linear-gradient(135deg,var(--badge-background),rgba(var(--modern-accent-rgb),.09));
    border-color: var(--badge-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--badge-color) 28%,transparent);
}
.profile-achievement-option > input:checked + span em { color: #fff; background: var(--badge-color); border-color: transparent; }
.profile-editor-empty {
    display: grid;
    min-height: 100px;
    place-items: center;
    align-content: center;
    gap: .45rem;
    color: var(--modern-muted);
    background: rgba(5,8,13,.38);
    border: 1px dashed var(--modern-border-strong);
    border-radius: 12px;
}
.profile-editor-empty i { margin: 0; color: var(--modern-accent-bright); }
.steam-linked-row, .steam-profile-widget { display: flex; align-items: center; gap: .85rem; }
.steam-linked-row img, .steam-profile-widget img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.steam-linked-row strong, .steam-linked-row small, .steam-profile-widget strong, .steam-profile-widget small, .steam-profile-widget a { display: block; }
.steam-linked-row small, .steam-profile-widget small { color: var(--modern-muted); }
.staff-page, .directory-page { max-width: 1050px; margin: 1rem auto 2rem; }
.staff-page-header { margin-bottom: 2rem; text-align: center; }
.staff-page-header span { color: var(--modern-accent-bright); font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
.staff-page-header h1 { margin: .35rem 0; font-size: 2.4rem; }
.staff-page-header p, .staff-section > header p { color: var(--modern-muted); }
.staff-section {
    margin-bottom: 1.25rem;
    padding: 1.15rem;
    background: rgba(17,17,17,.82);
    border: 1px solid var(--modern-border);
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(0,0,0,.18);
}
.staff-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.staff-section > header h2 { margin-bottom: .2rem; }
.staff-section-kicker { color: var(--modern-accent-bright); font-size: .68rem; font-weight: 700; letter-spacing: .15em; }
.staff-member-count { flex: 0 0 auto; padding: .3rem .65rem; color: var(--modern-muted); background: rgba(255,255,255,.05); border-radius: 999px; font-size: .75rem; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: .85rem; }
.staff-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 220px;
    padding: 1.25rem;
    color: var(--modern-text);
    text-align: center;
    text-decoration: none !important;
    background: linear-gradient(145deg,rgba(26,30,43,.96),rgba(13,15,22,.96));
    border: 1px solid var(--modern-border);
    border-radius: 15px;
    backdrop-filter: blur(14px);
    transition: transform .2s ease, border-color .2s ease;
}
.staff-member:hover { color: #fff; transform: translateY(-3px); border-color: rgba(75,105,182,.6); }
.staff-avatar { position: relative; margin-bottom: .75rem; }
.staff-avatar img:not(.profile-avatar-border), .staff-avatar span { display: grid; width: 82px; height: 82px; place-items: center; border-radius: 15px; object-fit: cover; background: #d9d9d9; color: #111; font-size: 1.8rem; }
.staff-avatar > .profile-avatar-border {
    inset: -7px;
    width: calc(100% + 14px) !important;
    height: calc(100% + 14px) !important;
}
.staff-avatar i { position: absolute; right: -4px; bottom: -4px; z-index: 4; width: 16px; height: 16px; border: 3px solid #111; border-radius: 50%; }
.staff-online { background: #4ade80; }
.staff-offline { background: #64748b; }
.staff-member small { margin-top: .45rem; color: var(--modern-muted); line-height: 1.35; }
.staff-role { margin-top: .25rem; color: var(--modern-accent-bright); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.directory-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 90% 10%,rgba(75,105,182,.34),transparent 35%),
        linear-gradient(135deg,rgba(24,29,43,.98),rgba(12,14,20,.98));
    border: 1px solid var(--modern-border);
    border-radius: 17px;
    box-shadow: var(--modern-shadow);
}
.directory-hero > div:first-child > span { color: var(--modern-accent-bright); font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.directory-hero h1 { margin: .25rem 0; font-size: 2rem; }
.directory-hero p { max-width: 610px; margin: 0; color: var(--modern-muted); }
.staff-directory-hero > i { color: rgba(118,146,216,.75); font-size: 3.25rem; }
.directory-stats { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .1rem .45rem; }
.directory-stats strong { color: #fff; font-size: 1.45rem; text-align: right; }
.directory-stats small { color: var(--modern-muted); }
.directory-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    background: rgba(17,17,17,.94);
    border: 1px solid var(--modern-border);
    border-radius: 13px;
}
.directory-toolbar i { color: var(--modern-muted); }
.directory-toolbar input { width: 100%; color: var(--modern-text); background: transparent; border: 0; outline: 0; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: .85rem; }
.member-card {
    display: flex;
    gap: .9rem;
    min-height: 145px;
    padding: 1rem;
    color: var(--modern-text) !important;
    text-decoration: none !important;
    background: rgba(17,17,17,.92);
    border: 1px solid var(--modern-border);
    border-radius: 15px;
    transition: transform .18s ease,border-color .18s ease;
}
.member-card:hover { transform: translateY(-2px); border-color: rgba(75,105,182,.65); }
.member-card-avatar { position: relative; flex: 0 0 auto; }
.member-card-avatar img:not(.profile-avatar-border), .member-card-avatar > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 13px; object-fit: cover; color: #111; background: #d9d9d9; font-size: 1.3rem; }
.member-card-avatar > .profile-avatar-border {
    inset: -6px;
    width: 76px !important;
    height: 76px !important;
}
.member-card-avatar i { position: absolute; right: -3px; bottom: -3px; z-index: 4; width: 14px; height: 14px; border: 3px solid #111; border-radius: 50%; }
.member-card-avatar .is-online { background: #4ade80; }
.member-card-avatar .is-offline { background: #64748b; }
.member-card-content { min-width: 0; flex: 1; }
.member-card-content > strong, .member-card-content > small { display: block; }
.member-card-content > small { color: var(--modern-muted); }
.member-card-content p { display: -webkit-box; overflow: hidden; margin: .45rem 0; color: var(--modern-muted); font-size: .82rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.member-card-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .55rem; color: var(--modern-muted); font-size: .72rem; }
.member-card-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.members-table-card { overflow: hidden; }
.members-table-card .card-body { padding: 1rem; }
.members-table-card .dataTables_wrapper { color: var(--modern-muted); }
.members-table-card .dataTables_filter input,
.members-table-card .dataTables_length select {
    color: var(--modern-text);
    background: rgba(7,10,16,.62);
    border: 1px solid var(--modern-border);
    border-radius: 8px;
}
.members-table-toolbar {
    display: flex;
    align-items: end;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .8rem;
    background: rgba(var(--modern-accent-rgb),.055);
    border: 1px solid rgba(var(--modern-accent-rgb),.16);
    border-radius: 11px;
}
.members-country-filter { display: grid; min-width: 250px; gap: .35rem; }
.members-country-filter > span { color: var(--modern-muted); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.members-country-filter > span i { color: var(--modern-accent-bright); }
.members-country-toggle {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .7rem;
    color: var(--modern-text);
    background: rgba(10,13,20,.84);
    border: 1px solid var(--modern-border);
    border-radius: 8px;
    text-align: left;
}
.members-country-toggle:hover,.members-country-toggle:focus { color: #fff; border-color: rgba(var(--modern-accent-rgb),.45); box-shadow: none; }
.members-country-toggle > span { display: inline-flex; align-items: center; gap: .5rem; }
.members-country-dropdown .dropdown-menu { width: 100%; max-height: 310px; overflow-y: auto; padding: .35rem; background: rgba(11,15,24,.98); border: 1px solid var(--modern-border); }
.members-country-dropdown .dropdown-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: .5rem; align-items: center; padding: .48rem .55rem; color: var(--modern-text); background: transparent; border: 0; border-radius: 6px; }
.members-country-dropdown .dropdown-item:hover,.members-country-dropdown .dropdown-item.active { color: #fff; background: rgba(var(--modern-accent-rgb),.16); }
.members-country-dropdown .dropdown-item b { color: var(--modern-muted); font-size: .68rem; }
.members-country-flag { display: inline-grid; width: 20px; height: 16px; place-items: center; flex: 0 0 20px; color: var(--modern-accent-bright); }
.members-country-flag img { display: block; width: 16px; height: 11px; object-fit: cover; }
.members-country-flag i { margin: 0; font-size: .72rem; }
.members-filter-result { margin-left: auto; padding-bottom: .45rem; color: var(--modern-accent-bright); font-size: .72rem; font-weight: 700; }
.members-table { color: var(--modern-text); }
.members-table thead th {
    color: #cbd6e8;
    background: rgba(75,105,182,.12);
    border-color: var(--modern-border) !important;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.members-table tbody td {
    vertical-align: middle;
    background: rgba(255,255,255,.016);
    border-color: rgba(255,255,255,.065) !important;
}
.members-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.members-table tbody tr:hover td { background: rgba(75,105,182,.11); }
.members-table-row { cursor: pointer; }
.members-table-client { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; color: inherit; text-decoration: none !important; }
.members-table-client > span:last-child { min-width: 0; }
.members-table-client strong,.members-table-client small { display: block; }
.members-table-client strong { overflow: hidden; max-width: 280px; text-overflow: ellipsis; white-space: nowrap; }
.members-table-client small,.members-table-muted { color: var(--modern-muted); font-size: .68rem; }
.members-table-avatar { position: relative; display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: #151923; background: #d9d9d9; border-radius: 9px; }
.members-table-avatar > img:not(.profile-avatar-border),.members-table-avatar > span { display: grid; width: 38px; height: 38px; place-items: center; object-fit: cover; border-radius: 9px; font-size: .76rem; }
.members-table-avatar > .profile-avatar-border { inset: -5px; width: 48px !important; height: 48px !important; }
.members-table-country,.members-table-connections,.members-table-status { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.members-table-connections i { color: var(--modern-accent-bright); font-size: .7rem; }
.members-table-status { padding: .28rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.members-table-status i { width: 7px; height: 7px; border-radius: 50%; }
.members-table-status.is-online { color: #86efac; background: rgba(34,197,94,.1); }
.members-table-status.is-online i { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.65); }
.members-table-status.is-offline { color: #aeb8c8; background: rgba(100,116,139,.1); }
.members-table-status.is-offline i { background: #64748b; }
.members-table-card .page-link { color: var(--modern-text); background: rgba(10,13,20,.8); border-color: var(--modern-border); }
.members-table-card .page-item.active .page-link { background: var(--modern-accent); border-color: var(--modern-accent); }

.profile-community-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}
.profile-community-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .5rem;
    color: var(--badge-color,#dce5f8);
    background: var(--badge-background,rgba(75,105,182,.13));
    border: 1px solid rgba(118,146,216,.28);
    border-radius: 8px;
    font-size: .68rem;
}
.profile-community-badge i { margin: 0; color: var(--badge-color,#f3c969); }
.profile-community-badge b { font-weight: 700; }
.profile-community-badge small { color: var(--modern-accent-bright); font-weight: 700; }
.profile-community-badge-first-100 i { color: #83d9e8; }
.profile-community-badge-community-veteran i { color: #d9a8ef; }

/* Experimental Steam-inspired profile */
.profile-v2-page { max-width: 1120px; margin: 1rem auto 2rem; }
.profile-v2-hero {
    position: relative;
    display: grid;
    min-height: 285px;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: end;
    gap: 1.25rem;
    overflow: hidden;
    padding: 1.5rem;
    background: #111827;
    border: 1px solid rgba(102,192,244,.2);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0,0,0,.34);
}
.profile-v2-art,.profile-v2-shade { position: absolute; inset: 0; }
.profile-v2-art {
    background:
        radial-gradient(circle at 15% 10%,rgba(var(--modern-accent-rgb),.65),transparent 34%),
        linear-gradient(130deg,#203d69,#111827 60%,#0a101a);
}
.profile-v2-art img { width: 100%; height: 100%; object-fit: cover; opacity: var(--banner-opacity,.75); filter: blur(var(--banner-blur,0)); transform: scale(1.035); }
.profile-v2-shade { background: linear-gradient(90deg,rgba(5,9,15,.93),rgba(5,9,15,.48) 60%,rgba(5,9,15,.8)),linear-gradient(0deg,rgba(5,9,15,.95),transparent 72%); }
.profile-v2-avatar {
    position: relative;
    z-index: 2;
    display: grid;
    width: 128px;
    height: 128px;
    place-items: center;
    color: #111;
    background: #d9d9d9;
    border: 4px solid rgba(8,13,21,.9);
    border-radius: 18px;
}
.profile-v2-avatar > img:not(.profile-avatar-border),.profile-v2-avatar > span { display: grid; width: 100%; height: 100%; place-items: center; object-fit: cover; border-radius: 14px; font-size: 2rem; }
.profile-v2-avatar > .profile-avatar-border { inset: calc(var(--profile-border-overflow,8px) * -1); width: calc(100% + (var(--profile-border-overflow,8px) * 2)) !important; height: calc(100% + (var(--profile-border-overflow,8px) * 2)) !important; }
.profile-v2-avatar > i { position: absolute; right: -5px; bottom: -5px; z-index: 5; width: 17px; height: 17px; border: 4px solid #0b111b; border-radius: 50%; }
.profile-v2-avatar > i.is-online { background: #57cb7a; box-shadow: 0 0 12px rgba(87,203,122,.75); }.profile-v2-avatar > i.is-offline { background: #657287; }
.profile-v2-identity { position: relative; z-index: 2; min-width: 0; }
.profile-v2-kicker { color: #66c0f4; font-size: .67rem; font-weight: 800; letter-spacing: .15em; }
.profile-v2-name { display: flex; align-items: center; gap: .55rem; margin: .25rem 0; }
.profile-v2-name h1 { min-width: 0; margin: 0; font-size: clamp(1.75rem,4vw,3rem); }
.profile-v2-identity > p { display: flex; gap: .65rem; margin: 0 0 .75rem; color: #9ba9bd; font-size: .76rem; }.profile-v2-identity > p strong { color: #66c0f4; }
.profile-v2-links { display: flex; flex-wrap: wrap; gap: .4rem; }.profile-v2-links a,.profile-v2-links span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem; color: #c5d2e5; background: rgba(5,10,17,.48); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; font-size: .66rem; text-decoration: none; }
.profile-v2-actions { position: relative; z-index: 2; display: flex; align-items: flex-end; flex-direction: column; gap: .5rem; }.profile-v2-actions .btn { min-width: 155px; }
.profile-v2-wheel .btn { min-width: 42px; }.profile-v2-wheel .dropdown-item i { width: 19px; margin: 0 .35rem 0 0; text-align: center; }
.profile-v2-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .65rem; margin: .8rem 0; }
.profile-v2-metrics article { display: flex; min-width: 0; align-items: center; gap: .65rem; padding: .85rem; background: rgba(16,25,39,.84); border: 1px solid rgba(255,255,255,.085); border-radius: 12px; }
.profile-v2-metrics article > i { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; margin: 0; color: #66c0f4; background: rgba(102,192,244,.1); border-radius: 9px; }
.profile-v2-metrics strong,.profile-v2-metrics span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-v2-metrics strong { color: #fff; }.profile-v2-metrics span { color: var(--modern-muted); font-size: .58rem; text-transform: uppercase; }
.profile-v2-layout,.profile-v2-presence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-bottom: .8rem; }
.profile-v2-about p { padding: .9rem; color: #c3cee0; background: rgba(102,192,244,.045); border: 1px solid rgba(102,192,244,.1); border-radius: 10px; }
.profile-v2-about dl { margin: 0; }.profile-v2-about dl > div { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: .7rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }.profile-v2-about dl > div:last-child { border-bottom: 0; }.profile-v2-about dt { color: var(--modern-muted); }.profile-v2-about dd { overflow-wrap: anywhere; color: #dce6f5; }
.profile-v2-group-list { display: flex; flex-wrap: wrap; gap: .45rem; }.profile-v2-group-list span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .55rem; color: #d8e2f1; background: rgba(102,192,244,.055); border: 1px solid rgba(102,192,244,.14); border-radius: 8px; font-size: .72rem; }.profile-v2-group-list img { width: 16px; height: 16px; object-fit: contain; }
.profile-v2-achievements { margin-bottom: .8rem; }.profile-v2-achievements > header a { color: inherit; text-decoration: none; }.profile-v2-achievements .profile-badge-shelf { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
@media(max-width:991px){.profile-v2-hero{grid-template-columns:auto minmax(0,1fr)}.profile-v2-actions{grid-column:1/-1;align-items:stretch;flex-direction:row;flex-wrap:wrap}.profile-v2-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.profile-v2-layout,.profile-v2-presence{grid-template-columns:1fr}.profile-v2-hero{grid-template-columns:1fr;align-items:center;text-align:center}.profile-v2-avatar{margin:auto}.profile-v2-name,.profile-v2-identity>p,.profile-v2-links{justify-content:center}.profile-v2-actions{justify-content:center}}
@media(max-width:575px){.profile-v2-hero{padding:1rem}.profile-v2-avatar{width:104px;height:104px}.profile-v2-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-v2-about dl>div{grid-template-columns:105px minmax(0,1fr)}}

.community-pulse-card .card-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; }
.community-pulse-card .card-body > div { min-width: 0; padding: .45rem .2rem; text-align: center; background: rgba(var(--modern-accent-rgb),.055); border-radius: 8px; }
.community-pulse-card strong,.community-pulse-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.community-pulse-card strong { color: #fff; font-size: 1rem; }.community-pulse-card span { color: var(--modern-muted); font-size: .55rem; text-transform: uppercase; }
.community-pulse-card .card-body > i { position: relative; display: block; grid-column: 1/-1; height: 5px; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 999px; }.community-pulse-card .card-body > i::after { display: block; width: var(--pulse-fill); height: 100%; content: ""; background: linear-gradient(90deg,var(--modern-accent),var(--modern-accent-bright)); }
.viewer-page-shell { width: 100%; }
.viewer-v2-summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: .8rem; padding: 1.25rem; background: radial-gradient(circle at 90% 10%,rgba(var(--modern-accent-rgb),.24),transparent 34%),linear-gradient(145deg,rgba(22,28,42,.96),rgba(10,13,20,.96)); border: 1px solid var(--modern-border); border-radius: 16px; box-shadow: var(--modern-shadow); }
.viewer-v2-summary > div:first-child > span { color: var(--modern-accent-bright); font-size: .65rem; font-weight: 800; letter-spacing: .15em; }.viewer-v2-summary h1 { margin: .2rem 0; font-size: 1.75rem; }.viewer-v2-summary p { margin: 0; color: var(--modern-muted); }
.viewer-v2-metrics { display: grid; grid-template-columns: repeat(4,minmax(72px,1fr)); gap: .5rem; }.viewer-v2-metrics article { min-width: 72px; padding: .65rem; text-align: center; background: rgba(5,8,13,.45); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }.viewer-v2-metrics strong,.viewer-v2-metrics span { display: block; }.viewer-v2-metrics strong { color: #fff; font-size: 1.2rem; }.viewer-v2-metrics span { color: var(--modern-muted); font-size: .56rem; text-transform: uppercase; }
.viewer-layout-v2 .viewer-main-card { overflow: hidden; border-radius: 16px; }
.viewer-layout-v2 .viewer-container { padding: .35rem; }
.viewer-layout-v2 .viewer-container .channel-container:not(.is-spacer) > .channel,
.viewer-layout-v2 .viewer-container .client-container { min-height: 39px; margin: 3px 0; padding: .45rem .6rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.055); border-radius: 9px; transition: transform .16s ease,background .16s ease,border-color .16s ease; }
.viewer-layout-v2 .viewer-container .channel-container:not(.is-spacer) > .channel:hover,
.viewer-layout-v2 .viewer-container .client-container:hover { transform: translateX(3px); background: rgba(var(--modern-accent-rgb),.11); border-color: rgba(var(--modern-accent-rgb),.28); }
.viewer-layout-v2 .viewer-container .channel-container.is-server > .channel { min-height: 48px; margin-bottom: .55rem; background: linear-gradient(90deg,rgba(var(--modern-accent-rgb),.22),rgba(255,255,255,.025)); }
.viewer-layout-v2 .viewer-container .client-container { margin-left: 17px; }
.viewer-layout-v2 .viewer-client-avatar { width: 25px; height: 25px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
@media(max-width:767px){.viewer-v2-summary{align-items:flex-start;flex-direction:column}.viewer-v2-metrics{width:100%}}
@media(max-width:575px){.viewer-v2-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.community-stats-page { max-width: 1050px; margin: 1rem auto 2rem; }
.community-stats-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 1.6rem;
    background:
        radial-gradient(circle at 88% 12%,rgba(118,146,216,.28),transparent 34%),
        linear-gradient(145deg,rgba(25,30,43,.96),rgba(14,17,25,.96));
    border: 1px solid var(--modern-border);
    border-radius: 18px;
    box-shadow: var(--modern-shadow);
}
.community-stats-hero > div:first-child > span { color: var(--modern-accent-bright); font-size: .7rem; font-weight: 700; letter-spacing: .15em; }
.community-stats-hero h1 { margin: .25rem 0; font-size: 2.1rem; }
.community-stats-hero p { margin: 0; color: var(--modern-muted); }
.community-stats-summary { display: flex; gap: .65rem; }
.community-stats-summary > div { min-width: 88px; padding: .65rem .8rem; text-align: center; background: rgba(8,11,18,.45); border: 1px solid var(--modern-border); border-radius: 12px; }
.community-stats-summary strong,.community-stats-summary small { display: block; }
.community-stats-summary strong { color: #fff; font-size: 1.3rem; }
.community-stats-summary small { color: var(--modern-muted); font-size: .66rem; }
.community-stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.community-ranking-card,.community-country-card,.community-awards-card { margin: 0; }
.community-ranking-card > header,.community-country-card > header,.community-awards-card > header { display: flex; align-items: center; justify-content: space-between; }
.community-ranking-card > header small,.community-country-card > header small,.community-awards-card > header small { color: var(--modern-muted); font-size: .67rem; }
.community-ranking-list { padding: .35rem 1rem; }
.community-ranking-list > a {
    display: grid;
    grid-template-columns: 28px 44px minmax(0,1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .62rem 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.community-ranking-list > a:last-child { border-bottom: 0; }
.community-rank { display: grid; width: 25px; height: 25px; place-items: center; color: var(--modern-muted); background: rgba(255,255,255,.04); border-radius: 7px; font-size: .7rem; }
.community-rank-1 { color: #2a2107; background: #f3c969; }
.community-rank-2 { color: #28303a; background: #c5d0db; }
.community-rank-3 { color: #2e1d10; background: #c98d63; }
.community-rank-avatar { position: relative; display: grid; width: 40px; height: 40px; place-items: center; color: var(--modern-muted); background: #202633; border-radius: 9px; }
.community-rank-avatar > i { display: grid; width: 100%; height: 100%; margin: 0; place-items: center; }
.community-rank-avatar > img:not(.profile-avatar-border) { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; }
.community-rank-avatar > .profile-avatar-border { inset: -5px; width: 50px !important; height: 50px !important; }
.community-ranking-list a > span:nth-child(3) { min-width: 0; }
.community-ranking-list strong,.community-ranking-list small { display: block; }
.community-ranking-list strong { overflow: hidden; color: var(--modern-text); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.community-ranking-list small { color: var(--modern-muted); font-size: .65rem; }
.community-ranking-list em { color: var(--modern-accent-bright); font-size: .75rem; font-style: normal; font-weight: 700; }
.community-country-list { display: grid; gap: .65rem; padding: 1rem; }
.community-country-list > div { display: grid; grid-template-columns: 105px 1fr 30px; align-items: center; gap: .65rem; }
.community-country-list span { display: flex; align-items: center; gap: .4rem; color: var(--modern-muted); font-size: .75rem; }
.community-country-list > div > i { height: 8px; overflow: hidden; background: rgba(255,255,255,.04); border-radius: 999px; }
.community-country-list b { display: block; height: 100%; background: linear-gradient(90deg,var(--modern-accent),var(--modern-accent-bright)); border-radius: inherit; }
.community-country-list strong { color: #fff; font-size: .72rem; text-align: right; }
.community-award-explain { display: grid; gap: .7rem; padding: 1rem; }
.community-award-explain > div { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: rgba(255,255,255,.025); border: 1px solid var(--modern-border); border-radius: 11px; }
.community-award-explain > div > i { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; margin: 0; color: #f3c969; background: rgba(243,201,105,.09); border-radius: 10px; }
.community-award-explain strong,.community-award-explain small { display: block; }
.community-award-explain strong { color: var(--modern-text); font-size: .8rem; }
.community-award-explain small { color: var(--modern-muted); font-size: .68rem; }
.community-founders-card { grid-column: 1 / -1; margin: 0; }
.community-founders-card > header { display: flex; align-items: center; justify-content: space-between; }
.community-founders-card > header small { color: var(--modern-muted); font-size: .67rem; }
.community-founders-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(185px,1fr)); gap: .55rem; padding: 1rem; }
.community-founders-grid a {
    display: grid;
    grid-template-columns: auto 34px minmax(0,1fr);
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .55rem;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
}
.community-founders-grid a:hover { background: rgba(75,105,182,.1); border-color: rgba(118,146,216,.25); }
.community-founder-entry.is-hidden { display: none; }
.community-founders-more { padding: 0 1rem 1rem; text-align: center; }
.community-founders-grid a > b { color: var(--modern-accent-bright); font-size: .66rem; }
.community-founders-grid a > span { position: relative; display: grid; width: 32px; height: 32px; place-items: center; color: var(--modern-muted); background: #202633; border-radius: 8px; }
.community-founders-grid a > span > i { display: grid; width: 100%; height: 100%; margin: 0; place-items: center; }
.community-founders-grid img:not(.profile-avatar-border) { width: 32px; height: 32px; object-fit: cover; border-radius: 8px; }
.community-founder-avatar > .profile-avatar-border { inset: -5px; width: 42px !important; height: 42px !important; }
.community-founders-grid div { min-width: 0; }
.community-founders-grid strong,.community-founders-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-founders-grid strong { color: var(--modern-text); font-size: .72rem; }
.community-founders-grid small { color: var(--modern-muted); font-size: .61rem; }

@media (max-width: 575px) {
    .directory-hero { align-items: flex-start; padding: 1.15rem; }
    .directory-stats, .staff-directory-hero > i { display: none; }
    .staff-section > header { align-items: flex-start; }
    .member-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .profile-color-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .community-stats-hero { align-items: flex-start; flex-direction: column; }
    .community-stats-summary { width: 100%; }
    .community-stats-summary > div { flex: 1; min-width: 0; }
    .community-stats-grid { grid-template-columns: 1fr; }
    .community-founders-card { grid-column: auto; }
}

/* Legacy profile placement with the current profile feature set */
.profile-page-legacy {
    max-width: 1000px;
    margin: 1rem auto 2rem;
}
.profile-legacy-hero {
    overflow: visible;
    margin-bottom: 1rem;
    background: transparent;
    border: 1px solid var(--modern-border);
    border-radius: 15px;
    box-shadow: var(--modern-shadow);
}
.profile-legacy-cover { border-radius: 14px 14px 0 0; }
.profile-legacy-header,
.profile-legacy-header::before { border-radius: 0 0 14px 14px; }
.profile-legacy-cover {
    position: relative;
    overflow: hidden;
    height: var(--profile-banner-height,150px);
    background:
        linear-gradient(110deg, rgba(5,8,16,.2), rgba(5,8,16,.68)),
        radial-gradient(circle at 18% 10%, rgba(118,146,216,.62), transparent 35%),
        linear-gradient(135deg,#263c76,#111a31 58%,#0b0d13);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.profile-legacy-cover.has-custom-banner {
    background: #111;
}
.profile-legacy-cover-image {
    position: absolute;
    top: -32px;
    right: -32px;
    bottom: -32px;
    left: -32px;
    width: calc(100% + 64px);
    height: calc(100% + 64px);
    max-width: none;
    object-fit: cover;
    opacity: var(--banner-opacity,.75);
    filter: blur(var(--banner-blur,0px));
    transform: scale(1.025);
    transform-origin: center;
}
.profile-legacy-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 142px;
    padding: 1rem 1.25rem 1.25rem;
    isolation: isolate;
}
.profile-legacy-header::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: rgba(17,17,17,var(--header-opacity,.95));
}
.profile-legacy-user {
    display: flex;
    align-items: center;
    min-width: 0;
}
.profile-legacy-avatar {
    position: relative;
    flex: 0 0 var(--profile-avatar-size,136px);
    width: var(--profile-avatar-size,136px);
    height: var(--profile-avatar-size,136px);
    margin-top: calc(var(--profile-avatar-size,136px) / -2);
    padding: 4px;
    background: #0b0d12;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 5px;
    box-shadow: 0 15px 32px rgba(0,0,0,.4);
}
.profile-legacy-avatar > .profile-avatar-border {
    inset: calc(var(--profile-border-overflow,8px) * -1);
    width: calc(100% + (var(--profile-border-overflow,8px) * 2)) !important;
    height: calc(100% + (var(--profile-border-overflow,8px) * 2)) !important;
}
.profile-legacy-avatar > img,
.profile-legacy-avatar .profile-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
}
.profile-legacy-avatar .profile-avatar-initials {
    display: grid;
    place-items: center;
    color: #111;
    background: #d9d9d9;
    font-size: 3rem;
}
.profile-legacy-meta {
    min-width: 0;
    margin-left: 1rem;
}
.profile-legacy-name {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.profile-legacy-name .profile-flag { flex: 0 0 auto; margin: 0; align-self: center; }
.profile-legacy-name h1 {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 600;
}
.profile-legacy-identity {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: .25rem 0 .35rem;
    color: var(--modern-muted);
    font-size: .78rem;
}
.profile-legacy-identity span:last-child {
    max-width: 390px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-legacy-identity i { margin-right: .35rem; }
.profile-legacy-actions {
    position: absolute;
    top: 50%;
    right: 1rem;
    z-index: 4;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    flex: 0 0 auto;
}
.profile-legacy-actions .profile-reference-level {
    min-width: 46px;
}
.viewer-client-avatar {
    width: 24px;
    height: 24px;
    margin-right: .4rem;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid var(--modern-border-strong);
    border-radius: 50%;
}
.viewer-container .client-container.has-steam-game {
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(102,192,244,.2);
}
.viewer-container .client-container.has-steam-game > .client-name,
.viewer-container .client-container.has-steam-game > .client-icons {
    position: relative;
    z-index: 2;
}
.viewer-steam-game-bg {
    position: absolute;
    z-index: 0;
    inset: -7px;
    display: block;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    filter: blur(4px);
    opacity: .13;
    transform: scale(1.04);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.viewer-container .client-container.has-steam-game::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(8,13,22,.96), rgba(8,13,22,.72) 50%, rgba(8,13,22,.96));
}
.viewer-playing-row td {
    padding-top: .38rem;
    color: #8bc8ee;
    border-top: 1px solid rgba(102,192,244,.16);
}
.viewer-playing-row i { margin-right: .2rem; color: #66c0f4; }
.donate-page {
    max-width: 1050px;
    margin: 1rem auto 2rem;
    --vip-accent: #aa88ff;
}
.donate-hero {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-bottom: 1rem;
    padding: 2rem;
    overflow: hidden;
    background: linear-gradient(125deg,rgba(69,48,106,.94),rgba(17,17,17,.96) 58%);
    border: 1px solid rgba(170,136,255,.3);
    border-radius: 16px;
    box-shadow: var(--modern-shadow);
}
.donate-hero h1 { margin: .15rem 0 .45rem; font-size: clamp(1.8rem,4vw,3rem); }
.donate-hero p { max-width: 760px; margin: 0; color: #c7cfdd; font-size: 1.05rem; }
.donate-hero small { color: #c5adff; font-weight: 700; letter-spacing: .14em; }
.donate-crown {
    display: grid;
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    place-items: center;
    color: #aa88ff;
    background: rgba(170,136,255,.13);
    border: 1px solid rgba(170,136,255,.34);
    border-radius: 24px;
    box-shadow: 0 14px 36px rgba(170,136,255,.22);
    font-size: 2.4rem;
}
.donate-crown i { display: block; margin: 0; line-height: 1; }
.donate-page .btn-primary { background: #8969d8; border-color: #aa88ff; }
.donate-page .btn-primary:hover { background: #aa88ff; border-color: #c5adff; }
.donate-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; }
.donate-perks .profile-panel-body > div {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--modern-border);
}
.donate-perks .profile-panel-body > div:last-child { border-bottom: 0; }
.donate-perks .profile-panel-body > div > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #aa88ff;
    background: rgba(170,136,255,.13);
    border-radius: 11px;
}
.donate-perks span { display: flex; flex-direction: column; }
.donate-perks small,.donate-note small { color: var(--modern-muted); }
.donate-note .btn { display: block; margin: 1rem 0 .6rem; }
@media (max-width: 767px) {
    .donate-hero { align-items: flex-start; padding: 1.25rem; }
    .donate-crown { flex-basis: 58px; width: 58px; height: 58px; border-radius: 16px; font-size: 1.55rem; }
    .donate-grid { grid-template-columns: 1fr; }
}
.leaderboards-page { max-width: 980px; margin: 1rem auto 2rem; }
.leaderboard-hero > i { color: var(--modern-accent-bright); font-size: 4rem; opacity: .8; }
.leaderboard-tabs { display: flex; gap: .5rem; margin: 1rem 0; }
.leaderboard-tabs button {
    padding: .65rem 1rem;
    color: var(--modern-muted);
    background: rgba(17,17,17,.92);
    border: 1px solid var(--modern-border);
    border-radius: 10px;
    font-weight: 600;
}
.leaderboard-tabs button.active { color: #fff; background: var(--modern-accent); border-color: var(--modern-accent-bright); }
.leaderboard-panel { display: none; }
.leaderboard-panel.active { display: block; }
.leaderboard-table { padding: .3rem 1rem; }
.leaderboard-table > a {
    display: grid;
    grid-template-columns: 38px 48px minmax(0,1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    color: inherit;
    border-bottom: 1px solid var(--modern-border);
}
.leaderboard-table > a:last-child { border-bottom: 0; }
.leaderboard-table > a > b { color: var(--modern-accent-bright); text-align: center; }
.leaderboard-table > a > span:nth-child(3) { display: flex; min-width: 0; flex-direction: column; }
.leaderboard-table > a strong { color: var(--modern-text); }
.leaderboard-table > a small { color: var(--modern-muted); }
.leaderboard-table > a em { color: var(--modern-accent-bright); font-style: normal; font-weight: 600; }
@media (max-width: 575px) {
    .profile-color-controls { grid-template-columns: 1fr; }
    .leaderboard-hero > i { display: none; }
    .leaderboard-tabs { display: grid; grid-template-columns: 1fr; }
    .leaderboard-table { padding: .25rem .7rem; }
    .leaderboard-table > a { grid-template-columns: 26px 40px minmax(0,1fr); gap: .5rem; }
    .leaderboard-table > a em { grid-column: 3; font-size: .72rem; }
}
.profile-badge-shelf {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    background: rgba(17,17,17,.92);
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    box-shadow: var(--modern-shadow);
}
.profile-achievement-link {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #ffe083 !important;
    text-decoration: none !important;
    background: linear-gradient(145deg,rgba(73,59,22,.9),rgba(32,27,15,.9));
    border: 1px solid rgba(255,224,131,.22);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
}
.profile-achievement-link i { margin: 0; line-height: 1; }
.profile-achievement-empty { color: #8f9db4; font-size: .72rem; text-decoration: none !important; }

/* Member achievement collection */
.achievements-page { max-width: 1160px; margin: 0 auto 2rem; }
.achievements-hero {
    position: relative;
    display: grid;
    min-height: 190px;
    padding: clamp(25px,4vw,44px);
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 15%,rgba(255,208,89,.13),transparent 32%),
        radial-gradient(circle at 15% 100%,rgba(var(--modern-accent-rgb),.2),transparent 40%),
        rgba(13,18,29,.94);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 19px;
    box-shadow: 0 24px 65px rgba(0,0,0,.3);
}
.achievement-owner-avatar {
    position: relative;
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    color: #edf2ff;
    text-decoration: none !important;
    background: #111827;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 15px;
}
.achievement-owner-avatar > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.achievement-owner-avatar > span { font-size: 1.7rem; font-weight: 300; }
.achievement-owner-avatar .profile-avatar-border {
    position: absolute;
    inset: calc(var(--profile-border-overflow,8px) * -1);
    z-index: 2;
    width: calc(100% + (var(--profile-border-overflow,8px) * 2)) !important;
    height: calc(100% + (var(--profile-border-overflow,8px) * 2)) !important;
    max-width: none !important;
    object-fit: contain;
    pointer-events: none;
}
.achievements-hero > div:nth-child(2) > span { color: #e6bf5d; font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
.achievements-hero h1 { margin: 5px 0 7px; color: #fff; font-size: clamp(1.55rem,4vw,2.45rem); }
.achievements-hero p { max-width: 610px; margin: 0; color: #8e9bb0; }
.achievement-completion { display: grid; width: 105px; justify-items: center; }
.achievement-completion strong { color: #fff; font-size: 2rem; line-height: 1; }
.achievement-completion strong small { color: #77849a; font-size: .85rem; }
.achievement-completion > span { margin: 5px 0 9px; color: #8996aa; font-size: .65rem; text-transform: uppercase; }
.achievement-completion > i { position: relative; display: block; width: 100%; height: 6px; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 999px; }
.achievement-completion > i::after { display: block; width: var(--completion); height: 100%; content: ""; background: linear-gradient(90deg,#c99532,#ffe083); border-radius: inherit; }
.achievement-toolbar { display: flex; margin: 14px 0; padding: 10px 13px; align-items: center; gap: 10px; background: rgba(14,19,29,.83); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; }
.achievement-toolbar a,.achievement-toolbar span { display: inline-flex; align-items: center; gap: 7px; color: #8f9cb1; font-size: .7rem; text-decoration: none; }
.achievement-toolbar a { margin-right: auto; color: #b9c7e4; }
.achievement-toolbar i { display: inline-flex; width: 15px; align-items: center; justify-content: center; margin: 0; }
.achievement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.achievement-card {
    position: relative;
    display: grid;
    min-height: 155px;
    padding: 18px;
    grid-template-columns: 62px minmax(0,1fr);
    align-items: center;
    gap: 16px;
    overflow: hidden;
    background: linear-gradient(145deg,color-mix(in srgb,var(--achievement-background) 55%,#111722),rgba(12,16,24,.96));
    border: 1px solid color-mix(in srgb,var(--achievement-color) 20%,transparent);
    border-radius: 14px;
}
.achievement-card::after { position: absolute; right: -35px; bottom: -45px; width: 120px; height: 120px; content: ""; background: var(--achievement-color); border-radius: 50%; filter: blur(55px); opacity: .09; }
.achievement-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: var(--achievement-color);
    background: color-mix(in srgb,var(--achievement-background) 75%,#10151f);
    border: 1px solid color-mix(in srgb,var(--achievement-color) 25%,transparent);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.23);
}
.achievement-icon i { margin: 0; font-size: 1.35rem; line-height: 1; }
.achievement-copy { position: relative; z-index: 1; min-width: 0; }
.achievement-copy > span { color: var(--achievement-color); font-size: .58rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.achievement-copy > span i { margin-right: 5px; }
.achievement-copy h2 { margin: 4px 0; color: #f2f5fb; font-size: 1rem; }
.achievement-copy p { min-height: 34px; margin: 0 0 10px; color: #8491a6; font-size: .7rem; line-height: 1.45; }
.achievement-progress { display: flex; align-items: center; gap: 10px; }
.achievement-progress > span { display: block; height: 5px; flex: 1; overflow: hidden; background: rgba(255,255,255,.07); border-radius: 999px; }
.achievement-progress > span i { display: block; height: 100%; background: var(--achievement-color); border-radius: inherit; box-shadow: 0 0 10px color-mix(in srgb,var(--achievement-color) 55%,transparent); }
.achievement-progress small { min-width: 88px; color: #79869b; font-size: .61rem; text-align: right; }
.achievement-locked { filter: saturate(.35); opacity: .66; }
.achievement-locked .achievement-icon { color: #7d8798; }
@media (max-width: 767.98px) {
    .achievements-hero { grid-template-columns: auto minmax(0,1fr); }
    .achievement-completion { grid-column: 1 / -1; width: 100%; grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; gap: 8px; }
    .achievement-completion > span { margin: 0; }
    .achievement-completion > i { margin-left: 8px; }
    .achievement-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .achievements-hero { padding: 21px; grid-template-columns: 1fr; }
    .achievement-owner-avatar { width: 70px; height: 70px; }
    .achievement-card { padding: 14px; grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
    .achievement-icon { width: 48px; height: 48px; border-radius: 13px; }
    .achievement-toolbar span { display: none; }
}
.profile-banner-preview {
    position: relative;
    display: grid;
    min-height: 150px;
    margin-bottom: 1rem;
    place-items: center;
    overflow: hidden;
    color: var(--modern-muted);
    isolation: isolate;
    background: #0b0d13;
    border: 1px solid var(--modern-border);
    border-radius: 12px;
}
.profile-banner-preview-image {
    position: absolute;
    z-index: -2;
    inset: -32px;
    background:
        var(--banner-image) center/cover no-repeat,
        linear-gradient(135deg,#263c76,#111a31 58%,#0b0d13);
    opacity: var(--banner-opacity,.75);
    filter: blur(var(--banner-blur,0px));
    transform: scale(1.025);
}
.profile-banner-preview-header {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 58px;
    padding: .7rem 1rem;
    background: rgba(17,17,17,var(--header-opacity,.95));
}
.profile-banner-preview-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #fff;
    background: #151923;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
}
.profile-banner-preview-empty {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .7rem;
    background: rgba(0,0,0,.48);
    border-radius: 8px;
}
.profile-file-picker {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.profile-file-picker input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.profile-file-picker label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    margin: 0;
    padding: .55rem .8rem;
    color: #fff;
    background: linear-gradient(135deg,var(--modern-accent),var(--modern-accent-bright));
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
}
.profile-file-picker label:hover { filter: brightness(1.1); }
.profile-file-picker:focus-within label { box-shadow: 0 0 0 .2rem rgba(75,105,182,.25); }
.profile-file-picker > span {
    overflow: hidden;
    color: var(--modern-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-legacy-overview .profile-panel-body {
    padding: 1.25rem;
}
.profile-legacy-overview-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 2.5rem;
}
.profile-legacy-overview-grid dl { margin: 0; }
.profile-legacy-overview-grid dl > div {
    display: grid;
    grid-template-columns: minmax(125px,.8fr) minmax(0,1.2fr);
    gap: 1rem;
    padding: .62rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.profile-legacy-overview-grid dt {
    color: var(--modern-muted);
    font-weight: 400;
}
.profile-legacy-overview-grid dd {
    margin: 0;
    color: var(--modern-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.profile-online-value { color: #4ade80; }
.profile-legacy-description {
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--modern-border);
}
.profile-legacy-description strong { display: block; margin-bottom: .45rem; }
.profile-legacy-description p {
    margin: 0;
    color: #b1bbca;
    line-height: 1.55;
    white-space: pre-wrap;
}
.profile-legacy-widgets {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1rem;
}
.profile-legacy-widgets > .profile-panel:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .profile-legacy-cover { height: 82px; }
    .profile-legacy-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .8rem;
    }
    .profile-legacy-avatar {
        flex-basis: 104px;
        width: 104px;
        height: 104px;
        margin-top: -48px;
    }
    .profile-legacy-avatar .profile-avatar-initials { font-size: 2.2rem; }
    .profile-legacy-name h1 { font-size: 1.45rem; }
    .profile-legacy-identity span:last-child { max-width: 210px; }
    .profile-legacy-actions {
        justify-content: space-between;
        width: 100%;
        padding-left: 120px;
    }
    .profile-legacy-overview-grid,
    .profile-legacy-widgets { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .profile-legacy-user { align-items: flex-start; }
    .profile-legacy-meta { margin-left: .75rem; }
    .profile-legacy-identity span:last-child { display: none; }
    .profile-legacy-actions { padding-left: 0; }
    .profile-legacy-overview-grid dl > div {
        grid-template-columns: 110px minmax(0,1fr);
        gap: .65rem;
    }
}

@media (max-width: 767px) {
    .profile-page { margin-top: 0; }
    .profile-focus-card { padding: 1.7rem 1rem; border-radius: 18px; }
    .profile-name-line h1 { font-size: 1.6rem; }
    .profile-content-grid { grid-template-columns: 1fr; }
    .profile-data-grid { grid-template-columns: 1fr; }
}

/* Stacked community profile, based on the TS-24 information placement */
.profile-page-stacked {
    max-width: 900px;
    margin: 1rem auto 2rem;
}
.profile-overview-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    background:
        radial-gradient(circle at 50% -20%, rgba(145,164,199,.18), transparent 42%),
        rgba(17,17,17,.96);
    border: 1px solid var(--modern-border-strong);
    border-radius: 16px;
    box-shadow: var(--modern-shadow), inset 0 1px rgba(255,255,255,.035);
}
.profile-overview-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 410px;
    padding: 2rem 1.5rem 1.7rem;
    text-align: center;
}
.profile-overview-card .profile-avatar {
    width: 154px;
    height: 154px;
    border: 5px solid #0c0c0c;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--modern-border-strong), 0 15px 35px rgba(0,0,0,.4);
}
.profile-avatar-initials {
    display: grid;
    place-items: center;
    color: #101010;
    background: #d9d9d9;
    font-size: 3.7rem;
    font-weight: 300;
    letter-spacing: .02em;
}
.profile-overview-card .profile-presence {
    right: -7px;
    bottom: -7px;
    width: 20px;
    height: 20px;
}
.profile-overview-card .profile-name-line { margin-top: .9rem; }
.profile-overview-card .profile-name-line h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .025em;
}
.profile-online-state {
    margin-top: .35rem;
    font-size: 1rem;
}
.profile-online-state i { margin-right: .4rem; font-size: .65rem; }
.profile-online-state-online { color: #4ade80; }
.profile-online-state-offline { color: #f05270; }
.profile-last-seen { color: var(--modern-muted); font-size: .9rem; }
.profile-quick-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}
.profile-action-icon {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: #aeb8c8;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    cursor: pointer;
}
button.profile-action-icon { font: inherit; }
.profile-action-icon:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}
.profile-action-icon i { margin: 0; }
.profile-overview-stat {
    display: grid;
    margin-top: 1.1rem;
    color: var(--modern-muted);
}
.profile-overview-stat strong {
    display: grid;
    width: 54px;
    height: 54px;
    margin: auto;
    place-items: center;
    color: var(--modern-text);
    border: 2px solid var(--modern-accent-bright);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 400;
}
.profile-overview-stat span { margin-top: .2rem; font-size: .86rem; }

.profile-panel {
    overflow: hidden;
    margin-bottom: 1rem;
    background: rgba(17,17,17,.95);
    border: 1px solid var(--modern-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.profile-panel > header {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: .8rem 1.1rem;
    color: var(--modern-text);
    background: rgba(255,255,255,.035);
    border-bottom: 1px solid var(--modern-border);
    font-size: 1.05rem;
    font-weight: 600;
}
.profile-panel > header i { width: 22px; margin-right: .45rem; color: #b7c3d8; text-align: center; }
.profile-panel-body {
    padding: 1.05rem;
    color: #b6bfce;
}
.profile-about { min-height: 78px; white-space: pre-wrap; }
.profile-stat-feature {
    display: grid;
    justify-items: center;
    padding: .35rem 0 1rem;
}
.profile-stat-feature span { color: var(--modern-muted); }
.profile-stat-feature strong { margin-top: .3rem; color: var(--modern-text); font-size: 1.35rem; }
.profile-stat-row {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    text-align: center;
}
.profile-stat-row > div {
    display: grid;
    gap: .15rem;
    padding: .75rem;
    border-right: 1px solid rgba(255,255,255,.06);
}
.profile-stat-row > div:last-child { border-right: 0; }
.profile-stat-row strong { color: var(--modern-text); font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.profile-stat-row span { color: var(--modern-muted); font-size: .78rem; }
.profile-panel hr { border-color: rgba(255,255,255,.065); }
.profile-client-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem 1.5rem;
    color: var(--modern-muted);
}
.profile-client-line i { color: #77849b; }
.profile-page-stacked .discord-user { max-width: 520px; margin: 0 auto; }
.profile-page-stacked .discord-activity { max-width: 520px; margin-right: auto; margin-left: auto; }
.profile-page-stacked .profile-identity-list { max-width: 620px; margin: auto; }

@media (max-width: 767px) {
    .profile-page-stacked { margin-top: 0; }
    .profile-overview-inner { min-height: 390px; padding: 1.5rem 1rem; }
    .profile-overview-card .profile-avatar { width: 138px; height: 138px; }
    .profile-stat-row { grid-template-columns: 1fr; }
    .profile-stat-row > div {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .profile-stat-row > div:last-child { border-bottom: 0; }
}

/* Desktop profile placement matching the supplied TS-24 reference */
.profile-page-reference {
    max-width: 1180px;
    margin: 1.5rem auto 2.5rem;
}
.profile-reference-hero {
    display: grid;
    grid-template-columns: 128px minmax(0,1fr) 190px;
    gap: 1rem;
    align-items: center;
    min-height: 176px;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.4rem;
    background: rgba(17,17,17,.96);
    border: 1px solid var(--modern-border-strong);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0,0,0,.2);
}
.profile-reference-avatar {
    width: 128px;
    height: 128px;
    padding: 4px;
    background: #0b0b0b;
    border: 1px solid var(--modern-border-strong);
    border-radius: 3px;
}
.profile-reference-avatar > img,
.profile-reference-avatar .profile-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}
.profile-reference-avatar .profile-avatar-initials {
    display: grid;
    place-items: center;
    color: #161616;
    background: #dedede;
    font-size: 3.4rem;
    font-weight: 300;
}
.profile-reference-identity {
    align-self: start;
    min-width: 0;
    padding-top: .35rem;
    text-align: left;
}
.profile-reference-name {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.profile-reference-name h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}
.profile-reference-status {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .65rem;
    color: var(--modern-muted);
    font-size: .98rem;
}
.profile-reference-status > i { margin: 0; font-size: .65rem; }
.profile-reference-status-online > i { color: #4ade80; }
.profile-reference-status-offline > i { color: #f05270; }
.profile-reference-links {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin-top: .65rem;
    font-size: .82rem;
}
.profile-reference-links a,
.profile-reference-links span { color: #8895aa; }
.profile-reference-links i { margin: 0; }
.profile-reference-links .profile-social {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #fff;
    background: rgba(75,105,182,.2);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    transition: transform .18s ease, filter .18s ease;
}
.profile-reference-links .profile-social:hover { color: #fff; filter: brightness(1.15); transform: translateY(-2px); }
.profile-social-discord { background: #5865f2 !important; }
.profile-social-steam { background: #1b2838 !important; }
.profile-social-teamspeak { background: #2580c3 !important; }
.profile-social-instagram { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important; }
.profile-social-twitter { background: #1da1f2 !important; }
.profile-social-youtube { background: #ff0000 !important; }
.profile-social-github { background: #24292f !important; }
.profile-social-twitch { background: #9146ff !important; }
.profile-social-tiktok { background: #111 !important; box-shadow: inset 2px 0 #25f4ee, inset -2px 0 #fe2c55; }
.profile-social-reddit { background: #ff4500 !important; }
.profile-social-telegram { background: #229ed9 !important; }
.profile-social-facebook { background: #1877f2 !important; }
.profile-social-linkedin { background: #0a66c2 !important; }
.profile-social-mastodon { background: #6364ff !important; }
.profile-social-pinterest { background: #bd081c !important; }
.profile-social-snapchat { color: #111 !important; background: #fffc00 !important; }
.profile-social-spotify { color: #101010 !important; background: #1ed760 !important; }
.profile-social-soundcloud { background: linear-gradient(135deg,#ff8800,#ff3300) !important; }
.profile-social-vk { background: #0077ff !important; }
.profile-social-tumblr { background: #35465c !important; }
.profile-social-deviantart { color: #101410 !important; background: #05cc47 !important; }
.profile-social-patreon { background: #ff424d !important; }
.profile-social-website { background: var(--modern-accent) !important; }
.profile-social {
    color: #9aa6ba !important; background: rgba(16,22,34,.82) !important;
    border-color: rgba(255,255,255,.1) !important; box-shadow: none !important;
}
.profile-social:hover { color: #fff !important; }
.profile-social-discord:hover { background: #5865f2 !important; }
.profile-social-steam:hover { background: #1b2838 !important; }
.profile-social-teamspeak:hover { background: #2580c3 !important; }
.profile-social-instagram:hover { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important; }
.profile-social-twitter:hover { background: #1da1f2 !important; }
.profile-social-youtube:hover { background: #ff0000 !important; }
.profile-social-github:hover { background: #24292f !important; }
.profile-social-twitch:hover { background: #9146ff !important; }
.profile-social-tiktok:hover { background: #111 !important; box-shadow: inset 2px 0 #25f4ee,inset -2px 0 #fe2c55 !important; }
.profile-social-reddit:hover { background: #ff4500 !important; }
.profile-social-telegram:hover { background: #229ed9 !important; }
.profile-social-facebook:hover { background: #1877f2 !important; }
.profile-social-linkedin:hover { background: #0a66c2 !important; }
.profile-social-mastodon:hover { background: #6364ff !important; }
.profile-social-pinterest:hover { background: #bd081c !important; }
.profile-social-snapchat:hover { color: #111 !important; background: #fffc00 !important; }
.profile-social-spotify:hover { color: #101010 !important; background: #1ed760 !important; }
.profile-social-soundcloud:hover { background: linear-gradient(135deg,#ff8800,#ff3300) !important; }
.profile-social-vk:hover { background: #0077ff !important; }
.profile-social-tumblr:hover { background: #35465c !important; }
.profile-social-deviantart:hover { color: #101410 !important; background: #05cc47 !important; }
.profile-social-patreon:hover { background: #ff424d !important; }
.profile-social-website:hover { background: var(--modern-accent) !important; }

.country-flag {
    width: 16px !important; height: 11px !important; max-width: none; object-fit: cover;
    vertical-align: middle; border-radius: 2px;
}
.profile-name-flag {
    width: 16px !important; height: 11px !important; max-width: none; object-fit: cover;
    border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.name-decoration-icon,.name-award-icon {
    display: inline-block; width: 1em; height: 1em; flex: 0 0 1em; object-fit: contain;
    margin-left: .35em; vertical-align: -.1em; filter: drop-shadow(0 2px 4px rgba(0,0,0,.38));
}
.name-decoration-flag { width: 16px; height: 11px; flex-basis: 16px; object-fit: cover; border-radius: 2px; }
.client-name .name-decoration-icon { width: 1em; height: 1em; margin-left: .3em; }
.members-table-client > span:last-child,
.profile-friend-card > span:last-child,
.profile-v3-friend-list > a > span:last-child,
.steam-ranking-list > a > span:nth-child(3),
.leaderboard-table > a > span:nth-child(3),
.level-roster-list > a > span:nth-child(2) {
    display: flex; min-width: 0; align-items: center; align-content: center; flex-wrap: wrap; column-gap: .25rem;
}
.members-table-client > span:last-child small,
.profile-friend-card > span:last-child small,
.profile-v3-friend-list > a > span:last-child small,
.steam-ranking-list > a > span:nth-child(3) small,
.leaderboard-table > a > span:nth-child(3) small,
.level-roster-list > a > span:nth-child(2) small,
.level-roster-list > a > span:nth-child(2) .level-roster-xp { flex: 0 0 100%; }
.name-decoration-options { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 9px; }
.name-decoration-options label { margin: 0; cursor: pointer; }
.name-decoration-options input { position: absolute; opacity: 0; pointer-events: none; }
.name-decoration-options label > span {
    display: flex; min-height: 58px; padding: 10px; align-items: center; gap: 9px;
    color: #b9c4d6; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.075); border-radius: 10px;
}
.name-decoration-options input:checked + span { color: #fff; background: rgba(var(--modern-accent-rgb),.14); border-color: var(--modern-accent-bright); }
.name-decoration-options .name-award-icon,.name-decoration-options .profile-name-flag { margin: 0; }
.admin-name-award-options {
    display: grid; max-height: 390px; padding: 5px 8px 5px 2px; overflow-y: auto;
    grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: 9px;
}
.admin-name-award-options label { position: relative; margin: 0; cursor: pointer; }
.admin-name-award-options input { position: absolute; opacity: 0; pointer-events: none; }
.admin-name-award-options label > span {
    display: grid; min-height: 62px; padding: 9px 11px; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px;
    color: #aeb9ca; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.08); border-radius: 11px; transition: border-color .18s ease,background .18s ease,transform .18s ease;
}
.admin-name-award-options label:hover > span { color: #fff; border-color: rgba(var(--modern-accent-rgb),.45); transform: translateY(-1px); }
.admin-name-award-options img { width: 38px; height: 32px; margin: 0; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.admin-name-award-options strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-name-award-options input:checked + span { color: #fff; border-color: var(--modern-accent-bright); background: rgba(var(--modern-accent-rgb),.16); box-shadow: inset 3px 0 var(--modern-accent-bright); }
.profile-reference-actions {
    display: grid;
    justify-items: stretch;
    align-self: stretch;
    align-content: space-between;
    grid-column: 3;
    grid-row: 1;
    padding: .25rem 0;
}
.profile-reference-level {
    display: grid;
    justify-items: center;
    justify-self: center;
    color: var(--modern-muted);
}
.profile-reference-level strong {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.25), transparent 30%), linear-gradient(145deg, var(--modern-accent-bright), var(--modern-accent));
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), 0 6px 18px rgba(var(--modern-accent-rgb),.34);
    font-size: .88rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease;
}
.profile-reference-level strong:hover { transform: translateY(-2px) scale(1.05); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), 0 8px 24px rgba(var(--modern-accent-rgb),.48); }

.news-engagement {
    padding: .75rem 1rem;
    background: rgba(8, 11, 18, .34);
    border-top: 1px solid rgba(255,255,255,.065);
}
.news-engagement-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.news-engagement-bar button {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .38rem .62rem;
    color: var(--modern-muted);
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    font-size: .75rem;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.news-engagement-bar button:hover:not(:disabled) { color: #fff; border-color: rgba(var(--modern-accent-rgb),.45); }
.news-vote-up.active { color: #86efac !important; background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.3) !important; }
.news-vote-down.active { color: #fca5a5 !important; background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.3) !important; }
.news-engagement-bar button:disabled { cursor: not-allowed; opacity: .48; }
.news-engagement-bar small { margin-left: auto; color: var(--modern-muted); }
.news-comments { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.06); }
.news-comments-list,
.profile-comments-list { display: grid; gap: .65rem; }
.news-comments-list { max-height: 420px; overflow-y: auto; padding-right: .2rem; }
.community-comment {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: .7rem;
    min-height: 72px;
    padding: .7rem .75rem;
    background: linear-gradient(135deg, rgba(var(--modern-accent-rgb),.07), rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
}
.community-comment-avatar {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    color: #dce6ff;
    background: rgba(8,11,18,.68);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none !important;
}
.community-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-comment-avatar > img:not(.profile-avatar-border) { border-radius: 8px; }
.community-comment-avatar > .profile-avatar-border { inset: -5px; width: 48px !important; height: 48px !important; }
.community-comment-content { display: flex; min-width: 0; flex-direction: column; }
.community-comment-head { display: flex; min-width: 0; align-items: center; gap: .4rem; }
.community-comment-head > a {
    overflow: hidden;
    font-size: .82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.community-comment-flag { flex: 0 0 auto; width: 16px; height: 11px; object-fit: cover; }
.community-comment-actions { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.community-comment-report,
.community-comment-delete {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--modern-muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: .68rem;
    opacity: .55;
    transition: color .18s ease, background .18s ease, opacity .18s ease;
}
.community-comment-report:hover { color: #ff8292; background: rgba(255,76,96,.1); opacity: 1; }
.community-comment-delete:hover { color: #ff8292; background: rgba(255,76,96,.1); opacity: 1; }
.community-comment-report:disabled,
.community-comment-delete:disabled { cursor: default; opacity: .28; }
.community-comment p {
    margin: .3rem 0 .45rem;
    color: var(--modern-text);
    font-size: .82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.community-comment time {
    align-self: flex-end;
    margin-top: auto;
    color: var(--modern-muted);
    font-size: .64rem;
    letter-spacing: .015em;
}
.news-comment-form,
.profile-comment-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; align-items: end; margin-top: .75rem; }
.news-comment-form textarea,
.profile-comment-form textarea { resize: vertical; }
.profile-comments-panel > header small { color: var(--modern-muted); font-size: .7rem; font-weight: 500; }
.community-report-modal .modal-content,
.site-dialog-modal .modal-content {
    color: var(--modern-text);
    background: linear-gradient(145deg,#171a22,#101218);
    border: 1px solid var(--modern-border);
    border-radius: 15px;
    box-shadow: 0 25px 70px rgba(0,0,0,.55);
}
.community-report-modal .modal-header,
.community-report-modal .modal-footer,
.site-dialog-modal .modal-header,
.site-dialog-modal .modal-footer { border-color: var(--modern-border); }
.community-report-modal .modal-header small,
.site-dialog-modal .modal-header small { color: var(--modern-accent-bright); font-size: .6rem; font-weight: 800; letter-spacing: .13em; }
.community-report-modal .modal-header h5,
.site-dialog-modal .modal-header h5 { margin: .1rem 0 0; }
.community-report-modal .close,
.site-dialog-modal .close { color: #fff; text-shadow: none; }
.community-report-modal .modal-body p { color: var(--modern-muted); font-size: .8rem; }
.community-report-modal label { color: var(--modern-text); font-size: .75rem; font-weight: 700; }
.community-report-error { display: block; min-height: 18px; margin-top: .4rem; color: #ff8292; font-size: .7rem; }
.site-dialog-modal.is-danger .modal-header small { color: #ff7083; }
.site-dialog-message { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: .9rem; align-items: center; }
.site-dialog-message > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--modern-accent-bright);
    background: rgba(var(--modern-accent-rgb),.12);
    border: 1px solid rgba(var(--modern-accent-rgb),.25);
    border-radius: 12px;
}
.site-dialog-modal.is-danger .site-dialog-message > span { color: #ff8292; background: rgba(255,76,96,.1); border-color: rgba(255,76,96,.25); }
.site-dialog-message i { margin: 0; }
.site-dialog-message p { margin: 0; color: var(--modern-text); font-size: .86rem; line-height: 1.55; }

.profile-legacy-action-row { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.profile-friend-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.profile-admin-edit-button { margin-top: .65rem; }
.profile-panel-title-link { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none !important; }
.profile-panel-title-link:hover { color: var(--modern-accent-bright); text-decoration: none !important; }
.profile-friends-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: .65rem; }
.profile-friend-card {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: .75rem;
    align-items: center;
    padding: .7rem;
    color: var(--modern-text);
    background: rgba(255,255,255,.022);
    border: 1px solid var(--modern-border);
    border-radius: 11px;
}
.profile-friend-card:hover { color: #fff; border-color: rgba(var(--modern-accent-rgb),.4); text-decoration: none; transform: translateY(-1px); }
.profile-friend-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 44px minmax(0,1fr);
    gap: .75rem;
    align-items: center;
    color: var(--modern-text);
    text-decoration: none !important;
}
.profile-friend-main:hover { color: #fff; text-decoration: none !important; }
.profile-friend-main > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.profile-friend-avatar {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--modern-accent-bright);
    background: rgba(var(--modern-accent-rgb),.12);
    border: 1px solid var(--modern-border);
    border-radius: 10px;
}
.profile-friend-avatar > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.profile-friend-avatar > .profile-avatar-border { inset: -5px; width: 52px !important; height: 52px !important; }
.profile-friend-avatar > i { margin: 0; }
.profile-friend-card > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.profile-friend-name-line {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    min-width: 0;
    gap: .32rem;
    white-space: nowrap;
}
.profile-friend-name-line > strong {
    min-width: 0;
}
.profile-friend-name-line > .name-decoration-icon {
    flex: 0 0 auto;
    margin: 0;
}
.profile-friend-card strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-friend-card small { display: flex; align-items: center; gap: .35rem; color: var(--modern-muted); font-size: .66rem; }
.friends-directory { display: grid; gap: 1rem; }
.friends-directory-hero { margin-bottom: 0; }
.profile-friends-directory-grid { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); }
.profile-friend-manage-card {
    position: relative;
    grid-template-columns: minmax(0,1fr) auto;
    padding: .75rem;
}
.profile-friend-manage-card:hover { transform: none; }
.profile-friend-manage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.profile-friend-remove { width: 34px; height: 34px; padding: 0; }
.profile-friend-remove i { margin: 0; }

@media (max-width: 575.98px) {
    .news-engagement-bar small { width: 100%; margin-left: 0; }
    .news-comment-form,
    .profile-comment-form { grid-template-columns: 1fr; }
    .news-comment-form button,
    .profile-comment-form button { justify-self: end; }
    .community-comment { grid-template-columns: 34px minmax(0,1fr); padding: .65rem; }
    .community-comment-avatar { width: 34px; height: 34px; }
    .profile-friend-manage-card { grid-template-columns: 1fr; }
    .profile-friend-manage-actions { justify-content: flex-start; }
    .profile-friend-remove { position: absolute; top: .65rem; right: .65rem; }
    .profile-legacy-action-row { align-items: flex-end; flex-direction: column-reverse; gap: .5rem; }
    .profile-friend-actions { justify-content: flex-end; }
}
.profile-reference-level span { display: none; }
.profile-reference-level img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}
.profile-level-progress { width: 128px; margin-top: 7px; }
.profile-level-progress > div { display: flex; margin-bottom: 4px; align-items: center; justify-content: space-between; gap: 8px; color: #7f8ca3; font-size: .58rem; line-height: 1; white-space: nowrap; }
.profile-level-progress > div strong { color: #aebde0; font-size: .56rem; font-weight: 700; }
.profile-level-progress-track,.level-roster-xp { position: relative; display: block; height: 5px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.045); border-radius: 999px; }
.profile-level-progress-track i,.level-roster-xp i { display: block; height: 100%; background: linear-gradient(90deg,var(--modern-accent),var(--modern-accent-bright),#8db6ff); border-radius: inherit; box-shadow: 0 0 9px rgba(var(--modern-accent-rgb),.42); }
.profile-reference-status a {
    color: #b8c5da;
    text-decoration: none;
}
.profile-reference-status a:hover { color: #fff; }
.profile-reference-actions .btn {
    width: 100%;
    padding: .45rem .7rem;
    font-size: .86rem;
}
.profile-reference-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: start;
}
.profile-reference-sidebar,
.profile-reference-main {
    display: contents;
    gap: 1rem;
    align-content: start;
}
.profile-reference-grid .profile-panel {
    width: 100%;
    margin-bottom: 0;
}
.profile-reference-grid .discord-card { order: 2; }
.profile-reference-grid .profile-reference-main { order: 3; }
.profile-reference-grid .profile-reference-main .profile-panel { order: 3; }
.profile-reference-grid .profile-reference-sidebar > .profile-panel:first-child { order: 1; }
.profile-reference-statistics {
    text-align: center;
    font-size: .86rem;
}
.profile-reference-statistics > span {
    display: block;
    color: var(--modern-muted);
}
.profile-reference-statistics > strong {
    display: block;
    margin: .5rem 0;
    color: var(--modern-text);
    font-size: 1.15rem;
}
.profile-reference-statistics > div { color: #9faabc; line-height: 1.45; }
.profile-reference-statistics hr { margin: .75rem 0; }
.profile-reference-version {
    margin-top: .45rem;
    overflow-wrap: anywhere;
    font-size: .75rem;
}
.profile-reference-main .discord-user,
.profile-reference-main .discord-activity,
.profile-reference-main .profile-identity-list {
    max-width: none;
}
.profile-table-wrap { padding: 0; overflow: hidden; }
.profile-info-table {
    width: 100%;
    margin: 0;
    color: #c4ccda;
    border-collapse: collapse;
    table-layout: fixed;
}
.profile-info-table tr { background: rgba(255,255,255,.018); }
.profile-info-table tr:nth-child(even) { background: rgba(255,255,255,.035); }
.profile-info-table th,
.profile-info-table td {
    padding: .68rem .85rem;
    border-bottom: 1px solid rgba(255,255,255,.075);
    vertical-align: top;
    overflow-wrap: anywhere;
}
.profile-info-table tr:last-child th,
.profile-info-table tr:last-child td { border-bottom: 0; }
.profile-info-table th {
    width: 43%;
    color: #aeb9ca;
    font-size: .9rem;
    font-weight: 400;
    text-align: left;
}
.profile-info-table td {
    color: var(--modern-text);
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
}
.profile-info-table a { color: #b8c9e7; }
.profile-table-code {
    overflow: hidden;
    font-family: Consolas, monospace;
    font-size: .78rem !important;
    text-overflow: ellipsis;
}
.profile-table-status i { margin-right: .35rem; font-size: .55rem; }
.profile-table-status-online { color: #4ade80; }
.profile-table-status-offline { color: #f05270; }

@media (min-width: 521px) and (max-width: 767px) {
    .profile-reference-hero {
        grid-template-columns: 104px minmax(0,1fr) 128px;
        gap: .8rem;
        min-height: 142px;
        padding: .9rem;
    }
    .profile-reference-avatar { width: 104px; height: 104px; }
    .profile-reference-avatar .profile-avatar-initials { font-size: 2.8rem; }
    .profile-reference-name h1 { font-size: 1.55rem; }
    .profile-reference-status { font-size: .78rem; }
    .profile-reference-actions {
        grid-column: 3;
        grid-row: 1;
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .profile-reference-actions .btn { font-size: .72rem; padding: .4rem; }
    .profile-reference-grid {
        grid-template-columns: 300px minmax(0,1fr);
        gap: .8rem;
    }
    .profile-info-table th,
    .profile-info-table td {
        padding: .55rem .65rem;
        font-size: .8rem;
    }
}

@media (max-width: 520px) {
    .profile-reference-hero {
        grid-template-columns: 104px minmax(0,1fr);
        min-height: auto;
    }
    .profile-reference-avatar { width: 104px; height: 104px; }
    .profile-reference-avatar .profile-avatar-initials { font-size: 2.8rem; }
    .profile-reference-name h1 { font-size: 1.45rem; }
    .profile-reference-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 1rem;
    }
    .profile-reference-grid { grid-template-columns: 1fr; }
}

/* Server clan directory and profile identity */
.clans-page { display: grid; gap: 24px; }
.clan-showcase { --clan-accent:#4B69B6; display:grid; gap:14px; }
.clan-hero { position:relative; min-height:255px; overflow:hidden; padding:34px; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; background:linear-gradient(125deg,rgba(8,13,22,.98),rgba(13,20,34,.8)),var(--clan-banner,linear-gradient(135deg,#121b2d,#090d15)); background-position:center; background-size:cover; border:1px solid rgba(255,255,255,.1); border-radius:20px; box-shadow:0 24px 55px rgba(0,0,0,.28); }
.clan-hero::before { content:""; position:absolute; inset:auto -80px -150px auto; width:390px; height:390px; background:var(--clan-accent); opacity:.15; filter:blur(45px); border-radius:50%; }
.clan-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent); }
.clan-hero-art { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 75%); }
.clan-identity { position:relative; z-index:1; display:grid; min-width:0; max-width:760px; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:21px; }
.clan-emblem { display:grid; width:92px; height:92px; place-items:center; background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.15); border-radius:20px; box-shadow:inset 0 0 28px rgba(255,255,255,.035),0 15px 30px rgba(0,0,0,.28); }
.clan-emblem img { width:58px; height:58px; object-fit:contain; }.clan-emblem i { margin:0; color:var(--clan-accent); font-size:2.3rem; filter:drop-shadow(0 0 12px var(--clan-accent)); }
.clan-kicker { display:flex; align-items:center; gap:10px; color:#8694aa; font-size:.65rem; font-weight:800; letter-spacing:.15em; }.clan-kicker b { padding:4px 7px; color:#dce5f5; background:rgba(255,255,255,.06); border-radius:5px; letter-spacing:.06em; }
.clan-identity h1 { margin:7px 0 6px; color:#fff; font-size:clamp(2rem,5vw,3.35rem); line-height:1; }.clan-identity p { max-width:650px; margin:0; color:#a9b4c5; line-height:1.55; }
.clan-tag { position:relative; z-index:1; align-self:flex-start; padding:9px 12px; color:#fff; background:var(--clan-accent); border-radius:9px; box-shadow:0 0 26px color-mix(in srgb,var(--clan-accent) 45%,transparent); font-size:.74rem; letter-spacing:.1em; }
.clan-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.clan-metrics article { position:relative; min-height:90px; overflow:hidden; padding:15px 17px; display:grid; align-content:center; background:linear-gradient(145deg,rgba(18,25,39,.96),rgba(10,14,22,.96)); border:1px solid rgba(255,255,255,.075); border-radius:13px; }
.clan-metrics article > i { position:absolute; right:13px; bottom:8px; margin:0; color:var(--clan-accent); opacity:.16; font-size:2.5rem; }.clan-metrics span { color:#77859b; font-size:.61rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.clan-metrics strong { max-width:85%; margin-top:4px; overflow:hidden; color:#eff3fa; text-overflow:ellipsis; white-space:nowrap; font-size:1.18rem; }
.clan-roster-card { overflow:hidden; background:linear-gradient(145deg,rgba(17,23,35,.97),rgba(9,13,20,.97)); border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.clan-roster-card > header { min-height:72px; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(255,255,255,.07); }.clan-roster-card > header span { color:var(--clan-accent); font-size:.58rem; font-weight:800; letter-spacing:.15em; }.clan-roster-card > header h2 { margin:2px 0 0; color:#f2f5fa; font-size:1.15rem; }.clan-roster-card > header small { color:#77859a; }
.clan-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:16px; }
.clan-member { display:grid; min-width:0; min-height:78px; padding:10px 12px; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:12px; color:#e8edf6; text-decoration:none; background:rgba(255,255,255,.026); border:1px solid rgba(255,255,255,.065); border-radius:12px; transition:.18s ease; }.clan-member:hover { color:#fff; text-decoration:none; border-color:var(--clan-accent); background:rgba(255,255,255,.045); transform:translateY(-1px); }
.clan-member-avatar { position:relative; display:grid; width:54px; height:54px; place-items:center; background:#151d2b; border:1px solid rgba(255,255,255,.12); border-radius:10px; }.clan-member-avatar > img:not(.profile-avatar-border) { width:100%; height:100%; object-fit:cover; border-radius:9px; }.clan-member-avatar > .profile-avatar-border { position:absolute; top:50%; left:50%; width:64px !important; height:64px !important; max-width:none; transform:translate(-50%,-50%); }.clan-member-avatar > i { position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; margin:0; border:3px solid #111823; border-radius:50%; }.clan-member-avatar > i.is-online { background:#3edd89; box-shadow:0 0 9px rgba(62,221,137,.7); }.clan-member-avatar > i.is-offline { background:#667187; }
.clan-member-copy { display:grid; min-width:0; gap:5px; }.clan-member-name { display:flex; min-width:0; align-items:center; gap:5px; }.clan-member-name strong { width:fit-content; max-width:100%; overflow:visible; white-space:nowrap; }.clan-member-copy small { display:flex; align-items:center; gap:6px; color:#748198; font-size:.62rem; }.clan-member-copy .country-flag { width:16px !important; height:11px !important; }
.clan-member-connections { display:grid; justify-items:end; }.clan-member-connections b { color:#e8eef9; font-size:.9rem; }.clan-member-connections small { color:#68768d; font-size:.56rem; text-transform:uppercase; }
.clan-empty-state { min-height:360px; padding:45px; display:grid; place-items:center; align-content:center; gap:10px; text-align:center; background:rgba(13,18,28,.9); border:1px solid rgba(255,255,255,.08); border-radius:18px; }.clan-empty-state > i { margin:0 0 5px; color:var(--modern-accent-bright); font-size:2.5rem; }.clan-empty-state h1,.clan-empty-state p { margin:0; }.clan-empty-state p { color:#8290a5; }
.profile-clan-panel { --clan-accent:#4B69B6; }.profile-clan-panel > header { border-bottom-color:color-mix(in srgb,var(--clan-accent) 32%,transparent) !important; }.profile-clan-panel > header i { color:var(--clan-accent) !important; }
.profile-clan-card { position:relative; min-height:91px; padding:14px 15px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; overflow:hidden; color:#e7edf7; text-decoration:none; background:linear-gradient(100deg,color-mix(in srgb,var(--clan-accent) 18%,#0d131e),rgba(10,14,22,.96)),var(--clan-banner,none); background-position:center; background-size:cover; }.profile-clan-card:hover { color:#fff; text-decoration:none; filter:brightness(1.08); }.profile-clan-card::after { content:""; position:absolute; right:-28px; width:100px; height:100px; background:var(--clan-accent); opacity:.1; filter:blur(25px); border-radius:50%; }
.profile-clan-emblem { position:relative; z-index:1; display:grid; width:52px; height:52px; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:11px; }.profile-clan-emblem img { width:34px; height:34px; object-fit:contain; }.profile-clan-emblem i { margin:0; color:var(--clan-accent); font-size:1.25rem; }.profile-clan-card > span:nth-child(2) { position:relative; z-index:1; display:grid; min-width:0; }.profile-clan-card small { color:#8492a8; font-size:.55rem; font-weight:800; letter-spacing:.13em; }.profile-clan-card strong { overflow:hidden; color:#f4f7fc; text-overflow:ellipsis; white-space:nowrap; font-size:.95rem; }.profile-clan-card b { color:var(--clan-accent); font-size:.62rem; }.profile-clan-card > i { position:relative; z-index:1; margin:0; color:#8b99ad; }
@media (max-width:900px) { .clan-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.clan-roster { grid-template-columns:1fr; } }
@media (max-width:600px) { .clan-hero { min-height:310px; padding:24px 19px; align-items:flex-end; }.clan-identity { grid-template-columns:1fr; gap:14px; }.clan-emblem { width:72px; height:72px; }.clan-emblem img { width:46px; height:46px; }.clan-tag { position:absolute; top:18px; right:18px; }.clan-kicker { align-items:flex-start; flex-direction:column; }.clan-identity h1 { font-size:2.05rem; }.clan-metrics { grid-template-columns:1fr 1fr; }.clan-metrics article { min-height:78px; padding:12px; }.clan-roster-card > header { align-items:flex-start; flex-direction:column; }.clan-member { grid-template-columns:48px minmax(0,1fr); }.clan-member-avatar { width:48px; height:48px; }.clan-member-connections { display:none; } }
.clan-directory-hero > i { margin:0; color:rgba(var(--modern-accent-rgb),.42); font-size:4rem; filter:drop-shadow(0 0 22px rgba(var(--modern-accent-rgb),.3)); }
.clan-directory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.clan-directory-card { --clan-accent:#4B69B6; position:relative; min-height:245px; overflow:hidden; padding:24px; display:grid; grid-template-columns:76px minmax(0,1fr); align-items:end; gap:17px; color:#fff; text-decoration:none; background:linear-gradient(135deg,rgba(7,11,18,.76),rgba(7,11,18,.96)),var(--clan-banner,linear-gradient(135deg,#182238,#090d15)); background-position:center; background-size:cover; border:1px solid rgba(255,255,255,.09); border-radius:17px; transition:transform .2s ease,border-color .2s ease; }.clan-directory-card:hover { color:#fff; text-decoration:none; border-color:var(--clan-accent); transform:translateY(-3px); }
.clan-directory-art { position:absolute; inset:0; background:radial-gradient(circle at 12% 90%,color-mix(in srgb,var(--clan-accent) 32%,transparent),transparent 42%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.035)); }.clan-directory-tag { position:absolute; top:17px; right:17px; padding:6px 9px; color:#fff; background:color-mix(in srgb,var(--clan-accent) 74%,#101722); border-radius:7px; font-size:.63rem; font-weight:800; letter-spacing:.09em; }
.clan-directory-emblem { position:relative; z-index:1; display:grid; width:76px; height:76px; place-items:center; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.13); border-radius:16px; backdrop-filter:blur(8px); }.clan-directory-emblem img { width:48px; height:48px; object-fit:contain; }.clan-directory-emblem i { margin:0; color:var(--clan-accent); font-size:1.8rem; }
.clan-directory-copy { position:relative; z-index:1; display:grid; min-width:0; }.clan-directory-copy > small { color:#8492a8; font-size:.57rem; font-weight:800; letter-spacing:.12em; }.clan-directory-copy > strong { margin-top:3px; font-size:1.35rem; }.clan-directory-copy p { min-height:38px; margin:5px 0 10px; overflow:hidden; color:#9eabba; font-size:.7rem; line-height:1.45; }.clan-directory-copy > b { color:var(--clan-accent); font-size:.68rem; }.clan-directory-copy > b i { margin-left:5px; }
.clan-create-guide { padding:28px; background:linear-gradient(145deg,rgba(18,24,36,.96),rgba(9,13,20,.97)); border:1px solid rgba(255,255,255,.08); border-radius:17px; }.clan-create-guide > header span { color:var(--modern-accent-bright); font-size:.62rem; font-weight:800; letter-spacing:.15em; }.clan-create-guide > header h2 { margin:4px 0; color:#f1f5fb; }.clan-create-guide > header p { margin:0; color:#8491a5; }.clan-create-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:22px 0; }.clan-create-steps article { position:relative; min-height:175px; padding:18px; overflow:hidden; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.065); border-radius:12px; }.clan-create-steps article > b { position:absolute; top:8px; right:11px; color:rgba(255,255,255,.08); font-size:2rem; }.clan-create-steps article > i { display:grid; width:39px; height:39px; place-items:center; margin:0 0 15px; color:var(--modern-accent-bright); background:rgba(var(--modern-accent-rgb),.13); border-radius:10px; }.clan-create-steps strong { display:block; color:#e8edf6; font-size:.8rem; }.clan-create-steps p { margin:6px 0 0; color:#7f8ca0; font-size:.68rem; line-height:1.5; }
.clan-hero-actions { position:absolute; right:28px; bottom:24px; z-index:3; display:flex; gap:7px; }.clan-hero-actions .btn { backdrop-filter:blur(8px); }
.clan-steam-activity { position:relative; min-width:0; max-width:310px; min-height:30px; margin-top:5px; padding:5px 7px; display:grid; grid-template-columns:20px minmax(0,1fr) 42px; align-items:center; gap:6px; overflow:hidden; color:#c7d5e0; background:linear-gradient(90deg,rgba(27,75,112,.35),rgba(15,30,44,.28)); border:1px solid rgba(102,192,244,.16); border-radius:7px; }.clan-steam-activity > i { margin:0; color:#66c0f4; }.clan-steam-activity > span { display:grid; min-width:0; }.clan-steam-activity b,.clan-steam-activity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.clan-steam-activity b { font-size:.62rem; }.clan-steam-activity small { color:#6f91a8; font-size:.53rem; }.clan-steam-activity > img { width:42px; height:27px; object-fit:cover; border-radius:4px; opacity:.72; }.clan-leader-mark { margin:0; color:#ffd166; font-size:.68rem; filter:drop-shadow(0 0 6px rgba(255,209,102,.45)); }
.clan-settings-card { overflow:hidden; }.clan-settings-card > footer { padding:13px 17px; text-align:right; border-top:1px solid rgba(255,255,255,.07); }.clan-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.clan-settings-grid label { display:grid; gap:6px; margin:0; }.clan-settings-grid label > span { color:#8e9cb1; font-size:.68rem; font-weight:700; }.clan-settings-wide { grid-column:1/-1; }
@media (max-width:900px) { .clan-create-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.clan-hero-actions { top:18px; right:18px; bottom:auto; } }
@media (max-width:650px) { .clan-directory-grid,.clan-settings-grid { grid-template-columns:1fr; }.clan-directory-card { min-height:270px; grid-template-columns:1fr; align-content:end; }.clan-directory-emblem { width:62px; height:62px; }.clan-create-guide { padding:20px; }.clan-create-steps { grid-template-columns:1fr; }.clan-create-steps article { min-height:145px; }.clan-settings-wide { grid-column:auto; }.clan-hero-actions { top:64px; }.clan-steam-activity { max-width:100%; } }

/* Device-complete profile and directory layout */
@media (max-width: 1199px) {
    .profile-page-legacy,.community-stats-page,.directory-page { width: 100%; max-width: 100%; }
    .profile-legacy-header { gap: 1rem; }
    .profile-legacy-overview-grid { gap: 0 1.5rem; }
}
@media (max-width: 991px) {
    .profile-legacy-avatar {
        --responsive-avatar-size: min(var(--profile-avatar-size,136px),120px);
        flex-basis: var(--responsive-avatar-size);
        width: var(--responsive-avatar-size);
        height: var(--responsive-avatar-size);
        margin-top: calc(var(--responsive-avatar-size) / -2);
    }
    .profile-legacy-cover { min-height: 100px; }
    .profile-legacy-name h1 { font-size: 1.6rem; }
    .profile-editor-focused .profile-panel-body { padding: 1rem; }
    .profile-border-options { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); }
    .community-stats-grid { grid-template-columns: 1fr; }
    .community-founders-card { grid-column: auto; }
    .members-table-client strong { max-width: 200px; }
}
@media (max-width: 767px) {
    .profile-editor-intro { align-items: flex-start; flex-direction: column; }
    .profile-editor-progress { width: 100%; min-height: 82px; grid-template-columns: auto auto; column-gap: .6rem; }
    .profile-editor-progress > i { grid-row: 1 / span 2; margin: 0; }
    .profile-editor-preview-stage { grid-template-columns: 1fr; }
    .profile-editor-section-heading { align-items: flex-start; flex-wrap: wrap; }
    .profile-achievement-selection-count { margin-left: 48px; }
    .profile-achievement-options { grid-template-columns: 1fr; }
    .profile-page-legacy { margin-top: 0; }
    .profile-legacy-cover {
        height: min(var(--profile-banner-height,150px),125px);
        min-height: 90px;
    }
    .profile-legacy-header {
        align-items: stretch;
        flex-direction: column;
        padding: .9rem 4.25rem .9rem .9rem;
    }
    .profile-legacy-user { align-items: flex-start; }
    .profile-legacy-avatar {
        --responsive-avatar-size: min(var(--profile-avatar-size,136px),104px);
        flex-basis: var(--responsive-avatar-size);
        width: var(--responsive-avatar-size);
        height: var(--responsive-avatar-size);
        margin-top: calc(var(--responsive-avatar-size) / -2);
    }
    .profile-legacy-actions { top: .75rem; right: .75rem; width: auto; padding-left: 0; transform: none; }
    .profile-level-progress { width: 96px; }
    .profile-level-progress > div strong { display: none; }
    .profile-legacy-overview-grid,.profile-legacy-widgets { grid-template-columns: 1fr; }
    .profile-badge-shelf { padding: .6rem; }
    .profile-community-badge { max-width: 100%; }
    .profile-banner-preview { min-height: 115px; }
    .community-stats-hero { padding: 1.15rem; }
    .community-stats-hero h1 { font-size: 1.65rem; }
    .community-stats-summary { display: grid; grid-template-columns: repeat(3,1fr); width: 100%; }
    .community-stats-summary > div { min-width: 0; padding: .55rem .35rem; }
    .community-founders-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .directory-hero { flex-direction: column; gap: .8rem; }
    .directory-stats { align-self: stretch; }
    .members-table-card .card-body { padding: .65rem; }
}
@media (max-width: 575px) {
    .container { width: 100%; max-width: 100%; padding-right: 10px; padding-left: 10px; }
    .card,.profile-panel,.profile-legacy-hero,.profile-badge-shelf,.community-stats-hero { border-radius: 12px; }
    .profile-legacy-header { gap: .65rem; }
    .profile-legacy-user { min-width: 0; }
    .profile-legacy-avatar {
        --responsive-avatar-size: min(var(--profile-avatar-size,136px),88px);
        flex-basis: var(--responsive-avatar-size);
        width: var(--responsive-avatar-size);
        height: var(--responsive-avatar-size);
    }
    .profile-legacy-meta { flex: 1 1 auto; min-width: 0; margin-left: .65rem; }
    .profile-legacy-name { align-items: center; flex-wrap: nowrap; }
    .profile-legacy-name h1 {
        min-width: 0;
        max-width: calc(100% - 25px);
        overflow: hidden;
        font-size: 1.3rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .profile-reference-status { align-items: flex-start; flex-wrap: wrap; font-size: .76rem; }
    .profile-legacy-identity { gap: .35rem; font-size: .68rem; }
    .profile-legacy-identity span:last-child { display: none; }
    .profile-reference-level strong { width: 36px; height: 36px; font-size: 1rem; }
    .profile-legacy-overview .profile-panel-body { padding: .8rem; }
    .profile-legacy-overview-grid dl > div { grid-template-columns: 92px minmax(0,1fr); gap: .5rem; font-size: .78rem; }
    .profile-panel > header { align-items: center; gap: .5rem; padding: .7rem .75rem; }
    .profile-panel > header .btn { padding: .3rem .45rem; font-size: .68rem; }
    .profile-editor-section { padding: .85rem; }
    .profile-editor-shell > header { top: 4px; }
    .profile-editor-intro { padding: 1rem; }
    .profile-editor-progress { grid-template-columns: 1fr; }
    .profile-editor-progress > i { grid-row: auto; }
    .profile-achievement-selection-count { width: 100%; margin-left: 0; text-align: center; }
    .profile-achievement-actions { justify-content: stretch; }
    .profile-achievement-actions .btn { flex: 1; }
    .profile-custom-select-menu { position: fixed; top: auto; right: 10px; bottom: 10px; left: 10px; max-height: 62vh; }
    .profile-edit-avatar-preview { align-items: flex-start; }
    .profile-border-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-file-picker { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .profile-file-picker > span { width: 100%; }
    .steam-linked-row { align-items: flex-start; flex-wrap: wrap; }
    .steam-linked-row .btn { margin-left: 0 !important; }
    .community-ranking-list { padding: .25rem .65rem; }
    .community-ranking-list > a { grid-template-columns: 24px 38px minmax(0,1fr) auto; gap: .45rem; }
    .community-rank-avatar { width: 34px; height: 34px; }
    .community-rank-avatar > img:not(.profile-avatar-border) { width: 34px; height: 34px; }
    .community-rank-avatar > .profile-avatar-border { width: 44px !important; height: 44px !important; }
    .community-founders-grid { grid-template-columns: 1fr; }
    .community-country-list > div { grid-template-columns: 85px minmax(0,1fr) 25px; }
    .members-table-client strong { max-width: 130px; }
    .members-table-toolbar { align-items: stretch; flex-direction: column; }
    .members-country-filter { width: 100%; min-width: 0; }
    .members-table-toolbar .btn { align-self: flex-start; }
    .members-filter-result { align-self: flex-start; margin-left: 0; padding-bottom: 0; }
}
@media (max-width: 380px) {
    .profile-legacy-user { display: grid; grid-template-columns: 76px minmax(0,1fr); }
    .profile-legacy-avatar {
        --responsive-avatar-size: 76px;
        width: 76px;
        height: 76px;
    }
    .profile-legacy-meta { margin-left: .55rem; }
    .profile-reference-links .profile-social { width: 22px; height: 22px; }
    .profile-community-badge { padding: .28rem .4rem; font-size: .61rem; }
    .community-stats-summary { grid-template-columns: 1fr; }
    .community-stats-summary > div { display: flex; align-items: center; justify-content: space-between; text-align: left; }
}

.profile-page-reference .profile-reference-grid {
    display: flex !important;
    flex-direction: column;
    width: 100%;
}
.profile-page-reference .profile-reference-sidebar,
.profile-page-reference .profile-reference-main {
    display: contents !important;
}
.profile-page-reference .profile-panel {
    width: 100%;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--modern-accent) rgba(10, 14, 23, .72);
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: rgba(10, 14, 23, .72); }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--modern-accent-bright), var(--modern-accent));
    border: 2px solid rgba(10, 14, 23, .85);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--modern-accent-bright); }

.site-notification-stack {
    position: fixed;
    z-index: 1085;
    right: 18px;
    bottom: 22px;
    display: grid;
    width: min(360px, calc(100vw - 28px));
    gap: 10px;
    pointer-events: none;
}
.site-client-notification {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 11px;
    align-items: center;
    padding: 12px;
    color: var(--modern-text);
    background: rgba(22, 28, 41, .94);
    border: 1px solid rgba(75, 105, 182, .55);
    border-radius: 13px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: auto;
    transform: translateX(28px) scale(.97);
    transition: opacity .3s ease, transform .3s ease, border-color .2s ease;
}
.site-client-notification:hover {
    color: #fff;
    border-color: var(--modern-accent-bright);
    text-decoration: none;
}
.site-client-notification.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.site-client-notification-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--modern-accent-bright), var(--modern-accent));
    border-radius: 11px;
}
.site-client-notification > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.site-client-notification small { color: var(--modern-accent-bright); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.site-client-notification-name {
    width: fit-content; max-width: 100%; overflow: visible; color: #fff; text-decoration: none !important;
    text-overflow: ellipsis; white-space: nowrap;
}
.site-client-notification-name:hover { color: #fff; text-decoration: none !important; }
.site-client-notification em { color: var(--modern-muted); font-size: .72rem; font-style: normal; }
.site-client-notification-open { display: grid; width: 18px; height: 30px; place-items: center; color: var(--modern-muted); text-decoration: none; }
.site-client-notification-open:hover { color: #fff; text-decoration: none; }
.site-client-notification-open i { margin: 0; font-size: .72rem; }

.level-roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
.level-roster-card {
    overflow: hidden;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
}
.level-roster-card > header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(75, 105, 182, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.level-roster-card > header span { color: #fff; font-weight: 700; }
.level-roster-card > header i { margin-right: 7px; color: var(--modern-accent-bright); }
.level-roster-card > header small { color: var(--modern-muted); }
.level-roster-list { max-height: 420px; overflow-y: auto; padding: 5px 12px; }
.level-roster-list > a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 2px;
    color: var(--modern-text);
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.level-roster-list > a:hover { color: #fff; text-decoration: none; }
.level-roster-list > a > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.level-roster-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-roster-list small { color: var(--modern-muted); }
.level-roster-list em { color: var(--modern-accent-bright); font-size: .75rem; font-style: normal; }
.level-roster-xp { width: min(180px,100%); height: 4px; margin-top: 6px; }
.community-level-xp { display: grid; min-width: 155px; gap: 5px; }
.community-level-xp > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.community-level-xp strong { color: var(--modern-accent-bright); font-size: .75rem; }
.community-level-xp small { color: var(--modern-muted); font-size: .64rem; }
.community-level-xp .level-roster-xp { width: 100%; margin-top: 0; }
.community-level-assigned { display: inline-flex; align-items: center; gap: 7px; color: #aab7cf; font-size: .72rem; font-weight: 600; }
.community-level-assigned i { display: inline-flex; width: 18px; align-items: center; justify-content: center; margin: 0; color: var(--modern-accent-bright); }

@media (max-width: 767.98px) {
    .site-notification-stack { right: 14px; bottom: 14px; }
    .level-roster-grid { grid-template-columns: 1fr; padding: 9px; }
    .level-roster-list > a { grid-template-columns: 34px minmax(0, 1fr); }
    .level-roster-list > a em { grid-column: 2; }
}

.profile-legacy-hero { position: relative; isolation: isolate; }
.profile-legacy-cover { z-index: 0; }
.profile-legacy-header { z-index: 2; }
.admin-shield-particles {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.admin-shield-particles > i {
    position: absolute;
    left: var(--shield-x);
    top: var(--shield-y);
    color: var(--admin-effect-color, #ff334f);
    font-size: var(--shield-size);
    filter: drop-shadow(0 0 calc(5px + 13px * var(--admin-effect-glow, .7)) var(--admin-effect-color, #ff334f));
    opacity: 0;
    transform: translate3d(0, 10px, 0) rotate(var(--shield-rotate));
    animation: admin-shield-drift var(--shield-duration) ease-in-out var(--shield-delay) infinite;
}
.admin-shield-particles > i:nth-child(1) { --shield-x: 4%; --shield-y: 16%; --shield-size: 13px; --shield-rotate: -14deg; --shield-duration: 5.8s; --shield-delay: -1.1s; }
.admin-shield-particles > i:nth-child(2) { --shield-x: 13%; --shield-y: 68%; --shield-size: 9px; --shield-rotate: 18deg; --shield-duration: 7.1s; --shield-delay: -4.2s; }
.admin-shield-particles > i:nth-child(3) { --shield-x: 25%; --shield-y: 23%; --shield-size: 8px; --shield-rotate: 9deg; --shield-duration: 6.4s; --shield-delay: -2.8s; }
.admin-shield-particles > i:nth-child(4) { --shield-x: 36%; --shield-y: 76%; --shield-size: 12px; --shield-rotate: -20deg; --shield-duration: 8.2s; --shield-delay: -5.3s; }
.admin-shield-particles > i:nth-child(5) { --shield-x: 47%; --shield-y: 13%; --shield-size: 10px; --shield-rotate: 13deg; --shield-duration: 6.9s; --shield-delay: -3.7s; }
.admin-shield-particles > i:nth-child(6) { --shield-x: 57%; --shield-y: 62%; --shield-size: 7px; --shield-rotate: -8deg; --shield-duration: 5.5s; --shield-delay: -1.9s; }
.admin-shield-particles > i:nth-child(7) { --shield-x: 66%; --shield-y: 29%; --shield-size: 13px; --shield-rotate: 22deg; --shield-duration: 7.7s; --shield-delay: -6.1s; }
.admin-shield-particles > i:nth-child(8) { --shield-x: 74%; --shield-y: 79%; --shield-size: 9px; --shield-rotate: -17deg; --shield-duration: 6.1s; --shield-delay: -2.4s; }
.admin-shield-particles > i:nth-child(9) { --shield-x: 82%; --shield-y: 18%; --shield-size: 11px; --shield-rotate: 7deg; --shield-duration: 8.5s; --shield-delay: -4.8s; }
.admin-shield-particles > i:nth-child(10) { --shield-x: 91%; --shield-y: 57%; --shield-size: 8px; --shield-rotate: -12deg; --shield-duration: 5.9s; --shield-delay: -3.2s; }
.admin-shield-particles > i:nth-child(11) { --shield-x: 31%; --shield-y: 47%; --shield-size: 6px; --shield-rotate: 16deg; --shield-duration: 7.4s; --shield-delay: -5.7s; }
.admin-shield-particles > i:nth-child(12) { --shield-x: 69%; --shield-y: 8%; --shield-size: 7px; --shield-rotate: -6deg; --shield-duration: 6.7s; --shield-delay: -.7s; }

@keyframes admin-shield-drift {
    0%, 100% { opacity: 0; transform: translate3d(0, 12px, 0) rotate(var(--shield-rotate)) scale(.72); }
    28% { opacity: var(--admin-effect-opacity, .7); }
    58% { opacity: var(--admin-effect-opacity, .7); transform: translate3d(5px, -7px, 0) rotate(var(--shield-rotate)) scale(1); }
    82% { opacity: 0; transform: translate3d(-3px, -18px, 0) rotate(var(--shield-rotate)) scale(.86); }
}

.profile-admin-shield {
    display: inline-grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    color: var(--admin-effect-color, #ff334f);
    background: color-mix(in srgb, var(--admin-effect-color, #ff334f) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--admin-effect-color, #ff334f) 55%, transparent);
    border-radius: 50%;
    filter: drop-shadow(0 0 calc(4px + 10px * var(--admin-effect-glow, .7)) var(--admin-effect-color, #ff334f));
    animation: admin-shield-badge 2.8s ease-in-out infinite;
}
@keyframes admin-shield-badge {
    0%, 100% { opacity: .68; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

.admin-effect-preview {
    position: relative;
    display: grid;
    min-height: 130px;
    place-items: center;
    overflow: hidden;
    color: var(--admin-effect-color, #ff334f);
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--admin-effect-color, #ff334f) 18%, transparent), transparent 48%),
        rgba(6, 9, 15, .68);
    border: 1px solid color-mix(in srgb, var(--admin-effect-color, #ff334f) 35%, rgba(255,255,255,.1));
    border-radius: 12px;
}
.admin-effect-preview > i {
    position: absolute;
    filter: drop-shadow(0 0 calc(5px + 13px * var(--admin-effect-glow, .7)) currentColor);
    animation: admin-shield-preview 3s ease-in-out infinite;
}
@keyframes admin-shield-preview {
    0%, 100% { opacity: 0; transform: scale(.9); }
    50% { opacity: var(--admin-effect-opacity, .7); transform: scale(1.08); }
}
.admin-effect-preview > i:nth-child(1) { left: 12%; top: 20%; font-size: 11px; animation-delay: -.6s; }
.admin-effect-preview > i:nth-child(2) { right: 16%; top: 28%; font-size: 16px; animation-delay: -1.7s; }
.admin-effect-preview > i:nth-child(3) { left: 33%; bottom: 18%; font-size: 8px; animation-delay: -2.4s; }
.admin-effect-preview strong {
    position: relative;
    z-index: 1;
    padding: .65rem 1rem;
    color: #fff;
    background: rgba(10, 14, 23, .8);
    border: 1px solid color-mix(in srgb, var(--admin-effect-color, #ff334f) 45%, transparent);
    border-radius: 999px;
    box-shadow: 0 0 calc(7px + 18px * var(--admin-effect-glow, .7))
        color-mix(in srgb, var(--admin-effect-color, #ff334f) 45%, transparent);
}
.admin-effect-preview strong i { margin-right: .45rem; color: var(--admin-effect-color, #ff334f); }
.admin-effect-color-input { min-height: 44px; padding: .25rem; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .admin-shield-particles > i,
    .profile-admin-shield,
    .admin-effect-preview > i { animation: none; }
    .admin-shield-particles > i { opacity: .28; transform: none; }
}

/* Shared website administrator identity */
.website-admin-badge {
    display: inline-flex;
    width: auto;
    height: auto;
    min-width: 1em;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    color: var(--website-admin-color, #ff334f);
    background: transparent;
    border: 0;
    border-radius: 0;
    filter:
        drop-shadow(0 2px var(--website-admin-shadow, 5px) rgba(0, 0, 0, .9))
        drop-shadow(0 0 var(--website-admin-glow, 12px) var(--website-admin-color, #ff334f));
    animation: website-admin-pulse 2.8s ease-in-out infinite;
    vertical-align: middle;
}
.website-admin-badge > i {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    text-align: center;
}
.website-admin-badge > i::before { display: block; }
.website-admin-badge-compact {
    margin-left: 4px;
    font-size: 13px;
}
@keyframes website-admin-pulse {
    0%, 100% { opacity: .78; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.04); }
}
.viewer-container .website-admin-badge {
    position: relative;
    top: -1px;
}

.profile-legacy-action-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.profile-action-menu-toggle {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #d7e1fa;
    background: rgba(13, 19, 31, .82);
    border: 1px solid rgba(145, 169, 229, .25);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.24);
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.profile-action-menu-toggle > i {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    font-size: 14px;
    transform: translate(0, 0);
}
.profile-action-menu-toggle > i::before { display: block; line-height: 1; }
button > i:only-child,
.btn > i:only-child {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}
button > i:only-child::before,
.btn > i:only-child::before { display: block; line-height: 1; }
.profile-action-menu-toggle:hover,
.profile-action-menu.show .profile-action-menu-toggle {
    color: #fff;
    border-color: var(--modern-accent-bright);
    transform: rotate(22deg);
}
.profile-action-menu .dropdown-menu {
    min-width: 205px;
    padding: .4rem;
    border-radius: 12px;
}
.profile-action-menu .dropdown-item {
    display: flex;
    min-height: 37px;
    align-items: center;
    gap: .65rem;
    padding: .48rem .65rem;
    border: 0;
    border-radius: 8px;
    font-size: .78rem;
}
.profile-action-menu .dropdown-item i {
    width: 18px;
    color: var(--modern-accent-bright);
    text-align: center;
}
.profile-action-menu .profile-action-admin,
.profile-action-menu .profile-action-admin i,
.profile-action-menu .profile-action-remove,
.profile-action-menu .profile-action-remove i { color: #ff7182; }
.profile-request-quick-actions {
    position: absolute;
    z-index: 7;
    top: .7rem;
    right: .75rem;
    display: flex;
    gap: .38rem;
}
.profile-request-quick-actions button {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #83e5ad;
    background: rgba(18, 50, 35, .88);
    border: 1px solid rgba(92, 218, 145, .35);
    border-radius: 9px;
    box-shadow: 0 7px 18px rgba(0,0,0,.24);
}
.profile-request-quick-actions button:last-child {
    color: #ff8795;
    background: rgba(65, 20, 28, .88);
    border-color: rgba(255, 112, 130, .35);
}
.profile-request-quick-actions button:hover { filter: brightness(1.2); transform: translateY(-1px); }

#chatDmModal { z-index: 1095; }
body.chat-dm-open .modal-backdrop { z-index: 1090; }
#chatDmModal .modal-content { position: relative; z-index: 1; pointer-events: auto; }
#chatDmModal .modal-body { min-height: 330px; }
.chat-dm-search { position: relative; }
.chat-dm-search > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: #7383a1;
    transform: translateY(-50%);
    pointer-events: none;
}
.chat-dm-search .form-control { min-height: 45px; padding-left: 39px; }
.chat-dm-results {
    max-height: 290px;
    margin-top: 10px;
    overflow-y: auto;
    background: rgba(5,9,17,.38);
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;
}
.chat-dm-results > p { margin: 0; padding: 28px 16px; color: #74829b; font-size: .78rem; text-align: center; }
.chat-dm-result {
    display: grid;
    width: 100%;
    min-height: 58px;
    padding: 8px 11px;
    grid-template-columns: 40px minmax(0,1fr) auto 16px;
    align-items: center;
    gap: 10px;
    color: #c8d2e4;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: background .16s ease,color .16s ease;
}
.chat-dm-result:last-child { border-bottom: 0; }
.chat-dm-result:hover,.chat-dm-result.is-selected { color: #fff; background: rgba(75,105,182,.15); }
.chat-dm-result > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.chat-dm-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dm-result small { color: #74829a; font-size: .67rem; }
.chat-dm-result > i { display: inline-flex; align-items: center; justify-content: center; color: #6f83b8; font-size: .7rem; }
.chat-dm-result-avatar {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #91a9e3;
    background: #171e2e;
    border-radius: 9px;
}
.chat-dm-result-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-dm-result-flag { object-fit: cover; }
.chat-dm-searching { display: flex; min-height: 90px; align-items: center; justify-content: center; gap: 9px; color: #7d8ca7; font-size: .76rem; }
.chat-dm-searching .loader { width: 20px; height: 20px; margin: 0; }
.chat-dm-selected {
    display: grid;
    margin-top: 10px;
    padding: 9px 11px;
    grid-template-columns: 38px minmax(0,1fr) 24px;
    align-items: center;
    gap: 10px;
    color: #dce7fb;
    background: rgba(55,190,125,.09);
    border: 1px solid rgba(55,190,125,.22);
    border-radius: 10px;
}
.chat-dm-selected[hidden] { display: none; }
.chat-dm-selected > span { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; background: #171e2e; border-radius: 8px; }
.chat-dm-selected > span img { width: 100%; height: 100%; object-fit: cover; }
.chat-dm-selected > div { display: flex; min-width: 0; flex-direction: column; }
.chat-dm-selected small { color: #68d9a2; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.chat-dm-selected strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dm-selected > i { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: #69dfa6; background: rgba(55,190,125,.13); border-radius: 50%; }
#chatDmModal input { position: relative; z-index: 2; pointer-events: auto; }

/* Community chat and private messages */
.chat-page {
    --chat-panel: rgba(13, 18, 30, .88);
    --chat-line: rgba(138, 165, 236, .16);
    max-width: 1320px;
    margin: 0 auto;
}
.chat-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 155px;
    margin-bottom: 18px;
    padding: 28px 32px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 20%, rgba(75, 105, 182, .38), transparent 34%),
        linear-gradient(135deg, rgba(29, 39, 67, .96), rgba(11, 15, 25, .94));
    border: 1px solid var(--chat-line);
    border-radius: 17px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}
.chat-hero::before,.chat-hero::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle,rgba(101,134,220,.22),transparent 68%);
    border-radius: 50%;
    pointer-events: none;
    animation: chat-orbit 9s ease-in-out infinite alternate;
}
.chat-hero::before { top: -95px; right: 13%; }
.chat-hero::after { right: -45px; bottom: -120px; animation-delay: -4s; }
@keyframes chat-orbit { to { transform: translate3d(24px,18px,0) scale(1.12); opacity: .65; } }
.chat-hero span {
    color: #90a9ea;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
}
.chat-hero h1 { margin: 5px 0 4px; color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.chat-hero p { max-width: 660px; margin: 0; color: #aeb8cc; }
.chat-hero > i { color: rgba(146, 171, 238, .25); font-size: 5.5rem; transform: rotate(-8deg); }
.chat-shell {
    display: grid;
    min-height: 650px;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(190px, 225px);
    overflow: hidden;
    background: var(--chat-panel);
    border: 1px solid var(--chat-line);
    border-radius: 17px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    backdrop-filter: blur(20px);
}
.chat-sidebar {
    padding: 14px;
    overflow: visible;
    background: rgba(6, 10, 18, .38);
    border-right: 1px solid var(--chat-line);
}
.chat-sidebar-section + .chat-sidebar-section { margin-top: 22px; }
.chat-sidebar-section > header {
    display: flex;
    padding: 4px 7px 9px;
    align-items: center;
    justify-content: space-between;
    color: #7f8da8;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.chat-sidebar-section > header button {
    display: inline-flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #9eb4ed;
    background: rgba(75, 105, 182, .14);
    border: 0;
    border-radius: 8px;
}
.chat-sidebar-section > header button > i,
.chat-nav-item > i,
.chat-main-header > div > i > i,
.chat-composer button > i,
.chat-message-actions button > i {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
}
.chat-sidebar-section > header button > i::before,
.chat-nav-item > i::before,
.chat-composer button > i::before,
.chat-message-actions button > i::before { display: block; line-height: 1; }
.chat-sidebar-section > p { padding: 6px 9px; color: #78859d; font-size: .78rem; }
.chat-nav-item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 43px;
    margin: 3px 0;
    padding: 7px 9px;
    align-items: center;
    gap: 9px;
    color: #aeb8ca;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: .18s ease;
}
.chat-nav-item:hover,
.chat-nav-item.active {
    color: #fff;
    background: rgba(75, 105, 182, .16);
    border-color: rgba(112, 143, 222, .22);
}
.chat-nav-item > i { width: 22px; color: #7895df; text-align: center; }
.chat-nav-item > b {
    min-width: 20px;
    margin-left: auto;
    padding: 2px 6px;
    color: #fff;
    font-size: .68rem;
    text-align: center;
    background: #4b69b6;
    border-radius: 999px;
}
.chat-nav-avatar,
.chat-message-avatar {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    color: #92a8df;
    background: #171e2e;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
}
.chat-nav-avatar { width: 31px; height: 31px; }
.chat-nav-avatar > img:not(.profile-avatar-border),
.chat-message-avatar > img:not(.profile-avatar-border) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.chat-main { display: flex; min-width: 0; flex-direction: column; }
.chat-main-header {
    display: flex;
    min-height: 67px;
    padding: 13px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--chat-line);
}
.chat-main-header > div { display: flex; align-items: center; gap: 12px; }
.chat-main-header > div > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #9db4ee;
    background: rgba(75, 105, 182, .16);
    border-radius: 10px;
}
.chat-main-header span { display: flex; flex-direction: column; }
.chat-main-header strong { color: #f5f7ff; }
.chat-main-header small { color: #7f8ba2; }
.chat-search {
    display: flex;
    width: min(220px,34%);
    min-height: 35px;
    margin: 0;
    padding: 0 11px;
    align-items: center;
    gap: 8px;
    color: #6f7e99;
    background: rgba(5,9,17,.48);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 9px;
}
.chat-search input { width: 100%; color: #dce5f6; background: transparent; border: 0; outline: 0; font-size: .75rem; }
.chat-messages {
    display: flex;
    min-height: 0;
    padding: 18px 20px;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
}
.chat-message {
    display: grid;
    padding: 10px 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    border-radius: 11px;
}
.chat-message:hover { background: rgba(255,255,255,.025); }
.chat-message[hidden] { display: none; }
.chat-message-avatar { width: 38px; height: 38px; }
.chat-message > div { min-width: 0; }
.chat-message header { display: flex; align-items: center; gap: 5px; }
.chat-message header a { text-decoration: none; }
.chat-message-author { position: relative; display: inline-flex; min-width: 0; align-items: center; gap: 4px; }
.chat-message-author:hover .chat-user-hovercard { display: flex; }
.chat-message-author .chat-user-hovercard { top: calc(100% + 9px); left: 0; transform: none; }
.chat-message time { margin-left: auto; color: #6f7b91; font-size: .7rem; white-space: nowrap; }
.chat-message p { margin: 3px 0 0; color: #c7cfdd; line-height: 1.48; overflow-wrap: anywhere; }
.chat-message p a { color: #8facf3; }
.chat-message-actions {
    display: flex;
    margin-left: 3px;
    gap: 3px;
    opacity: 0;
    transition: opacity .16s ease;
}
.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions { opacity: 1; }
.chat-message-actions button {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #8d99af;
    background: rgba(7, 11, 19, .85);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 7px;
}
.chat-message-actions button:hover { color: #ff7f90; border-color: rgba(255,100,120,.28); }
.chat-message-actions button:disabled { opacity: .38; }
.chat-link-embed {
    display: flex;
    max-width: 520px;
    margin-top: 8px;
    padding: 10px;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    color: #cbd5e9;
    text-decoration: none !important;
    background: rgba(5, 9, 17, .64);
    border-left: 3px solid #4b69b6;
    border-radius: 4px 10px 10px 4px;
}
.chat-link-embed > i {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #8eaaf0;
    background: rgba(75,105,182,.16);
    border-radius: 9px;
}
.chat-link-embed > img { width: 76px; height: 52px; flex: 0 0 76px; object-fit: cover; border-radius: 7px; }
.chat-link-embed > span { display: flex; min-width: 0; flex-direction: column; }
.chat-link-embed small { color: #8996ac; }
.chat-link-embed strong { overflow: hidden; color: #a9bdf1; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer {
    position: relative;
    display: flex;
    padding: 13px 16px 16px;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--chat-line);
}
.chat-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.chat-composer-tools { position: relative; display: flex; align-items: center; }
.chat-composer-tools > button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #9ca9bf;
    background: rgba(6, 10, 18, .68);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
}
.chat-composer-tools > button:hover { color: #ffd36a; }
.chat-emoji-picker {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 10px);
    left: 0;
    display: grid;
    width: 230px;
    padding: 9px;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    background: rgba(10, 15, 25, .98);
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(0,0,0,.42);
}
.chat-emoji-picker[hidden] { display: none; }
.chat-emoji-picker button {
    display: grid;
    height: 31px;
    padding: 0;
    place-items: center;
    font-size: 1.05rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
}
.chat-emoji-picker button:hover { background: rgba(75,105,182,.18); transform: scale(1.12); }
.chat-composer textarea {
    min-height: 62px;
    max-height: 150px;
    padding: 12px 14px 22px;
    resize: vertical;
    background: rgba(6, 10, 18, .68);
}
.chat-composer button { border-radius: 11px; }
.chat-send-button { display: inline-flex; min-width: 92px; height: 38px; align-items: center; justify-content: center; gap: 7px; }
.chat-character-count { position: absolute; right: 26px; bottom: 70px; color: #63718a; font-size: .62rem; pointer-events: none; }
.chat-character-count.is-near-limit { color: #ff8493; }
.chat-presence-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px !important;
    height: 10px !important;
    background: #647087;
    border: 2px solid #111827;
    border-radius: 50%;
}
.chat-presence-dot.is-online { background: #3fd18a; box-shadow: 0 0 8px rgba(63,209,138,.62); }
.chat-presence-dot.is-offline { background: #657086; }
.chat-members {
    min-width: 0;
    padding: 14px 10px;
    overflow: visible;
    background: rgba(6,10,18,.3);
    border-left: 1px solid var(--chat-line);
}
.chat-members > header { display: flex; padding: 4px 8px 10px; align-items: center; justify-content: space-between; color: #7f8da8; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.chat-members > header b { display: grid; min-width: 22px; height: 22px; place-items: center; color: #9fb6ef; background: rgba(75,105,182,.13); border-radius: 7px; }
.chat-member {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 8px;
    grid-template-columns: 34px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    color: #c4cede;
    border-radius: 9px;
}
.chat-member:hover { color: #fff; text-decoration: none; background: rgba(75,105,182,.12); }
.chat-member-avatar { position: relative; display: grid; width: 32px; height: 32px; place-items: center; color: #8ea6df; background: #171e2e; border-radius: 9px; }
.chat-member-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-member > span:nth-child(2),.chat-member-copy { display: flex; min-width: 0; flex-direction: column; }
.chat-member-name { display: flex; min-width: 0; align-items: center; gap: 5px; }
.chat-member-name .name-decoration-icon { margin-left: 0; }
.chat-member-name .name-decoration-flag { width: 16px !important; height: 11px !important; flex: 0 0 16px; }
.chat-member strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-member small { color: #6f7e96; font-size: .62rem; }
.chat-members-empty { padding: 18px 8px; color: #71809a; font-size: .72rem; text-align: center; }
.chat-user-hovercard {
    position: absolute;
    z-index: 80;
    top: 50%;
    left: calc(100% + 10px);
    display: none;
    width: 210px;
    padding: 12px;
    flex-direction: column;
    gap: 7px;
    color: #cbd5e8;
    text-align: left;
    background: rgba(9,14,24,.98);
    border: 1px solid rgba(135,160,225,.2);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.48);
    transform: translateY(-50%);
    pointer-events: none;
}
.chat-nav-item:hover .chat-user-hovercard,.chat-member:hover .chat-user-hovercard { display: flex; }
.chat-member .chat-user-hovercard { right: calc(100% + 10px); left: auto; }
.chat-user-hovercard > strong { color: #fff; font-size: .86rem; }
.chat-user-hovercard > small { color: #48d995; }
.chat-user-hovercard > span,.chat-user-hovercard > small { display: flex; align-items: center; gap: 8px; font-size: .68rem; }
.chat-user-hovercard i { display: inline-flex; width: 14px; align-items: center; justify-content: center; color: #819be0; }
.chat-user-hovercard small i { color: #48d995; font-size: .48rem; }
.chat-user-hovercard img { object-fit: cover; }
.has-custom-tooltip { position: relative; }
.has-custom-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 120;
    bottom: calc(100% + 8px);
    left: 50%;
    display: none;
    padding: 6px 8px;
    color: #eaf0ff;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    background: #090e18;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    box-shadow: 0 9px 25px rgba(0,0,0,.38);
    transform: translateX(-50%);
}
.has-custom-tooltip:hover::after { display: block; }
.chat-empty,
.chat-disabled {
    display: grid;
    min-height: 240px;
    place-content: center;
    gap: 8px;
    color: #7f8ba1;
    text-align: center;
}
.chat-empty i,
.chat-disabled > i { color: #6f89cc; font-size: 2.2rem; }
.chat-disabled h2 { margin: 0; color: #eef2ff; }

@media (max-width: 767.98px) {
    .chat-hero { min-height: 125px; padding: 21px; }
    .chat-hero > i { display: none; }
    .chat-shell { min-height: 72vh; grid-template-columns: 1fr; }
    .chat-sidebar {
        display: flex;
        max-height: 190px;
        gap: 15px;
        border-right: 0;
        border-bottom: 1px solid var(--chat-line);
        overflow-x: auto;
    }
    .chat-sidebar-section { min-width: 185px; }
    .chat-sidebar-section + .chat-sidebar-section { margin-top: 0; }
    .chat-main { min-height: 500px; }
    .chat-main-header { align-items: flex-start; flex-direction: column; }
    .chat-search { width: 100%; }
    .chat-message { padding: 8px 2px; }
    .chat-message time { display: block; margin-left: auto; }
    .profile-request-quick-actions { top: .55rem; right: .55rem; }
    .profile-legacy-header:has(.profile-request-quick-actions) .profile-legacy-actions { top: 3.15rem; }
}

@media (min-width: 768px) and (max-width: 1099.98px) {
    .chat-shell { grid-template-columns: minmax(210px,250px) minmax(0,1fr); }
    .chat-members { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .website-admin-badge { animation: none; }
}

/* Experimental miniBB-style community forum */
.forum-page { max-width: 1180px; margin: 0 auto 2rem; }
.forum-breadcrumb {
    display: flex;
    min-height: 38px;
    margin-bottom: 12px;
    padding: 9px 12px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: #77839a;
    background: rgba(10, 14, 22, .72);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 8px;
    font-size: .7rem;
    white-space: nowrap;
}
.forum-breadcrumb a { color: #8d9ab1; }
.forum-breadcrumb i { font-size: .55rem; }
.forum-breadcrumb span { overflow: hidden; color: #cbd3e2; text-overflow: ellipsis; }
.forum-header,
.forum-thread-title {
    display: flex;
    padding: 20px 22px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.forum-header > div > span { color: var(--modern-accent-bright); font-size: .62rem; font-weight: 800; letter-spacing: .15em; }
.forum-header h1,.forum-thread-title h1 { margin: 3px 0; color: #fff; font-size: clamp(1.35rem,3vw,2rem); }
.forum-header p,.forum-thread-title p { margin: 0; color: #8490a5; font-size: .78rem; }
.forum-category-list,.forum-topic-list { overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }
.forum-category-row,.forum-topic-row {
    display: grid;
    min-height: 76px;
    padding: 13px 15px;
    align-items: center;
    gap: 14px;
    color: #c9d1df;
    background: rgba(18, 22, 29, .88);
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: background .16s ease;
}
.forum-category-row { grid-template-columns: 44px minmax(220px,1fr) 150px minmax(190px,.65fr) 16px; }
.forum-topic-row { grid-template-columns: 38px minmax(220px,1fr) 72px 72px 16px; }
.forum-category-row:last-child,.forum-topic-row:last-child { border-bottom: 0; }
.forum-category-row:hover,.forum-topic-row:hover { color: #fff; text-decoration: none; background: rgba(25, 31, 42, .94); }
.forum-category-icon,.forum-topic-state {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--modern-accent-bright);
    background: rgba(var(--modern-accent-rgb),.12);
    border-radius: 9px;
}
.forum-category-icon > i,.forum-topic-state > i {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    text-align: center;
}
.forum-category-icon > i::before,.forum-topic-state > i::before { display: block; line-height: 1; }
.forum-category-copy,.forum-topic-row > span:nth-child(2),.forum-category-latest { display: flex; min-width: 0; flex-direction: column; }
.forum-category-copy strong,.forum-topic-row strong,.forum-category-latest strong { overflow: hidden; color: #f4f6fb; text-overflow: ellipsis; white-space: nowrap; }
.forum-category-copy small,.forum-topic-row small,.forum-category-latest small { color: #758197; font-size: .68rem; }
.forum-inline-name,.forum-author-name-line {
    display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; vertical-align: middle;
}
.forum-inline-name .name-decoration-icon,.forum-author-name-line .name-decoration-icon { margin-left: 0; }
.forum-author-name-line { width: 100%; max-width: 100%; }
.forum-author-name-line > a { max-width: calc(100% - 42px); overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.forum-prefix {
    display: inline-flex; min-height: 20px; margin-right: 8px; padding: 2px 7px; align-items: center; gap: 4px;
    color: #b9c7e7; background: rgba(75,105,182,.16); border: 1px solid rgba(105,139,220,.25); border-radius: 5px;
    font-size: .58rem; font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase; vertical-align: .14em;
}
.forum-prefix i { margin: 0; font-size: .62rem; }
.forum-prefix-announcement,.forum-prefix-important { color: #ffd87a; background: rgba(218,153,38,.14); border-color: rgba(243,184,72,.28); }
.forum-prefix-update,.forum-prefix-release { color: #74dbff; background: rgba(41,158,200,.14); border-color: rgba(72,190,235,.28); }
.forum-prefix-guide,.forum-prefix-solved { color: #87efaa; background: rgba(43,179,93,.14); border-color: rgba(77,213,126,.28); }
.forum-prefix-help,.forum-prefix-question,.forum-prefix-support { color: #a9bdff; background: rgba(75,105,182,.18); border-color: rgba(105,139,220,.3); }
.forum-prefix-suggestion,.forum-prefix-feedback { color: #d2b4ff; background: rgba(144,89,211,.14); border-color: rgba(172,118,236,.28); }
.forum-prefix-bug,.forum-prefix-warning { color: #ff9a9f; background: rgba(207,59,70,.14); border-color: rgba(235,84,95,.28); }
.forum-prefix-event,.forum-prefix-giveaway { color: #ffb7dd; background: rgba(207,65,145,.14); border-color: rgba(235,93,173,.28); }
.forum-prefix-recruitment,.forum-prefix-marketplace { color: #9ce5dd; background: rgba(48,169,157,.14); border-color: rgba(77,205,192,.28); }
.forum-prefix-media,.forum-prefix-off-topic { color: #b8c1cf; background: rgba(129,140,155,.12); border-color: rgba(159,170,185,.22); }
.forum-category-stats { display: grid; grid-template-columns: auto auto; gap: 0 6px; text-align: right; }
.forum-category-stats b,.forum-topic-row > span:nth-child(3) b,.forum-topic-row > span:nth-child(4) b { color: #fff; }
.forum-category-stats small { color: #6f7b90; font-size: .62rem; }
.forum-topic-row > span:nth-child(3),.forum-topic-row > span:nth-child(4) { display: flex; align-items: center; flex-direction: column; }
.forum-empty { display: grid; min-height: 180px; place-content: center; gap: 8px; color: #77849a; text-align: center; background: rgba(18,22,29,.88); }
.forum-empty i { color: #7994d8; font-size: 2rem; }
.forum-thread-toolbar { display: flex; padding: 0 0 12px; align-items: center; justify-content: space-between; }
.forum-pagination { display: flex; gap: 5px; }
.forum-pagination a { display: grid; min-width: 29px; height: 29px; padding: 0 8px; place-items: center; color: #a8b2c4; background: rgba(12,16,24,.85); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; font-size: .72rem; }
.forum-pagination a.active { color: #fff; background: var(--modern-accent); }
.forum-thread-title > span { color: #dce4f4; font-size: .75rem; }.forum-thread-title > span i { margin-right: 5px; }
.forum-post {
    display: grid;
    margin-bottom: 14px;
    grid-template-columns: 150px minmax(0,1fr);
    overflow: hidden;
    background: rgba(22, 25, 31, .94);
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;
}
.forum-post-author { display: flex; padding: 12px; align-items: center; flex-direction: column; background: rgba(9,12,18,.44); border-right: 1px solid rgba(255,255,255,.055); }
.forum-post-author > a:first-child { max-width: 100%; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.forum-post-avatar { position: relative; display: grid; width: 112px; height: 112px; margin: 9px 0 13px; place-items: center; color: #dfe6f5; background: #10151f; border-radius: 4px; }
.forum-post-avatar > img:not(.profile-avatar-border) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.forum-post-avatar > .profile-avatar-border {
    position: absolute !important;
    inset: -8px !important;
    z-index: 4;
    width: calc(100% + 16px) !important;
    height: calc(100% + 16px) !important;
    max-width: none !important;
    object-fit: contain !important;
    pointer-events: none;
}
.forum-author-stats { width: 100%; border-top: 1px solid rgba(255,255,255,.06); }
.forum-author-stats span { display: flex; padding: 7px 2px; align-items: center; gap: 7px; color: #7e899d; border-bottom: 1px solid rgba(255,255,255,.045); font-size: .65rem; }
.forum-author-stats i { display: inline-flex; width: 14px; align-items: center; justify-content: center; line-height: 1; }.forum-author-stats b { margin-left: auto; color: #e5eaf3; }
.forum-userbars { display: flex; width: 100%; padding-top: 10px; align-items: center; flex-direction: column; gap: 6px; }
.forum-userbars img { display: block; width: auto; max-width: 100%; height: auto; max-height: 34px; object-fit: contain; }
.forum-post-main { display: flex; min-width: 0; min-height: 310px; flex-direction: column; }
.forum-post-main > header { display: flex; padding: 10px 13px; align-items: center; justify-content: space-between; color: #737f93; border-bottom: 1px solid rgba(255,255,255,.045); font-size: .64rem; }
.forum-post-main > header span { display: flex; align-items: center; gap: 6px; }.forum-post-main > header b { color: #98a9cf; }
.forum-post-body { padding: 17px 20px; flex: 1; color: #ecf0f7; line-height: 1.65; overflow-wrap: anywhere; }
.forum-post-main > footer { display: flex; min-height: 43px; padding: 7px 12px; align-items: center; justify-content: flex-end; gap: 7px; border-top: 1px solid rgba(255,255,255,.045); }
.forum-post-main > footer a,.forum-post-main > footer button { display: inline-flex; padding: 5px 9px; align-items: center; gap: 5px; color: #b8c4dc; background: rgba(5,8,14,.45); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; font-size: .62rem; text-decoration: none; }
.forum-post-main > footer form { margin: 0; }.forum-admin-tools { display: flex; justify-content: flex-end; gap: 7px; }
@media (max-width: 767.98px) {
    .forum-category-row { grid-template-columns: 38px minmax(0,1fr) 16px; }
    .forum-category-stats,.forum-category-latest { display: none; }
    .forum-topic-row { grid-template-columns: 34px minmax(0,1fr) 16px; }
    .forum-topic-row > span:nth-child(3),.forum-topic-row > span:nth-child(4) { display: none; }
    .forum-post { grid-template-columns: 1fr; }
    .forum-post-author { align-items: flex-start; flex-direction: row; gap: 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.055); }
    .forum-author-name-line { width: auto; justify-content: flex-start; }
    .forum-post-avatar { width: 58px; height: 58px; margin: 0; order: -1; }
    .forum-author-stats { display: none; }
    .forum-userbars { width: auto; margin-left: auto; padding: 0; align-self: center; }
    .forum-userbars img { max-width: 110px; max-height: 28px; }
    .forum-post-main { min-height: 220px; }
}

.account-dropdown-header > div { min-width: 0; }
.account-dropdown-name { display: flex; min-width: 0; align-items: center; gap: 5px; }
.account-dropdown-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown-name .name-decoration-icon { margin-left: 0; }

.profile-admin-badge-visibility {
    display: flex; margin-top: 14px; padding: 13px 14px; align-items: center; justify-content: space-between; gap: 18px;
    background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
}
.profile-admin-badge-visibility > div:first-child { display: grid; gap: 3px; }
.profile-admin-badge-visibility strong { color: #eef2fa; font-size: .78rem; }
.profile-admin-badge-visibility small { color: #79869b; font-size: .66rem; line-height: 1.45; }
.profile-admin-badge-visibility .custom-control { flex: 0 0 auto; }
.admin-effect-preview.is-badge-hidden { opacity: .35; filter: grayscale(1); }
.admin-effect-preview.is-badge-hidden strong { text-decoration: line-through; }
.profile-social-field.is-collapsed { display: none; }
.profile-social-more { display: inline-flex; align-items: center; gap: 7px; }
.personal-channel-editor { position: relative; overflow: hidden; }
.personal-channel-editor::after {
    position: absolute; top: -46px; right: -30px; width: 150px; height: 150px; content: "";
    background: radial-gradient(circle,rgba(170,136,255,.18),transparent 68%); pointer-events: none;
}
.personal-channel-vip { display: inline-flex; margin-left: auto; padding: 5px 9px; align-items: center; gap: 6px; color: #d8c5ff; background: rgba(170,136,255,.12); border: 1px solid rgba(170,136,255,.25); border-radius: 8px; font-size: .66rem; font-weight: 800; }
.personal-channel-vip i { margin: 0; color: #c7a9ff; }
.personal-channel-sync-status { display: flex; padding: 12px; align-items: center; justify-content: space-between; gap: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; }
.personal-channel-sync-status > span { color: #8491a6; font-size: .69rem; }
.personal-channel-sync-status > span i { margin-right: 6px; color: #aa88ff; }
.admin-personal-channel-status { display: flex; margin-top: 14px; padding: 11px; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; }
.admin-personal-channel-status > span { display: grid; grid-template-columns: 20px 1fr; align-items: center; }
.admin-personal-channel-status > span i { grid-row: 1 / 3; margin: 0; color: #aa88ff; }
.admin-personal-channel-status small { color: var(--modern-muted); }
.admin-server-banner-card { overflow: hidden; }
.admin-server-banner-card .card-body { background: rgba(7,11,18,.35); }
.admin-server-banner-preview { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,.28); }
@media (max-width: 575.98px) {
    .profile-admin-badge-visibility { align-items: flex-start; flex-direction: column; }
    .personal-channel-sync-status,.admin-personal-channel-status { align-items: stretch; flex-direction: column; }
}

/* Community handbook and help center */
.guide-page { max-width: 1120px; margin: 0 auto 2rem; }
.guide-hero {
    position: relative;
    display: flex;
    min-height: 210px;
    padding: clamp(28px,5vw,54px);
    align-items: center;
    gap: 25px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 15%,rgba(var(--modern-accent-rgb),.32),transparent 34%),
        linear-gradient(135deg,rgba(17,23,38,.95),rgba(10,14,24,.9));
    border: 1px solid rgba(145,166,222,.16);
    border-radius: 20px;
    box-shadow: 0 25px 65px rgba(0,0,0,.25);
}
.guide-hero::after {
    position: absolute;
    right: -50px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    content: "";
    background: rgba(var(--modern-accent-rgb),.08);
    border: 1px solid rgba(var(--modern-accent-rgb),.14);
    border-radius: 50%;
    filter: blur(1px);
}
.guide-hero-icon {
    display: grid;
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg,var(--modern-accent-bright),var(--modern-accent));
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(var(--modern-accent-rgb),.3);
}
.guide-hero-icon i { margin: 0; font-size: 1.8rem; line-height: 1; }
.guide-hero > div:last-child { position: relative; z-index: 1; }
.guide-hero span { color: var(--modern-accent-bright); font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
.guide-hero h1 { margin: 7px 0 8px; color: #f8faff; font-size: clamp(1.6rem,4vw,2.65rem); line-height: 1.1; }
.guide-hero p { max-width: 650px; margin: 0; color: #9ba8bf; font-size: .94rem; }
.guide-steps {
    display: grid;
    margin: 18px 0;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
}
.guide-steps a {
    display: flex;
    min-width: 0;
    padding: 15px;
    align-items: center;
    gap: 11px;
    color: #dce4f3;
    text-decoration: none;
    background: rgba(17,22,32,.84);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    transition: transform .18s ease,border-color .18s ease,background .18s ease;
}
.guide-steps a:hover { color: #fff; background: rgba(24,31,46,.94); border-color: rgba(var(--modern-accent-rgb),.35); transform: translateY(-2px); }
.guide-steps i { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; margin: 0; color: var(--modern-accent-bright); background: rgba(var(--modern-accent-rgb),.12); border-radius: 9px; }
.guide-steps span,.guide-steps strong,.guide-steps small { display: block; min-width: 0; }
.guide-steps strong { font-size: .8rem; }
.guide-steps small { overflow: hidden; color: #76839a; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.guide-content-card {
    overflow: hidden;
    background: linear-gradient(145deg,rgba(21,27,39,.95),rgba(12,16,24,.95));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
}
.guide-content-card > header { display: flex; padding: 16px 20px; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.guide-content-card > header > i { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin: 0; color: var(--modern-accent-bright); background: rgba(var(--modern-accent-rgb),.12); border-radius: 10px; }
.guide-content-card > header strong,.guide-content-card > header small { display: block; }
.guide-content-card > header strong { color: #f0f4fc; }
.guide-content-card > header small { color: #758198; font-size: .68rem; }
.rules-content { padding: clamp(20px,4vw,38px); color: #b9c3d4; line-height: 1.75; }
.rules-content h2 { margin: 0 0 10px; color: #fff; font-size: 1.55rem; }
.rules-content h3 { margin: 27px 0 7px; color: #e6ebf5; font-size: 1rem; }
.rules-content h3::before { display: inline-block; width: 5px; height: 15px; margin-right: 9px; content: ""; vertical-align: -2px; background: var(--modern-accent); border-radius: 5px; }
.rules-content p:last-child { margin-bottom: 0; }
.faq-search { position: relative; margin: 18px 0 12px; }
.faq-search i { position: absolute; top: 50%; left: 18px; margin: 0; color: #73819a; transform: translateY(-50%); }
.faq-search input { width: 100%; height: 52px; padding: 0 18px 0 48px; color: #eef3fc; background: rgba(13,18,28,.9); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; outline: 0; }
.faq-search input:focus { border-color: rgba(var(--modern-accent-rgb),.7); box-shadow: 0 0 0 3px rgba(var(--modern-accent-rgb),.13); }
.faq-modern > .alert { border-radius: 12px; }
.faq-modern-list { display: grid; gap: 9px; }
.faq-modern-item { overflow: hidden; background: rgba(18,23,34,.91); border: 1px solid rgba(255,255,255,.075); border-radius: 13px; }
.faq-modern-heading { display: flex; min-height: 61px; align-items: stretch; }
.faq-modern-heading > button:first-child { display: flex; min-width: 0; padding: 0 17px; flex: 1; align-items: center; gap: 13px; color: #e8edf7; text-align: left; background: transparent; border: 0; }
.faq-modern-heading > button:first-child > span { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; color: var(--modern-accent-bright); background: rgba(var(--modern-accent-rgb),.12); border-radius: 8px; font-size: .66rem; font-weight: 800; }
.faq-modern-heading strong { min-width: 0; flex: 1; font-size: .86rem; }
.faq-modern-heading > button:first-child > i { margin: 0; color: #65728a; transition: transform .2s ease; }
.faq-modern-heading > button:first-child[aria-expanded="true"] > i { transform: rotate(180deg); }
.faq-modern-heading .copy-faq-url { display: grid; width: 51px; place-items: center; color: #697891; background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.06); }
.faq-modern-heading .copy-faq-url:hover { color: var(--modern-accent-bright); background: rgba(var(--modern-accent-rgb),.08); }
.faq-modern-heading .copy-faq-url i { margin: 0; }
.faq-modern-answer { padding: 18px 20px 20px 62px; color: #aeb9cb; background: rgba(8,12,19,.27); border-top: 1px solid rgba(255,255,255,.055); line-height: 1.7; }
.faq-modern-answer > :last-child { margin-bottom: 0; }
.faq-no-results { display: none; min-height: 170px; place-content: center; gap: 10px; color: #77849a; text-align: center; }
.faq-no-results i { color: var(--modern-accent-bright); font-size: 1.5rem; }
@media (max-width: 767.98px) {
    .guide-hero { min-height: 175px; padding: 24px; align-items: flex-start; flex-direction: column; gap: 15px; }
    .guide-hero-icon { width: 54px; height: 54px; flex-basis: 54px; border-radius: 15px; }
    .guide-hero-icon i { font-size: 1.3rem; }
    .guide-steps { grid-template-columns: 1fr 1fr; }
    .faq-modern-answer { padding-left: 20px; }
}
@media (max-width: 480px) {
    .guide-steps { grid-template-columns: 1fr; }
}

/* Profile V3 */
.profile-v3-page {
    --v3-line: rgba(255,255,255,.085);
    display: grid; max-width: 1120px; margin: 0 auto 2rem; gap: 15px;
}
.profile-v3-cover {
    position: relative; z-index: 3; min-height: 300px; overflow: visible;
    background: radial-gradient(circle at 78% 18%,rgba(var(--modern-accent-rgb),.3),transparent 34%),linear-gradient(125deg,#111827,#0a0f19 70%);
    border: 1px solid var(--v3-line); border-radius: 22px; box-shadow: 0 28px 70px rgba(0,0,0,.3);
}
.profile-v3-cover-art,.profile-v3-cover-art::after,.profile-v3-cover-grid { position: absolute; inset: 0; border-radius: inherit; }
.profile-v3-cover-art { overflow: hidden; }
.profile-v3-cover-art img { width: 100%; height: 100%; object-fit: cover; opacity: var(--banner-opacity,.65); filter: blur(var(--banner-blur,0)); transform: scale(1.04); }
.profile-v3-cover-art::after { content: ""; background: linear-gradient(90deg,rgba(7,11,18,.92),rgba(7,11,18,.22) 65%,rgba(7,11,18,.5)); }
.profile-v3-cover-grid {
    opacity: .16; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size: 36px 36px; mask-image: linear-gradient(to bottom,black,transparent 80%);
}
.profile-v3-command {
    position: absolute; z-index: 2; right: clamp(22px,4vw,44px); bottom: clamp(22px,4vw,38px); left: clamp(22px,4vw,44px);
    display: grid; grid-template-columns: 126px minmax(0,1fr) auto; align-items: end; gap: 23px;
}
.profile-v3-avatar {
    position: relative; display: grid; width: 126px; height: 126px; place-items: center; color: #171b24; background: #d8d9db;
    border: 3px solid rgba(255,255,255,.82); border-radius: 18px 18px 0 18px; box-shadow: 0 18px 38px rgba(0,0,0,.38); font-size: 2.1rem; font-weight: 700;
}
.profile-v3-avatar > .profile-avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: 14px 14px 0 14px; }
.profile-v3-avatar > .profile-avatar-border {
    position: absolute; top: 50%; left: 50%; width: calc(100% + var(--profile-border-overflow,8px) * 2) !important;
    height: calc(100% + var(--profile-border-overflow,8px) * 2) !important; max-width: none; transform: translate(-50%,-50%); pointer-events: none;
}
.profile-v3-avatar > i { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; background: #657086; border: 4px solid #101621; border-radius: 50%; }
.profile-v3-avatar > i.is-online { background: #39d98a; box-shadow: 0 0 17px rgba(57,217,138,.65); }
.profile-v3-identity { min-width: 0; padding-bottom: 3px; }
.profile-v3-eyebrow { display: flex; margin-bottom: 5px; gap: 7px; color: #94a3ba; font-size: .63rem; font-weight: 800; letter-spacing: .14em; }
.profile-v3-eyebrow b { color: var(--modern-accent-bright); }
.profile-v3-name { display: flex; min-width: 0; align-items: center; gap: 9px; }
.profile-v3-name h1 { width: fit-content; max-width: 100%; margin: 0; overflow: visible; color: #fff; font-size: clamp(1.75rem,4vw,2.75rem); line-height: 1.15; }
.profile-v3-name > img { flex: 0 0 auto; }
.profile-v3-status { display: flex; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.profile-v3-status > span,.profile-v3-status > a {
    display: inline-flex; padding: 6px 9px; align-items: center; gap: 7px; color: #aeb9ca; text-decoration: none;
    background: rgba(5,9,15,.56); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; font-size: .7rem;
}
.profile-v3-status i { margin: 0; font-size: .58rem; }
.profile-v3-status .online { color: #6ff0a8 !important; background: rgba(28,137,83,.24); border-color: rgba(62,221,132,.32); }
.profile-v3-status .offline { color: #ff7c88; }
.profile-v3-status > a:hover { color: #fff; border-color: rgba(var(--modern-accent-rgb),.5); }
.profile-v3-command-actions {
    position: absolute; z-index: 25; top: -112px; right: 0;
    display: flex; padding: 0; align-items: center; gap: 10px;
}
.profile-v3-command-actions .profile-reference-level {
    position: absolute; top: 112px; right: 0; transform: translateY(-50%);
}
.profile-v3-command-actions .profile-reference-level strong {
    display: block; width: auto; height: auto; min-width: 0; padding: 0;
    color: rgba(255,255,255,.48); background: transparent; border: 0; border-radius: 0; box-shadow: none;
    font-size: 5rem; font-weight: 800; line-height: 1; text-shadow: 0 5px 28px rgba(var(--modern-accent-rgb),.38);
}
.profile-v3-command-actions .profile-reference-level strong::after { content: none; }
.profile-v3-command-actions .profile-action-menu { position: relative; z-index: 30; }
.profile-v3-command-actions .profile-action-menu-toggle { opacity: .58; transition: opacity .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.profile-v3-command-actions .profile-action-menu-toggle:hover,
.profile-v3-command-actions .profile-action-menu.show .profile-action-menu-toggle { opacity: 1; }
.profile-v3-command-actions .dropdown-menu {
    z-index: 1080; max-height: min(520px,calc(100vh - 95px)); overflow-y: auto;
}
.profile-v3-nav {
    display: flex; padding: 7px; gap: 4px; overflow-x: auto; background: rgba(15,20,31,.88);
    border: 1px solid var(--v3-line); border-radius: 13px; box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.profile-v3-nav a { display: inline-flex; min-height: 39px; padding: 0 15px; align-items: center; gap: 8px; color: #8f9db3; text-decoration: none; border-radius: 9px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.profile-v3-nav a:first-child,.profile-v3-nav a:hover { color: #fff; background: rgba(var(--modern-accent-rgb),.14); }
.profile-v3-nav i { margin: 0; color: var(--modern-accent-bright); }
.profile-v3-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.profile-v3-stats article {
    position: relative; min-height: 88px; padding: 16px 18px; overflow: hidden;
    background: linear-gradient(145deg,rgba(21,27,40,.96),rgba(12,17,26,.94)); border: 1px solid var(--v3-line); border-radius: 14px;
}
.profile-v3-stats span,.profile-v3-stats strong { position: relative; z-index: 1; display: block; }
.profile-v3-stats span { color: #738199; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.profile-v3-stats strong { margin-top: 4px; color: #f4f7fc; font-size: 1.42rem; }
.profile-v3-stats article > i { position: absolute; right: 14px; bottom: 12px; margin: 0; color: rgba(var(--modern-accent-rgb),.18); font-size: 2.1rem; }
.profile-v3-grid { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(280px,.72fr); align-items: start; gap: 15px; }
.profile-v3-main,.profile-v3-side { display: grid; min-width: 0; gap: 15px; }
.profile-v3-page .profile-panel { margin: 0; overflow: hidden; background: linear-gradient(145deg,rgba(18,24,36,.96),rgba(11,15,23,.96)); border: 1px solid var(--v3-line); border-radius: 15px; }
.profile-v3-page .profile-panel > header { min-height: 51px; padding: 0 17px; }
.profile-v3-page .profile-panel > header small { margin-left: auto; color: #718096; font-size: .67rem; }
.profile-v3-page .profile-panel-body { padding: 17px; }
.profile-v3-story p { margin: 0 0 17px; color: #aeb9ca; line-height: 1.72; white-space: pre-line; }
.profile-v3-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.profile-v3-facts > div { display: grid; padding: 11px 12px; gap: 3px; background: rgba(255,255,255,.027); border: 1px solid rgba(255,255,255,.055); border-radius: 9px; }
.profile-v3-facts span { color: #748198; font-size: .61rem; font-weight: 700; text-transform: uppercase; }
.profile-v3-facts strong { color: #e9eef8; font-size: .77rem; }.profile-v3-facts img { margin-right: 4px; vertical-align: 1px; }
.profile-v3-award-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.profile-v3-award-grid > a {
    display: grid; min-width: 0; min-height: 68px; padding: 10px; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px;
    color: #e7edf8; text-decoration: none; background: linear-gradient(135deg,var(--badge-background,rgba(255,255,255,.035)),rgba(255,255,255,.018));
    border: 1px solid rgba(255,255,255,.065); border-radius: 10px;
}
.profile-v3-award-grid > a:hover { border-color: var(--badge-color,var(--modern-accent)); transform: translateY(-1px); }
.profile-v3-award-grid > a > i { display: grid; width: 40px; height: 40px; place-items: center; margin: 0; color: var(--badge-color,var(--modern-accent-bright)); background: rgba(255,255,255,.055); border-radius: 10px; }
.profile-v3-award-grid span { display: grid; min-width: 0; }
.profile-v3-award-grid strong,.profile-v3-award-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-v3-award-grid strong { font-size: .75rem; }.profile-v3-award-grid small { color: #7f8ba0; font-size: .61rem; }
.profile-v3-award-grid b { color: var(--badge-color,var(--modern-accent-bright)); font-size: .69rem; }
.profile-v3-group-stack { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-v3-group-stack > span { display: inline-flex; min-height: 31px; padding: 5px 9px; align-items: center; gap: 6px; color: #c2ccdc; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; font-size: .68rem; }
.profile-v3-group-stack img { width: 16px; height: 16px; object-fit: contain; }.profile-v3-group-stack i { width: 16px; margin: 0; color: #75849c; text-align: center; }
.profile-v3-social-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.profile-v3-social-links .profile-social {
    display: flex; width: auto; height: 40px; padding: 0 11px; align-items: center; justify-content: flex-start; gap: 9px;
    color: #fff; text-decoration: none; border-radius: 9px; font-size: .7rem; font-weight: 700;
}
.profile-v3-social-links .profile-social i { width: 18px; margin: 0; text-align: center; }
.profile-v3-social-links .profile-social:hover { color: #fff; text-decoration: none; filter: brightness(1.12); transform: translateY(-1px); }
.profile-v3-account + .profile-v3-account { margin-top: 11px; }
.profile-v3-account-label {
    display: flex; margin-bottom: 6px; align-items: center; gap: 7px; color: #8d9ab0;
    font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.profile-v3-account-label i { display: grid; width: 23px; height: 23px; place-items: center; margin: 0; border-radius: 6px; }
.profile-v3-account-discord .profile-v3-account-label i { color: #fff; background: #5865f2; }
.profile-v3-account-steam .profile-v3-account-label i { color: #fff; background: linear-gradient(145deg,#1b4b70,#101d2d); }
.profile-v3-presence-card .discord-card { margin: 0; }
.profile-v3-steam {
    display: grid; min-height: 61px; padding: 10px; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px;
    color: #dcecff; text-decoration: none; background: linear-gradient(135deg,rgba(23,51,72,.74),rgba(11,25,38,.8));
    border: 1px solid rgba(102,192,244,.2); border-radius: 10px;
}
.profile-v3-steam:hover { color: #fff; text-decoration: none; border-color: rgba(102,192,244,.54); }
.profile-v3-steam > img,.profile-v3-steam > i:first-child { display: grid; width: 40px; height: 40px; place-items: center; margin: 0; object-fit: cover; background: #152d40; border-radius: 9px; font-size: 1.15rem; }
.profile-v3-steam > span { display: grid; min-width: 0; }
.profile-v3-steam strong,.profile-v3-steam small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-v3-steam strong { font-size: .76rem; }.profile-v3-steam small { color: #75a8c9; font-size: .62rem; }
.profile-v3-steam > i:last-child { margin: 0; color: #5f91af; }
.profile-v3-friend-list { display: grid; gap: 5px; }
.profile-v3-friend-list > a { display: grid; min-width: 0; min-height: 51px; padding: 7px; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; color: #dce3ef; text-decoration: none; border-radius: 9px; }
.profile-v3-friend-list > a:hover { color: #fff; background: rgba(var(--modern-accent-rgb),.08); }
.profile-v3-friend-list .profile-friend-avatar { width: 38px; height: 38px; }
.profile-v3-friend-list .profile-friend-avatar > .profile-avatar-border { top: 50%; left: 50%; width: 46px !important; height: 46px !important; transform: translate(-50%,-50%); }
.profile-v3-friend-list > a > span:last-child { display: grid; min-width: 0; }
.profile-v3-friend-list strong { width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.profile-v3-friend-list small { color: #69778e; font-size: .6rem; }
.profile-v3-view-all { display: flex; margin-top: 10px; padding-top: 10px; align-items: center; justify-content: space-between; color: var(--modern-accent-bright); text-decoration: none; border-top: 1px solid rgba(255,255,255,.06); font-size: .68rem; font-weight: 700; }
.profile-v3-view-all:hover { color: #fff; text-decoration: none; }
.profile-v3-comments .profile-comment-form { margin-top: 11px; }

@media (max-width: 900px) {
    .profile-v3-grid { grid-template-columns: 1fr; }
    .profile-v3-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-v3-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .profile-v3-cover { min-height: 350px; border-radius: 17px; }
    .profile-v3-command { top: 24px; right: 20px; bottom: 22px; left: 20px; grid-template-columns: 86px minmax(0,1fr); align-content: end; align-items: center; gap: 16px; }
    .profile-v3-avatar { width: 86px; height: 86px; border-radius: 14px 14px 0 14px; font-size: 1.5rem; }
    .profile-v3-avatar > .profile-avatar-image { border-radius: 10px 10px 0 10px; }
    .profile-v3-command-actions { top: 0; right: 0; padding: 0; }
    .profile-v3-command-actions .profile-reference-level { top: 150px; }
    .profile-v3-command-actions .profile-reference-level strong { font-size: 4rem; }
    .profile-v3-name h1 { font-size: 1.65rem; }.profile-v3-status { margin-top: 7px; }
    .profile-v3-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-v3-side { grid-template-columns: 1fr; }.profile-v3-side > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 520px) {
    .profile-v3-cover { min-height: 390px; }
    .profile-v3-command { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .profile-v3-identity { width: 100%; }.profile-v3-eyebrow,.profile-v3-name,.profile-v3-status { justify-content: center; }
    .profile-v3-name h1 { max-width: calc(100% - 25px); }
    .profile-v3-facts,.profile-v3-award-grid { grid-template-columns: 1fr; }
    .profile-v3-social-links { grid-template-columns: 1fr; }
    .profile-v3-page .profile-panel-body { padding: 14px; }
}