/* =====================================================================
   SAKTI REMAJA v2.0 — theme.css
   Identitas visual: ungu SAKTI sebagai aksen (60/30/10), latar netral,
   pemisah 1px, radius 10–12px, tanpa bayangan tebal.
   ================================================================== */

:root {
	/* Palet inti */
	--primary:      #7B2A8E;
	--primary-dark: #4A1259;
	--primary-soft: #F1E3F5;
	--accent-mint:  #DCEEE8;
	--accent-rose:  #FBE9EF;

	/* Status */
	--success: #2E9E6B;
	--warning: #F0B429;
	--danger:  #D64550;
	--info:    #2F6FED;

	/* Netral */
	--ink:     #1F1B24;
	--muted:   #6B6570;
	--line:    #E6E1EA;
	--bg:      #F7F5F9;
	--surface: #FFFFFF;

	/* Turunan */
	--success-soft: #E4F3EC;
	--warning-soft: #FDF3DC;
	--danger-soft:  #FBE7E9;
	--info-soft:    #E7EEFD;

	--radius:    12px;
	--radius-sm: 10px;
	--radius-xs: 8px;

	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-5: 40px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:  180ms;

	--sidebar-w: 244px;
	--sidebar-w-collapsed: 68px;
	--header-h: 60px;
	--bottomnav-h: 62px;
}

/* ---------------------------------------------------------------------
   Dasar
   ------------------------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }

body {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5 { font-family: inherit; color: var(--ink); margin: 0; }

a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--primary-dark); text-decoration: underline; }

::selection { background: var(--primary-soft); color: var(--primary-dark); }

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* Tipografi utilitas */
.sk-h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.sk-h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
.sk-h3 { font-size: 16px; font-weight: 600; }
.sk-caption { font-size: 12px; color: var(--muted); }
.sk-muted { color: var(--muted); }
.sk-strong { font-weight: 600; }
.sk-mono { font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) { .sk-h1 { font-size: 22px; } }

/* ---------------------------------------------------------------------
   Portal petugas: header + sidebar
   ------------------------------------------------------------------ */

.sk-shell { min-height: 100vh; display: flex; flex-direction: column; }

.sk-topbar {
	position: sticky; top: 0; z-index: 1030;
	height: var(--header-h);
	background: var(--primary-dark);
	color: #fff;
	display: flex; align-items: center; gap: var(--sp-2);
	padding: 0 var(--sp-2);
	border-bottom: 1px solid rgba(255,255,255,.09);
}
.sk-topbar__brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sk-topbar__name {
	font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	color: #fff; white-space: nowrap;
}
.sk-topbar__sub {
	font-size: 12px; color: rgba(255,255,255,.72);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-topbar__spacer { flex: 1 1 auto; }
.sk-topbar a { color: #fff; }

.sk-iconbtn {
	width: 44px; height: 44px; min-width: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: var(--radius-sm); background: transparent;
	color: inherit; font-size: 15px; cursor: pointer;
	transition: background var(--dur) var(--ease);
}
.sk-iconbtn:hover { background: rgba(255,255,255,.12); }

.sk-user {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 10px 6px 6px; border-radius: 999px;
	background: rgba(255,255,255,.10);
	transition: background var(--dur) var(--ease);
}
.sk-user:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.sk-user__av {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--primary); color: #fff;
	display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.sk-user__meta { line-height: 1.2; }
.sk-user__name { font-size: 13px; font-weight: 600; color: #fff; }
.sk-user__role { font-size: 11px; color: rgba(255,255,255,.7); }

.sk-body { flex: 1 1 auto; display: flex; align-items: stretch; }

.sk-sidebar {
	width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
	background: var(--surface);
	border-right: 1px solid var(--line);
	padding: var(--sp-2) 12px var(--sp-4);
	transition: width var(--dur) var(--ease), flex-basis var(--dur) var(--ease);
	position: sticky; top: var(--header-h);
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
}
.sk-shell.is-collapsed .sk-sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }
.sk-shell.is-collapsed .sk-nav__text,
.sk-shell.is-collapsed .sk-nav__group { display: none; }
.sk-shell.is-collapsed .sk-nav__link { justify-content: center; padding-left: 0; padding-right: 0; }

.sk-nav__group {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); padding: 18px 10px 6px;
}
.sk-nav__link {
	display: flex; align-items: center; gap: 12px;
	min-height: 44px; padding: 0 12px; margin-bottom: 2px;
	border-radius: var(--radius-sm);
	color: var(--ink); font-size: 14px; font-weight: 500;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sk-nav__link:hover { background: var(--bg); color: var(--primary-dark); text-decoration: none; }
.sk-nav__link.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.sk-nav__link i { width: 18px; text-align: center; font-size: 15px; color: var(--muted); }
.sk-nav__link.is-active i { color: var(--primary); }
.sk-nav__badge {
	margin-left: auto; font-size: 11px; font-weight: 700;
	background: var(--danger); color: #fff; border-radius: 999px; padding: 1px 7px;
}

.sk-main { flex: 1 1 auto; min-width: 0; padding: var(--sp-3); }
@media (max-width: 767.98px) { .sk-main { padding: var(--sp-2); } }

.sk-pagehead {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2);
	padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
}
.sk-pagehead__text { min-width: 0; flex: 1 1 320px; }
.sk-pagehead__sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sk-pagehead__act { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

@media (max-width: 991.98px) {
	.sk-sidebar {
		position: fixed; top: var(--header-h); left: 0; z-index: 1040;
		transform: translateX(-100%);
		transition: transform var(--dur) var(--ease);
		box-shadow: 0 0 0 100vmax rgba(31,27,36,0);
	}
	.sk-shell.is-open .sk-sidebar { transform: translateX(0); }
	.sk-shell.is-collapsed .sk-sidebar { width: var(--sidebar-w); flex-basis: var(--sidebar-w); }
	.sk-shell.is-collapsed .sk-nav__text, .sk-shell.is-collapsed .sk-nav__group { display: block; }
	.sk-shell.is-collapsed .sk-nav__link { justify-content: flex-start; padding: 0 12px; }
	.sk-backdrop {
		position: fixed; inset: var(--header-h) 0 0 0; z-index: 1035;
		background: rgba(31,27,36,.42); opacity: 0; pointer-events: none;
		transition: opacity var(--dur) var(--ease);
	}
	.sk-shell.is-open .sk-backdrop { opacity: 1; pointer-events: auto; }
}

/* ---------------------------------------------------------------------
   Portal siswa: mobile-first
   ------------------------------------------------------------------ */

.sk-app { min-height: 100vh; background: var(--bg); padding-bottom: calc(var(--bottomnav-h) + 12px); }

.sk-appbar {
	position: sticky; top: 0; z-index: 1020;
	background: var(--primary);
	color: #fff;
	padding: 12px var(--sp-2);
	display: flex; align-items: center; gap: 12px;
}
.sk-appbar__back {
	width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
	display: grid; place-items: center; color: #fff;
	background: rgba(255,255,255,.14);
	transition: background var(--dur) var(--ease);
}
.sk-appbar__back:hover { background: rgba(255,255,255,.25); text-decoration: none; }
.sk-appbar__title { font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.sk-appbar__sub { font-size: 12px; color: rgba(255,255,255,.78); }

.sk-appmain { padding: var(--sp-2); max-width: 720px; margin: 0 auto; }

.sk-bottomnav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
	height: var(--bottomnav-h);
	background: var(--surface);
	border-top: 1px solid var(--line);
	display: grid; grid-template-columns: repeat(5, 1fr);
	padding-bottom: env(safe-area-inset-bottom);
}
.sk-bottomnav__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 44px; color: var(--muted); font-size: 11px; font-weight: 500;
	transition: color var(--dur) var(--ease);
}
.sk-bottomnav__item i { font-size: 17px; }
.sk-bottomnav__item:hover { color: var(--primary); text-decoration: none; }
.sk-bottomnav__item.is-active { color: var(--primary); font-weight: 700; }
.sk-bottomnav__item.is-active i { color: var(--primary); }

@media (min-width: 768px) {
	.sk-appmain { max-width: 760px; padding: var(--sp-3) var(--sp-2); }
}

/* ---------------------------------------------------------------------
   Kartu
   ------------------------------------------------------------------ */

.sk-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--sp-2);
}
.sk-card + .sk-card { margin-top: var(--sp-2); }
.sk-card__head {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding-bottom: 12px; margin-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.sk-card__head .sk-h2 { flex: 1 1 auto; min-width: 0; }
.sk-card__foot { padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--line); }
.sk-card--flush { padding: 0; overflow: hidden; }
.sk-card--flush .sk-card__head { padding: var(--sp-2); margin-bottom: 0; }

/* Kartu statistik */
.sk-stats { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) { .sk-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)    { .sk-stats { grid-template-columns: 1fr; } }

.sk-stat {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 14px 16px;
	display: flex; flex-direction: column; gap: 2px;
	transition: border-color var(--dur) var(--ease);
}
.sk-stat:hover { border-color: #D6CEDD; }
.sk-stat__label { font-size: 12px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.sk-stat__label i { color: var(--primary); font-size: 12px; }
.sk-stat__value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sk-stat__note { font-size: 12px; color: var(--muted); }
.sk-stat--accent { background: var(--primary-soft); border-color: #E2CDE9; }
.sk-stat--accent .sk-stat__value { color: var(--primary-dark); }
.sk-stat--danger { background: var(--danger-soft); border-color: #F3CFD3; }
.sk-stat--danger .sk-stat__value { color: var(--danger); }
.sk-stat--mint { background: var(--accent-mint); border-color: #C6E1D9; }

/* Panel informasi / peringatan lembut */
.sk-panel {
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;
	font-size: 14px;
}
.sk-panel i { font-size: 15px; margin-top: 2px; flex: 0 0 auto; }
.sk-panel__title { font-weight: 600; margin-bottom: 2px; }
.sk-panel--info    { background: var(--accent-mint); border-color: #C6E1D9; }
.sk-panel--info i  { color: #1F7A5E; }
.sk-panel--privasi { background: var(--accent-rose); border-color: #F3D3DE; }
.sk-panel--privasi i { color: #B03A5B; }
.sk-panel--warning { background: var(--warning-soft); border-color: #F0DCA8; }
.sk-panel--warning i { color: #A9760A; }
.sk-panel--danger  { background: var(--danger-soft); border-color: #F3CFD3; }
.sk-panel--danger i { color: var(--danger); }
.sk-panel--soft    { background: var(--primary-soft); border-color: #E2CDE9; }
.sk-panel--soft i  { color: var(--primary); }
.sk-panel + .sk-panel { margin-top: 12px; }

/* Disclaimer wajib */
.sk-disclaimer {
	background: var(--accent-rose); border: 1px solid #F3D3DE;
	border-radius: var(--radius); padding: 12px 14px;
	font-size: 13px; color: #6E2A40; line-height: 1.55;
	display: flex; gap: 10px; align-items: flex-start;
}
.sk-disclaimer i { color: #B03A5B; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Badge, chip, label
   ------------------------------------------------------------------ */

.sk-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: 999px;
	font-size: 12px; font-weight: 600; line-height: 1.4;
	border: 1px solid transparent; white-space: nowrap;
}
.sk-badge--success { background: var(--success-soft); color: #1E6E49; border-color: #C6E5D6; }
.sk-badge--warning { background: var(--warning-soft); color: #8A5F08; border-color: #F0DCA8; }
.sk-badge--danger  { background: var(--danger-soft);  color: #A32B36; border-color: #F3CFD3; }
.sk-badge--info    { background: var(--info-soft);    color: #1D4EBB; border-color: #CBD9FA; }
.sk-badge--muted   { background: var(--bg);           color: var(--muted); border-color: var(--line); }
.sk-badge--primary { background: var(--primary-soft); color: var(--primary-dark); border-color: #E2CDE9; }

.sk-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--surface);
	font-size: 13px; color: var(--ink);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sk-chip:hover { border-color: var(--primary); text-decoration: none; }
.sk-chip.is-active { background: var(--primary-soft); border-color: #E2CDE9; color: var(--primary-dark); font-weight: 600; }

.sk-tag-legacy {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--primary-dark); background: var(--primary-soft);
	border: 1px solid #E2CDE9; border-radius: var(--radius-xs); padding: 2px 7px;
}

/* ---------------------------------------------------------------------
   Tombol
   ------------------------------------------------------------------ */

.sk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px;
	border-radius: var(--radius-sm); border: 1px solid transparent;
	font-size: 14px; font-weight: 600; line-height: 1;
	cursor: pointer; background: var(--surface); color: var(--ink);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sk-btn:hover { text-decoration: none; }
.sk-btn:disabled, .sk-btn.is-disabled { opacity: .55; cursor: not-allowed; }

.sk-btn--primary  { background: var(--primary); color: #fff; }
.sk-btn--primary:hover { background: var(--primary-dark); color: #fff; }
.sk-btn--outline  { border-color: var(--line); color: var(--ink); }
.sk-btn--outline:hover { border-color: var(--primary); color: var(--primary-dark); }
.sk-btn--ghost    { background: transparent; color: var(--primary); }
.sk-btn--ghost:hover { background: var(--primary-soft); }
.sk-btn--danger   { background: var(--danger); color: #fff; }
.sk-btn--danger:hover { background: #B93A44; color: #fff; }
.sk-btn--success  { background: var(--success); color: #fff; }
.sk-btn--success:hover { background: #268257; color: #fff; }
.sk-btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-xs); }
.sk-btn--block { width: 100%; }
.sk-btn--lg { min-height: 50px; font-size: 15px; padding: 0 24px; }

/* ---------------------------------------------------------------------
   Formulir
   ------------------------------------------------------------------ */

.sk-field { margin-bottom: var(--sp-2); }
.sk-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.sk-label .sk-req { color: var(--danger); }
.sk-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }

.sk-input, .sk-select, .sk-textarea {
	width: 100%; min-height: 44px; padding: 10px 12px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--ink);
	font-family: inherit; font-size: 14px;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sk-textarea { min-height: 96px; resize: vertical; }
.sk-input:focus, .sk-select:focus, .sk-textarea:focus {
	outline: none; border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(123,42,142,.12);
}
.sk-input::placeholder, .sk-textarea::placeholder { color: #A49DAB; }
.sk-input.is-invalid, .sk-select.is-invalid, .sk-textarea.is-invalid { border-color: var(--danger); }

.sk-error { display: block; font-size: 12px; color: var(--danger); margin-top: 5px; font-weight: 500; }
.sk-error:empty { display: none; }

.sk-filter {
	display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	align-items: end;
}

/* Pilihan jawaban skrining */
.sk-opt {
	display: flex; align-items: center; gap: 12px;
	min-height: 48px; padding: 10px 14px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--surface); cursor: pointer; font-size: 14px;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sk-opt + .sk-opt { margin-top: 8px; }
.sk-opt:hover { border-color: #C9B6D2; }
.sk-opt input { width: 18px; height: 18px; accent-color: var(--primary); flex: 0 0 auto; }
.sk-opt.is-checked { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }

.sk-check {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 14px; line-height: 1.5; cursor: pointer;
}
.sk-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Tabel
   ------------------------------------------------------------------ */

.sk-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sk-table th {
	text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .03em;
	text-transform: uppercase; color: var(--muted);
	padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
	background: var(--surface);
}
.sk-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sk-table tbody tr { transition: background var(--dur) var(--ease); }
.sk-table tbody tr:hover { background: #FBFAFC; }
.sk-table tbody tr:last-child td { border-bottom: 0; }
.sk-table .sk-num { text-align: right; font-variant-numeric: tabular-nums; }
.sk-table__code { font-weight: 700; color: var(--primary-dark); white-space: nowrap; }

/* Ponsel: tabel menjadi kartu bertumpuk */
@media (max-width: 767.98px) {
	.sk-table--stack thead { display: none; }
	.sk-table--stack tbody tr {
		display: block; border: 1px solid var(--line); border-radius: var(--radius-sm);
		padding: 12px; margin-bottom: 10px; background: var(--surface);
	}
	.sk-table--stack tbody tr:last-child { margin-bottom: 0; }
	.sk-table--stack td {
		display: flex; justify-content: space-between; align-items: center; gap: 12px;
		padding: 6px 0; border: 0; text-align: right;
	}
	.sk-table--stack td::before {
		content: attr(data-label);
		font-size: 12px; font-weight: 600; color: var(--muted);
		text-align: left; flex: 0 0 auto;
	}
	.sk-table--stack td:first-child { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }

	/* Alternatif: kolom pertama menempel saat digulir */
	.sk-table--sticky th:first-child, .sk-table--sticky td:first-child {
		position: sticky; left: 0; background: var(--surface); z-index: 1;
	}
}

/* ---------------------------------------------------------------------
   Progres
   ------------------------------------------------------------------ */

.sk-progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sk-progress__bar {
	height: 100%; border-radius: 999px; background: var(--primary);
	transition: width 240ms var(--ease);
}
.sk-progress__bar--success { background: var(--success); }
.sk-progress__bar--warning { background: var(--warning); }
.sk-progress__bar--danger  { background: var(--danger); }
.sk-progress--lg { height: 12px; }

.sk-meter { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.sk-meter span { display: block; height: 100%; }
.sk-meter__rendah { background: var(--success); }
.sk-meter__sedang { background: var(--warning); }
.sk-meter__tinggi { background: var(--danger); }

.sk-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.sk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sk-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Langkah wizard */
.sk-steps { display: flex; gap: 6px; margin-bottom: var(--sp-2); }
.sk-steps__item { flex: 1 1 0; }
.sk-steps__bar { height: 5px; border-radius: 999px; background: var(--line); }
.sk-steps__item.is-done .sk-steps__bar { background: var(--success); }
.sk-steps__item.is-current .sk-steps__bar { background: var(--primary); }
.sk-steps__label { font-size: 11px; color: var(--muted); margin-top: 6px; display: block; }
.sk-steps__item.is-current .sk-steps__label { color: var(--primary-dark); font-weight: 600; }

/* ---------------------------------------------------------------------
   Linimasa
   ------------------------------------------------------------------ */

.sk-timeline { position: relative; padding-left: 30px; }
.sk-timeline::before {
	content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px;
	width: 2px; background: var(--line);
}
.sk-timeline__item { position: relative; padding-bottom: 20px; }
.sk-timeline__item:last-child { padding-bottom: 0; }
.sk-timeline__dot {
	position: absolute; left: -30px; top: 2px;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--surface); border: 1px solid var(--line);
	display: grid; place-items: center; font-size: 10px; color: var(--primary);
}
.sk-timeline__item.is-done .sk-timeline__dot { background: var(--success-soft); border-color: #C6E5D6; color: #1E6E49; }
.sk-timeline__time { font-size: 12px; color: var(--muted); }
.sk-timeline__title { font-size: 14px; font-weight: 600; margin: 2px 0; }
.sk-timeline__text { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------
   Daftar & item
   ------------------------------------------------------------------ */

.sk-list { display: flex; flex-direction: column; }
.sk-list__item {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 0; border-bottom: 1px solid var(--line);
	color: var(--ink);
}
.sk-list__item:last-child { border-bottom: 0; }
.sk-list__item:hover { text-decoration: none; }
a.sk-list__item:hover .sk-list__title { color: var(--primary-dark); }
.sk-list__ico {
	width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius-sm);
	display: grid; place-items: center; font-size: 15px;
	background: var(--primary-soft); color: var(--primary);
}
.sk-list__ico--mint { background: var(--accent-mint); color: #1F7A5E; }
.sk-list__ico--rose { background: var(--accent-rose); color: #B03A5B; }
.sk-list__body { flex: 1 1 auto; min-width: 0; }
.sk-list__title { font-size: 14px; font-weight: 600; }
.sk-list__sub { font-size: 12.5px; color: var(--muted); }

/* Menu pintasan siswa */
.sk-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 400px) { .sk-quick { grid-template-columns: repeat(3, 1fr); } }
.sk-quick__item {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 14px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--surface); text-align: center;
	font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.3;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sk-quick__item:hover { border-color: var(--primary); background: #FDFBFE; text-decoration: none; }
.sk-quick__item i { font-size: 18px; color: var(--primary); }

/* Kartu materi edukasi */
.sk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sk-media {
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
	overflow: hidden; display: flex; flex-direction: column;
	transition: border-color var(--dur) var(--ease);
}
.sk-media:hover { border-color: var(--primary); text-decoration: none; }
.sk-media__thumb {
	aspect-ratio: 16 / 9; background: var(--primary-soft);
	display: grid; place-items: center; color: var(--primary); font-size: 26px;
	border-bottom: 1px solid var(--line); position: relative;
}
.sk-media__thumb--mint { background: var(--accent-mint); color: #1F7A5E; }
.sk-media__dur {
	position: absolute; right: 8px; bottom: 8px;
	background: rgba(31,27,36,.78); color: #fff;
	font-size: 11px; padding: 2px 7px; border-radius: var(--radius-xs);
}
.sk-media__body { padding: 12px 14px 14px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.sk-media__title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sk-media__meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------ */

.sk-empty { text-align: center; padding: var(--sp-4) var(--sp-2); }
.sk-empty__ico {
	width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
	background: var(--bg); border: 1px solid var(--line);
	display: grid; place-items: center; font-size: 20px; color: var(--muted);
}
.sk-empty__title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.sk-empty__text { font-size: 13.5px; color: var(--muted); max-width: 420px; margin: 0 auto 16px; }

/* ---------------------------------------------------------------------
   Halaman auth (onboarding, login, consent)
   ------------------------------------------------------------------ */

.sk-auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.sk-auth__hero {
	background: var(--primary-dark); color: #fff;
	padding: var(--sp-4) var(--sp-2) var(--sp-3);
}
.sk-auth__inner { width: 100%; max-width: 460px; margin: 0 auto; }
.sk-auth__logo {
	width: 54px; height: 54px; border-radius: 15px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
	display: grid; place-items: center; font-size: 22px; color: #fff; margin-bottom: 18px;
}
.sk-auth__name { font-size: 24px; font-weight: 800; letter-spacing: .02em; }
.sk-auth__tagline { font-size: 13.5px; color: rgba(255,255,255,.82); margin-top: 6px; line-height: 1.5; }
.sk-auth__badge {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
	font-size: 12px; font-weight: 600; color: #fff;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px; padding: 5px 12px;
}
.sk-auth__body { flex: 1 1 auto; padding: var(--sp-3) var(--sp-2) var(--sp-4); }
.sk-auth__foot { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: var(--sp-3); }

@media (min-width: 992px) {
	.sk-auth { flex-direction: row; }
	.sk-auth__hero { flex: 0 0 42%; display: flex; align-items: center; padding: var(--sp-5); }
	.sk-auth__body { display: flex; align-items: center; justify-content: center; }
	.sk-auth__body .sk-auth__inner { max-width: 400px; }
}

/* ---------------------------------------------------------------------
   Cetak
   ------------------------------------------------------------------ */

@media print {
	.sk-topbar, .sk-sidebar, .sk-bottomnav, .sk-pagehead__act, .sk-btn, .sk-appbar { display: none !important; }
	body { background: #fff; font-size: 12px; }
	.sk-main, .sk-appmain { padding: 0; }
	.sk-card { border-color: #ccc; break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   Aksesibilitas
   ------------------------------------------------------------------ */

.sk-skip {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.sk-skip:focus { left: 0; }

.sk-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
   Penyelarasan library pihak ketiga
   ------------------------------------------------------------------ */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--line); border-radius: var(--radius-xs);
	padding: 6px 10px; font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--primary-soft) !important; border-color: #E2CDE9 !important; color: var(--primary-dark) !important;
}
.select2-container--default .select2-selection--single {
	height: 44px; border-color: var(--line); border-radius: var(--radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.swal2-popup { border-radius: var(--radius) !important; font-family: inherit !important; }
.swal2-title { font-size: 18px !important; font-weight: 700 !important; }
.swal2-html-container { font-size: 14px !important; }

/* ---------------------------------------------------------------------
   Butir pertanyaan skrining
   ------------------------------------------------------------------ */

.sk-question {
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--surface); padding: var(--sp-2); margin-bottom: 12px;
	transition: border-color var(--dur) var(--ease);
}
.sk-question.is-answered { border-color: #CFE5DA; }
/* Legenda dibuat mengapung penuh agar tidak memotong garis tepi fieldset. */
.sk-question > legend + * { clear: both; }
.sk-question__no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 8px; margin-right: 10px;
	background: var(--primary-soft); color: var(--primary-dark);
	font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.sk-question.is-answered .sk-question__no { background: var(--success-soft); color: #1E6E49; }
.sk-question__text { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; }
.sk-question__note { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: block; }

/* Periode ingatan, penanda kepekaan, dan tombol kosongkan (Form Mandiri v0.10) */
.sk-question__periode {
	display: inline-block; margin-bottom: 5px; padding: 2px 8px; border-radius: 999px;
	background: var(--info-soft); color: #1D4EBB; font-size: 11px; font-weight: 700;
}
.sk-question__peka {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
	font-size: 11px; font-weight: 600; color: #B03A5B;
}
.sk-question__hapus { margin-top: 10px; }
.sk-opt--tolak { border-style: dashed; color: var(--muted); }
.sk-opt--tolak.is-checked { color: var(--text); }
.sk-question[hidden] { display: none; }

/* Prioritas tindak lanjut — P0 bahaya saat ini, P1 prioritas tinggi, P2 dukungan rutin */
.sk-prio {
	display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
	border-radius: 999px; border: 1px solid; font-size: 11.5px; font-weight: 700;
}
.sk-prio--P0   { background: var(--danger-soft);  color: #A32B36; border-color: #F3CFD3; }
.sk-prio--P1   { background: var(--warning-soft); color: #8A5F08; border-color: #F0DCA8; }
.sk-prio--P2   { background: var(--info-soft);    color: #1D4EBB; border-color: #CBD9FA; }
.sk-prio--none { background: var(--success-soft); color: #1E6E49; border-color: #C6E5D6; }

.sk-autosave {
	position: sticky; bottom: calc(var(--bottomnav-h) + 8px); z-index: 5;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 12px 14px; margin-top: 16px;
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.sk-autosave__status { font-size: 12px; color: var(--muted); flex: 1 1 140px; }

/* ---------------------------------------------------------------------
   Logo aplikasi (dapat diunggah Administrator)
   ------------------------------------------------------------------ */

.sk-topbar__logo {
	height: 30px; width: auto; max-width: 120px;
	object-fit: contain; flex: 0 0 auto;
	background: #fff; border-radius: 6px; padding: 2px;
}
.sk-appbar__logo {
	height: 34px; width: 34px; min-width: 34px;
	object-fit: contain; border-radius: 8px;
	background: rgba(255,255,255,.92); padding: 3px;
}
.sk-auth__logo--img { background: #fff; border-color: #fff; padding: 6px; }
.sk-auth__logo--img img { width: 100%; height: 100%; object-fit: contain; }

.sk-logo-preview {
	display: grid; place-items: center;
	aspect-ratio: 16 / 9; margin-bottom: 12px;
	border: 1px dashed var(--line); border-radius: var(--radius);
	background: var(--bg); overflow: hidden; padding: 12px;
}
.sk-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk-logo-preview__kosong { font-size: 34px; color: var(--primary); opacity: .55; }

.sk-brandpreview {
	display: flex; align-items: center; gap: 12px;
	background: var(--primary-dark); color: #fff;
	border-radius: var(--radius); padding: 12px 16px;
}
.sk-brandpreview__logo {
	width: 38px; height: 38px; min-width: 38px; border-radius: 9px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
	display: grid; place-items: center; font-size: 16px; overflow: hidden;
}
.sk-brandpreview__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; }
.sk-brandpreview__teks { line-height: 1.25; min-width: 0; }
.sk-brandpreview__nama {
	display: block; font-size: 15px; font-weight: 800;
	letter-spacing: .04em; text-transform: uppercase;
}
.sk-brandpreview__sub { display: block; font-size: 12px; color: rgba(255,255,255,.72); }

input[type="file"].sk-input { padding: 9px 12px; line-height: 1.4; }