/* SKD CAT-BKN — Common Styles */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f5f7fa;color:#222;line-height:1.6;-webkit-text-size-adjust:100%;transition:background .3s ease,color .3s ease}

/* Dark Theme */
[data-theme="dark"] body{background:#1a1a2e;color:#e8e8e8}
[data-theme="dark"] .card{background:#16213e;color:#e8e8e8}
[data-theme="dark"] .form-group input,[data-theme="dark"] .form-group select{background:#1a1a2e;border-color:#555;color:#e8e8e8}
[data-theme="dark"] th{background:#1a1a2e;color:#d0d0d0}
[data-theme="dark"] tr:hover{background:#252540}
[data-theme="dark"] .footer{color:#888}

/* Font Size Variations */
body.font-small{font-size:14px}
body.font-medium{font-size:16px}
body.font-large{font-size:18px}

/* Header / Topbar */
.header{background:#1a5276;color:#fff;padding:.6rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.4rem}
.header h1{font-size:1.1rem;white-space:nowrap;margin:0;flex:1}
.theme-toggle{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
.topbar{background:#1a5276;color:#fff;padding:.5rem 1rem;font-size:.8rem;display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center}
.topbar a{color:#fff;text-decoration:none;margin-right:.6rem;min-height:44px;min-width:44px;display:inline-flex;align-items:center;font-size:.8rem}

/* Layout */
.container{max-width:1000px;margin:1.5rem auto;padding:0 1rem}
.main{display:flex;max-width:1200px;margin:.8rem auto;gap:.8rem;padding:0 .8rem;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block;background:#2980b9;color:#fff;padding:.55rem .9rem;border-radius:6px;text-decoration:none;font-weight:600;font-size:.9rem;min-height:44px;min-width:44px;white-space:nowrap;border:none;cursor:pointer}
.btn:hover{background:#1a5276}
.btn.success{background:#27ae60}
.btn.warning{background:#e67e22}
.btn.danger{background:#e74c3c}

/* Cards */
.card{background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08);padding:1.2rem;margin-bottom:1.2rem}
.card h2{color:#1a5276;font-size:1.15rem;margin-bottom:1rem;text-align:center}

/* Forms */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.85rem;color:#555;margin-bottom:.3rem;font-weight:600}
.form-group input,.form-group select{width:100%;padding:.65rem .8rem;border:1px solid #ddd;border-radius:5px;font-size:.9rem;min-height:44px;background:#fff}
.form-group input:focus,.form-group select:focus{outline:none;border-color:#2980b9}

/* Alerts */
.alert{padding:.8rem;border-radius:5px;margin-bottom:1rem;font-size:.9rem}
.alert.error{background:#f8d7da;color:#721c24}
.alert.success{background:#d4edda;color:#155724}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:500px}
th,td{border:1px solid #eee;padding:.4rem .5rem;text-align:left}
th{background:#f8f9fa;color:#555}
tr:hover{background:#f8f9fa}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Badges */
.badge{display:inline-block;padding:.2rem .5rem;border-radius:10px;font-size:.75rem;font-weight:bold}
.badge.lulus{background:#d4edda;color:#155724}
.badge.gagal{background:#f8d7da;color:#721c24}
.badge.berjalan{background:#fff3cd;color:#856404}

/* Footer */
.footer{text-align:center;padding:1.2rem;color:#777;font-size:.85rem;margin-top:1.5rem}

/* Misc */
.link{color:#2980b9;text-decoration:none}
.link:hover{text-decoration:underline}
.empty{color:#777;font-style:italic;text-align:center;padding:2rem}

/* Responsive Breakpoints */
@media(max-width:1024px){
.container{max-width:95%}
.main{max-width:95%}
}
@media(max-width:768px){
.main{flex-direction:column}
.stats{grid-template-columns:repeat(2,1fr)}
table{font-size:.8rem}
}
@media(max-width:600px){
.main{padding:0 .6rem}
.stats{grid-template-columns:repeat(2,1fr)}
.header h1{font-size:1rem}
.btn{padding:.5rem .8rem;font-size:.85rem}
}
@media(max-width:480px){
.container{margin:1rem auto;padding:0 .8rem}
.header{padding:.6rem .8rem}
.card{padding:1rem}
.form-group input,.form-group select{padding:.6rem .7rem;font-size:.85rem}
}
@media(max-width:380px){
.stats{grid-template-columns:1fr}
.header h1{font-size:.9rem}
.btn{padding:.45rem .7rem;font-size:.8rem}
}