:root{--bg:#0f1724;--card:#0b1220;--muted:#9aa4b2;--accent:#7c9eff;--accent-2:#4dd0e1}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,system-ui,Arial,Helvetica,sans-serif;margin:0;background:linear-gradient(180deg,#041021 0%,#071226 100%);color:#e6eef8}
.container{max-width:960px;margin:0 auto;padding:24px}
.site-header{background:rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.03)}
.site-header .container{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.site-logo{width:45px !important;height:auto !important;border-radius:8px;object-fit:contain;max-width:120px;display:block}
.brand{display:flex;align-items:center !important;gap:12px;flex-direction:row !important;text-decoration:none;color:inherit}
.brand h1{font-size:20px;margin:0;color:#ffffff;font-weight:800}
.site-header h1{font-size:20px;margin:12px 0}
nav{margin-left:auto}
nav a{color:var(--muted);text-decoration:none;margin-left:16px}
nav a:hover{color:var(--accent)}
.site-footer{margin-top:48px;padding:12px 0;color:var(--muted);font-size:13px}
h2{color:#fff}
#players-status{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#refresh-btn{background:var(--accent);border:none;color:#042033;padding:8px 12px;border-radius:6px;cursor:pointer}
#refresh-btn:hover{opacity:0.9}
.players-list{list-style:none;padding:0;margin:0}
.players-list li{background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:8px;margin-bottom:8px}
.player-item{display:flex;justify-content:space-between;align-items:center}
.player-left{display:flex;align-items:center;gap:12px}
.avatar{width:48px;height:48px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,0.03)}
.player-name{font-weight:600}
.player-meta{font-size:13px;color:var(--muted)}
.player-right{min-width:140px;text-align:right}
.small{font-size:12px}

/* Search input focus */
#players-search:focus{outline:2px solid rgba(124,158,255,0.12);box-shadow:0 0 0 4px rgba(124,158,255,0.04)}

/* Platform badge */
.plat-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted);font-size:12px;margin-left:8px}

/* Player name / avatar alignment */
.player-name{font-weight:700}
.player-meta{font-size:13px;color:var(--muted);margin-top:2px}

/* Responsive tweaks */
@media (max-width:640px){
	.player-right{min-width:100px;font-size:12px}
	.avatar{width:40px;height:40px}
}

/* subtle hover */
.players-list li:hover{background:rgba(255,255,255,0.035)}

/* small utilities */
.muted.small{opacity:0.9}
.muted{color:var(--muted);font-size:14px}
.card{background:rgba(255,255,255,0.02);padding:16px;border-radius:10px}

@media (max-width:640px){.site-header .container{flex-direction:column;align-items:flex-start}nav{margin-left:0}}