:root {
      --g900: #173404;
      --g800: #27500A;
      --g700: #3B6D11;
      --g600: #639922;
      --g400: #97C459;
      --g200: #C0DD97;
      --g100: #D8EDBB;
      --g50:  #EAF3DE;
      --white: #ffffff;
      --bg: #f7f8f5;
      --border: #e4e7dd;
      --muted: #7a8070;
      --text: #1c1f17;
      --red: #A32D2D;
      --red-bg: #FCEBEB;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--text); }

    header { background:var(--g800); }
    .header-inner {
      max-width:1160px; margin:0 auto; padding:36px 32px 32px;
      display:flex; align-items:center; gap:20px;
    }
    .logo-ring {
      width:74px; height:74px; border-radius:50%;
      border:2px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.08);
      display:flex; align-items:center; justify-content:center;
      font-size:28px; flex-shrink:0;
    }
    .header-text h1 { font-family:'Fraunces',serif; font-size:23px; color:#fff; font-weight:600; }
    .header-text p  { font-size:13px; color:var(--g200); margin-top:4px; font-weight:300; }
    .stripe { height:4px; background:linear-gradient(90deg,var(--g400),var(--g200),transparent); }

    nav { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
    .nav-inner { max-width:1160px; margin:0 auto; padding:0 32px; display:flex; }
    .nav-link {
      display:inline-flex; align-items:center; gap:7px;
      padding:14px 20px; font-size:13.5px; font-weight:500;
      color:var(--muted); text-decoration:none;
      border-bottom:2.5px solid transparent; transition:.2s;
    }
    .nav-link:hover { color:var(--g700); }
    .nav-link.active { color:var(--g700); border-bottom-color:var(--g600); }

    main { max-width:1160px; margin:0 auto; padding:40px 32px 64px; }

    .sec-label { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--g600); margin-bottom:5px; }
    .sec-title  { font-family:'Fraunces',serif; font-size:21px; font-weight:600; color:var(--text); margin-bottom:3px; }
    .sec-sub    { font-size:13px; color:var(--muted); margin-bottom:26px; }

    .stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }

    .stat-card {
      background:var(--white); border-radius:16px;
      padding:26px 24px; border:1px solid var(--border);
      position:relative; overflow:hidden;
      animation:rise .5s ease both;
    }
    .stat-card:nth-child(1){animation-delay:.05s}
    .stat-card:nth-child(2){animation-delay:.12s}
    .stat-card:nth-child(3){animation-delay:.19s}
    .stat-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; border-radius:16px 16px 0 0; }
    .s-total::before { background:var(--g600); }
    .s-lulus::before { background:#22c55e; }
    .s-tidak::before { background:var(--red); }

    .stat-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
    .stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
    .s-total .stat-icon { background:var(--g50); }
    .s-lulus .stat-icon { background:#f0fdf4; }
    .s-tidak .stat-icon { background:var(--red-bg); }

    .stat-tag { font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:99px; }
    .s-total .stat-tag { background:var(--g50);  color:var(--g700); }
    .s-lulus .stat-tag { background:#f0fdf4; color:#15803d; }
    .s-tidak .stat-tag { background:var(--red-bg); color:var(--red); }

    .stat-num { font-family:'Fraunces',serif; font-size:46px; font-weight:700; line-height:1; letter-spacing:-1px; }
    .s-total .stat-num { color:var(--g800); }
    .s-lulus .stat-num { color:#15803d; }
    .s-tidak .stat-num { color:var(--red); }
    .stat-desc { font-size:12.5px; color:var(--muted); margin-top:6px; }

    .progress-card {
      background:var(--white); border-radius:16px; padding:26px 28px;
      border:1px solid var(--border); margin-bottom:44px;
      animation:rise .5s .26s ease both;
    }
    .prog-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
    .prog-head span { font-size:13.5px; font-weight:500; }
    #persenLabel { font-family:'Fraunces',serif; font-size:20px; color:var(--g700); }
    .prog-track  { height:10px; background:var(--bg); border-radius:99px; overflow:hidden; }
    .prog-fill   { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--g700),var(--g400)); transition:width 1.4s cubic-bezier(.22,1,.36,1); }
    .prog-legend { display:flex; gap:20px; margin-top:12px; }
    .legend-item { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
    .ldot { width:8px; height:8px; border-radius:50%; }

    .jajaran-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

    .person-card {
      background:var(--white); border-radius:16px; border:1px solid var(--border);
      overflow:hidden; transition:transform .25s, border-color .25s;
      animation:rise .5s ease both;
    }
    .person-card:nth-child(1){animation-delay:.32s}
    .person-card:nth-child(2){animation-delay:.40s}
    .person-card:nth-child(3){animation-delay:.48s}
    .person-card:hover { transform:translateY(-3px); border-color:var(--g200); }

    .photo-area {
      width:100%; aspect-ratio:1/1.1;
      background:var(--g50);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:8px; color:var(--g400); position:relative; overflow:hidden;
    }
    .photo-area img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .photo-area svg { opacity:.45; }
    .photo-ph-txt { font-size:10.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--g400); opacity:.7; }

    .person-body { padding:18px 20px 20px; border-top:2px solid var(--g50); }
    .person-role { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--g600); margin-bottom:6px; }
    .person-name { font-family:'Fraunces',serif; font-size:15px; font-weight:600; line-height:1.35; }
    .person-nip  { font-size:11.5px; color:var(--muted); margin-top:4px; }

    footer { background:var(--g900); text-align:center; padding:18px; font-size:12px; color:var(--g200); }
    footer span { color:var(--g400); font-weight:500; }
	
	.page-hd { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
    .page-hd h2 { font-family:'Fraunces',serif; font-size:21px; font-weight:600; }
    .page-hd p  { font-size:13px; color:var(--muted); margin-top:3px; }

	.toolbar { background:var(--white); border-radius:14px; padding:18px 22px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; border:1px solid var(--border); }
    .search-wrap { position:relative; flex:1; min-width:200px; }
    .search-wrap svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
    .search-input { width:100%; padding:10px 13px 10px 40px; border:1.5px solid var(--border); border-radius:10px; font-size:13.5px; font-family:'Plus Jakarta Sans',sans-serif; color:var(--text); background:var(--bg); outline:none; transition:border-color .2s, box-shadow .2s; }
    .search-input:focus { border-color:var(--g600); box-shadow:0 0 0 3px rgba(99,153,34,.12); }
    .filter-sel { padding:10px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; font-family:'Plus Jakarta Sans',sans-serif; color:var(--text); background:var(--bg); outline:none; cursor:pointer; transition:border-color .2s; }
    .filter-sel:focus { border-color:var(--g600); }
    .count-info { font-size:12.5px; color:var(--muted); white-space:nowrap; }
    .count-info strong { color:var(--text); }
	
    .table-wrap { background:var(--white); border-radius:16px; border:1px solid var(--border); overflow:hidden; }

    table { width:100%; border-collapse:collapse; }
    thead { background:var(--g800); }
    thead th { padding:15px 18px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--g100); text-align:left; white-space:nowrap; }
    thead th:first-child { padding-left:24px; }
    thead th:last-child  { text-align:center; }

    tbody tr { border-bottom:1px solid var(--bg); transition:background .15s; }
    tbody tr:last-child { border-bottom:none; }
    tbody tr:hover { background:#f3f7ee; }
    tbody td { padding:13px 18px; font-size:13.5px; vertical-align:middle; }
    tbody td:first-child { padding-left:24px; }

    .td-no   { color:var(--muted); font-weight:600; width:48px; }
    .td-nisn { font-size:13px; color:#555f46; font-weight:500; letter-spacing:.3px; }
    .kelas-badge { display:inline-block; padding:4px 10px; background:var(--g50); border-radius:6px; font-size:12px; font-weight:600; color:var(--g700); }

    .status-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:99px; font-size:12px; font-weight:600; }
    .status-badge.lulus { background:#f0fdf4; color:#15803d; }
    .status-badge.tidak { background:var(--red-bg); color:var(--red); }

    .td-aksi { text-align:center; }
    .btn-detail { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; background:var(--g800); color:var(--g200); border:none; border-radius:8px; font-size:12px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:background .2s, transform .15s; }
    .btn-detail:hover { background:var(--g700); transform:scale(1.03); }

    .empty-state { text-align:center; padding:56px 20px; color:var(--muted); }
    .empty-state p { font-size:13.5px; margin-top:14px; }

    .pagination { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-top:1px solid var(--bg); background:#fafbf7; flex-wrap:wrap; gap:10px; }
    .page-info { font-size:12.5px; color:var(--muted); }
    .page-btns { display:flex; gap:5px; }
    .page-btn { width:33px; height:33px; border:1.5px solid var(--border); border-radius:8px; background:var(--white); font-size:13px; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; color:var(--text); }
    .page-btn:hover { border-color:var(--g600); color:var(--g700); }
    .page-btn.active { background:var(--g800); border-color:var(--g800); color:var(--white); }
    .page-btn:disabled { opacity:.35; cursor:not-allowed; }

    /* MODAL — faux viewport pattern (no position:fixed) */
    .modal-layer { display:none; position:fixed; inset:0; background:rgba(28,31,23,.55); z-index:999; align-items:center; justify-content:center; }
    .modal-layer.show { display:flex; }
    .modal-box { background:var(--white); border-radius:20px; padding:34px; width:410px; max-width:92vw; position:relative; animation:popIn .25s ease; }
    .modal-close { position:absolute; top:16px; right:16px; width:30px; height:30px; border:none; background:var(--bg); border-radius:8px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .modal-close:hover { background:var(--border); }
    .modal-top { text-align:center; margin-bottom:22px; }
    .modal-icon { width:68px; height:68px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:30px; }
    .modal-icon.lulus { background:#f0fdf4; }
    .modal-icon.tidak { background:var(--red-bg); }
    .modal-name { font-family:'Fraunces',serif; font-size:19px; font-weight:600; }
    .modal-sub  { font-size:13px; color:var(--muted); margin-top:3px; }
    .modal-divider { height:1px; background:var(--bg); margin:18px 0; }
    .modal-row { display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px; }
    .modal-row .lbl { color:var(--muted); }
    .modal-row .val { font-weight:600; }
    .modal-result { margin-top:18px; padding:13px; border-radius:10px; text-align:center; font-size:13.5px; font-weight:700; }
    .modal-result.lulus { background:#f0fdf4; color:#15803d; }
    .modal-result.tidak { background:var(--red-bg); color:var(--red); }
    .modal-detail-link { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; padding:11px; border-radius:10px; background:var(--g50); color:var(--g700); font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--g100); transition:background .2s, border-color .2s; }
    .modal-detail-link:hover { background:var(--g100); border-color:var(--g200); }

    @keyframes rise   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    @keyframes popIn  { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

    @media(max-width:720px){
      .header-inner{padding:24px 16px 20px}
       main{padding:24px 16px 48px}
      .stats-row,.jajaran-grid{grid-template-columns:1fr}
      .nav-inner{overflow-x:auto}
	  .toolbar{flex-direction:column;align-items:stretch}
      .search-wrap{min-width:unset}
      .table-wrap{overflow-x:auto}
      table{min-width:600px}
    }