:root{
      --bg:#f4f7fb; --sidebar:#172033; --accent:#3b82f6; --card:#fff;
      --muted:#6b7280; --success:#10b981;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
      background:var(--bg);
      color:#0f172a;
      height:100vh;
      display:flex;
      font-weight: bold;
      overflow:hidden;
    }

    /* Sidebar */
    .sidebar{
      width:240px;
      background:linear-gradient(to right,#1d2bc9,#f63bd7);
      padding:22px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .brand{font-weight:700; font-size:25px; display:flex; gap:10px; align-items:center;color: #ffffffcc; text-align: center;}
    .nav-link{
      color:#dbeafe; text-decoration:none; padding:10px 12px; border-radius:8px; display:block;
      margin:4px 0; cursor:pointer;
    }
    .nav-link.active, .nav-link:hover{background:#0b1624}

    /* Main area */
    .main{
      flex:1; display:flex; flex-direction:column; overflow:hidden;
    }
    header.appbar{
      height:64px; display:flex; align-items:center; justify-content:space-between;
      padding:0 20px; background:linear-gradient(90deg,#ffffffcc, #f8fafc);
      border-bottom:1px solid rgba(15,23,42,0.04);
    }
    .searchbox{display:flex; align-items:center; gap:10px;}
    .searchbox input{padding:8px 12px; border-radius:8px; border:1px solid #e6edf3; width:260px}

    /* content */
    .content{display:flex; height:calc(100vh - 64px); overflow:auto; padding:20px;}
    .panel{flex:1; min-width:0}

    /* dashboard grid */
    .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px}
    .card{background:var(--card); height: 20rem; padding:16px; border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,0.05)}
    .card h3{margin:0;font-size:13px;color:var(--muted)}
    .card p{margin:8px 0 0;font-size:20px;font-weight:600}

    /* layout two-col for content */
    .two-col{display:grid; grid-template-columns: 1fr 420px; gap:16px}

    /* lists/tables */
    table{width:100%; border-collapse:collapse; font-size:12px}
    th,td{padding:8px; text-align:left; border-bottom:1px solid #eef3f8}
    th{background:#fbfdff; font-weight:00; color:var(--muted); font-size:13px}
    .controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:15px}

    /* small inputs */
    .input, select, textarea{padding:8px 10px; border-radius:8px; border:1px solid #e6edf3; background:white}
    button{background:var(--accent); color:white; padding:8px 12px; border-radius:8px; border:0; cursor:pointer}
    button.secondary{background:#e6eefc; color:#0b1724}
    .muted{color:var(--muted); font-size:13px}

    /* responsive */
    @media (max-width:980px){
      .sidebar{display:none}
      .kpis{grid-template-columns:repeat(1,1fr)}
      .two-col{grid-template-columns:1fr}
    }
          #alumniTable img {
            border: 2px solid #dce3f2;
            transition: transform 0.2s ease;
}          
         #alumniTable img:hover {
         transform: scale(1.1);
}          

    /* small helpers */
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-weight:600}
    .center{text-align:center}
    .right{text-align:right}
    .mb8{margin-bottom:8px}
    .mt8{margin-top:8px; box-sizing:initial}
    .progress-wrap{background:#eef3fb;border-radius:999px;height:14px;overflow:hidden}
    .progress-bar{height:100%; background:linear-gradient(90deg,var(--accent),#06b6d4); width:0%}
    .small{font-size:13px;color:var(--muted)}
    .btn-ghost{background:transparent;border:1px solid #e6edf3;color:var(--muted)}
    .table-actions button{margin-right:6px}
    .modal{position:fixed; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;
           background:rgba(2,6,23,0.45); visibility:hidden; opacity:0; transition:all .18s}
    .modal.open{visibility:visible; opacity:1}

    .modal-inner{background:white; padding:18px; border-radius:12px; width:520px; max-width:95%}