diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..a7a1382
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,16 @@
+:root{--bg:#f3f6fb;--card:#fff;--accent:#6c5ce7;--accent2:#4834d4;--muted:#6b7280;--success:#10b981;--danger:#ef4444;}
+.mcss-container{max-width:1100px;margin:28px auto;padding:18px;font-family:Inter,system-ui,sans-serif;color:#111827;}
+.mcss-title{text-align:center;font-size:2rem;color:var(--accent);margin-bottom:18px;font-weight:700;}
+.mcss-card{background:var(--card);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(16,24,40,0.06);margin-bottom:16px;transition:transform .16s ease,box-shadow .16s ease;}
+.mcss-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(16,24,40,0.09);}
+.mcss-online{border-left:6px solid var(--success);}
+.mcss-offline{border-left:6px solid var(--danger);}
+.mcss-player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:14px;}
+.mcss-player-card{background:linear-gradient(180deg,#fff,#f9faff);border-radius:12px;padding:10px;text-align:center;transition:transform .12s ease;}
+.mcss-player-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(12,18,30,0.06);}
+.mcss-player-card img{width:72px;height:72px;border-radius:14px;object-fit:cover;margin-bottom:8px;}
+.mcss-player-name{font-weight:600;color:#0b1220;font-size:0.95rem;}
+.mcss-player-rank{font-weight:700;margin-top:4px;}
+.mcss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;align-items:start;}
+.mcss-badge{display:inline-block;color:#fff;padding:3px 8px;border-radius:999px;font-size:0.8rem;margin-left:8px;}
+@media (max-width:720px){.mcss-player-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}}