:root{
    --bg: #f6f8fb;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #0b79d0;
    --accent-2: #06b6d4;
    --text: #0f172a;
    --sidebar: #0b1320;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(12,16,24,0.08);
    --sidebar-width: 260px;
  }
  
  [data-theme="dark"]{
    --bg: #071022;
    --card: #0f1724;
    --muted: #9aa4b2;
    --accent: #22d3ee;
    --accent-2: #34d399;
    --text: #e6eef6;
    --sidebar: #071022;
    --shadow: 0 8px 30px rgba(2,6,23,0.7);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; font-family:Inter,system-ui,Arial,"Helvetica Neue",sans-serif; }
  body{ background: linear-gradient(180deg,var(--bg), rgba(0,0,0,0.02)); color:var(--text); min-height:100vh; overflow-x:hidden; }
  
  /* App grid */
  .app { display:grid; grid-template-columns:var(--sidebar-width) 1fr; gap:20px; padding:20px; transition:all .22s ease; }
  .app.sidebar-collapsed { grid-template-columns:64px 1fr; }
  
  @media (max-width:900px){ .app{ grid-template-columns:1fr; padding:14px; } }
  
  /* Sidebar */
  .sidebar { background: linear-gradient(180deg,var(--sidebar), rgba(0,0,0,0.03)); color:#fff; border-radius:var(--radius); padding:18px; min-height:72vh; box-shadow:var(--shadow); display:flex;flex-direction:column; gap:18px; position:relative; transition:transform .28s ease; }
  .logo{ width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid;place-items:center;font-weight:800;color:white;font-size:18px; }
  .nav { display:flex;flex-direction:column; gap:8px; margin-top:8px; }
  .nav button { background:transparent;border:0;color:rgba(255,255,255,0.95);text-align:left;padding:10px;border-radius:10px; display:flex;gap:12px;align-items:center; cursor:pointer; font-weight:600; font-size:15px; }
  .nav button:hover{ background:rgba(255,255,255,0.04); }
  
  /* Main */
  .main { display:flex;flex-direction:column; gap:18px; }
  .topbar { display:flex;align-items:center;justify-content:space-between; gap:12px; }
  .search{ display:flex;align-items:center;background:var(--card);padding:10px;border-radius:12px;box-shadow:var(--shadow); min-width:240px; }
  .search input{ border:0;background:transparent;outline:none;font-weight:500;color:var(--text); width:320px; max-width:60vw; }
  
  /* Avatar */
  .avatar{ width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#cfeffb,#e6fff5);display:grid;place-items:center;font-weight:700;color:var(--sidebar); overflow:hidden; cursor:pointer; }
  .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  
  /* Cards grid */
  .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:start; }
  @media (max-width:1200px){ .cards{ grid-template-columns:repeat(3,1fr) } }
  @media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr) } }
  @media (max-width:520px){ .cards{ grid-template-columns:1fr } }
  
  .card{ background:var(--card); border-radius:12px; padding:18px; box-shadow:var(--shadow); cursor:pointer; transition:transform .18s,box-shadow .18s; display:flex;flex-direction:column; gap:12px; min-height:120px; }
  .card:hover{ transform:translateY(-6px) }
  .card h4{ margin:0; display:flex; align-items:center; gap:8px; font-size:18px; color:var(--accent); }
  .card .desc{ color:var(--muted); font-size:13px; margin-top:6px; }
  
  .btn{ padding:8px 12px; border-radius:10px; border:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700; cursor:pointer; }
  .ghost{ background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--text); font-weight:600; padding:8px 12px; border-radius:10px; }
  .small{ font-size:13px; color:var(--muted); }

  

  .counter-wrapper {
    display: flex;
    gap: 50px;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
  }

  .counter-container {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
  }

  .counter-container.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .counter {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, #ffd700, #00fff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    cursor: default;
    transition: transform 0.3s, text-shadow 0.3s;
  }

  .counter-label {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-top: 5px;
  }

  .counter:hover {
    transform: scale(1.2);
    text-shadow: 0 0 20px rgba(255,255,255,0.6);
  }

  @media(max-width:768px){
    .counter-wrapper {
      gap: 20px;
    }
    .counter {
      font-size: 2.5rem;
    }
  }