:root{
      --bg:#060812;
      --bg2:#090d19;
      --panel:rgba(12,16,33,.78);
      --panel-2:rgba(18,22,40,.84);
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,0,145,.28);
      --text:#f6f8ff;
      --muted:#a9b0d0;
      --soft:#7c86ab;
      --pink:#ff2e9b;
      --pink2:#ff4bb3;
      --magenta:#d34fff;
      --cyan:#16d7ff;
      --blue:#49a6ff;
      --gold:#ffbf36;
      --green:#3dff94;
      --danger:#ff446f;
      --radius:26px;
      --shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.45),0 0 60px rgba(41,15,91,.28);
      --shadow-pink:0 0 18px rgba(255,46,155,.35), 0 0 38px rgba(255,46,155,.18);
      --shadow-cyan:0 0 18px rgba(22,215,255,.28), 0 0 38px rgba(22,215,255,.14);
      --shadow-gold:0 0 18px rgba(255,191,54,.22), 0 0 38px rgba(255,191,54,.12);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:radial-gradient(circle at 10% 15%, rgba(255,46,155,.12), transparent 22%), radial-gradient(circle at 80% 8%, rgba(22,215,255,.08), transparent 18%), linear-gradient(180deg,var(--bg),#04070f 45%, #070b18); color:var(--text); font-family:'Outfit',system-ui,Segoe UI,Roboto,sans-serif; min-height:100%; scroll-behavior:smooth;}
    body{overflow-x:hidden}
    a{text-decoration:none;color:inherit}
    img{display:block;max-width:100%}
    button,input,select,textarea{font:inherit}

    .bg-noise::before,.bg-noise::after{
      content:""; position:fixed; inset:0; pointer-events:none; z-index:-3;
    }
    .bg-noise::before{
      background:
        radial-gradient(circle at 18% 8%, rgba(255,46,155,.18), transparent 18%),
        radial-gradient(circle at 85% 22%, rgba(211,79,255,.12), transparent 18%),
        radial-gradient(circle at 78% 74%, rgba(22,215,255,.08), transparent 18%),
        radial-gradient(circle at 14% 78%, rgba(255,191,54,.06), transparent 20%);
      filter:blur(36px);
      animation:drift 16s ease-in-out infinite alternate;
    }
    .bg-noise::after{
      background-image:
       linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity:.16;
      mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
    }
    @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-12px,0) scale(1.05)}}

    .floating-orb{position:fixed; border-radius:50%; filter:blur(18px); z-index:-2; opacity:.5; pointer-events:none; animation:float 12s ease-in-out infinite}
    .orb1{width:240px;height:240px;left:-80px;top:180px;background:radial-gradient(circle, rgba(255,46,155,.35), transparent 62%)}
    .orb2{width:220px;height:220px;right:-50px;top:110px;background:radial-gradient(circle, rgba(22,215,255,.22), transparent 62%);animation-delay:-3s}
    .orb3{width:280px;height:280px;left:30%;bottom:-120px;background:radial-gradient(circle, rgba(211,79,255,.18), transparent 60%);animation-delay:-5s}
    @keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(12px)}}

    .glass{background:linear-gradient(180deg, rgba(18,23,43,.78), rgba(10,14,28,.82)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border:1px solid var(--line); box-shadow:var(--shadow);}
    .glass-soft{background:linear-gradient(180deg, rgba(13,17,30,.72), rgba(8,12,24,.76)); border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow)}
    .glow-pink{box-shadow:var(--shadow-pink)}
    .glow-cyan{box-shadow:var(--shadow-cyan)}
    .glow-gold{box-shadow:var(--shadow-gold)}
    .border-glow{position:relative}
    .border-glow::before{content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(120deg, rgba(255,46,155,.35), rgba(22,215,255,.22), rgba(211,79,255,.35)); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); padding:1px; -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.85;}

    .app{max-width:1900px; margin:0 auto; padding:0 18px 30px}

    /* Legacy topbar overrides removed to preserve global site header */
    .community-sub-topbar{position:sticky; top:0; z-index:50; margin:12px 0 20px; border-radius:24px; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
    .topbar-left,.topbar-right{display:flex; align-items:center; gap:14px}
    .community-nav-links{display:flex; align-items:center; gap:10px; flex:1; justify-content:center}
    .nav-live{display:inline-flex; align-items:center; gap:6px}
    .live-pill{padding:3px 8px; border-radius:999px; background:linear-gradient(135deg, #ff2155, #ff4ba9); font-size:12px; font-weight:700; letter-spacing:.03em; box-shadow:0 0 14px rgba(255,56,126,.38); animation:livePulse 1.6s ease infinite}
    @keyframes livePulse{0%,100%{transform:scale(1); box-shadow:0 0 12px rgba(255,56,126,.28)}50%{transform:scale(1.06); box-shadow:0 0 24px rgba(255,56,126,.5)}}

    .icon-btn,.coin-box,.profile-chip,.create-btn,.btn-secondary,.btn-primary,.btn-ghost,.tag-chip,.filter-btn,.ghost-row, .bottom-link, .action-icon{transition:.25s ease}
    .icon-btn{width:54px;height:54px;border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.03); border:1px solid var(--line); color:#fff; position:relative}
    .icon-btn:hover{background:rgba(255,255,255,.07); transform:translateY(-1px)}
    .notif-count{position:absolute; top:6px; right:7px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:linear-gradient(135deg, #ff255c, #ff48ae); display:grid; place-items:center; font-size:12px; font-weight:700; box-shadow:var(--shadow-pink)}
    .coin-box{height:54px; padding:0 14px; display:flex; align-items:center; gap:12px; border-radius:18px; border:1px solid rgba(255,191,54,.26); background:linear-gradient(180deg, rgba(32,25,11,.64), rgba(15,14,20,.8)); box-shadow:var(--shadow-gold)}
    .coin-icon{width:34px;height:34px;border-radius:50%; display:grid;place-items:center; background:radial-gradient(circle at 35% 35%, #ffe07c, #ffbe2f 58%, #8f5a00 100%); color:#5b3600; font-weight:800; box-shadow:0 0 0 2px rgba(255,220,138,.22), 0 0 18px rgba(255,191,54,.35)}
    .coin-plus{width:28px;height:28px;border-radius:50%; display:grid;place-items:center; background:rgba(255,191,54,.12); border:1px solid rgba(255,191,54,.22); color:#ffd973; font-size:18px}
    .coin-value{display:flex; flex-direction:column; line-height:1.05}
    .coin-value b{font-size:18px}
    .coin-value span{font-size:13px; color:#d0c29b}
    .profile-chip{display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; border-radius:19px; background:rgba(255,255,255,.03); border:1px solid var(--line)}
    .profile-chip img{width:42px;height:42px;border-radius:50%; object-fit:cover; border:2px solid rgba(255,46,155,.55); box-shadow:0 0 0 3px rgba(255,46,155,.12), 0 0 16px rgba(255,46,155,.26)}
    .profile-chip small{display:block; color:var(--soft); font-size:12px}
    .profile-chip b{display:block; font-size:16px}

    .layout{display:grid; grid-template-columns:260px minmax(0,1fr) 460px; gap:18px; align-items:start}
    .left-col,.right-col{position:sticky; top:98px}
    .panel{border-radius:var(--radius); padding:18px}
    .stack{display:flex; flex-direction:column; gap:16px}
    .left-profile img{width:68px;height:68px;border-radius:50%;object-fit:cover; border:2px solid rgba(255,46,155,.75); box-shadow:0 0 0 5px rgba(255,46,155,.1), 0 0 24px rgba(255,46,155,.32)}
    .left-profile .meta{display:flex; gap:14px; align-items:center}
    .verified-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:linear-gradient(135deg, rgba(255,191,54,.18), rgba(255,191,54,.08)); color:#ffe28f; border:1px solid rgba(255,191,54,.24); font-size:12px; font-weight:600}
    .xp-line{margin-top:10px; display:flex; justify-content:space-between; font-size:13px; color:#d8daf5}
    .xp-bar{height:10px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden; margin-top:6px}
    .xp-bar > i{display:block; height:100%; width:84%; background:linear-gradient(90deg, #ff2e9b, #ff4bb3, #16d7ff); border-radius:inherit; box-shadow:0 0 18px rgba(255,46,155,.35)}
    .create-btn,.btn-primary,.btn-secondary,.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 18px; border:none; border-radius:18px; cursor:pointer; color:#fff; font-weight:700; letter-spacing:.01em}
    .create-btn,.btn-primary{background:linear-gradient(90deg, #ff2e9b 0%, #ff4bb3 55%, #ff279f 100%); box-shadow:0 10px 22px rgba(255,46,155,.26), inset 0 1px 0 rgba(255,255,255,.16)}
    .create-btn:hover,.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.04)}
    .btn-secondary{background:linear-gradient(90deg, rgba(255,46,155,.12), rgba(211,79,255,.12)); border:1px solid rgba(255,46,155,.22)}
    .btn-ghost{background:rgba(255,255,255,.03); border:1px solid var(--line)}

    .menu-list{display:flex; flex-direction:column; gap:6px}
    .menu-item{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; color:#dce0f5; font-weight:500}
    .menu-item:hover{background:rgba(255,255,255,.04)}
    .menu-item.active{background:linear-gradient(180deg, rgba(255,46,155,.16), rgba(255,46,155,.06)); box-shadow:inset 3px 0 0 rgba(255,46,155,.85)}
    .menu-item svg,.top-tabs button svg,.story-chip .icon svg,.feed-action svg,.mini-list svg,.stat-mini svg,.feature-row svg,.group-item svg,.mobile-search svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

    .section-label{font-size:12px; font-weight:700; letter-spacing:.08em; color:#d8dbef; opacity:.72; margin-bottom:8px}
    .chip-column{display:flex; flex-direction:column; gap:10px}
    .small-chip{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); color:#cfd5f2; font-size:14px}
    .small-chip i{font-style:normal; width:7px;height:7px;border-radius:50%; background:linear-gradient(180deg, #ff2e9b, #ff74d1); box-shadow:0 0 14px rgba(255,46,155,.45)}
    .small-chip .meter{flex:0 0 58px; height:5px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden}
    .small-chip .meter > span{display:block; height:100%; width:60%; background:linear-gradient(90deg, #ff2e9b, #ff6fc4)}

    .promo-card{position:relative; overflow:hidden; min-height:154px; border-radius:22px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; background:linear-gradient(135deg, rgba(30,12,46,.8), rgba(11,10,25,.86)); border:1px solid rgba(255,46,155,.24)}
    .promo-card::before{content:""; position:absolute; inset:0; background:url('assets/promo_hero.png') center/cover no-repeat; opacity:.88}
    .promo-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,8,18,.08), rgba(6,8,18,.65) 50%, rgba(8,8,18,.92));}
    .promo-card > *{position:relative; z-index:1}

    .content{display:flex; flex-direction:column; gap:16px}
    .heading-card{padding:0; overflow:hidden}
    .title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:4px 4px 0}
    .heading{display:flex; gap:12px; align-items:flex-start}
    .heading .starbox{width:48px;height:48px;border-radius:16px; display:grid;place-items:center; background:linear-gradient(180deg, rgba(255,46,155,.18), rgba(255,46,155,.06)); color:#ff5db8; box-shadow:var(--shadow-pink)}
    .heading h1{margin:0; font-size:25px; line-height:1; font-weight:800}
    .heading p{margin:8px 0 0; color:var(--muted); font-size:16px}
    .sort-select{padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:#fff}

    .top-tabs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
    .top-tabs button{flex:1 1 0; min-width:110px; border:none; background:rgba(255,255,255,.03); border:1px solid var(--line); color:#dbe0f6; border-radius:18px; padding:15px 16px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer}
    .top-tabs button.active{background:linear-gradient(180deg, rgba(255,46,155,.16), rgba(255,46,155,.06)); box-shadow:inset 0 0 0 1px rgba(255,46,155,.26), var(--shadow-pink); color:#fff}

    .stories-strip{display:flex; align-items:flex-start; gap:14px; overflow:auto; padding:6px 0 4px; scrollbar-width:none}
    .stories-strip::-webkit-scrollbar{display:none}
    .story-chip{min-width:92px; max-width:92px; text-align:center}
    .story-ring{width:92px;height:92px;padding:4px;border-radius:50%; background:#ff2e9b; box-shadow:0 0 12px rgba(255,46,155,.35); animation:premiumColorChange 8s ease-in-out infinite; position:relative}
    .story-ring::after{content:""; position:absolute; inset:3px; border-radius:50%; background:linear-gradient(180deg, rgba(10,14,28,.5), rgba(8,11,22,.1));}
    .story-ring img,.story-ring .add-story{position:relative; z-index:1; width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid rgba(7,10,20,.95)}
    .story-chip .name{display:block; margin-top:8px; font-size:15px; color:#ebeeff}
    .story-chip .status{display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--muted); margin-top:3px}
    .story-chip .dot{width:11px;height:11px;border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(61,255,148,.5); animation:blink 1.8s infinite}
    .story-chip.live .story-ring{background:#ff2e9b; animation:premiumColorChange 8s ease-in-out infinite}
    .story-chip.live .live-mini{position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:2px; padding:3px 9px; border-radius:999px; background:linear-gradient(135deg,#ff214b,#ff4bb3); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; box-shadow:var(--shadow-pink)}
    .add-story{display:grid; place-items:center; color:#ff49b3; font-size:44px; background:radial-gradient(circle at 35% 35%, rgba(255,46,155,.18), rgba(255,46,155,.05));}
    @keyframes spinGlow{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
    @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

    .composer-card{padding:16px; border-radius:26px}
    .composer-top{display:flex; gap:14px; align-items:center}
    .avatar-ring{position:relative; flex:0 0 auto}
    .avatar-ring::before{content:""; position:absolute; inset:-4px; border-radius:50%; background:#ff2e9b; filter:blur(.2px); animation:premiumColorChange 8s ease-in-out infinite}
    .avatar-ring img{position:relative; width:58px;height:58px;border-radius:50%; object-fit:cover; border:3px solid #080b18; z-index:1}
    .compose-input{flex:1; min-height:58px; border-radius:18px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); display:flex; align-items:center; padding:0 18px; color:#8f98bf; font-size:22px; cursor:text}
    .composer-actions{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px}
    .action-pill{padding:14px 14px; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:10px; color:#e7ebfb; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); font-weight:500}
    .action-pill:nth-child(1){box-shadow:inset 0 0 0 1px rgba(255,46,155,.22)}
    .action-pill:nth-child(2){box-shadow:inset 0 0 0 1px rgba(22,215,255,.22)}
    .action-pill:nth-child(3){box-shadow:inset 0 0 0 1px rgba(73,166,255,.18)}
    .action-pill:nth-child(4){box-shadow:inset 0 0 0 1px rgba(211,79,255,.22)}
    .action-pill:nth-child(5){box-shadow:inset 0 0 0 1px rgba(255,191,54,.2)}
    .action-pill:nth-child(6){box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
    .action-pill .bubble{width:34px;height:34px;border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.05)}

    .feed-section,.cosplayers-section,.groups-section,.events-section{display:flex; flex-direction:column; gap:16px}
    .post-card{border-radius:28px; padding:18px; position:relative; overflow:hidden}
    .post-card::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,46,155,.04), transparent 35%, transparent 64%, rgba(22,215,255,.04)); pointer-events:none}
    .post-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
    .user-inline{display:flex; align-items:flex-start; gap:14px}
    .user-meta h3{margin:0; font-size:18px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
    .user-meta .sub{color:var(--soft); display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; font-size:14px}
    .badge-certified{padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; background:linear-gradient(135deg, rgba(255,191,54,.2), rgba(255,191,54,.08)); color:#ffd571; border:1px solid rgba(255,191,54,.28)}
    .mini-badge{padding:8px 14px; border-radius:14px; background:linear-gradient(135deg, rgba(211,79,255,.16), rgba(211,79,255,.07)); color:#eecbff; border:1px solid rgba(211,79,255,.22); font-weight:700}
    .more-btn{width:38px;height:38px;border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07)}
    .post-copy{margin-top:14px; color:#ecf0ff; font-size:17px; line-height:1.5}
    .post-copy p{margin:0 0 8px}
    .post-copy .hashtags{color:#1ac8ff}
    .post-gallery{margin-top:16px; display:grid; grid-template-columns:1.35fr .75fr .8fr; gap:8px; border-radius:24px; overflow:hidden}
    .post-gallery .big{grid-row:span 2; min-height:300px}
    .post-gallery .wide-2{min-height:146px}
    .post-gallery .stack-item{min-height:146px}
    .gallery-tile{position:relative; overflow:hidden; border-radius:20px; background:#0c1327; border:1px solid rgba(255,255,255,.06)}
    .gallery-tile img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
    .gallery-tile:hover img{transform:scale(1.04)}
    .overlay-badge{position:absolute; top:12px; left:12px; padding:7px 12px; border-radius:14px; background:linear-gradient(135deg, rgba(255,46,155,.82), rgba(255,46,155,.45)); color:#fff; font-size:14px; font-weight:700}
    .overlay-count{position:absolute; inset:auto 16px 16px auto; width:72px;height:72px;border-radius:20px; background:linear-gradient(180deg, rgba(7,9,18,.38), rgba(7,9,18,.68)); display:grid; place-items:center; font-size:42px; font-weight:700; box-shadow:0 0 0 1px rgba(255,255,255,.08); backdrop-filter: blur(10px)}
    .post-tags{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
    .tag-chip{display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); color:#d7dcf5; font-size:14px}
    .tag-chip svg{width:15px;height:15px}
    .post-actions{margin-top:15px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
    .feed-action{display:inline-flex; align-items:center; gap:8px; color:#d6dbf6; font-size:16px}
    .feed-action svg{width:21px;height:21px}
    .donate-box{margin-left:auto; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:18px; border:1px solid rgba(255,191,54,.24); background:linear-gradient(180deg, rgba(31,21,7,.66), rgba(15,12,20,.76)); box-shadow:var(--shadow-gold)}
    .donate-box .coin-icon{width:28px;height:28px; font-size:13px}
    .like{color:#ff62b5}
    .comment{color:#cfd5f2}
    .share{color:#b8c0e8}
    .save{color:#d4d8eb}

    .secondary-post .post-media-single{margin-top:16px; overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.06)}
    .secondary-post .post-media-single img{width:100%; max-height:280px; object-fit:cover}

    .online-card,.rank-card,.trend-card,.group-card,.guild-card{padding:18px; border-radius:26px}
    .side-title{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
    .side-title h3{margin:0; font-size:17px; text-transform:uppercase; letter-spacing:.02em}
    .side-title a{color:#ff5eb9; font-weight:600}
    .online-item,.rank-item,.group-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05)}
    .online-item:last-child,.rank-item:last-child,.group-item:last-child{border-bottom:none}
    .online-item img,.rank-item img,.group-item .iconbox{width:54px;height:54px;border-radius:18px; object-fit:cover; flex:0 0 auto}
    .online-item img{border:2px solid rgba(255,46,155,.4); box-shadow:0 0 0 2px rgba(255,46,155,.08), 0 0 16px rgba(255,46,155,.15)}
    .status-online{width:10px;height:10px;border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(61,255,148,.5); margin-left:auto; animation:blink 1.8s infinite}
    .status-live{padding:5px 8px; border-radius:999px; margin-left:auto; font-size:12px; font-weight:800; background:linear-gradient(135deg, #ff214b, #ff4bb3)}
    .small-meta{color:var(--soft); font-size:14px; margin-top:4px}
    .rank-num{width:28px;height:28px;border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); color:#fff; font-weight:700; margin-right:2px}
    .rank-num.gold{border-color:rgba(255,191,54,.4); color:#ffca4c; box-shadow:var(--shadow-gold)}
    .rank-num.silver{border-color:rgba(180,200,255,.4); color:#dbe7ff}
    .rank-num.bronze{border-color:rgba(255,149,59,.35); color:#ff9d43}
    .xp-up{margin-left:auto; color:#ffca43; font-weight:700}
    .xp-up small{color:#ff5db8}
    .group-item .iconbox{display:grid; place-items:center; color:#fff; background:linear-gradient(180deg, rgba(255,46,155,.16), rgba(255,46,155,.06)); border:1px solid rgba(255,46,155,.22)}
    .group-item:nth-child(2) .iconbox{background:linear-gradient(180deg, rgba(255,191,54,.16), rgba(255,191,54,.06)); border-color:rgba(255,191,54,.24); color:#ffc949}
    .group-item:nth-child(3) .iconbox{background:linear-gradient(180deg, rgba(22,215,255,.16), rgba(22,215,255,.06)); border-color:rgba(22,215,255,.2); color:#59e2ff}
    .group-item:nth-child(4) .iconbox{background:linear-gradient(180deg, rgba(73,166,255,.16), rgba(73,166,255,.06)); border-color:rgba(73,166,255,.22); color:#72bcff}
    .group-item:nth-child(5) .iconbox{background:linear-gradient(180deg, rgba(255,88,88,.16), rgba(255,88,88,.06)); border-color:rgba(255,88,88,.22); color:#ff6d6d}
    .trend-list{display:flex; flex-direction:column; gap:12px}
    .trend-item{display:flex; gap:12px; align-items:flex-start; color:#ecf0ff}
    .trend-item .up{color:#ff52b4; width:22px; height:22px; flex:0 0 auto}
    .trend-item small{display:block; color:var(--soft); margin-top:4px}
    .guild-card{display:flex; align-items:center; gap:18px; overflow:hidden; position:relative}
    .guild-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 60%, rgba(255,191,54,.09), transparent 24%)}
    .guild-copy{flex:1}
    .guild-icon{width:144px;height:144px; border-radius:28px; background:radial-gradient(circle at 35% 35%, rgba(255,191,54,.18), rgba(255,191,54,.03)); display:grid; place-items:center; color:#ffbf36; box-shadow:0 0 40px rgba(255,191,54,.18)}
    .guild-icon svg{width:88px;height:88px; filter:drop-shadow(0 0 22px rgba(255,191,54,.32))}

    .mobile-extras,.bottom-nav,.mobile-header-actions,.fab{display:none}

    .cosplayers-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    .search-wrap{flex:1; min-width:240px; position:relative}
    .search-wrap input{width:100%; padding:17px 18px 17px 52px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,46,155,.24); color:#fff; outline:none}
    .search-wrap svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px;height:20px; color:#ff53b6}
    .filter-select,.filter-btn{padding:16px 16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); color:#fff}
    .filter-select{min-width:180px}
    .filter-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer}
    .online-row{display:flex; overflow:auto; gap:14px; padding-bottom:4px; scrollbar-width:none}
    .online-row::-webkit-scrollbar{display:none}
    .online-bubble{text-align:center; min-width:104px}
    .online-bubble .pic{width:104px;height:104px; margin:0 auto; border-radius:50%; padding:4px; background:#ff2e9b; box-shadow:var(--shadow-pink); animation:premiumColorChange 8s ease-in-out infinite; position:relative}
    .online-bubble .pic img{width:100%;height:100%; object-fit:cover; border-radius:50%; border:3px solid #080b18}
    .online-bubble .status-green{position:absolute; width:14px;height:14px;border-radius:50%; background:var(--green); right:8px; bottom:10px; border:2px solid #080b18; box-shadow:0 0 16px rgba(61,255,148,.5)}
    .cosplayer-list{display:flex; flex-direction:column; gap:10px}
    .cosplayer-row{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:16px; border-radius:22px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06)}
    .cosplayer-main{display:flex; align-items:flex-start; gap:14px}
    .cosplayer-main img{width:64px;height:64px;border-radius:18px; object-fit:cover; border:1px solid rgba(255,255,255,.06)}
    .cosplayer-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
    .follow-btn{border:none; background:linear-gradient(90deg, #ff2e9b, #ff4bb3); color:#fff; padding:14px 24px; border-radius:18px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-pink)}
    .meta-line{display:flex; flex-wrap:wrap; gap:10px; color:var(--soft); margin-top:4px}
    .status-inline{display:inline-flex; align-items:center; gap:8px; color:#e5fff2; font-size:14px}
    .status-inline i{display:inline-block; width:10px;height:10px;border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(61,255,148,.5)}
    .stats-band{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:18px; border-radius:24px}
    .stats-band .stat{display:flex; gap:12px; align-items:center; justify-content:center; padding:10px 6px; border-right:1px solid rgba(255,255,255,.06)}
    .stats-band .stat:last-child{border-right:none}
    .stat .iconbox{width:38px;height:38px;border-radius:14px; display:grid;place-items:center; background:rgba(255,255,255,.04)}
    .stat b{display:block; font-size:18px}
    .stat small{color:var(--muted)}

    .mobile-only{display:none}

    /* Modal compose */
    .modal{position:fixed; inset:0; background:rgba(3,5,10,.72); backdrop-filter: blur(10px); display:none; align-items:center; justify-content:center; padding:20px; z-index:120}
    .modal.show{display:flex}
    .modal-card{width:min(980px, 100%); max-height:min(92vh, 1100px); overflow:auto; border-radius:30px; padding:22px; position:relative}
    .modal-close{position:absolute; top:18px; right:18px; width:46px;height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#fff; display:grid; place-items:center; cursor:pointer}
    .modal-grid{display:grid; grid-template-columns:1.15fr .95fr; gap:18px}
    .create-box,.preview-box{padding:18px; border-radius:24px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06)}
    .field{margin-bottom:14px}
    .field label{display:block; margin-bottom:8px; font-weight:600; color:#eef2ff}
    .text-field, .textarea-field, .select-field{width:100%; border-radius:18px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); color:#fff; padding:14px 16px; outline:none}
    .textarea-field{min-height:140px; resize:vertical}
    .upload-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px}
    .upload-option{padding:18px 12px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); text-align:center}
    .upload-option .circle{width:56px;height:56px;border-radius:18px; display:grid; place-items:center; margin:0 auto 10px; background:rgba(255,255,255,.04)}
    .upload-option.pink{box-shadow:inset 0 0 0 1px rgba(255,46,155,.22)}
    .upload-option.cyan{box-shadow:inset 0 0 0 1px rgba(22,215,255,.22)}
    .upload-option.purple{box-shadow:inset 0 0 0 1px rgba(211,79,255,.22)}
    .switch{position:relative; width:58px;height:34px; background:rgba(255,255,255,.07); border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.08)}
    .switch::after{content:""; position:absolute; width:26px;height:26px; border-radius:50%; top:3px; left:3px; background:#fff; transition:.24s ease}
    .switch.active{background:linear-gradient(90deg, rgba(255,46,155,.55), rgba(255,46,155,.28))}
    .switch.active::after{transform:translateX(24px)}
    .status-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
    .status-box{padding:14px 16px; border-radius:20px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06)}
    .status-box.active{box-shadow:inset 0 0 0 1px rgba(255,46,155,.24); background:linear-gradient(180deg, rgba(255,46,155,.12), rgba(255,46,155,.04))}

    @media (max-width: 1390px){
      .layout{grid-template-columns:240px minmax(0,1fr) 360px}
      .composer-actions{grid-template-columns:repeat(3,1fr)}
      .guild-card{flex-direction:column; align-items:flex-start}
    }
    @media (max-width: 1180px){
      .layout{grid-template-columns:240px minmax(0,1fr)}
      .right-col{display:none}
      .mobile-extras{display:flex; flex-direction:column; gap:16px}
    }
    @media (max-width: 920px){
      .app{padding:0 0 110px}
      .community-sub-topbar{border-radius:0; margin:0 0 14px; padding:12px 14px 14px; position:sticky; top:0; border-left:none; border-right:none}
      .nav-links,.left-col{display:none}
      .topbar{justify-content:space-between}
      .brand{min-width:auto; gap:8px}
      .brand img{width:160px}
      .topbar-right{gap:10px}
      .coin-box{height:52px; padding:0 12px}
      .coin-value b{font-size:16px}
      .profile-chip{padding-right:8px}
      .profile-chip small,.profile-chip b + small{display:none}
      .profile-chip b{display:none}
      .profile-chip img{width:40px;height:40px}
      .layout{display:block; padding:0 12px}
      .content{gap:12px}
      .heading{gap:8px}
      .heading .starbox{width:42px;height:42px}
      .heading h1{font-size:24px}
      .heading p{font-size:15px}
      .sort-select.desktop-only{display:none}
      .top-tabs{flex-wrap:nowrap; overflow:auto; scrollbar-width:none}
      .top-tabs button{min-width:150px}
      .stories-strip{gap:10px}
      .story-chip{min-width:86px; max-width:86px}
      .story-ring{width:86px;height:86px}
      .composer-top{display:flex; align-items:center}
      .compose-input{font-size:18px; min-height:54px}
      .composer-actions{grid-template-columns:repeat(2,1fr)}
      .post-card{padding:14px; border-radius:24px}
      .post-gallery{grid-template-columns:1.05fr .58fr .58fr; gap:6px}
      .post-gallery .big{min-height:230px}
      .post-gallery .wide-2,.post-gallery .stack-item{min-height:112px}
      .mobile-only{display:block}
      .stats-band{grid-template-columns:repeat(2,1fr)}
      .stats-band .stat:nth-child(2){border-right:none}
      .bottom-nav{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; position:fixed; left:0; right:0; bottom:0; z-index:80; padding:12px 12px calc(env(safe-area-inset-bottom) + 12px); border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(7,9,18,.86), rgba(7,9,18,.98)); backdrop-filter: blur(18px)}
      .bottom-link{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#d6dcf6; padding:8px 4px; border-radius:18px; font-size:13px; position:relative}
      .bottom-link svg{width:21px;height:21px; stroke:currentColor; fill:none; stroke-width:2}
      .bottom-link.active{color:#fff; background:linear-gradient(180deg, rgba(255,46,155,.16), rgba(255,46,155,.06)); box-shadow:var(--shadow-pink)}
      .bottom-link.live::after{content:'LIVE'; position:absolute; top:2px; right:10px; font-size:10px; font-weight:800; padding:2px 5px; border-radius:999px; background:linear-gradient(135deg, #ff214b, #ff4bb3)}
      .fab{display:grid; place-items:center; position:fixed; bottom:82px; left:50%; transform:translateX(-50%); width:72px;height:72px; border-radius:50%; border:none; z-index:90; background:linear-gradient(180deg, #ff3aa6, #ff128e); color:#fff; box-shadow:0 16px 30px rgba(255,46,155,.35), 0 0 36px rgba(255,46,155,.35); cursor:pointer}
      .fab svg{width:34px;height:34px; stroke-width:2.2}
      .modal{padding:0; align-items:flex-end}
      .modal-card{width:100%; border-radius:28px 28px 0 0; max-height:92vh; padding:18px 14px 28px}
      .modal-grid{grid-template-columns:1fr}
      .upload-grid,.status-grid{grid-template-columns:1fr}
      .title-row{padding:0}
      .mobile-search{display:grid; place-items:center; width:52px;height:52px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line); color:#fff}
      .section-top-flex{display:flex; align-items:flex-start; gap:10px; justify-content:space-between}
      .heading-card{padding:0}
      .online-card.desktop-clone,.rank-card.desktop-clone,.trend-card.desktop-clone,.group-card.desktop-clone,.guild-card.desktop-clone{display:none}
    }
    @media (max-width: 600px){
      .brand img{width:150px}
      .coin-box{padding:0 10px; gap:8px}
      .coin-value b{font-size:15px}
      .coin-value span{font-size:12px}
      .icon-btn{width:48px;height:48px; border-radius:16px}
      .topbar-right .profile-chip{padding:4px 4px 4px 4px}
      .heading h1{font-size:22px}
      .heading p{font-size:14px}
      .stories-strip{padding-bottom:2px}
      .story-chip{min-width:82px; max-width:82px}
      .story-ring{width:82px;height:82px}
      .composer-card{padding:14px}
      .composer-top{display:block}
      .composer-top .avatar-ring{margin-bottom:12px}
      .compose-input{padding:16px; min-height:60px; font-size:16px}
      .composer-actions{grid-template-columns:repeat(2,1fr); gap:8px}
      .action-pill{padding:12px 10px; flex-direction:column; gap:7px}
      .post-head{gap:8px}
      .user-inline{gap:10px}
      .user-meta h3{font-size:16px}
      .post-copy{font-size:15px}
      .post-gallery{grid-template-columns:1fr 1fr 1fr}
      .post-gallery .big{grid-column:span 3; grid-row:1; min-height:260px}
      .post-gallery .wide-2,.post-gallery .stack-item{min-height:100px}
      .overlay-count{width:58px;height:58px; font-size:30px}
      .feed-action{font-size:15px}
      .donate-box{width:100%; justify-content:center; margin-left:0}
      .stats-band{padding:14px}
      .stats-band .stat{justify-content:flex-start; padding:6px 4px; border-right:none}
      .cosplayers-toolbar{display:grid; grid-template-columns:1fr 1fr}
      .search-wrap{grid-column:1/-1}
      .filter-select{min-width:auto; width:100%}
      .follow-btn{padding:12px 16px}
      .cosplayer-row{grid-template-columns:1fr}
      .cosplayer-row .follow-btn{width:100%}
    }

/* ==========================================================================
   PREMIUM MOBILE ECOSYSTEM: FEED, DIRECTORY, CREATE SCREEN OVERRIDES
   ========================================================================== */

@media (max-width: 860px) {
  .desktop-layout-container {
    display: none !important;
  }
  .mobile-layout-container {
    display: block !important;
    padding-bottom: 90px;
  }
  .mobile-header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    user-select: none;
  }
  .mobile-header-title svg {
    width: 16px;
    height: 16px;
    color: var(--pink);
    transition: transform 0.2s;
  }
  .header-dropdown-menu {
    position: absolute;
    top: 55px;
    left: 14px;
    background: rgba(12, 16, 33, 0.98);
    border: 1px solid rgba(255, 46, 155, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-radius: 16px;
    z-index: 200;
    min-width: 240px;
    display: none;
    flex-direction: column;
    padding: 6px;
  }
  .header-dropdown-menu.show {
    display: flex;
  }
  .header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #cfd5f2;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: 0.2s;
  }
  .header-dropdown-item:hover, .header-dropdown-item.active {
    background: rgba(255, 46, 155, 0.15);
    color: #fff;
  }
  .mobile-header-sub {
    font-size: 13px;
    color: var(--soft);
    margin: 4px 0 0;
  }
  .mobile-search-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .subheader-tabs {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subheader-tabs button {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--soft);
    padding: 8px 12px;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
  }
  .subheader-tabs button.active {
    color: #fff;
    border-bottom: 2px solid var(--pink);
  }
  .subheader-tabs button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }
  .mobile-stories-strip {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .mobile-story-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
    text-decoration: none;
  }
  .mobile-story-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--pink); background: #ff2e9b; animation: premiumColorChange 8s ease-in-out infinite;
    padding: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .mobile-story-ring.live::after {
    content: 'LIVE';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff214b, #ff4bb3);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #080b18;
  }
  .mobile-story-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .mobile-story-chip span {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px;
    text-align: center;
    max-width: 68px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .composer-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
  }
  .composer-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    color: #cfd5f2;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
  }
  .composer-quick-btn svg {
    width: 14px;
    height: 14px;
    color: var(--pink);
  }
  .mobile-post-gallery {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 6px;
    border-radius: 18px;
    overflow: hidden;
    margin-top: 12px;
  }
  .mobile-post-gallery .main-img {
    height: 240px;
    object-fit: cover;
    width: 100%;
  }
  .mobile-post-gallery .side-imgs {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 240px;
  }
  .mobile-post-gallery .side-imgs img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .mobile-post-gallery .more-overlay {
    position: relative;
  }
  .mobile-post-gallery .more-overlay::before {
    content: attr(data-count);
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    backdrop-filter: blur(2px);
  }
  .mobile-directory-search {
    position: relative;
    width: 100%;
    margin-top: 14px;
  }
  .mobile-directory-search input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px 14px 12px 42px;
    color: #fff;
    font-size: 14px;
    outline: none;
  }
  .mobile-directory-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--pink);
  }
  .mobile-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
  }
  .mobile-filters-grid select {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    color: #cfd5f2;
    padding: 8px 6px;
    font-size: 13px;
    outline: none;
  }
  .mobile-filter-settings-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    display: grid;
    place-items: center;
  }
  .mobile-podium-card {
    border: 1px solid rgba(255, 46, 155, 0.2);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(38, 12, 50, 0.8), rgba(12, 10, 26, 0.95));
    padding: 20px 14px;
    margin-top: 16px;
  }
  .podium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
  }
  .podium-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .podium-header h3 svg {
    color: var(--gold);
  }
  .podium-flex {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 10px;
    align-items: end;
    text-align: center;
    padding-top: 14px;
  }
  .podium-spot {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .podium-spot .avatar-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 2px;
    position: relative;
  }
  .podium-spot.first .avatar-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    box-shadow: 0 0 20px rgba(255, 191, 54, 0.4);
  }
  .podium-spot.second .avatar-wrapper {
    background: linear-gradient(135deg, #b0c4de, #708090);
  }
  .podium-spot.third .avatar-wrapper {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
  }
  .podium-spot img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #141125;
  }
  .podium-spot .rank-num {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    border: 2px solid #141125;
  }
  .podium-spot.first .rank-num { background: #ffbf36; color: #5b3600; }
  .podium-spot.second .rank-num { background: #b0c4de; color: #1e2836; }
  .podium-spot.third .rank-num { background: #cd7f32; color: #fff; }
  .podium-spot .name {
    font-size: 12px;
    font-weight: 700;
    margin-top: 14px;
    color: #fff;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .podium-spot .xp {
    font-size: 11px;
    font-weight: 800;
    color: var(--pink);
    margin-top: 2px;
  }
  .mobile-stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 14px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    margin-top: 14px;
    text-align: center;
  }
  .mobile-stats-band .stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .mobile-stats-band .stat-box svg {
    width: 20px;
    height: 20px;
    color: var(--pink);
  }
  .mobile-stats-band .stat-box b {
    font-size: 13px;
    color: #fff;
    font-weight: 800;
  }
  .mobile-stats-band .stat-box span {
    font-size: 9px;
    color: var(--soft);
  }
  .upload-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
  }
  .upload-card-select {
    border-radius: 18px;
    background: rgba(255,255,255,0.02);
    border: 1.5px solid rgba(255,255,255,0.06);
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .upload-card-select.pink { border-color: rgba(255, 46, 155, 0.4); }
  .upload-card-select.pink:hover, .upload-card-select.pink.selected { background: rgba(255, 46, 155, 0.08); border-color: var(--pink); box-shadow: var(--shadow-pink); }
  .upload-card-select.cyan { border-color: rgba(22, 215, 255, 0.4); }
  .upload-card-select.cyan:hover, .upload-card-select.cyan.selected { background: rgba(22, 215, 255, 0.08); border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
  .upload-card-select.purple { border-color: rgba(211, 79, 255, 0.4); }
  .upload-card-select.purple:hover, .upload-card-select.purple.selected { background: rgba(211, 79, 255, 0.08); border-color: var(--magenta); }
  .upload-card-select svg {
    width: 24px;
    height: 24px;
  }
  .upload-card-select.pink svg { color: var(--pink); }
  .upload-card-select.cyan svg { color: var(--cyan); }
  .upload-card-select.purple svg { color: var(--magenta); }
  .upload-card-select b {
    font-size: 13px;
    color: #fff;
    display: block;
  }
  .upload-card-select span {
    font-size: 10px;
    color: var(--soft);
  }
  .selectable-tags-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-top: 8px;
  }
  .tag-pill-select {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    color: var(--soft);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .tag-pill-select.selected {
    background: rgba(255, 46, 155, 0.15);
    border-color: var(--pink);
    color: #fff;
  }
  .stage-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  .stage-card-select {
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .stage-card-select svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
  }
  .stage-card-select.selected {
    border-color: var(--pink);
    background: rgba(255, 46, 155, 0.12);
  }
  .stage-card-select.selected svg { color: var(--pink); }
  .stage-card-select b {
    font-size: 12px;
    color: #fff;
  }
  .stage-card-select span {
    font-size: 9px;
    color: var(--soft);
  }
  .toggle-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-giant-publish-btn {
    width: 100%;
    background: linear-gradient(90deg, #ff1472, #ff2a8d);
    color: #fff;
    border-radius: 28px;
    padding: 15px;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    box-shadow: 0 10px 24px rgba(255,42,141,0.3);
    cursor: pointer;
    margin-top: 20px;
  }
  .mobile-giant-publish-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .publish-info-sub {
    text-align: center;
    font-size: 11px;
    color: var(--soft);
    margin-top: 8px;
  }
  .mobile-bottom-fab {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff1472, #914cff);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(255, 20, 114, 0.4);
    z-index: 1000;
    border: none;
    cursor: pointer;
  }
  .mobile-bottom-fab svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
  }
}


/* --- PREMIUM UNICOLOR TRANSITION & DOUBLE GLOW FOR TOP 1 --- */
@keyframes premiumColorChange {
  0% {
    background: #ff2e9b !important;
    box-shadow: 0 0 14px rgba(255, 46, 155, 0.45) !important;
  }
  33% {
    background: #d34fff !important;
    box-shadow: 0 0 14px rgba(211, 79, 255, 0.4) !important;
  }
  66% {
    background: #16d7ff !important;
    box-shadow: 0 0 14px rgba(22, 215, 255, 0.4) !important;
  }
  100% {
    background: #ff2e9b !important;
    box-shadow: 0 0 14px rgba(255, 46, 155, 0.45) !important;
  }
}

@keyframes premiumColorChangeDouble {
  0% {
    background: #ffe07c !important;
    box-shadow: 0 0 35px 6px rgba(255, 191, 54, 0.95), 0 0 18px rgba(255, 191, 54, 0.6) !important;
  }
  33% {
    background: #ff8c00 !important;
    box-shadow: 0 0 35px 6px rgba(255, 140, 0, 0.95), 0 0 18px rgba(255, 140, 0, 0.6) !important;
  }
  66% {
    background: #ffd700 !important;
    box-shadow: 0 0 35px 6px rgba(255, 215, 0, 0.95), 0 0 18px rgba(255, 215, 0, 0.6) !important;
  }
  100% {
    background: #ffe07c !important;
    box-shadow: 0 0 35px 6px rgba(255, 191, 54, 0.95), 0 0 18px rgba(255, 191, 54, 0.6) !important;
  }
}

/* Double illumination for Top 1 / First Spot in Podium */
.podium-spot.first .avatar-wrapper {
  animation: premiumColorChangeDouble 5.5s ease-in-out infinite !important;
  border: none !important;
}

/* Double illumination for Top 1 creators in sidebar list (desktop) and search list */
.rank-item:first-child img, .cosplayer-row:first-child img {
  animation: premiumColorChangeDouble 5.5s ease-in-out infinite !important;
  border: 2.5px solid #ffbf36 !important;
}