/* Seeker Report — tampilan frontend */
.skr-app {
	--skr-text: #1f2937;
	--skr-muted: #6b7280;
	--skr-border: #e5e7eb;
	--skr-bg: #ffffff;
	--skr-soft: #f8fafc;
	--skr-accent: #0f766e;
	--skr-accent-dark: #115e59;
	--skr-danger: #b91c1c;
	--skr-ok: #15803d;
	color: var(--skr-text);
	font-size: 15px;
	line-height: 1.5;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}
.skr-app *, .skr-app *::before, .skr-app *::after { box-sizing: border-box; }
.skr-app [hidden] { display: none !important; }

.skr-head { margin-bottom: 16px; }
.skr-title { margin: 0 0 4px; font-size: 1.5em; }
.skr-sub { margin: 0; color: var(--skr-muted); }

.skr-error { color: var(--skr-danger); }
.skr-ok { color: var(--skr-ok); }
.skr-muted { color: var(--skr-muted); }

/* Gerbang kata sandi */
.skr-gate { max-width: 420px; padding: 16px; border: 1px solid var(--skr-border); border-radius: 10px; background: var(--skr-soft); }
.skr-label { display: block; font-weight: 600; margin-bottom: 6px; }
.skr-gate-row { display: flex; gap: 8px; }
.skr-input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; }

/* Tombol */
.skr-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px; border-radius: 8px; border: 1px solid #cbd5e1;
	background: #fff; color: var(--skr-text); font-size: 15px; font-weight: 600; cursor: pointer;
}
.skr-btn:hover { background: var(--skr-soft); }
.skr-btn:disabled { opacity: .55; cursor: progress; }
.skr-btn-primary { background: var(--skr-accent); border-color: var(--skr-accent); color: #fff; }
.skr-btn-primary:hover { background: var(--skr-accent-dark); }

.skr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.skr-export-msg a { font-weight: 600; }

/* Progres */
.skr-progress { margin: 4px 0 16px; }
.skr-bar { height: 8px; background: var(--skr-border); border-radius: 999px; overflow: hidden; }
.skr-bar-fill { height: 100%; width: 0; background: var(--skr-accent); transition: width .3s ease; }
.skr-status { margin: 6px 0 0; color: var(--skr-muted); font-size: 14px; }

/* Tata letak: tabel + panel biaya di samping */
.skr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.skr-results { min-width: 0; }
.skr-results[hidden] + .skr-cost { grid-column: 1 / -1; max-width: 320px; }
.skr-range { margin: 0 0 8px; color: var(--skr-muted); font-size: 14px; }
.skr-footnote { margin-top: 8px; color: var(--skr-muted); font-size: 13px; }

.skr-cost { position: sticky; top: 16px; padding: 14px 16px; border: 1px solid var(--skr-border); border-radius: 10px; background: var(--skr-soft); font-size: 14px; }
.skr-cost h3 { margin: 0 0 8px; font-size: 1.05em; }
.skr-cost dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 8px; }
.skr-cost dt { color: var(--skr-muted); }
.skr-cost dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.skr-c-split p { margin: 6px 0 0; font-size: 12.5px; color: var(--skr-muted); }

/* Tabel */
.skr-table-wrap { overflow-x: auto; border: 1px solid var(--skr-border); border-radius: 10px; background: var(--skr-bg); }
.skr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.skr-table th, .skr-table td { padding: 10px; border-bottom: 1px solid var(--skr-border); text-align: left; vertical-align: top; }
.skr-table th { background: var(--skr-soft); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--skr-muted); white-space: nowrap; }
.skr-table tbody tr:last-child td { border-bottom: 0; }
.skr-table td.skr-summary { min-width: 260px; }
.skr-table td:nth-child(9) { min-width: 300px; }
.skr-name a { font-weight: 600; }
.skr-signs { margin: 6px 0 0; padding-left: 18px; color: var(--skr-muted); font-size: 13px; }
.skr-questions { margin: 0; padding-left: 20px; }
.skr-questions li { margin-bottom: 4px; }
.skr-row-error { margin: 6px 0 0; color: var(--skr-danger); font-size: 12.5px; }

.skr-badge { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 999px; text-align: center; font-weight: 700; color: #fff; }
.skr-badge-label { display: block; margin-top: 4px; font-size: 12px; color: var(--skr-muted); white-space: nowrap; }
.skr-lv1 { background: #9ca3af; }
.skr-lv2 { background: #64748b; }
.skr-lv3 { background: #d97706; }
.skr-lv4 { background: #0d9488; }
.skr-lv5 { background: #15803d; }

/* Layar kecil: panel biaya di atas, tabel menjadi kartu */
@media (max-width: 900px) {
	.skr-layout { grid-template-columns: 1fr; }
	.skr-cost { position: static; order: -1; }
	.skr-results[hidden] + .skr-cost { max-width: none; }
}
@media (max-width: 700px) {
	.skr-table-wrap { border: 0; background: transparent; overflow: visible; }
	.skr-table thead { display: none; }
	.skr-table, .skr-table tbody, .skr-table tr, .skr-table td { display: block; width: 100%; }
	.skr-table tr { margin-bottom: 14px; border: 1px solid var(--skr-border); border-radius: 10px; background: var(--skr-bg); padding: 4px 0; }
	.skr-table td { border-bottom: 1px solid var(--skr-soft); min-width: 0 !important; }
	.skr-table td::before { content: attr(data-label); display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--skr-muted); margin-bottom: 2px; }
	.skr-gate-row { flex-direction: column; }
}