:root{
      --accent:#0b63ad;
      --muted:#9aa3ad;
      --card-bg:#ffffff;
      --page-bg:#f3f4f6;
      --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    body{
      background: var(--page-bg);
      font-family: var(--ui-font);
      color:#222;
      padding-bottom:60px;
    }

    /* Top navbar */
    .topbar{
      background:#fff;
      padding:12px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    }
    .brand {
      display:flex;
      align-items:center;
      gap:10px;
    }
    .avatar {
      width:46px;
      height:46px;
      border-radius:50%;
      background:linear-gradient(135deg,#d6d6d6,#bdbdbd);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }
    .brand h1{
      margin:0;
      color:var(--accent);
      font-size:1.35rem;
      line-height:1;
      font-weight:600;
    }

    /* Hero */
    .hero{
      background:var(--accent);
      color:#fff;
      text-align:center;
      padding:36px 18px;
    }
    .hero h2{
      font-size:2rem;
      margin:0 0 8px;
      font-weight:600;
    }
    .hero p{ margin:0; opacity:0.95; }

    /* Search */
    .search-row{
      padding:18px;
      display:flex;
      gap:10px;
      max-width:720px;
      margin: -18px auto 6px;
    }
    .search-row .form-control,
    .search-row .btn{
      border-radius:8px;
    }

    /* Section Title */
    .section-title{
      font-size:1.6rem;
      font-weight:600;
      margin:22px 12px 10px;
      color:#222;
    }
.stat-card .card-actions {
    display: flex;
    justify-content: center; /* center buttons */
    gap: 10px; /* spacing between them */
    margin-top: 10px;
}


    /* Cards */
    .dash-cards{
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:14px;
      max-width:720px;
      margin: 6px auto;
    }

    .stat-card{
      background:var(--card-bg);
      border-radius:12px;
      padding:18px;
      box-shadow: 0 8px 20px rgba(14,30,37,0.06);
      position:relative;
      overflow:hidden;
    }
    .stat-card .icon {
      position:absolute;
      right:18px;
      top:14px;
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:8px;
      color:var(--accent);
      border:2px solid rgba(11,99,173,0.12);
      background:rgba(255,255,255,0.85);
    }
    .stat-card .title{
      color:var(--accent);
      font-size:1.1rem;
      font-weight:600;
    }
    .stat-card .bignum{
      font-size:2.4rem;
      margin:8px 0;
      font-weight:400;
    }
    .stat-card .muted{
      color:var(--muted);
      font-size:0.95rem;
      margin-bottom:10px;
    }
    .stat-card .card-actions {
    display: flex;
    justify-content: space-between; /* pushes buttons to corners */
    margin-top: 10px;
    padding: 0 10px; /* horizontal padding inside card */
}
    .stat-card a.view{
      color:var(--accent);
      text-decoration:none;
      font-weight:600;
    }
    .stat-card a.manage{
      color:var(--accent);
      text-decoration:none;
      font-weight:600;
    }

    /* Overlay menu with slide-in */
    .overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      z-index: 9999;
      display: none;
    }
    .overlay-content {
      background: #fff;
      width: 80%;
      max-width: 280px;
      height: 100%;
      padding: 30px 20px;
      box-shadow: 2px 0 8px rgba(0,0,0,0.2);
      position: absolute;
      top: 0;
      left: -100%; /* start off screen */
      transition: left 0.3s ease;
    }
    .overlay.open .overlay-content {
      left: 0; /* slide in */
    }
    .overlay-content h3 {
      font-weight:600;
      margin-bottom:20px;
    }
    .overlay-content a {
      display:block;
      padding:10px 0;
      color:#333;
      font-weight:500;
      text-decoration:none;
      border-bottom:1px solid #eee;
    }
    .overlay-content a:hover {
      color:var(--accent);
    }
    .overlay-close {
      position:absolute;
      top:15px;
      right:20px;
      font-size:1.5rem;
      color:#fff;
      cursor:pointer;
    }
    

    @media(min-width:900px){
      .dash-cards{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:18px;
      }
    }