@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600;800&family=STIX+Two+Text:wght@400;700&display=swap');
.latin{font-family:'STIX Two Text',Georgia,serif}#langToggle{cursor:pointer;font-family:Inter,sans-serif;min-width:52px;text-align:center}.gold,.logo b,.z{font-family:'STIX Two Text',Georgia,serif}
body.hub{margin:0;background:#08080b;color:#f5f5f7;font:16px/1.85 Tajawal,Tahoma,sans-serif;--line:rgba(255,255,255,.11);--muted:#a5a5b1;isolation:isolate;overflow-x:hidden;color-scheme:dark}body.hub *{box-sizing:border-box}body.hub [hidden]{display:none!important}body.hub a{color:inherit;text-decoration:none}body.hub button,body.hub input{font:inherit}body.hub button,body.hub a{touch-action:manipulation}body.hub :focus-visible{outline:2px solid #e2e2eb;outline-offset:5px}body.hub ::selection{background:#d8d8e5;color:#101014}body.hub .sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 0,#ffffff03,transparent 70%)}body.hub .glow{position:absolute;width:650px;height:650px;border-radius:50%;filter:blur(75px);background:radial-gradient(circle,#a0a0b824,transparent 66%);animation:auroraDrift 24s ease-in-out infinite alternate}body.hub .g1{top:-240px;left:calc(50% - 325px)}body.hub .g2{bottom:-260px;right:-180px;animation-delay:-8s}body.hub .g3{top:35%;left:-300px;animation-delay:-16s}body.hub .star{position:absolute;width:2px;height:2px;background:#f5f5ff;border-radius:50%;opacity:.35;animation:starFloat var(--duration) ease-in-out infinite alternate}body.hub .star:nth-child(7n){width:3px;height:3px;box-shadow:0 0 7px #ffffff55}body.hub .shell{width:calc(100% - 252px);max-width:1360px;margin:0 auto;margin-right:252px;padding:55px clamp(22px,4vw,66px) 65px}body.hub .sidebar{position:fixed;right:20px;top:22px;bottom:22px;width:216px;padding:28px 14px;z-index:20;display:flex;flex-direction:column;gap:9px;border:1px solid #ffffff24;border-radius:30px;background:linear-gradient(155deg,#ffffff0c,#ffffff02 55%,#ffffff06);backdrop-filter:blur(32px) saturate(140%);-webkit-backdrop-filter:blur(32px) saturate(140%);box-shadow:inset 0 1px 0 #ffffff1f,inset 1px 0 0 #ffffff08,0 24px 65px #0005;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff25 transparent}body.hub .brand{font:700 22px 'Space Grotesk',sans-serif;letter-spacing:4px;padding:10px 14px;text-shadow:0 0 25px #ffffff22}body.hub .navhint{font-size:12px;color:var(--muted);padding:0 14px 24px;margin-bottom:10px;border-bottom:1px solid var(--line)}body.hub .nav-link{position:relative;border:1px solid transparent;border-radius:17px;padding:13px 16px;color:var(--muted);transition:background .25s,color .25s,border-color .25s,transform .25s}body.hub .nav-link:hover{color:#fff;background:#ffffff08;border-color:#ffffff15;transform:translateX(-3px)}body.hub .nav-link[aria-current=page]{color:#fff;background:linear-gradient(100deg,#ffffff07,#ffffff15);border-color:#ffffff25;box-shadow:inset 0 1px 0 #ffffff17,0 7px 20px #0002;padding-right:28px}body.hub .nav-link[aria-current=page]::before{content:'';position:absolute;width:5px;height:18px;border-radius:9px;right:12px;top:50%;transform:translateY(-50%);background:#e7e7ef;box-shadow:0 0 15px #ffffff55}body.hub .logout{margin-top:auto;color:#efb6bd}body.hub .heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:34px;padding:8px 0 25px;border-bottom:1px solid var(--line);animation:panelEnter .7s ease backwards}body.hub .eyebrow{display:inline-block;color:#aaaab8;font:11px 'Space Grotesk',sans-serif;letter-spacing:3px}body.hub h1{font-size:clamp(36px,5vw,66px);font-weight:900;line-height:1.2;letter-spacing:-1.8px;margin:14px 0;background:linear-gradient(110deg,#fff 25%,#9292a5 50%,#fff 75%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:titleShine 12s linear infinite}body.hub h2{font-size:21px;font-weight:800;margin:0 0 15px;line-height:1.5}body.hub p{margin:8px 0}body.hub .muted{color:var(--muted);font-size:14px;overflow-wrap:anywhere}body.hub .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid #ffffff24;border-radius:999px;background:linear-gradient(145deg,#ffffff0e,#ffffff04);color:#f5f5f7;padding:10px 19px;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff12;transition:background .22s,transform .22s,border-color .22s,box-shadow .22s}body.hub .btn:hover{background:#ffffff16;border-color:#ffffff45;transform:translateY(-2px);box-shadow:0 9px 24px #0003,inset 0 1px 0 #ffffff20}body.hub .btn:active{transform:scale(.97)}body.hub .btn:disabled{opacity:.5;cursor:wait;transform:none}body.hub .card{position:relative;min-width:0;padding:27px;border:1px solid #ffffff1c;border-radius:28px;background:linear-gradient(145deg,#ffffff0b,#ffffff03 65%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #ffffff0d,0 18px 45px #0002;animation:panelEnter .75s cubic-bezier(.2,.7,.2,1) backwards;transition:border-color .28s,box-shadow .28s,transform .28s}body.hub .card:hover{border-color:#ffffff32;box-shadow:inset 0 1px 0 #ffffff15,0 22px 55px #0003}body.hub .grid,body.hub .podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}body.hub .grid .card{padding:28px 25px 24px;overflow:hidden}body.hub .grid .card::after{content:'';position:absolute;width:140px;height:140px;left:-55px;top:-55px;border:1px solid #ffffff0c;border-radius:50%;box-shadow:0 0 0 24px #ffffff02;pointer-events:none;transition:transform .6s}body.hub .grid .card:hover{transform:translateY(-5px)}body.hub .grid .card:hover::after{transform:translate(-8px,10px) scale(1.1)}body.hub .grid .card:nth-child(2){animation-delay:.08s}body.hub .grid .card:nth-child(3){animation-delay:.16s}body.hub .metric{font:700 clamp(24px,3.2vw,39px) 'Space Grotesk',sans-serif;display:block;letter-spacing:-1.4px;margin:20px 0 10px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}body.hub .unit{font:10px 'Space Grotesk',sans-serif;letter-spacing:2px;color:#858594}body.hub .split{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:24px}body.hub .profile{display:flex;gap:30px;align-items:center;min-height:225px;padding:36px;background:radial-gradient(ellipse at 8% 15%,#b6b6cc12,transparent 65%),linear-gradient(130deg,#ffffff0c,#ffffff03);border-color:#ffffff28;overflow:hidden}body.hub .profile::after{content:'Z';position:absolute;left:25px;bottom:-62px;font:700 260px 'Space Grotesk',sans-serif;color:#ffffff03;pointer-events:none;z-index:-1}body.hub .avatar{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#f2f2f8,#b8b8c5);color:#17171d;display:grid;place-items:center;object-fit:cover;font-weight:800;flex-shrink:0;border:1px solid #ffffff26;box-shadow:0 8px 25px #0003}body.hub #picture{position:relative;flex-shrink:0;padding:10px}body.hub #picture::before{content:'';position:absolute;inset:0;border:1px dashed #ffffff35;border-radius:50%;animation:orbit 32s linear infinite;pointer-events:none}body.hub .profile .avatar{width:104px;height:104px;border-radius:34px;box-shadow:0 0 0 5px #ffffff04,0 15px 35px #0004}body.hub .profile-info,body.hub .member-info{min-width:0;flex:1}body.hub .profile-name{font-size:clamp(26px,3.5vw,40px);font-weight:900;margin:8px 0;line-height:1.35;overflow-wrap:anywhere}body.hub .profile-id{font:12px 'Space Grotesk',sans-serif;color:#9696a8;overflow-wrap:anywhere;margin:9px 0;letter-spacing:.4px}body.hub .badge{display:inline-block;border:1px solid #ffffff26;border-radius:999px;padding:4px 14px;font-size:12px;background:#ffffff08;margin-top:0;box-shadow:inset 0 1px 0 #ffffff0a}body.hub .profile .badge{margin-top:10px}body.hub .bar{height:6px;border-radius:99px;background:#ffffff0c;overflow:hidden;margin-top:18px;max-width:440px}body.hub .bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#85859a,#f5f5ff);box-shadow:0 0 12px #ffffff30;transform-origin:right;animation:progressEnter 1.2s ease backwards}body.hub .detail,body.hub .transaction{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid #ffffff0c}body.hub .detail:last-child,body.hub .transaction:last-child{border-bottom:0}body.hub .detail>span{color:var(--muted);font-size:14px}body.hub .detail>b{font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}body.hub .transaction{border-radius:12px;transition:background .25s}body.hub .transaction:hover{background:#ffffff03}body.hub .transaction small{display:block;color:#90909f;font-size:12px;margin-top:5px}body.hub .amount{white-space:nowrap;font:700 17px 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}body.hub .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}body.hub .state{padding:20px 23px;border:1px solid var(--line);border-radius:20px;color:var(--muted);background:#ffffff05;margin-bottom:20px}body.hub .state.error{color:#fecaca;border-color:#f8717144}body.hub .empty{padding:36px 10px;text-align:center;color:var(--muted)}body.hub .podium{align-items:end;margin:34px 0 28px;gap:20px}body.hub .champion{text-align:center;padding:30px 20px;overflow:hidden;min-height:260px}body.hub .champion::before{content:'';position:absolute;inset:-65% -20% auto;height:230px;border-radius:50%;background:radial-gradient(ellipse,#ffffff0c,transparent 65%);pointer-events:none}body.hub .champion .avatar{width:72px;height:72px;border-radius:25px;margin:24px auto 18px;transition:transform .4s}body.hub .champion:hover .avatar{transform:translateY(-5px)}body.hub .champion.first{border-color:#d9cba352;background:radial-gradient(ellipse at 50% 0,#cfc2a01c,transparent 70%),linear-gradient(145deg,#ffffff0b,#ffffff03);box-shadow:inset 0 1px 0 #f3e8c328,0 20px 60px #0004;min-height:300px;padding-top:38px;padding-bottom:38px}body.hub .champion.first .avatar{width:84px;height:84px;border-radius:28px;border-color:#dfcfaa70;box-shadow:0 0 0 6px #d6c39a09,0 12px 32px #0003}body.hub .place{display:inline-flex;align-items:center;justify-content:center;color:#aaaaba;font:700 18px 'Space Grotesk',sans-serif}body.hub .champion>.place{border:1px solid #ffffff1b;background:#ffffff06;border-radius:999px;min-width:47px;min-height:33px;padding:4px 12px}body.hub .first .place{color:#e9d9af;border-color:#dfce9e40;background:#dfce9e09}body.hub .member-name{font-weight:700;overflow-wrap:anywhere;line-height:1.5}body.hub .champion .member-name{font-size:18px}body.hub .score{font:700 22px 'Space Grotesk',sans-serif;margin-top:20px;font-variant-numeric:tabular-nums}body.hub .first .score{color:#efe6cd}body.hub .ranking-row{display:flex;gap:16px;align-items:center;padding:18px 12px;border-bottom:1px solid #ffffff0b;transition:background .22s,border-color .22s;border-radius:15px}body.hub .ranking-row:hover{background:#ffffff05}body.hub .ranking-row:last-child{border-bottom:0}body.hub .ranking-row .place{width:40px;font-size:14px;flex-shrink:0}body.hub .ranking-row .score{font-size:17px;margin:0;white-space:nowrap}body.hub .self{background:linear-gradient(100deg,#ffffff03,#ffffff09);border-radius:16px;padding-inline:14px;outline:1px solid #ffffff14;outline-offset:-1px}body.hub .toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}body.hub .toolbar h2{margin:0}body.hub .search{background:#ffffff05;border:1px solid #ffffff21;color:#fff;border-radius:999px;padding:12px 18px;width:min(100%,310px);min-height:46px;transition:background .25s,border-color .25s}body.hub .search:focus{background:#ffffff09;border-color:#ffffff50}body.hub .search::placeholder{color:#90909f}body.hub .detail-dialog{border-color:#ffffff2a;background:linear-gradient(145deg,rgba(26,26,34,.97),rgba(13,13,18,.97));box-shadow:inset 0 1px 0 #ffffff15,0 40px 120px #0008;animation:panelEnter .3s ease backwards}body.hub .foot{margin-top:42px;padding-top:24px;border-top:1px solid #ffffff0a;text-align:center;color:#777785;font-size:12px}body.hub .sent{color:#efb7c2}body.hub .received{color:#a8dfc7}
@keyframes auroraDrift{to{transform:translate(36px,-26px) scale(1.12)}}@keyframes starFloat{0%{opacity:.15;transform:translate3d(0,0,0)}50%{opacity:.7}100%{opacity:.25;transform:translate3d(20px,-55px,0)}}@keyframes panelEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes titleShine{to{background-position:-220% 0}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes progressEnter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1100px){body.hub .shell{padding:40px 24px 60px}body.hub .split{grid-template-columns:1fr}body.hub .metric{font-size:26px}body.hub .grid{gap:12px}body.hub .profile{padding:28px}}
@media(max-width:760px){body.hub .shell{width:100%;margin-right:0;padding:90px 18px 45px}body.hub .sidebar{display:flex;flex-direction:column;justify-content:flex-start;top:12px;bottom:12px;right:12px;left:auto;margin:0;width:min(285px,calc(100% - 48px));max-width:none;padding:22px 14px;z-index:40;border-radius:28px;background:linear-gradient(145deg,#ffffff12,#ffffff05),rgba(8,8,14,.48);transform:translateX(calc(100% + 30px));visibility:hidden;transition:transform .28s ease,visibility .28s}body.hub .sidebar.open{transform:none;visibility:visible}body.hub .sidebar .brand,body.hub .navhint{display:block}body.hub .nav-link{font-size:15px;padding:13px 16px;text-align:right;white-space:normal}body.hub .nav-link[aria-current=page]{padding-right:28px}body.hub .logout{margin-top:auto}body.hub .nav-close{display:block;align-self:flex-end}body.hub .menu-toggle{background:rgba(255,255,255,.055);border-color:#ffffff25;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:inset 0 1px 0 #ffffff16,0 8px 25px #0004}body.hub .heading{gap:12px;padding-bottom:22px;margin-bottom:24px}body.hub h1{font-size:38px}body.hub .heading .btn{font-size:13px;padding:9px 14px;flex-shrink:0}body.hub .eyebrow{font-size:10px;letter-spacing:2px}body.hub .card{padding:22px;border-radius:24px}body.hub .profile{gap:16px;padding:25px 20px;min-height:205px;align-items:center}body.hub .profile-name{font-size:25px}body.hub .profile .avatar{width:68px;height:68px;border-radius:23px}body.hub #picture{padding:7px}body.hub .profile-id{font-size:11px;letter-spacing:0}body.hub .profile::after{font-size:210px;left:0;bottom:-45px}body.hub .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}body.hub .grid .card{padding:20px 16px}body.hub .grid .card:last-child{grid-column:1/-1}body.hub .metric{font-size:24px;letter-spacing:-1px;margin:14px 0 8px}body.hub .grid .card:last-child .metric{font-size:31px}body.hub .unit{font-size:9px;letter-spacing:1.5px}body.hub .split{gap:18px}body.hub .podium{grid-template-columns:1fr;gap:13px;margin-top:24px}body.hub .champion:nth-child(n){order:initial;display:grid;grid-template-columns:42px 62px minmax(0,1fr);gap:12px;text-align:right;align-items:center;padding:22px;min-height:0}body.hub .champion .avatar,body.hub .champion.first .avatar{width:58px;height:58px;border-radius:20px;margin:0}body.hub .champion .score{grid-column:3;margin:0;font-size:18px}body.hub .champion>.place{min-width:37px;min-height:30px;font-size:14px;padding:3px 7px}body.hub .champion.first{padding-block:27px}body.hub .champion .member-name{font-size:16px}body.hub .champion .profile-id{font-size:10px}body.hub .toolbar{flex-wrap:wrap}body.hub .search{width:100%}body.hub .ranking-row{gap:10px;padding:16px 5px;flex-wrap:wrap}body.hub .ranking-row .avatar{width:40px;height:40px;border-radius:14px}body.hub .ranking-row .score{font-size:14px}body.hub .ranking-row .place{width:28px;font-size:12px}body.hub .ranking-row .profile-id{font-size:10px}body.hub .ranking-row .member-info{flex-basis:90px}body.hub .transaction{align-items:flex-start;padding:18px 0}body.hub .amount{font-size:15px}body.hub .detail-dialog{border-radius:24px}body.hub .detail-dialog .detail{gap:12px}body.hub .detail-dialog .detail b{max-width:65%;font-size:13px}body.hub .foot{margin-top:28px}}
@media(max-width:380px){body.hub .profile{flex-direction:column;text-align:center}body.hub .profile-info{width:100%}body.hub .profile .bar{margin-inline:auto}body.hub .champion:nth-child(n){padding:18px;gap:9px;grid-template-columns:34px 48px minmax(0,1fr)}body.hub .champion .avatar,body.hub .champion.first .avatar{width:46px;height:46px;border-radius:16px}body.hub .grid .muted{font-size:12px}body.hub .metric{font-size:20px}}
@media(prefers-reduced-motion:reduce){body.hub *,body.hub *::before,body.hub *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body.hub h1{background:none;color:#f5f5f7}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.hub .sidebar{background:rgba(18,18,24,.96)}body.hub .card{background:rgba(22,22,28,.9)}}