:root {
	--bg: #0f1117;
	--surface: #1a1d27;
	--card: #20243a;
	--border: #2e3354;
	--accent: #6c63ff;
	--accent2: #a78bfa;
	--green: #22c55e;
	--amber: #f59e0b;
	--red: #ef4444;
	--text: #e2e8f0;
	--muted: #94a3b8;
	--radius: 12px;
}

[data-theme="light"] {
	--bg: #f8fafc;
	--surface: #ffffff;
	--card: #f1f5f9;
	--border: #e2e8f0;
	--accent: #6c63ff;
	--accent2: #7c3aed;
	--green: #22c55e;
	--amber: #f59e0b;
	--red: #ef4444;
	--text: #1e293b;
	--muted: #64748b;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	overflow-x: hidden;
	transition: background-color 0.3s, color 0.3s;
}

/* ── HERO HEADER ── */
header {
	background: linear-gradient(135deg, var(--surface) 0%, var(--card) 60%, var(--surface) 100%);
	border-bottom: 1px solid var(--border);
	padding: 2.5rem 2rem 2rem;
	position: relative;
	overflow: hidden;
	transition: background 0.3s;
}

header::before {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 99, 255, .18) 0%, transparent 70%);
	top: -200px;
	right: -100px;
	pointer-events: none;
}

header::after {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(167, 139, 250, .12) 0%, transparent 70%);
	bottom: -120px;
	left: 30px;
	pointer-events: none;
}

.header-inner {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0.75rem;
}

.header-badge {
	display: inline-block;
	background: rgba(108, 99, 255, .18);
	border: 1px solid rgba(108, 99, 255, .4);
	color: var(--accent2);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .25rem .75rem;
	border-radius: 999px;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.4rem 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	transition: all 0.2s;
}

.theme-toggle:hover {
	border-color: var(--accent);
	transform: translateY(-1px);
}

.theme-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: transform 0.3s;
}

.theme-toggle:hover .theme-icon {
	transform: rotate(20deg);
}

header h2 {
	font-size: clamp(1rem, 2vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
	background: linear-gradient(135deg, var(--text) 30%, var(--accent2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

header p.subtitle {
	color: var(--muted);
	margin-top: .5rem;
	font-size: .95rem;
}

/* ── STATS BAR ── */
.stats-bar {
	max-width: 1280px;
	margin: 1.5rem auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.stat-chip {
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: .35rem .9rem;
	font-size: .82rem;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: .4rem;
}

[data-theme="light"] .stat-chip {
	background: var(--card);
}

.stat-chip span {
	color: var(--text);
	font-weight: 600;
}

/* ── TOOLBAR ── */
.toolbar {
	max-width: 1280px;
	margin: 1.5rem auto;
	padding: 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

.search-wrap {
	position: relative;
	flex: 1;
	min-width: 200px;
	max-width: 400px;
}

.search-wrap svg {
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	pointer-events: none;
}

#searchInput {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: inherit;
	font-size: .9rem;
	padding: .6rem 1rem .6rem 2.5rem;
	outline: none;
	transition: border-color .2s;
}

#searchInput:focus {
	border-color: var(--accent);
}

select {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: inherit;
	font-size: .88rem;
	padding: .6rem 2rem .6rem .9rem;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: none;
	transition: border-color .2s;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .6rem center;
}

[data-theme="light"] select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

select:focus {
	border-color: var(--accent);
}

/* ── COUNT LABEL ── */
#countLabel {
	margin-left: auto;
	font-size: .82rem;
	color: var(--muted);
	white-space: nowrap;
}

/* ── SEMESTER TABS ── */
.sem-tabs {
	max-width: 1280px;
	margin: 0 auto 1.25rem;
	padding: 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.sem-tab {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted);
	font-size: .8rem;
	font-weight: 500;
	padding: .3rem .85rem;
	cursor: pointer;
	transition: all .2s;
}

.sem-tab:hover {
	border-color: var(--accent);
	color: var(--text);
}

.sem-tab.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ── TABLE ── */
.table-wrap {
	max-width: 1280px;
	margin: 0 auto 3rem;
	padding: 0 1rem;
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

thead tr {
	background: var(--card);
	border-bottom: 2px solid var(--border);
}

thead th {
	padding: .85rem 1rem;
	text-align: left;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

tbody tr {
	border-bottom: 1px solid rgba(46, 51, 84, .5);
	transition: background .15s;
}

[data-theme="light"] tbody tr {
	border-bottom: 1px solid var(--border);
}

tbody tr:last-child {
	border-bottom: none;
}

tbody tr:hover {
	background: rgba(108, 99, 255, .07);
}

tbody td {
	padding: .75rem 1rem;
	vertical-align: middle;
}

/* ── Semester grouping header ── */
.sem-header td {
	background: linear-gradient(90deg, rgba(108, 99, 255, .15), transparent);
	border-left: 3px solid var(--accent);
	color: var(--accent2);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .55rem 1rem;
}

/* ── badges ── */
.badge {
	display: inline-block;
	padding: .17rem .6rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
}

.badge-w {
	background: rgba(34, 197, 94, .15);
	color: #4ade80;
	border: 1px solid rgba(34, 197, 94, .3);
}

.badge-p {
	background: rgba(245, 158, 11, .15);
	color: #fbbf24;
	border: 1px solid rgba(245, 158, 11, .3);
}

.badge-default {
	background: rgba(148, 163, 184, .1);
	color: var(--muted);
	border: 1px solid var(--border);
}

/* ── SKS pill ── */
.sks-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-weight: 700;
	font-size: .85rem;
	background: rgba(108, 99, 255, .15);
	color: var(--accent2);
	border: 1px solid rgba(108, 99, 255, .3);
}

.kode {
	font-family: 'Courier New', monospace;
	font-size: .8rem;
	color: var(--muted);
}

/* ── LOADING / EMPTY ── */
#statusMsg {
	text-align: center;
	padding: 4rem 1rem;
	color: var(--muted);
}

.spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 1rem;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── footer ── */
footer {
	text-align: center;
	padding: 1.5rem;
	font-size: .78rem;
	color: var(--muted);
	border-top: 1px solid var(--border);
}

/* ── TOMBOL PROGRES ── */
.btn-progres {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: linear-gradient(135deg, #8BC34A, #FF9800); //linear-gradient(135deg, #6c63ff, #a78bfa);
	border: none;
	border-radius: var(--radius);
	color: #fff;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 600;
	padding: .6rem 1.1rem;
	cursor: pointer;
	transition: opacity .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 4px 15px rgba(108, 99, 255, .35);
	white-space: nowrap;
}

.btn-progres:hover {
	opacity: .9;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(108, 99, 255, .5);
}

.btn-progres:active {
	transform: translateY(0);
}

/* ── MODAL OVERLAY ── */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .7);
	backdrop-filter: blur(4px);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s;
}

.modal-overlay.open {
	opacity: 1;
	pointer-events: all;
}

.modal {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	width: 100%;
	max-width: 85%; //680px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(20px);
	transition: transform .25s;
	box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
}

.modal-overlay.open .modal {
	transform: translateY(0);
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem 1rem;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.modal-header h2 {
	font-size: 1.05rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--text), var(--accent2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.modal-close {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--muted);
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.1rem;
	transition: all .15s;
}

.modal-close:hover {
	background: rgba(239, 68, 68, .15);
	color: #ef4444;
	border-color: rgba(239, 68, 68, .3);
}

.modal-body {
	padding: 1.25rem 1.5rem;
	overflow-y: auto;
	flex: 1;
}

/* textarea input */
.progres-textarea {
	width: 100%;
	min-height: 160px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: 'Courier New', monospace;
	font-size: .82rem;
	line-height: 1.6;
	padding: .85rem 1rem;
	resize: vertical;
	outline: none;
	transition: border-color .2s;
}

.progres-textarea:focus {
	border-color: var(--accent);
}

.progres-textarea::placeholder {
	color: var(--muted);
	font-style: italic;
}

.form-label {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: .45rem;
}

.form-group {
	margin-bottom: 1rem;
}

/* select in modal */
.modal-select {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text);
	font-family: inherit;
	font-size: .9rem;
	padding: .65rem 2.2rem .65rem .9rem;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	transition: border-color .2s;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
}

[data-theme="light"] .modal-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.modal-select:focus {
	border-color: var(--accent);
}

.btn-analisa {
	width: 100%;
	background: linear-gradient(135deg, #8BC34A, #FF9800); //linear-gradient(135deg, #6c63ff, #a78bfa);
	border: none;
	border-radius: var(--radius);
	color: #fff;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	padding: .75rem;
	cursor: pointer;
	margin-top: .5rem;
	transition: opacity .2s, transform .15s;
	box-shadow: 0 4px 15px rgba(108, 99, 255, .3);
}

.btn-analisa:hover {
	opacity: .9;
	transform: translateY(-1px);
}

/* ── MODAL HASIL ── */
.modal-hasil {
	max-width: 85%; //860px;
}

/* result summary tiles */
.result-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.result-tile {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .85rem 1rem;
	text-align: center;
}

.result-tile .tile-num {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
}

.result-tile .tile-lbl {
	font-size: .75rem;
	color: var(--muted);
	margin-top: .25rem;
}

.tile-green .tile-num {
	color: #4ade80;
}

.tile-red .tile-num {
	color: #f87171;
}

.tile-amber .tile-num {
	color: #fbbf24;
}

/* result tabs */
.res-tabs {
	display: flex;
	gap: .5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: .5rem;
}

.res-tab {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--muted);
	font-family: inherit;
	font-size: .83rem;
	font-weight: 600;
	padding: .35rem .85rem;
	cursor: pointer;
	transition: all .15s;
}

.res-tab:hover {
	color: var(--text);
	border-color: var(--border);
}

.res-tab.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.res-panel {
	display: none;
}

.res-panel.active {
	display: block;
}

/* result table */
.res-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .83rem;
}

.res-table th {
	background: var(--card);
	color: var(--muted);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .65rem .85rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.res-table td {
	padding: .6rem .85rem;
	border-bottom: 1px solid rgba(46, 51, 84, .4);
	vertical-align: middle;
}

[data-theme="light"] .res-table td {
	border-bottom: 1px solid var(--border);
}

.res-table tr:last-child td {
	border-bottom: none;
}

.res-table tr:hover td {
	background: rgba(108, 99, 255, .06);
}

.sks-sml {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	font-size: .78rem;
	font-weight: 700;
	background: rgba(108, 99, 255, .15);
	color: var(--accent2);
	border: 1px solid rgba(108, 99, 255, .3);
}

.nilai-chip {
	display: inline-block;
	padding: .1rem .55rem;
	border-radius: 6px;
	font-size: .75rem;
	font-weight: 700;
	background: rgba(167, 139, 250, .15);
	color: var(--accent2);
	border: 1px solid rgba(167, 139, 250, .3);
}

.empty-panel {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--muted);
	font-size: .88rem;
}

/* ── TOAST ── */
#toastContainer {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 999;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: center;
	gap: .65rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: .75rem 1.1rem;
	font-size: .88rem;
	color: var(--text);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
	pointer-events: all;
	animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
	max-width: 340px;
}

.toast.hide {
	animation: toastOut .3s ease forwards;
}

.toast-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

.toast-warn {
	border-color: rgba(245, 158, 11, .4);
}

.toast-warn .toast-icon::before {
	content: '⚠️';
}

.toast-error {
	border-color: rgba(239, 68, 68, .4);
}

.toast-error .toast-icon::before {
	content: '❌';
}

.toast-ok {
	border-color: rgba(34, 197, 94, .4);
}

.toast-ok .toast-icon::before {
	content: '✅';
}

@keyframes toastIn {
	from {
		opacity: 0;
		transform: translateX(30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes toastOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(30px);
	}
}

.tile-lulus .tile-num {
	color: #34d399;
}

.tile-blm-lulus .tile-num {
	color: #fb923c;
}

@media (max-width: 640px) {
	header {
		padding: 1.5rem 1rem 1.25rem;
	}

	.stats-bar,
	.toolbar,
	.sem-tabs,
	.table-wrap {
		padding: 0 .5rem;
	}

	thead th:nth-child(1),
	tbody td:nth-child(1) {
		display: none;
	}

	.result-tiles {
		grid-template-columns: repeat(3, 1fr);
		gap: .4rem;
	}

	.result-tile .tile-num {
		font-size: 1.2rem;
	}
}