:root {
    --primary: #0c8a2b;
    --primary-dark: #006e1c;
    --primary-soft: #e8f5ea;
    --surface: #f9f9f9;
    --surface-low: #f3f3f3;
    --card: #ffffff;
    --text: #1a1c1c;
    --muted: #6c757d;
    --shadow: 0 20px 40px rgba(12, 138, 43, 0.08);
    --radius: 24px;
}
html[data-theme="dark"] {
    --surface: #11161a;
    --surface-low: #1a2228;
    --card: #1f2a31;
    --text: #eaf2ed;
    --muted: #a7b4b0;
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}
body { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--surface); color: var(--text); }
body, .module-card, .sidebar, .search-box input, .form-control, .form-select, textarea, .nav-link, .table-clean tbody tr { transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.app-shell { min-height: 100vh; }
.sidebar { width: 300px; min-height: 100vh; background: rgba(243,243,243,0.9); backdrop-filter: blur(18px); display:flex; flex-direction:column; position:sticky; top:0; }
html[data-theme="dark"] .sidebar { background: rgba(26,34,40,.96); }
.brand h2 { color: var(--primary); font-weight: 800; margin:0; }
.brand p { text-transform: uppercase; letter-spacing: .18em; font-size:.8rem; color:var(--muted); margin-top:.4rem; }
.nav-link { color:#5e6268; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; font-size:1.08rem; }
html[data-theme="dark"] .nav-link { color:#d1d9d5; }
.nav-link.active { color: var(--primary); background: rgba(12,138,43,.06); position:relative; }
.nav-link.active::before { content:''; position:absolute; left:-12px; top:10px; bottom:10px; width:4px; border-radius:999px; background: var(--primary); }
.nav-link:hover { color: var(--primary-dark); background:#fff; }
html[data-theme="dark"] .nav-link:hover { background:#22313a; color:#9fe3af; }
.main-content { padding: 24px 28px 40px; }
.topbar { gap:20px; }
.search-box { position:relative; max-width:560px; width:100%; }
.search-box i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#97a0a8; }
.search-box input { padding:16px 18px 16px 46px; border:none; background:var(--surface-low); border-radius:18px; box-shadow:none !important; color: var(--text); }
.user-chip .avatar-circle { width:44px; height:44px; border-radius:16px; background:linear-gradient(135deg,var(--primary-dark),#4caf50); color:#fff; display:grid; place-items:center; }
.profile-menu { min-width: 220px; }
.tiny { font-size:.72rem; letter-spacing:.08em; }
.card-soft, .content-card { background: var(--card); border:none; border-radius:var(--radius); box-shadow: var(--shadow); }
.stats-card { padding:24px; min-height:160px; }
.stats-card .icon-box { width:52px; height:52px; border-radius:16px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; font-size:1.4rem; }
.section-header h1 { font-weight:800; font-size:3rem; letter-spacing:-.03em; }
.section-header p { color:#415042; font-size:1.1rem; max-width:720px; }
html[data-theme="dark"] .section-header p, html[data-theme="dark"] .text-muted { color: var(--muted) !important; }
.table-clean th { text-transform: uppercase; letter-spacing:.12em; font-size:.78rem; color:#8b9199; border:none; background:transparent !important; }
.table-clean td { border:none; padding:18px 12px; vertical-align:middle; color: var(--text); }
.table-clean tbody tr { background:var(--card); }
.table-clean tbody tr + tr td { border-top:24px solid var(--surface); }
.module-card { background:var(--card); border-radius:28px; padding:24px; box-shadow:var(--shadow); }
.btn-success { background:linear-gradient(135deg,var(--primary-dark),#33ad47); border:none; border-radius:16px; }
.btn-outline-soft { background:var(--surface-low); border:none; border-radius:16px; color: var(--text); }
.form-control, .form-select, textarea { border:none; border-radius:14px; background:var(--surface-low); padding:14px 16px; color: var(--text); }
.form-control:focus, .form-select:focus, textarea:focus { box-shadow:0 0 0 3px rgba(12,138,43,.15); background:#fff; }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] textarea:focus { background:#233039; color:#fff; }
.badge-soft-success { background:#e7f6e9; color:var(--primary-dark); padding:8px 14px; border-radius:999px; font-weight:700; }
.badge-soft-danger { background:#fde9e8; color:#ba1a1a; padding:8px 14px; border-radius:999px; font-weight:700; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background: radial-gradient(circle at top left,#e6f7ea,#f9f9f9 48%); }
.login-card { max-width:420px; width:100%; background:#fff; padding:32px; border-radius:28px; box-shadow:var(--shadow); }
.hero-green { background: linear-gradient(135deg, var(--primary-dark), #34a853); color: #fff; border-radius: 28px; padding: 28px; box-shadow: var(--shadow); }
.empty-module { min-height:260px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:#6e747c; text-align:center; }
.sign-preview-sm { max-width: 120px; max-height: 48px; object-fit: contain; }
.sign-preview-lg { max-width: 180px; max-height: 70px; object-fit: contain; }
.attendance-grid-card { overflow-x: auto; }
.attendance-grid-table th, .attendance-grid-table td { white-space: nowrap; font-size: .85rem; }
.attendance-checkbox { width: 18px; height: 18px; }
.receipt-sheet, .certificate-sheet { width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; }
.receipt-half { min-height: 48%; padding: 20mm 14mm 12mm; border-bottom: 1px dashed #999; }
.receipt-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.print-page-body { background:#e9ecef; padding:20px; }
.print-toolbar { width:210mm; margin:0 auto 16px; display:flex; justify-content:space-between; }
.certificate-frame { min-height: 297mm; padding: 22mm 18mm; border: 8px solid #d8eadb; outline: 2px solid #7dc48c; outline-offset: -16px; text-align:center; background:#fff; }
.certificate-top { letter-spacing: .35em; font-weight: 700; color: var(--primary); margin-top: 30px; }
.certificate-title { font-size: 4rem; font-family: Georgia, serif; margin: 30px 0 12px; }
.certificate-subtitle { font-size: 1.5rem; color:#666; }
.certificate-student-name { font-size: 3rem; font-weight: 800; margin: 35px 0 20px; }
.certificate-body { font-size: 1.35rem; line-height:1.8; max-width: 70%; margin:0 auto; }
.certificate-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:40px; }
.cert-label { text-transform: uppercase; letter-spacing: .14em; color:#7a7a7a; font-size:.75rem; }
.cert-value { font-size:1.1rem; font-weight:600; margin-top: 6px; }
.certificate-signatures { display:grid; grid-template-columns: repeat(2,1fr); gap: 60px; margin-top: 90px; }
.signature-block { text-align:center; }
.signature-line { border-top: 1px solid #555; margin-top: 8px; padding-top: 6px; }
.idcard-sheet { width: 210mm; min-height: 297mm; margin: 0 auto; background:#fff; display:grid; place-items:center; }
.idcard-card { width: 85.6mm; min-height: 54mm; border-radius: 18px; overflow:hidden; background: linear-gradient(135deg,#f1fff3,#dff5e4); border: 2px solid #0c8a2b; box-shadow: 0 15px 30px rgba(0,0,0,.12); }
.idcard-head { background: linear-gradient(135deg,#006e1c,#33ad47); color:#fff; padding:10px 12px; text-align:center; }
.idcard-body { padding:12px; }
.idcard-photo { width: 84px; height: 100px; object-fit: cover; border-radius: 12px; border:2px solid #d9eedd; }
.idcard-meta { font-size:.82rem; }
.idcard-sign { max-width: 120px; max-height: 38px; object-fit: contain; }
.row-locked { opacity:.58; pointer-events:none; }
@media print {
  body { background:#fff; }
  .no-print { display:none !important; }
  .receipt-sheet, .certificate-sheet, .idcard-sheet { width:auto; min-height:auto; }
  .print-page-body { padding:0; }
  @page { size: A4 portrait; margin: 10mm; }
}
@media (max-width: 991px) {
  .sidebar { width: 92px; }
  .sidebar .brand p, .sidebar .nav-link span, .btn-new-reg { display:none; }
  .sidebar .brand h2 { font-size:1.2rem; }
  .nav-link { justify-content:center; }
}
@media (max-width: 767px) {
  .app-shell { flex-direction:column; }
  .sidebar { width:100%; min-height:auto; position:relative; }
  .main-content { padding:16px; }
  .section-header h1 { font-size:2rem; }
  .certificate-grid, .certificate-signatures, .receipt-grid { grid-template-columns: 1fr; }
  .certificate-body { max-width: 100%; }
}