:root {
    --unklab-purple: #4a148c;
    --unklab-gold: #ffca28;
    --bg-light: #f4f7f6;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    margin: 0; padding: 20px;
}

.container {
    max-width: 1100px;
    margin: auto;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--unklab-purple);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

h1 { color: var(--unklab-purple); margin: 0; font-size: 24px; }

.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn {
    flex: 1; padding: 12px; border: none; background: #eee;
    cursor: pointer; font-weight: bold; border-radius: 8px;
}
.tab-btn.active { background: var(--unklab-purple); color: white; }

.toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th { background: var(--unklab-purple); color: white; padding: 12px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid #ddd; }

.btn { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; color: white; font-weight: 600; }
.btn-primary { background: #2196F3; }
.btn-success { background: #4CAF50; }
.btn-warning { background: var(--unklab-gold); color: #333; }
.btn-save { background: var(--unklab-purple); padding: 15px 30px; }
.btn-excel { background: #1D6F42; padding: 15px 30px; }
.btn-danger { background: #f44336; font-size: 11px; }

.stats-container { display: flex; gap: 15px; margin-bottom: 20px; }
.stat-card { flex: 1; padding: 15px; border-radius: 10px; text-align: center; color: white; font-weight: bold; }
.h { background: #4CAF50; } .i { background: #2196F3; } .s { background: #FF9800; } .a { background: #f44336; }

#toast {
    visibility: hidden; min-width: 250px; background: #333; color: white;
    text-align: center; border-radius: 8px; padding: 16px;
    position: fixed; bottom: 30px; right: 30px;
}
#toast.show { visibility: visible; animation: fade 0.5s; }

.hidden { display: none; }
@media print { .no-print { display: none; } }

@keyframes fade { from {opacity: 0;} to {opacity: 1;} }:root {
    --unklab-purple: #4a148c;
    --unklab-gold: #ffca28;
    --bg-light: #f4f7f6;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    margin: 0; padding: 20px;
}

.container {
    max-width: 1100px;
    margin: auto;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--unklab-purple);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

h1 { color: var(--unklab-purple); margin: 0; font-size: 24px; }

.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn {
    flex: 1; padding: 12px; border: none; background: #eee;
    cursor: pointer; font-weight: bold; border-radius: 8px;
}
.tab-btn.active { background: var(--unklab-purple); color: white; }

.toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th { background: var(--unklab-purple); color: white; padding: 12px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid #ddd; }

.btn { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; color: white; font-weight: 600; }
.btn-primary { background: #2196F3; }
.btn-success { background: #4CAF50; }
.btn-warning { background: var(--unklab-gold); color: #333; }
.btn-save { background: var(--unklab-purple); padding: 15px 30px; }
.btn-excel { background: #1D6F42; padding: 15px 30px; }
.btn-danger { background: #f44336; font-size: 11px; }

.stats-container { display: flex; gap: 15px; margin-bottom: 20px; }
.stat-card { flex: 1; padding: 15px; border-radius: 10px; text-align: center; color: white; font-weight: bold; }
.h { background: #4CAF50; } .i { background: #2196F3; } .s { background: #FF9800; } .a { background: #f44336; }

#toast {
    visibility: hidden; min-width: 250px; background: #333; color: white;
    text-align: center; border-radius: 8px; padding: 16px;
    position: fixed; bottom: 30px; right: 30px;
}
#toast.show { visibility: visible; animation: fade 0.5s; }

.hidden { display: none; }
@media print { .no-print { display: none; } }

@keyframes fade { from {opacity: 0;} to {opacity: 1;} }:root {
    --unklab-purple: #4a148c;
    --unklab-gold: #ffca28;
    --bg-light: #f4f7f6;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    margin: 0; padding: 20px;
}

.container {
    max-width: 1100px;
    margin: auto;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--unklab-purple);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

h1 { color: var(--unklab-purple); margin: 0; font-size: 24px; }

.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn {
    flex: 1; padding: 12px; border: none; background: #eee;
    cursor: pointer; font-weight: bold; border-radius: 8px;
}
.tab-btn.active { background: var(--unklab-purple); color: white; }

.toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th { background: var(--unklab-purple); color: white; padding: 12px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid #ddd; }

.btn { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; color: white; font-weight: 600; }
.btn-primary { background: #2196F3; }
.btn-success { background: #4CAF50; }
.btn-warning { background: var(--unklab-gold); color: #333; }
.btn-save { background: var(--unklab-purple); padding: 15px 30px; }
.btn-excel { background: #1D6F42; padding: 15px 30px; }
.btn-danger { background: #f44336; font-size: 11px; }

.stats-container { display: flex; gap: 15px; margin-bottom: 20px; }
.stat-card { flex: 1; padding: 15px; border-radius: 10px; text-align: center; color: white; font-weight: bold; }
.h { background: #4CAF50; } .i { background: #2196F3; } .s { background: #FF9800; } .a { background: #f44336; }

#toast {
    visibility: hidden; min-width: 250px; background: #333; color: white;
    text-align: center; border-radius: 8px; padding: 16px;
    position: fixed; bottom: 30px; right: 30px;
}
#toast.show { visibility: visible; animation: fade 0.5s; }

.hidden { display: none; }
@media print { .no-print { display: none; } }

@keyframes fade { from {opacity: 0;} to {opacity: 1;} }