:root{
  --navy:#0f172a; --navy-2:#1e293b; --teal:#0f766e; --teal-2:#14b8a6; --amber:#f59e0b;
  --bg:#f1f5f9; --radius:14px;
  --bs-primary:#0f766e; --bs-primary-rgb:15,118,110;
}
html,body{background:var(--bg);font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;font-size:.94rem;color:#1e293b}
.btn-primary{--bs-btn-bg:#0f766e;--bs-btn-border-color:#0f766e;--bs-btn-hover-bg:#0d6159;--bs-btn-hover-border-color:#0d6159;--bs-btn-active-bg:#0b5750}
.btn-outline-primary{--bs-btn-color:#0f766e;--bs-btn-border-color:#0f766e;--bs-btn-hover-bg:#0f766e;--bs-btn-hover-border-color:#0f766e}
a{color:#0f766e}
.text-primary{color:#0f766e!important}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{width:262px;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#cbd5e1;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:transform .25s}
.brand{display:flex;gap:.75rem;align-items:center;padding:1.1rem 1.2rem;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.07)}
.brand small{display:block;color:#94a3b8;font-size:.72rem}
.brand-ikon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--teal-2));display:grid;place-items:center;font-size:1.35rem}
.nav-menu{flex:1;overflow-y:auto;padding:.5rem .7rem 1rem}
.nav-grup{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#64748b;margin:1rem .6rem .35rem;font-weight:700}
.nav-item-x{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:10px;color:#cbd5e1;text-decoration:none;font-size:.9rem;margin-bottom:2px}
.nav-item-x i{font-size:1.05rem;width:1.2rem;text-align:center}
.nav-item-x:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item-x.aktif{background:linear-gradient(90deg,var(--teal),#0d9488);color:#fff;box-shadow:0 4px 12px rgba(20,184,166,.3)}
.sidebar-foot{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.15)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--amber);color:#111;display:grid;place-items:center;font-weight:700}
.main{margin-left:262px;flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:60px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:.8rem;padding:0 1.5rem;position:sticky;top:0;z-index:1030}
.topbar-judul{font-weight:700;font-size:1.05rem}
.content{padding:1.5rem;flex:1}
.footer-x{padding:1rem 1.5rem;color:#94a3b8;font-size:.8rem;text-align:center}
.sidebar-lapisan{display:none}
@media(max-width:991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.buka{transform:none}
  .sidebar-lapisan.buka{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035}
  .main{margin-left:0}
  .content{padding:1rem}
}

/* komponen */
.card{border:0;border-radius:var(--radius);box-shadow:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04)}
.card-header{background:transparent;border-bottom:1px solid #eef2f6;font-weight:600}
.table thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#f8fafc;border-bottom:1px solid #e2e8f0;white-space:nowrap}
.table td{vertical-align:middle}
.table-hover>tbody>tr:hover>*{background:#f8fffe}
.form-label{font-weight:600;font-size:.82rem;color:#475569;margin-bottom:.25rem}
.form-control,.form-select{border-radius:10px;border-color:#cbd5e1}
.form-control:focus,.form-select:focus{border-color:var(--teal-2);box-shadow:0 0 0 .2rem rgba(20,184,166,.15)}
.btn{border-radius:10px}
.badge-soft{font-weight:600;padding:.4em .7em;border-radius:20px;font-size:.72rem}
.bg-secondary-soft{background:#e2e8f0;color:#475569}.bg-info-soft{background:#e0f2fe;color:#0369a1}
.bg-primary-soft{background:#ccfbf1;color:#0f766e}.bg-warning-soft{background:#fef3c7;color:#b45309}
.bg-success-soft{background:#dcfce7;color:#15803d}.bg-danger-soft{background:#fee2e2;color:#b91c1c}
.bg-teal-soft{background:#cffafe;color:#0e7490}.bg-purple-soft{background:#ede9fe;color:#6d28d9}
.text-teal{color:#0e7490}.text-purple{color:#6d28d9}

.stat-card{display:flex;gap:1rem;align-items:center;background:#fff;border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:0 1px 3px rgba(15,23,42,.07);height:100%;transition:.15s}
a:hover>.stat-card{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.1)}
.stat-ikon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;flex:none}
.stat-judul{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:600}
.stat-nilai{font-size:1.4rem;font-weight:800;line-height:1.2}
.stat-sub{font-size:.78rem;color:#94a3b8}
.tugas{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;border-bottom:1px solid #f1f5f9;text-decoration:none;color:inherit}
.tugas:hover{background:#f8fffe}
.tugas:last-child{border-bottom:0}
.info-grid{display:grid;grid-template-columns:150px 1fr;gap:.45rem 1rem;font-size:.9rem}
.info-grid dt{color:#64748b;font-weight:600}.info-grid dd{margin:0}
.timeline{display:flex;gap:.25rem;flex-wrap:wrap}
.timeline .langkah{flex:1;min-width:90px;text-align:center;font-size:.7rem;padding:.5rem .25rem;border-radius:8px;background:#e2e8f0;color:#64748b;font-weight:600}
.timeline .langkah.selesai{background:#ccfbf1;color:#0f766e}.timeline .langkah.kini{background:#0f766e;color:#fff}

/* login */
.login-bg{min-height:100vh;background:radial-gradient(circle at 15% 20%,#14b8a6 0,transparent 40%),radial-gradient(circle at 85% 80%,#f59e0b 0,transparent 35%),linear-gradient(135deg,#0f172a,#1e293b);display:grid;place-items:center;padding:1rem}
.login-kartu{width:100%;max-width:410px;background:#fff;border-radius:20px;padding:2.2rem;box-shadow:0 25px 60px rgba(0,0,0,.35)}
.login-logo{width:68px;height:68px;border-radius:18px;background:linear-gradient(135deg,var(--teal),var(--teal-2));display:grid;place-items:center;color:#fff;font-size:2rem;margin:0 auto 1rem}

/* cetak */
.cetak-body{background:#e5e7eb}
.kertas{background:#fff;max-width:820px;margin:1.2rem auto;padding:2rem 2.4rem;box-shadow:0 4px 20px rgba(0,0,0,.12);font-size:.92rem}
.kop{border-bottom:3px double #111;padding-bottom:.7rem;margin-bottom:1rem}
.kop-nama{font-size:1.5rem;font-weight:800;letter-spacing:.02em}
.ttd{display:flex;justify-content:space-around;text-align:center;margin-top:2.2rem}
.ttd div{width:30%}.ttd .garis{height:70px;border-bottom:1px solid #111;margin-bottom:.3rem}
@media print{
  .no-print{display:none!important}
  .cetak-body{background:#fff}
  .kertas{box-shadow:none;margin:0;max-width:none;padding:0}
}

.border-purple{border-color:#6d28d9!important}