/* ==============================================
   ACEKILL.PL — Stylesheet
   Dark gaming · Rajdhani (display) + Exo 2 (body)
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────── */
:root {
  --bg-deep:    #06080d;
  --bg-main:    #0b0e17;
  --bg-card:    #0f1420;
  --bg-sidebar: #080b14;

  --accent:     #f97316;
  --accent-dim: #c2570d;
  --accent-glow:rgba(249,115,22,.25);
  --accent-soft:rgba(249,115,22,.08);

  --green:      #22c55e;

  --text-1: #eef0f5;
  --text-2: #8a93a8;
  --text-3: #4a5268;

  --border:        rgba(249,115,22,.12);
  --border-strong: rgba(249,115,22,.3);
  --border-subtle: rgba(255,255,255,.05);

  --sidebar-w:  264px;
  --sr-w:       54px;

  --r:   8px;
  --r-lg:14px;
  --ease:.22s cubic-bezier(.4,0,.2,1);

  --fd: 'Rajdhani', sans-serif;
  --fb: 'Exo 2',    sans-serif;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg-deep); color:var(--text-1);
  font-family:var(--fb); font-weight:400; line-height:1.6;
  min-height:100vh; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(249,115,22,.06) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at -5% 50%,  rgba(249,115,22,.04) 0%, transparent 60%);
}
a { color:var(--accent); text-decoration:none; transition:color var(--ease); }
a:hover { color:#ffb347; }
img { display:block; max-width:100%; }
button { font-family:var(--fb); cursor:pointer; }

/* ── Layout ─────────────────────────────────── */
.layout { display:flex; min-height:100vh; }

/* ── Left sidebar ───────────────────────────── */
.sidebar-left {
  width:var(--sidebar-w); background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:100; overflow-y:auto; overflow-x:hidden;
  transition:transform var(--ease);
}
.sidebar-left::-webkit-scrollbar { width:3px; }
.sidebar-left::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:2px; }

.sl-logo { padding:24px 20px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sl-logo-img {
  height:60px; width:100%; max-width:180px;
  background:var(--accent-soft); border:1px dashed var(--border-strong);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:22px; font-weight:700;
  letter-spacing:2px; color:var(--accent); text-transform:uppercase;
  transition:background var(--ease);
}
.sl-logo-img:hover { background:rgba(249,115,22,.14); color:var(--accent); }
.sl-logo-img span  { color:var(--text-1); }

.sl-steam-banner { padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sl-steam-btn {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#1b2838,#2a475e);
  border:1px solid #3d6484; border-radius:var(--r);
  padding:10px 14px; width:100%; text-decoration:none;
  transition:all var(--ease);
}
.sl-steam-btn:hover { border-color:#5b9ac4; transform:translateY(-1px); }
.sl-steam-btn-text { display:flex; flex-direction:column; gap:1px; }
.sl-steam-btn-label { font-size:10px; color:#8ab4cc; text-transform:uppercase; letter-spacing:.8px; line-height:1; }
.sl-steam-btn-title { font-size:13px; color:#c6d4df; font-family:var(--fd); font-weight:600; line-height:1; }

.sl-user-mini {
  padding:14px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0; display:flex; align-items:center; gap:10px;
}
.sl-user-mini-avatar {
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--accent); object-fit:cover; flex-shrink:0;
  background:var(--bg-card); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:14px; font-weight:700; color:var(--accent);
}
.sl-user-mini-name {
  font-family:var(--fd); font-weight:600; font-size:14px; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sl-user-mini-rank { font-size:11px; color:#f59e0b; font-weight:600; margin-top:1px; }

.sl-nav { flex:1; padding:10px 12px; }
.sl-nav-section { margin-bottom:4px; }
.sl-nav-label {
  font-size:10px; font-weight:600; color:var(--text-3);
  text-transform:uppercase; letter-spacing:1.2px; padding:10px 8px 4px;
}
.sl-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r);
  color:var(--text-2); font-family:var(--fd); font-size:15px; font-weight:500;
  letter-spacing:.4px; text-decoration:none;
  border:1px solid transparent; margin-bottom:2px;
  transition:all var(--ease); position:relative;
}
.sl-nav-item:hover  { color:var(--text-1); background:var(--accent-soft); border-color:var(--border); }
.sl-nav-item.active { color:var(--accent);  background:var(--accent-soft); border-color:var(--border-strong); }
.sl-nav-item.active::before {
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:60%; background:var(--accent); border-radius:0 2px 2px 0;
}
.sl-nav-item svg { width:18px; height:18px; flex-shrink:0; opacity:.8; }
.sl-nav-item:hover svg, .sl-nav-item.active svg { opacity:1; }
.sl-nav-badge {
  margin-left:auto; font-size:10px; font-weight:700;
  background:var(--accent); color:#000; padding:2px 6px; border-radius:20px;
}
.sl-nav-ext-icon { margin-left:auto; opacity:.4; width:12px !important; height:12px !important; }

.sl-social { padding:14px 20px; border-top:1px solid var(--border); flex-shrink:0; }
.sl-social-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; font-weight:600; }
.sl-social-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.sl-social-item {
  display:flex; align-items:center; justify-content:center; height:38px;
  border-radius:var(--r); border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-3); text-decoration:none;
  transition:all var(--ease);
}
.sl-social-item:hover { border-color:var(--border-strong); background:var(--accent-soft); color:var(--accent); transform:translateY(-2px); }
.sl-social-item svg { width:16px; height:16px; }

/* ── Main content ───────────────────────────── */
.main-content { flex:1; margin-left:var(--sidebar-w); margin-right:var(--sr-w); min-height:100vh; }
.content-inner { padding:32px 28px; max-width:1100px; margin:0 auto; }

/* ── Right sidebar — icon strip ─────────────── */
.sr-strip {
  width:var(--sr-w); background:var(--bg-sidebar); border-left:1px solid var(--border);
  position:fixed; top:0; right:0; bottom:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:4px;
}
.sr-icon-btn {
  width:38px; height:38px; border-radius:10px;
  border:1px solid transparent; background:transparent; color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--ease); position:relative; flex-shrink:0; text-decoration:none;
}
.sr-icon-btn svg { width:18px; height:18px; }
.sr-icon-btn:hover, .sr-icon-btn.active { background:var(--bg-card); border-color:var(--border); color:var(--text-1); }
.sr-icon-btn.coins { color:#f59e0b; }
.sr-icon-btn.coins:hover { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); }
.sr-avatar-img { width:30px; height:30px; border-radius:8px; object-fit:cover; }
.sr-coins-badge {
  position:absolute; bottom:-4px; right:-6px;
  background:#f59e0b; color:#000;
  font-size:8px; font-weight:700; font-family:var(--fd);
  border-radius:8px; padding:1px 4px; max-width:52px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-spacer { flex:1; }

/* Floating panels */
.sr-panel {
  position:fixed; top:0; right:var(--sr-w); bottom:0; width:300px;
  background:var(--bg-sidebar); border-left:1px solid var(--border);
  z-index:199; display:flex; flex-direction:column;
  transform:translateX(calc(100% + var(--sr-w)));
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.sr-panel.open { transform:translateX(0); }
.sr-panel::-webkit-scrollbar { width:3px; }
.sr-panel::-webkit-scrollbar-thumb { background:var(--border-strong); }
.sr-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 14px; font-family:var(--fd); font-size:13px; font-weight:700; color:var(--text-1);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg-sidebar); z-index:1; flex-shrink:0;
}
.sr-panel-close { background:none; border:none; color:var(--text-3); font-size:14px; padding:4px 6px; border-radius:4px; transition:color var(--ease); }
.sr-panel-close:hover { color:var(--text-1); }
.sr-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:198; }
.sr-backdrop.active { display:block; }

/* Guest */
.sr-guest-block { display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 18px; }
.sr-guest-avatar {
  width:72px; height:72px; border-radius:50%;
  border:2px solid var(--border-strong); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center; color:var(--text-3);
}
.sr-guest-avatar svg { width:36px; height:36px; }
.sr-guest-text { text-align:center; }
.sr-guest-text h3 { font-family:var(--fd); font-size:16px; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.sr-guest-text p  { font-size:12px; color:var(--text-3); line-height:1.5; }
.sr-steam-btn-full {
  display:flex; align-items:center; gap:10px; justify-content:center;
  background:linear-gradient(135deg,#1b2838,#2a475e); border:1px solid #3d6484;
  border-radius:var(--r); padding:12px 18px; width:100%;
  text-decoration:none; font-family:var(--fd); font-weight:700;
  font-size:13px; color:#c6d4df; letter-spacing:.5px; transition:all var(--ease);
}
.sr-steam-btn-full:hover { border-color:#5b9ac4; transform:translateY(-1px); box-shadow:0 4px 16px rgba(91,154,196,.2); }

/* User profile */
.sr-profile-top { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); }
.sr-profile-avatar { width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.sr-profile-avatar-letter {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-deep); border:2px solid var(--border);
  font-family:var(--fd); font-size:18px; font-weight:700; color:var(--accent);
}
.sr-profile-name { font-family:var(--fd); font-size:14px; font-weight:700; color:var(--text-1); }
.sr-profile-status { font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:5px; margin-top:2px; }
.dot-green { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 4px var(--green); display:inline-block; }
.sr-coins-row {
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 18px 0; padding:12px 14px;
  background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(249,115,22,.1));
  border:1px solid rgba(245,158,11,.3); border-radius:10px;
}
.sr-fields { padding:14px 18px; display:flex; flex-direction:column; }
.sr-field { margin-bottom:12px; }
.sr-field-label { font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.sr-field input {
  width:100%; background:var(--bg-deep); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text-1); font-family:var(--fb);
  font-size:12px; padding:8px 10px; outline:none; box-sizing:border-box;
  transition:border-color var(--ease);
}
.sr-field input:focus { border-color:var(--accent); }
.sr-field-note  { font-size:10px; color:var(--text-3); margin-top:4px; line-height:1.4; }
.sr-field-link  { font-size:10px; color:var(--accent); text-decoration:none; margin-top:3px; display:inline-block; }
.sr-field-link:hover { text-decoration:underline; }
.sr-save-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--accent); color:#fff; font-family:var(--fd); font-size:13px; font-weight:700;
  border:none; border-radius:var(--r); padding:10px;
  margin:0 18px 8px; width:calc(100% - 36px); transition:all var(--ease);
}
.sr-save-btn:hover { background:#fb923c; transform:translateY(-1px); }
.sr-logout-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  color:var(--text-3); font-family:var(--fb); font-size:12px;
  background:transparent; border:1px solid var(--border);
  border-radius:var(--r); padding:8px;
  margin:0 18px 18px; width:calc(100% - 36px);
  text-decoration:none; transition:all var(--ease);
}
.sr-logout-btn:hover { border-color:#ef4444; color:#ef4444; }

/* ── Buttons ────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r);
  font-family:var(--fd); font-size:14px; font-weight:600; letter-spacing:.4px;
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
  transition:all var(--ease);
}
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:#fb923c; color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); }
.btn-outline  { background:transparent; color:var(--accent); border-color:var(--accent); }
.btn-outline:hover  { background:var(--accent-soft); transform:translateY(-1px); }
.btn-ghost    { background:var(--bg-card); color:var(--text-2); border-color:var(--border); }
.btn-ghost:hover    { border-color:var(--border-strong); color:var(--text-1); transform:translateY(-1px); }
.btn:disabled { opacity:.45; pointer-events:none; }

/* ── Cards ──────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; }

/* ── Badges ─────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:600; font-family:var(--fb);
  border:1px solid transparent;
}
.badge-orange { background:rgba(249,115,22,.15); color:var(--accent);  border-color:rgba(249,115,22,.3); }
.badge-blue   { background:rgba(59,130,246,.15);  color:#60a5fa;        border-color:rgba(59,130,246,.3); }
.badge-green  { background:rgba(34,197,94,.15);   color:var(--green);   border-color:rgba(34,197,94,.3); }

/* ── Grids ──────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ── Stats ──────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.stat-card  { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; text-align:center; }
.stat-value { font-family:var(--fd); font-size:28px; font-weight:700; color:var(--accent); line-height:1; margin-bottom:4px; }
.stat-label { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; font-weight:600; }

/* ── Page header ────────────────────────────── */
.page-header { margin-bottom:24px; }
.page-header-inner { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.page-header-icon {
  width:44px; height:44px; border-radius:var(--r);
  background:var(--accent-soft); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent);
}
.page-header-icon svg { width:22px; height:22px; }
.page-title { font-family:var(--fd); font-size:28px; font-weight:700; color:var(--text-1); line-height:1; }
.page-title span { color:var(--accent); }
.page-subtitle { font-size:13px; color:var(--text-3); margin-top:4px; }
.page-divider { height:1px; background:var(--border); }

/* ── Info banner ────────────────────────────── */
.info-banner {
  display:flex; align-items:flex-start; gap:10px;
  background:var(--accent-soft); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
  font-size:12px; color:var(--text-2); line-height:1.5;
}

/* ── Server cards ───────────────────────────── */
.server-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  position:relative; transition:all var(--ease);
}
.server-card:hover { border-color:var(--border-strong); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.5); }
.server-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.18; transition:opacity .2s; }
.server-card:hover .server-card-bg { opacity:.28; }
.server-card-body { position:relative; z-index:1; padding:16px; }
.server-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:12px; }
.server-card-name { font-family:var(--fd); font-size:14px; font-weight:700; color:var(--text-1); line-height:1.3; }
.server-card-meta { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.server-meta-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.server-meta-row-label { color:var(--text-3); }
.server-meta-row-value { color:var(--text-1); font-weight:500; font-family:var(--fd); }
.server-players-bar { height:3px; background:var(--bg-deep); border-radius:2px; margin-bottom:14px; overflow:hidden; }
.server-players-fill { height:100%; border-radius:2px; background:var(--accent); transition:width 1s ease; }
.server-card-ip {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-deep); border-radius:6px; padding:5px 10px;
  font-family:monospace; font-size:11px; color:var(--text-3); margin-bottom:12px;
}
.server-card-actions { display:flex; gap:8px; }

/* Status badge */
.server-status { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; }
.server-status-dot { width:7px; height:7px; border-radius:50%; }
.server-status.online  .server-status-dot { background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,.6); }
.server-status.online  { color:#4ade80; }
.server-status.offline .server-status-dot { background:#f87171; }
.server-status.offline { color:#f87171; }

/* ── Hero banners (index) ───────────────────── */
.hero-banners { display:grid; grid-template-columns:1fr 320px; gap:12px; margin-bottom:24px; }
.hero-banner {
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  min-height:160px; display:flex; align-items:flex-end;
  text-decoration:none; border:1px solid var(--border);
}
.hero-banner-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-color:var(--bg-card);
  transition:transform .3s ease;
}
.hero-banner:hover .hero-banner-bg { transform:scale(1.03); }
.hero-banner-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(6,8,13,.85) 0%,rgba(6,8,13,.4) 100%); }
.hero-banner-content { position:relative; z-index:1; padding:20px 54px; }
.hero-banner-title { font-family:var(--fd); font-size:20px; font-weight:800; color:var(--text-1); margin-bottom:6px; line-height:1.2; }
.hero-banner-text  { font-size:12px; color:rgba(255,255,255,.7); margin-bottom:14px; line-height:1.5; max-width:380px; }
.hero-banner-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff; font-family:var(--fd); font-size:12px; font-weight:700;
  padding:8px 16px; border-radius:8px; text-decoration:none; border:none;
  transition:all var(--ease);
}
.hero-banner-btn:hover { background:#fb923c; transform:translateY(-1px); }
.hero-banner-sm .hero-banner-title { font-size:16px; }

/* ── Servers header ─────────────────────────── */
.servers-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.servers-online-badge { font-size:12px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.servers-online-badge strong { color:var(--green); }

/* ── Ranking table ──────────────────────────── */
.rank-table { width:100%; border-collapse:collapse; }
.rank-table th {
  font-family:var(--fd); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:var(--text-3);
  padding:10px 14px; text-align:left; border-bottom:1px solid var(--border);
}
.rank-table td {
  padding:12px 14px; font-size:13px; color:var(--text-2);
  border-bottom:1px solid var(--border-subtle); vertical-align:middle;
}
.rank-table tr:last-child td { border-bottom:none; }
.rank-table tr:hover td { background:var(--accent-soft); color:var(--text-1); }
.rank-position { font-family:var(--fd); font-size:16px; font-weight:700; color:var(--text-3); }
.rank-position.gold   { color:#f59e0b; }
.rank-position.silver { color:#94a3b8; }
.rank-position.bronze { color:#b45309; }
.rank-player { display:flex; align-items:center; gap:10px; }
.rank-player-avatar {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg-deep);
  object-fit:cover; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-weight:700; font-size:12px; color:var(--text-3);
}
.rank-player-name { font-family:var(--fd); font-size:14px; font-weight:600; color:var(--text-1); }
.sort-col:hover { color:var(--accent); cursor:pointer; }

/* ── Podium ─────────────────────────────────── */
.podium-wrap { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-bottom:28px; padding:0 8px; }
.podium-item { display:flex; flex-direction:column; align-items:center; flex:1; max-width:160px; }
.podium-crown { font-size:22px; margin-bottom:6px; filter:drop-shadow(0 0 6px #f59e0b88); }
.podium-avatar {
  width:52px; height:52px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fd); font-size:16px; font-weight:700; color:var(--text-3);
  margin-bottom:8px; overflow:hidden;
}
.podium-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.podium-avatar-gold { border-color:#f59e0b; box-shadow:0 0 16px #f59e0b44; color:#f59e0b; width:64px; height:64px; font-size:20px; }
.podium-name { font-family:var(--fd); font-size:11px; font-weight:700; color:var(--text-1); text-align:center; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.podium-pts  { font-size:10px; color:var(--accent); font-weight:600; margin-bottom:8px; }
.podium-block { width:100%; border-radius:8px 8px 0 0; display:flex; flex-direction:column; align-items:center; padding:10px 0 6px; gap:4px; }
.podium-block-1 { background:linear-gradient(180deg,#f59e0b22,#f59e0b11); border:1px solid #f59e0b44; height:70px; }
.podium-block-2 { background:linear-gradient(180deg,#94a3b822,#94a3b811); border:1px solid #94a3b844; height:52px; }
.podium-block-3 { background:linear-gradient(180deg,#b4530922,#b4530911); border:1px solid #b4530944; height:40px; }
.podium-medal  { font-size:18px; }
.podium-pos    { font-family:var(--fd); font-size:11px; font-weight:700; color:var(--text-3); }

/* ── Task cards ─────────────────────────────── */
.task-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px; display:flex; align-items:flex-start; gap:16px; transition:all var(--ease);
}
.task-card:hover { border-color:var(--border-strong); }
.task-icon {
  width:44px; height:44px; border-radius:var(--r);
  background:var(--accent-soft); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.task-info { flex:1; min-width:0; }
.task-name { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.task-desc { font-size:12px; color:var(--text-3); line-height:1.5; margin-bottom:10px; }
.task-progress { height:4px; background:var(--bg-deep); border-radius:2px; overflow:hidden; margin-bottom:6px; }
.task-progress-fill { height:100%; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); border-radius:2px; }
.task-progress-label { font-size:10px; color:var(--text-3); display:flex; justify-content:space-between; }
.task-reward { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.task-done .task-name  { color:var(--text-3) !important; text-decoration:line-through; }
.task-done { border-color:rgba(34,197,94,.2) !important; }
.task-done .task-progress-fill { background:var(--green) !important; }

/* ── Shop items ─────────────────────────────── */
.shop-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; transition:all var(--ease);
}
.shop-item:hover { border-color:var(--border-strong); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.4); }
.shop-item-image {
  height:140px; background:var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.shop-item-image::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 60%,var(--bg-card) 100%);
}
.shop-item-body   { padding:14px; }
.shop-item-name   { font-family:var(--fd); font-size:14px; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.shop-item-desc   { font-size:11px; color:var(--text-3); line-height:1.4; margin-bottom:12px; }
.shop-item-footer { display:flex; align-items:center; justify-content:space-between; }
.shop-item-price  { font-family:var(--fd); font-size:18px; font-weight:700; color:var(--accent); }
.shop-item-price span { font-size:11px; color:var(--text-3); font-family:var(--fb); font-weight:400; }

/* ── Drop cards ─────────────────────────────── */
.drop-card { transition:transform .15s,box-shadow .15s; }
.drop-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.5); }

/* ── Pulse animation ────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.65} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3}  }

/* ── Scroll progress ────────────────────────── */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; z-index:999;
  background:linear-gradient(90deg,var(--accent),#fb923c);
  transition:width .1s linear;
}

/* ── Toasts ─────────────────────────────────── */
.toast-container {
  position:fixed; bottom:20px; right:74px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  background:var(--bg-card); border:1px solid var(--border-strong);
  border-radius:var(--r); padding:12px 16px; min-width:220px;
  font-size:13px; color:var(--text-1); box-shadow:0 8px 32px rgba(0,0,0,.5);
  pointer-events:all; opacity:0; transform:translateY(8px);
  transition:opacity .25s,transform .25s;
}
.toast.visible   { opacity:1; transform:none; }
.toast-success   { border-color:rgba(34,197,94,.4);   background:rgba(34,197,94,.08); }
.toast-error     { border-color:rgba(239,68,68,.4);   background:rgba(239,68,68,.08); }
.toast-warning   { border-color:rgba(245,158,11,.4);  background:rgba(245,158,11,.08); }

.servers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Sidebar overlay (mobile) ───────────────── */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.7); z-index:99; backdrop-filter:blur(2px);
}
.sidebar-overlay.active { display:block; }

/* ── Mobile toggles ─────────────────────────── */
.mobile-toggle-left, .mobile-toggle-right {
  display:none; position:fixed; top:14px; z-index:200;
  width:42px; height:42px; border-radius:var(--r);
  background:transparent; border:none;
  align-items:center; justify-content:center; color:var(--text-2);
  transition:all var(--ease);
}
.mobile-toggle-left  { left:14px; }
.mobile-toggle-right { right:14px; }
.mobile-toggle-left:hover, .mobile-toggle-right:hover { border-color:var(--border-strong); color:var(--text-1); }
.mobile-toggle-right img { width:26px; height:26px; border-radius:50%; object-fit:cover; }

.mobile-logo {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 70px;
  align-items: center;
  justify-content: center;
  z-index: 199;
  pointer-events: auto;
  text-decoration: none;
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.mobile-logo span { color: var(--text-1); }
.mobile-logo em   { font-style: normal; color: var(--text-3); font-size: 11px; font-weight: 400; letter-spacing: 0; }

/* ── Responsive ─────────────────────────────── */
@media (max-width:1200px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-4     { grid-template-columns:repeat(2,1fr); }
  .grid-3     { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .mobile-toggle-left, .mobile-toggle-right { display:flex; }
  .mobile-logo { display:flex; }
  .sidebar-left {
    transform:translateX(-100%); z-index:150;
    width: min(var(--sidebar-w), 85vw);
    left: 0; right: auto;
  }
  .sidebar-left.mobile-open { transform:translateX(0); box-shadow:4px 0 40px rgba(0,0,0,.8); }
  .sr-strip  { display:none; }
  .sr-panel  {
    right:0; transform:translateX(100%);
    width: min(320px, 92vw);
  }
  .sr-panel.open { transform:translateX(0); }
  .main-content { margin-left:0 !important; margin-right:0 !important; }
  .content-inner {
    padding: 20px 16px;
    padding-top: 68px;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    overflow-x: hidden;
  }
  .hero-banners { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }

  /* Quick bar strony głównej — 2x2 na mobile */
  .index-quickbar {
    grid-template-columns: 1fr 1fr !important;
  }
  .index-quickbar > div[style*="width:1px"] {
    display: none !important;
  }
  .index-quickbar > div,
  .index-quickbar > a {
    border-right: 1px solid var(--border-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  .index-quickbar > div:nth-child(2),
  .index-quickbar > a:nth-child(2),
  .index-quickbar > div:nth-child(4),
  .index-quickbar > a:nth-child(4) {
    border-right: none !important;
  }
  .index-quickbar > div:nth-last-child(-n+2),
  .index-quickbar > a:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  /* Serwery — jeden pod drugim na mobile */
  .servers-grid {
    grid-template-columns: 1fr !important;
  }

  /* Zapobiegaj overflow tabeli i innych elementów */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .card { box-sizing:border-box; }
  .page-header-inner { flex-wrap:wrap; gap:10px; }

  /* Server card actions — stack na małych */
  .server-card-actions { flex-wrap:wrap; }
  .server-card-ip { font-size:10px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width:480px) {
  .grid-4 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .podium-avatar { width:40px; height:40px; font-size:12px; }
  .podium-avatar-gold { width:50px; height:50px; }
  .podium-name { font-size:10px; max-width:80px; }

  /* Quick nav — scroll horizontal zamiast zawijania */
  .content-inner { padding:16px 12px; padding-top:66px; }

  /* Formularz pola — pełna szerokość */
  input[type="text"], input[type="number"], input[type="url"],
  input[type="email"], select, textarea {
    font-size:16px !important; /* zapobiega autozoomowi iOS */
  }
}

/* ── Notification strip dot ────────────────── */
.sr-notif-dot {
  position:absolute; top:-3px; right:-3px;
  background:var(--accent); color:#000;
  font-size:8px; font-weight:700; font-family:var(--fd);
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
}

/* ── Notification list ──────────────────────── */
.sr-notif-list { flex:1; }
.sr-notif-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  transition:background var(--ease); position:relative;
}
.sr-notif-item.unread { background:var(--accent-soft); }
.sr-notif-item:hover  { background:rgba(255,255,255,.03); }
.sr-notif-icon  { font-size:18px; flex-shrink:0; margin-top:1px; }
.sr-notif-body  { flex:1; min-width:0; }
.sr-notif-title { font-size:12px; font-weight:600; color:var(--text-1); line-height:1.3; }
.sr-notif-msg   { font-size:11px; color:var(--text-3); margin-top:2px; line-height:1.4; }
.sr-notif-time  { font-size:10px; color:var(--text-3); margin-top:4px; }
.sr-notif-unread-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex-shrink:0; margin-top:5px;
}

/* ── Site footer ─────────────────────────────── */
.site-footer {
  margin-left: var(--sidebar-w);
  margin-right: var(--sr-w);
  background: var(--bg-deep);
}
.site-footer-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 32px 36px 24px;
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}
.site-footer-brand {
  flex: 0 0 auto;
  min-width: 170px;
  max-width: 220px;
}
.site-footer-logo {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.site-footer-logo span { color: var(--text-1); }
.site-footer-logo em   { font-style:normal; color:var(--text-3); font-size:13px; font-weight:400; letter-spacing:0; }
.site-footer-tagline { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 4px; }
.footer-social {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  text-decoration: none;
  color: var(--sc, var(--text-3));
  background: color-mix(in srgb, var(--sc, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, #888) 25%, transparent);
  transition: all .15s;
}
.footer-social:hover {
  background: color-mix(in srgb, var(--sc, #888) 22%, transparent);
  transform: translateY(-2px);
}
.site-footer-links {
  flex: 1 1 auto;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  min-width: 0;
}
.site-footer-col {
  display: flex; flex-direction: column;
  gap: 9px; min-width: 110px;
}
/* Wrapper linków — na desktopie zawsze widoczny jako kolumna */
.site-footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.site-footer-col-title {
  font-family: var(--fd);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1px;
}
.site-footer-col a {
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--ease), transform var(--ease);
  white-space: nowrap;
}
.site-footer-col a:hover { color: var(--text-1); transform: translateX(3px); }
.site-footer-bottom {
  padding: 12px 36px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(0,0,0,.15);
}
.site-footer-bottom a {
  color: var(--text-3); text-decoration: none; transition: color var(--ease);
}
.site-footer-bottom a:hover { color: var(--text-1); }

@media (max-width: 900px) {
  .site-footer {
    margin-left: 0;
    margin-right: 0;
  }
  .site-footer-inner {
    flex-direction: column;
    padding: 28px 20px 20px;
    gap: 20px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 20px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer-brand {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer-brand > div[style] { justify-content: center; }
  .site-footer-links {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .site-footer-col { min-width: 0; gap: 8px; }
  .site-footer-col-links { gap: 8px; }
  .site-footer-col a { font-size: 13px; }
}

/* ── Banner slider ───────────────────────────── */
.hero-slider {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 180px;
}
.hero-slide {
  display: none;
  position: relative;
  min-height: 180px;
  align-items: flex-end;
  text-decoration: none;
}
.hero-slide.active { display: flex; }
.hero-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.hero-slider-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  border: none; cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.hero-slider-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}
.hero-slider-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  transition: background var(--ease);
}
.hero-slider-arrow:hover { background: rgba(0,0,0,.7); }
.hero-slider-arrow.prev { left: 14px; }
.hero-slider-arrow.next { right: 14px; }

/* ═══════════════════════════════════════════════════════════════
   UX PACK v1 — skeleton, ripple, pulse-full, skin-preview, toast-bar
   ═══════════════════════════════════════════════════════════════ */

/* ── Skeleton shimmer ───────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.04) 100%
  );
  background-size: 600px 100%;
  animation: sk-shimmer 1.4s infinite linear;
  border-radius: 6px;
}
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.skeleton-img  { height: 120px; }
.skeleton-body { padding: 14px; display:flex; flex-direction:column; gap:8px; }
.skeleton-line { height: 10px; }
.skeleton-line.w-full { width:100%; }
.skeleton-line.w-3q   { width:75%;  }
.skeleton-line.w-half { width:50%;  }
.skeleton-line.w-q    { width:25%;  }
.skeleton-footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.skeleton-price  { height:18px; width:60px; }
.skeleton-btn    { height:32px; width:72px; border-radius:var(--r); }

/* ── Ripple ─────────────────────────────────────────────────── */
.btn { position:relative; overflow:hidden; }
@keyframes ripple-anim {
  to { transform:scale(4); opacity:0; }
}
.ripple-circle {
  position:absolute; border-radius:50%;
  transform:scale(0); animation:ripple-anim .55s linear;
  background:rgba(255,255,255,.22); pointer-events:none;
}

/* ── Serwer pulsuje gdy pełny (>90%) ────────────────────────── */
@keyframes dot-pulse-fast {
  0%,100% { box-shadow:0 0 4px 0 currentColor; opacity:1; }
  50%      { box-shadow:0 0 10px 3px currentColor; opacity:.6; }
}
.server-status-dot.full {
  background: #f87171 !important;
  color: #f87171;
  animation: dot-pulse-fast .7s ease-in-out infinite;
}
@keyframes card-full-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.0); }
  50%      { box-shadow: 0 0 18px 2px rgba(248,113,113,.18); }
}
.server-card.nearly-full {
  animation: card-full-glow 2s ease-in-out infinite;
  border-color: rgba(248,113,113,.35) !important;
}

/* ── Skin hover preview ─────────────────────────────────────── */
.skin-preview-tooltip {
  position:fixed; z-index:9000; pointer-events:none;
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:14px; overflow:hidden;
  width:200px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  opacity:0; transform:scale(.92) translateY(6px);
  transition:opacity .15s, transform .15s;
}
.skin-preview-tooltip.visible { opacity:1; transform:scale(1) translateY(0); }
.skin-preview-tooltip img {
  width:100%; height:140px; object-fit:contain;
  background:linear-gradient(135deg,var(--bg-deep),var(--bg-card));
  display:block;
}
.skin-preview-tooltip-info { padding:10px 12px; }
.skin-preview-tooltip-name { font-family:var(--fd); font-size:13px; font-weight:700; color:var(--text-1); margin-bottom:3px; }
.skin-preview-tooltip-sub  { font-size:11px; color:var(--text-3); }

/* ── Toast z paskiem postępu (zastępuje stary .toast) ───────── */
.toast {
  padding:0 !important;
  min-width:260px !important;
  overflow:hidden;
}
.toast-inner {
  padding:12px 16px 10px;
  display:flex; align-items:center; gap:10px;
}
.toast-icon { font-size:16px; flex-shrink:0; }
.toast-text { flex:1; font-size:13px; line-height:1.4; color:var(--text-1); }
.toast-bar  {
  height:3px; width:100%;
  background:rgba(255,255,255,.08);
}
.toast-bar-fill {
  height:100%; border-radius:0;
  animation:toast-drain var(--toast-dur,3.8s) linear forwards;
}
@keyframes toast-drain { from{width:100%} to{width:0%} }
.toast-success .toast-bar-fill { background:#22c55e; }
.toast-error   .toast-bar-fill { background:#ef4444; }
.toast-warning .toast-bar-fill { background:#f59e0b; }
.toast-info    .toast-bar-fill { background:#6366f1; }

/* ── AKCoins roll-up (licznik) ──────────────────────────────── */
.coins-rollup-wrap {
  display:inline-block; overflow:hidden; vertical-align:bottom;
}
.coins-rollup-inner {
  display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════════════════════════════
   AK COIN ICON — złota moneta zastępująca 🪙
   Użycie: <span class="ak-coin"></span>
   lub:    <span class="ak-coin sm"></span>  (mały)
   lub:    <span class="ak-coin lg"></span>  (duży)
   ═══════════════════════════════════════════════════════════════ */
.ak-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  1.1em;
  height: 1.1em;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
}
.ak-coin::before {
  content: '';
  display: block;
  width:  100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066 0%, #f5a623 55%, #c47d00 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 2px 4px rgba(0,0,0,.4);
}
.ak-coin::after {
  content: 'AK';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: .44em;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  letter-spacing: -.02em;
  line-height: 1;
}
/* Rozmiary */
.ak-coin.sm { width:.85em; height:.85em; }
.ak-coin.lg { width:1.5em; height:1.5em; }
.ak-coin.xl { width:2em;   height:2em;   font-size:1rem; }

/* Rarity border helper — używaj na .shop-item */
.rarity-border { border-width: 2px !important; }