*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#020711;--panel:#071225;--panel2:#0a1830;--cyan:#22e7ff;--blue:#5d8dff;
--purple:#a36bff;--pink:#ff4bd8;--gold:#ffc83d;--white:#f7fbff;--muted:#8290aa;
--display:"Orbitron",sans-serif;--font:"Inter",sans-serif
}
html{background:var(--bg);scroll-behavior:smooth}
body{
min-width:320px;color:var(--white);font-family:var(--font);font-weight:700;
background:
radial-gradient(circle at 50% -5%,rgba(34,231,255,.16),transparent 30%),
radial-gradient(circle at 100% 35%,rgba(163,107,255,.12),transparent 30%),
linear-gradient(180deg,#020711,#030914 55%,#01040b);
overflow-x:hidden
}
body:before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.18;
background-image:linear-gradient(rgba(34,231,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(34,231,255,.09) 1px,transparent 1px);
background-size:32px 32px
}
.glow{position:fixed;width:180px;height:180px;border-radius:50%;filter:blur(75px);opacity:.18;pointer-events:none;z-index:-1}
.glow-one{top:20%;left:-100px;background:var(--cyan)}
.glow-two{top:55%;right:-100px;background:var(--purple)}
.page{width:100%;max-width:540px;margin:auto;padding:18px 9px 28px}
.hero{text-align:center;padding:4px 5px 20px}
.brand-pill{
display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(34,231,255,.2);
border-radius:99px;background:rgba(7,19,38,.8);color:#9ff5ff;font-family:var(--display);
font-size:9px;font-weight:900;letter-spacing:1.4px
}
.brand-pill i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
h1{
margin-top:17px;font-family:var(--display);font-size:clamp(31px,10vw,52px);font-weight:900;
line-height:1;letter-spacing:-2px;background:linear-gradient(90deg,#fff,#66efff 48%,#a878ff);
-webkit-background-clip:text;background-clip:text;color:transparent
}
.line{width:88px;height:2px;margin:13px auto;background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);box-shadow:0 0 15px var(--cyan)}
h2{font-size:clamp(18px,5.3vw,27px);line-height:1.2;font-weight:900;letter-spacing:-.6px}
.hero p{margin-top:8px;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:1.2px}
.stats{
display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;margin-top:19px;
padding:14px 7px;border:1px solid rgba(34,231,255,.16);border-radius:17px;
background:linear-gradient(145deg,rgba(10,25,49,.9),rgba(3,9,20,.96));box-shadow:0 16px 45px rgba(0,0,0,.28)
}
.stats div{text-align:center;min-width:0}.stats b{display:block;color:var(--cyan);font-family:var(--display);font-size:16px;font-weight:900}
.stats span{display:block;margin-top:5px;color:#74839d;font-size: 8px;font-weight:900;letter-spacing:.45px}.stats em{height:28px;width:1px;background:rgba(255,255,255,.1)}
.ranking-card{overflow:hidden;border:1px solid rgba(34,231,255,.18);border-radius:17px;background:rgba(3,8,18,.88);box-shadow:0 20px 65px rgba(0,0,0,.35)}
.table-head,.member-row{display:grid;grid-template-columns:39px minmax(0,1.45fr) minmax(0,1fr) minmax(0,.88fr);align-items:center}
.table-head{
min-height:40px;background:linear-gradient(90deg,#091a31,#111431,#091a31);border-bottom:1px solid rgba(34,231,255,.22);
position:sticky;top:0;z-index:5;box-shadow:0 5px 20px rgba(0,0,0,.3)
}
.table-head div{text-align:center;color:#91efff;font-family:var(--display);font-size: 8px;font-weight:900;letter-spacing:.3px;padding:0 3px}
.member-row{
min-height:53px;border-bottom:1px solid rgba(255,255,255,.045);
background:linear-gradient(90deg,rgba(7,16,31,.9),rgba(8,17,34,.72))
}
.member-row:nth-child(even){background:linear-gradient(90deg,rgba(9,19,38,.92),rgba(6,14,29,.78))}
.member-row:hover{background:rgba(18,39,66,.95)}
.cell{min-width:0;padding:5px 4px;text-align:center}
.serial span{
display:inline-flex;align-items:center;justify-content:center;width:27px;height:24px;border-radius:7px;
background:rgba(255,255,255,.035);color:#71809a;font-family:var(--display);font-size: 8px;font-weight:900
}
.identity{text-align:left}.identity strong{display:block;overflow:hidden;color:#f4f9ff;font-size:8.7px;font-weight:900;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}
.identity small{display:block;margin-top:3px;overflow:hidden;color:#667792;font-size: 8px;font-weight:800;line-height:1.1;white-space:nowrap;text-overflow:ellipsis}
.badge{
display:inline-flex;align-items:center;justify-content:center;min-height:23px;max-width:100%;padding:4px 5px;
border:1px solid transparent;border-radius:99px;font-size: 8px;line-height:1;font-weight:900;white-space:nowrap;text-align:center
}
.gold{color:#ffd75b;background:rgba(255,200,61,.1);border-color:rgba(255,200,61,.35);box-shadow:0 0 12px rgba(255,200,61,.06)}
.platinum{color:#e2efff;background:rgba(202,224,246,.1);border-color:rgba(202,224,246,.34)}
.diamond{color:#65f4ff;background:rgba(34,231,255,.09);border-color:rgba(34,231,255,.38);box-shadow:0 0 12px rgba(34,231,255,.07)}
.manager{color:#ff7be8;background:rgba(255,75,216,.1);border-color:rgba(255,75,216,.42);box-shadow:0 0 13px rgba(255,75,216,.08)}
.country span{display:block;overflow:hidden;color:#b8c5d9;font-size: 8px;font-weight:900;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}
footer{text-align:center;padding:28px 5px 10px}
footer strong{display:block;color:#a5f6ff;font-family:var(--display);font-size:12px;font-weight:900;letter-spacing:2px}
footer span{display:block;margin-top:7px;color:#71809a;font-size:8px;font-weight:900}
footer small{display:block;margin-top:7px;color:#46546c;font-size: 8px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
@media(max-width:370px){
.page{padding-left:6px;padding-right:6px}
.table-head,.member-row{grid-template-columns:36px minmax(0,1.4fr) minmax(0,.96fr) minmax(0,.82fr)}
.identity strong{font-size:8px}.identity small{font-size:6.2px}.badge{font-size: 8px;padding-left:3px;padding-right:3px}.country span{font-size:6.2px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* === CLEAR MOBILE READABILITY UPDATE === */
.member-row,
.table-head {
    min-height: 46px;
}

.member-row {
    font-size: 8px;
}

.table-head {
    font-size: 8px;
}

.member-no,
.member-country,
.member-name,
.member-username,
.position-badge {
    font-size: 8px;
    line-height: 1.2;
}

.position-badge {
    min-height: 28px;
    padding: 6px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.member-name {
    font-weight: 800;
}

.member-username {
    font-weight: 700;
}

.member-country {
    font-weight: 800;
}

@media (max-width: 380px) {
    .member-row,
    .table-head {
        font-size: 8px;
    }

    .member-no,
    .member-country,
    .member-name,
    .member-username,
    .position-badge {
        font-size: 8px;
    }
}