/* style.css — Dark, sharp, compact (Ad Bull) */
:root{
  --bg:#0b0d12; --bg-elev:#11141b; --ink:#e6e7ea; --muted:#9aa0a6;
  --accent:#7c3aed; --accent-2:#06b6d4; --accent-3:#ef4444;
  --card:#0e1117; --line:#1c2230; --ok:#22c55e; --warn:#f59e0b;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  --fs-1:12px; --fs-2:13px; --fs-3:15px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-2)/1.5 var(--font)}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--bg-elev);border-right:1px solid var(--line);padding:14px}
.main{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.topbar{display:grid;grid-template-columns:1fr 2fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.brand .logo{color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:.2px}
.searchbar .search{width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);padding:10px 12px;outline:none;font-size:var(--fs-2)}
.searchbar .search::placeholder{color:var(--muted)}
.userbox{display:grid;grid-auto-flow:column;gap:10px;align-items:center}
.userbox .avatar{width:28px;height:28px;object-fit:cover;display:inline-block;border:1px solid var(--line)}
.userbox .username{color:var(--muted);font-size:var(--fs-1)}
.btn{display:inline-block;padding:8px 12px;background:var(--accent);color:#fff;text-decoration:none;border:1px solid transparent;font-weight:600;text-transform:uppercase;font-size:var(--fs-1);letter-spacing:.4px}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn:hover{filter:brightness(1.08)}
.content{padding:18px}
.footer{color:var(--muted);border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center;font-size:var(--fs-1)}
.footer a{color:var(--muted);text-decoration:none}
.footer .dot{opacity:.6}

/* Sidebar nav */
.nav{display:grid;gap:6px}
.nav .title{text-transform:uppercase;color:var(--muted);font-size:11px;letter-spacing:.7px;margin:10px 4px}
.nav a{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;text-decoration:none;color:var(--ink);padding:8px 10px;border:1px solid transparent;background:transparent}
.nav a:hover{background:var(--card);border-color:var(--line)}
.nav a.active{background:linear-gradient(90deg, rgba(124,58,237,.16), transparent);border-color:var(--line)}
.nav .pill{font-size:10px;padding:2px 6px;border:1px solid var(--line);color:var(--muted)}

/* Cards / blocks */
.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);padding:16px}
.card h3{margin:0 0 10px 0;font-size:var(--fs-3)}
.meta{color:var(--muted);font-size:var(--fs-1)}
.big{font-size:28px;font-weight:800;letter-spacing:.3px}

/* Responsive */
@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:2}
  .topbar{grid-template-columns:1fr;gap:8px}
}
.pill.hot {
  background: linear-gradient(90deg, rgba(239,68,68,.25), transparent);
  border-color: rgba(239,68,68,.6);
  font-weight: 700;
}
.ad-card, .feat-card, .sim-card { opacity:1 !important; visibility:visible !important; }
