/* ==========================================================================
   SPMB Yayasan — Public Frontend Styles
   Tema: Modern, kekinian, glassmorphism, vertical flow, fully responsive
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

.spmb-wrap, .spmb-wrap * {
	box-sizing: border-box;
}

.spmb-wrap {
	--spmb-primary: #1769e0;
	--spmb-primary-dark: #0d47a1;
	--spmb-primary-light: #edf5ff;
	--spmb-primary-mid: #d8eaff;
	--spmb-accent: #16a34a;
	--spmb-accent-2: #06b6d4;
	--spmb-accent-3: #ec4899;
	--spmb-danger: #ef4444;
	--spmb-warning: #f59e0b;
	--spmb-text: #10112b;
	--spmb-text-muted: #6b7089;
	--spmb-border: #e7e8f5;
	--spmb-bg: #f6f7fd;
	--spmb-white: #ffffff;
	--spmb-radius: 22px;
	--spmb-radius-sm: 14px;
	--spmb-shadow: 0 12px 32px rgba(23, 105, 224, 0.08);
	--spmb-shadow-lg: 0 24px 60px rgba(23, 105, 224, 0.14);
	--spmb-grad: linear-gradient(120deg, #0d47a1 0%, #1769e0 50%, #2196f3 100%);
	--spmb-grad-soft: linear-gradient(135deg, #edf5ff 0%, #f4f9ff 100%);

	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--spmb-text);
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 16px 72px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.spmb-wrap h1, .spmb-wrap h2, .spmb-wrap h3 {
	font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
}

.spmb-muted { color: var(--spmb-text-muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.spmb-wrap * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@keyframes spmb-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes spmb-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-12px, 14px) scale(1.05); }
}
@keyframes spmb-pulse-dot {
	0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.35); }
	70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
	100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ---------- VERTICAL FLOW SECTIONS ---------- */
.spmb-wrap > * { animation: spmb-fade-up .5s ease both; }
.spmb-units-grid { animation-delay: .05s; }
.spmb-auth-section { animation-delay: .1s; }

/* ---------- HERO ---------- */
.spmb-hero {
	background: var(--spmb-grad);
	background-size: 180% 180%;
	border-radius: 28px;
	padding: 52px 28px;
	color: #fff;
	text-align: center;
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--spmb-shadow-lg);
}
.spmb-hero::before {
	content: "";
	position: absolute;
	width: 340px; height: 340px;
	background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
	border-radius: 50%;
	top: -160px; right: -80px;
	animation: spmb-float 9s ease-in-out infinite;
}
.spmb-hero::after {
	content: "";
	position: absolute;
	width: 260px; height: 260px;
	background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
	border-radius: 50%;
	bottom: -130px; left: -60px;
	animation: spmb-float 11s ease-in-out infinite reverse;
}
.spmb-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.16);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.35);
	padding: 7px 18px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .2px;
	margin-bottom: 18px;
	position: relative;
}
.spmb-hero-title {
	font-family: 'Sora', 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(32px, 5.2vw, 48px) !important;
	line-height: 1.04 !important;
	letter-spacing: -1.7px !important;
	text-wrap: balance;
	text-shadow: 0 8px 30px rgba(15, 23, 42, .12);
}
.spmb-hero-title span {
	display: inline-block;
	font-family: 'Sora', 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 700;
	letter-spacing: -1.7px;
	background: linear-gradient(90deg, #ffffff 0%, #e9e7ff 48%, #f7d6ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.spmb-hero h1 {
	font-size: clamp(26px, 5vw, 38px);
	font-weight: 800;
	margin: 0 0 14px;
	position: relative;
	letter-spacing: -0.5px;
}
.spmb-hero p {
	max-width: 560px;
	margin: 0 auto;
	opacity: 0.95;
	font-size: 15.5px;
	position: relative;
}

/* ---------- UNIT CARDS ---------- */
.spmb-units-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}
.spmb-unit-card {
	background: var(--spmb-white);
	border: 1px solid var(--spmb-border);
	border-radius: var(--spmb-radius);
	padding: 22px 18px;
	box-shadow: var(--spmb-shadow);
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
	position: relative;
}
.spmb-unit-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--spmb-shadow-lg);
	border-color: var(--spmb-primary-mid);
}
.spmb-unit-icon {
	font-size: 30px;
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: var(--spmb-grad-soft);
	border-radius: 16px;
	margin-bottom: 14px;
	transition: transform .25s ease;
}
.spmb-unit-card:hover .spmb-unit-icon { transform: scale(1.08) rotate(-4deg); }
.spmb-unit-card:nth-child(4n+1) .spmb-unit-icon { background: linear-gradient(135deg,#eef1ff,#e3e8ff); }
.spmb-unit-card:nth-child(4n+2) .spmb-unit-icon { background: linear-gradient(135deg,#eafff3,#dcf9e8); }
.spmb-unit-card:nth-child(4n+3) .spmb-unit-icon { background: linear-gradient(135deg,#fff0f7,#ffe3ef); }
.spmb-unit-card:nth-child(4n+4) .spmb-unit-icon { background: linear-gradient(135deg,#eafbff,#dcf5ff); }
.spmb-unit-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.spmb-unit-desc { font-size: 13.5px; color: var(--spmb-text-muted); margin: 0 0 14px; min-height: 34px; }
.spmb-unit-gelombang {
	display: flex; align-items: center; gap: 6px;
	font-size: 13.5px; font-weight: 700; color: var(--spmb-primary-dark);
	margin-bottom: 4px;
}
.spmb-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--spmb-accent);
	display: inline-block;
	animation: spmb-pulse-dot 2s infinite;
}
.spmb-unit-date { font-size: 12.5px; color: var(--spmb-text-muted); margin-bottom: 16px; }

/* ---------- BUTTONS ---------- */
.spmb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border-radius: 12px;
	border: none;
	font-family: inherit;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 20px;
	cursor: pointer;
	transition: all .2s cubic-bezier(.2,.8,.2,1);
	text-decoration: none;
}
.spmb-btn-block { width: 100%; }
.spmb-btn-lg { padding: 15px 20px; font-size: 15.5px; }
.spmb-btn-sm { padding: 9px 14px; font-size: 13px; }
.spmb-btn-primary {
	background: var(--spmb-grad);
	background-size: 160% 160%;
	color: #fff;
	box-shadow: 0 10px 24px rgba(67, 56, 202, 0.28);
}
.spmb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(67, 56, 202, 0.36); background-position: 100% 0; }
.spmb-btn-primary:active { transform: translateY(0); }
.spmb-btn-secondary { background: var(--spmb-primary-light); color: var(--spmb-primary-dark); }
.spmb-btn-secondary:hover { background: var(--spmb-primary-mid); }
.spmb-btn-outline { background: transparent; color: var(--spmb-primary); border: 1.5px solid var(--spmb-primary-mid); }
.spmb-btn-outline:hover { background: var(--spmb-primary-light); border-color: var(--spmb-primary); }
.spmb-btn-ghost { background: transparent; color: var(--spmb-text-muted); border: 1.5px solid var(--spmb-border); }
.spmb-btn-ghost:hover { background: #f2f4f8; }
.spmb-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

.spmb-spinner {
	width: 16px; height: 16px;
	border: 2.5px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spmb-spin .7s linear infinite;
}
.spmb-btn-outline .spmb-spinner, .spmb-btn-secondary .spmb-spinner, .spmb-btn-ghost .spmb-spinner {
	border: 2.5px solid rgba(67,56,202,0.25);
	border-top-color: var(--spmb-primary);
}
@keyframes spmb-spin { to { transform: rotate(360deg); } }

/* ---------- AUTH SECTION (vertikal, satu kolom) ---------- */
.spmb-auth-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 620px;
	margin: 0 auto;
}
.spmb-auth-card, .spmb-status-card {
	background: var(--spmb-white);
	border: 1px solid var(--spmb-border);
	border-radius: var(--spmb-radius);
	padding: 30px 26px;
	box-shadow: var(--spmb-shadow);
}
.spmb-status-card h3 { margin-top:0; display:flex; align-items:center; gap:8px; font-size: 17px; font-weight: 800; }
.spmb-icon-search::before { content: "🔎"; }

.spmb-tabs { display: flex; gap: 6px; margin-bottom: 24px; background: var(--spmb-bg); padding: 5px; border-radius: 14px; }
.spmb-tab-btn {
	flex: 1; padding: 11px; border: none; background: transparent;
	border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--spmb-text-muted);
	cursor: pointer; transition: all .2s;
	font-family: inherit;
}
.spmb-tab-btn.active { background: var(--spmb-white); color: var(--spmb-primary); box-shadow: 0 4px 12px rgba(67,56,202,0.14); }

.spmb-tab-panel { display: none; }
.spmb-tab-panel.active { display: block; animation: spmb-fade-up .35s ease both; }

.spmb-label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--spmb-text); }
.spmb-input {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid var(--spmb-border);
	border-radius: 12px;
	font-family: inherit;
	font-size: 14.5px;
	margin-bottom: 16px;
	background: var(--spmb-bg);
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.spmb-input:focus {
	outline: none;
	border-color: var(--spmb-primary);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(67,56,202,0.12);
}
textarea.spmb-input { resize: vertical; }

.spmb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spmb-form-group { margin-bottom: 0; }

.spmb-select-unit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.spmb-radio-card {
	border: 1.5px solid var(--spmb-border);
	border-radius: 14px;
	padding: 14px 6px;
	text-align: center;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	position: relative;
	background: var(--spmb-bg);
	transition: all .2s;
}
.spmb-radio-card:hover { border-color: var(--spmb-primary-mid); transform: translateY(-2px); }
.spmb-radio-card input { position: absolute; opacity: 0; }
.spmb-radio-emoji { display: block; font-size: 22px; margin-bottom: 4px; }
.spmb-radio-card:has(input:checked) {
	border-color: var(--spmb-primary);
	background: var(--spmb-primary-light);
	color: var(--spmb-primary-dark);
	box-shadow: 0 6px 16px rgba(67,56,202,0.16);
}

.spmb-gelombang-preview { margin-bottom: 6px; }
.spmb-gelombang-list-inline { margin-bottom: 10px; }
.spmb-gelombang-item {
	border: 1.5px dashed var(--spmb-primary-mid);
	background: var(--spmb-primary-light);
	border-radius: 12px;
	padding: 11px 14px;
	margin-bottom: 8px;
	font-size: 13.5px;
}
.spmb-gel-name { font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.spmb-badge {
	background: var(--spmb-primary);
	color: #fff;
	font-size: 11px;
	padding: 3px 9px;
	border-radius: 999px;
	font-weight: 700;
}
.spmb-gelombang-item.status-ditutup .spmb-badge { background: #94a3b8; }
.spmb-gelombang-item.status-akan_datang .spmb-badge { background: var(--spmb-warning); }
.spmb-gel-date, .spmb-gel-fee { color: var(--spmb-text-muted); font-size: 12.5px; margin-top: 2px; }

.spmb-fineprint { font-size: 12px; color: var(--spmb-text-muted); text-align: center; margin-top: 14px; }

.spmb-alert {
	padding: 13px 15px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 16px;
}
.spmb-alert.success { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.spmb-alert.error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }

/* ---------- MODAL ---------- */
.spmb-modal {
	display: none;
	position: fixed; inset: 0;
	background: rgba(16,17,43,0.6);
	backdrop-filter: blur(3px);
	z-index: 99999;
	align-items: center; justify-content: center;
	padding: 20px;
}
.spmb-modal.open { display: flex; }
.spmb-modal-content {
	background: #fff; border-radius: 20px; padding: 28px;
	max-width: 480px; width: 100%; position: relative;
	max-height: 80vh; overflow-y: auto;
	box-shadow: var(--spmb-shadow-lg);
	animation: spmb-fade-up .3s ease both;
}
.spmb-modal-close {
	position: absolute; top: 16px; right: 18px;
	background: none; border: none; font-size: 22px; cursor: pointer; color: var(--spmb-text-muted);
}
.spmb-modal-title { margin: 0 0 16px; font-size: 18px; font-weight: 800; }

/* ---------- STATUS RESULT ---------- */
.spmb-status-result { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--spmb-bg); }
.spmb-status-result .row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--spmb-border); }
.spmb-status-result .row:last-child { border-bottom: none; }
.spmb-status-result .pill { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }

/* ==========================================================================
   DASHBOARD (Pendaftar)
   ========================================================================== */
.spmb-dash-header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.spmb-dash-welcome { font-size: 22px; font-weight: 800; font-family: 'Sora', sans-serif; }
.spmb-dash-sub { color: var(--spmb-text-muted); font-size: 13.5px; margin-top: 4px; }

.spmb-card {
	background: #fff;
	border: 1px solid var(--spmb-border);
	border-radius: var(--spmb-radius);
	box-shadow: var(--spmb-shadow);
	padding: 26px;
	margin-bottom: 20px;
}
.spmb-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.spmb-card h3 { margin: 0; font-size: 18px; font-weight: 800; }

.spmb-status-pill { padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }

.spmb-progress-bar-track { height: 10px; background: var(--spmb-bg); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.spmb-progress-bar-fill { height: 100%; background: var(--spmb-grad); border-radius: 999px; transition: width .4s ease; }

.spmb-progress-steps { display: flex; justify-content: space-between; position: relative; }
.spmb-progress-steps::before {
	content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--spmb-border); z-index: 0;
}
.spmb-progress-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.spmb-step-dot {
	width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--spmb-border);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-weight: 700; font-size: 13px; color: var(--spmb-text-muted);
	transition: all .25s ease;
}
.spmb-progress-step.active .spmb-step-dot { border-color: var(--spmb-primary); color: var(--spmb-primary); background: var(--spmb-primary-light); }
.spmb-progress-step.done .spmb-step-dot { background: var(--spmb-grad); border-color: transparent; color: #fff; }
.spmb-step-label { font-size: 12px; font-weight: 600; color: var(--spmb-text-muted); }
.spmb-progress-step.active .spmb-step-label, .spmb-progress-step.done .spmb-step-label { color: var(--spmb-text); }

.spmb-catatan-admin { margin-top: 20px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; }
.spmb-catatan-admin p { margin: 4px 0 0; color: #9a3412; }

.spmb-dash-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.spmb-dash-tab-btn {
	padding: 12px 18px; border-radius: 12px; border: 1.5px solid var(--spmb-border);
	background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit;
	transition: all .2s;
}
.spmb-dash-tab-btn.active { background: var(--spmb-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(67,56,202,0.25); }

.spmb-dash-panel { display: none; }
.spmb-dash-panel.active { display: block; animation: spmb-fade-up .35s ease both; }

.spmb-form-section-title {
	font-weight: 800; font-size: 14px; color: var(--spmb-primary-dark);
	margin: 22px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--spmb-primary-light);
}
.spmb-form-section-title:first-of-type { margin-top: 0; }

.spmb-berkas-list { display: flex; flex-direction: column; gap: 12px; }
.spmb-berkas-item {
	display: flex; justify-content: space-between; align-items: center;
	border: 1.5px solid var(--spmb-border); border-radius: 14px; padding: 14px 16px; flex-wrap: wrap; gap: 10px;
	position: relative;
	transition: border-color .2s;
}
.spmb-berkas-item:hover { border-color: var(--spmb-primary-mid); }
.spmb-berkas-info { display: flex; align-items: center; gap: 12px; }
.spmb-berkas-icon { font-size: 22px; }
.spmb-berkas-label { font-weight: 700; font-size: 14px; }
.spmb-berkas-filename { font-size: 12.5px; color: var(--spmb-text-muted); }
.spmb-berkas-action { display: flex; gap: 8px; }
.spmb-upload-label { cursor: pointer; margin: 0; }
.spmb-berkas-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--spmb-bg); border-radius: 0 0 14px 14px; overflow: hidden; }
.spmb-berkas-progress-fill { height: 100%; width: 0%; background: var(--spmb-grad); transition: width .2s; }

.spmb-status-detail { margin-bottom: 24px; }
.spmb-status-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--spmb-border); font-size: 14px; }
.spmb-status-row span { color: var(--spmb-text-muted); }

.spmb-timeline { position: relative; padding-left: 24px; }
.spmb-timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--spmb-border); }
.spmb-timeline-item { position: relative; padding-bottom: 20px; }
.spmb-timeline-dot { position: absolute; left: -24px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--spmb-primary); border: 3px solid var(--spmb-primary-light); }
.spmb-timeline-status { font-weight: 700; font-size: 14px; }
.spmb-timeline-note { font-size: 13px; color: var(--spmb-text-muted); margin-top: 2px; }
.spmb-timeline-date { font-size: 11.5px; color: #98a2b3; margin-top: 3px; }

.spmb-notice {
	background: #fff; border: 1px solid var(--spmb-border); border-radius: 18px;
	padding: 26px; text-align: center; box-shadow: var(--spmb-shadow);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
	.spmb-units-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.spmb-wrap { padding: 14px 12px 56px; }
	.spmb-hero { padding: 36px 20px; border-radius: 22px; margin-bottom: 20px; }
	.spmb-hero h1 { font-size: 28px; }
	.spmb-hero-title { font-size: clamp(28px, 8vw, 34px) !important; letter-spacing:-1px !important; }
	.spmb-hero p { font-size: 14.5px; }
	.spmb-units-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
	.spmb-unit-card { padding: 18px 16px; display: flex; flex-direction: column; }
	.spmb-form-row { grid-template-columns: 1fr; gap: 0; }
	.spmb-select-unit { grid-template-columns: repeat(2, 1fr); }
	.spmb-auth-card, .spmb-status-card, .spmb-card { padding: 20px 16px; border-radius: 18px; }
	.spmb-auth-section { gap: 16px; }
	.spmb-dash-header { flex-direction: column; align-items: flex-start; }
	.spmb-progress-steps { flex-wrap: wrap; row-gap: 14px; }
	.spmb-step-label { font-size: 10.5px; }
	.spmb-berkas-item { flex-direction: column; align-items: flex-start; }
	.spmb-berkas-action { width: 100%; }
	.spmb-berkas-action .spmb-btn { flex: 1; }
	.spmb-dash-tabs { overflow-x: auto; flex-wrap: nowrap; }
	.spmb-tabs { border-radius: 12px; }
}

/* ======================================================================
   SPMB DASHBOARD MODERN FULL-WIDTH v1.1.0
   Tampilan dashboard pendaftar dibuat lebih lebar, rapi kiri-kanan,
   modern, ringan, dan tetap kompatibel dengan struktur/plugin lama.
   ====================================================================== */
.spmb-wrap.spmb-dashboard {
	--dash-accent: #1769e0;
	--dash-accent-2: #2196f3;
	--dash-surface: rgba(255,255,255,.96);
	--dash-line: #e8e9f4;
	max-width: 1240px;
	width: calc(100% - 32px);
	padding: 28px 0 72px;
	margin-left: auto;
	margin-right: auto;
}

.spmb-dashboard .spmb-dash-header {
	position: relative;
	overflow: hidden;
	margin-bottom: 22px;
	padding: 24px 28px;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 24px;
	background: linear-gradient(135deg,#4b3bd6 0%,#6652ef 48%,#8667f7 100%);
	box-shadow: 0 18px 45px rgba(76,61,214,.18);
	color: #fff;
}
.spmb-dashboard .spmb-dash-header::after {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	right: -95px;
	top: -115px;
	border-radius: 50%;
	background: rgba(255,255,255,.10);
	box-shadow: -90px 150px 0 30px rgba(255,255,255,.045);
	pointer-events: none;
}
.spmb-dashboard .spmb-dash-header > * { position: relative; z-index: 1; }
.spmb-dashboard .spmb-dash-welcome { font-size: clamp(22px,3vw,30px); letter-spacing: -.5px; }
.spmb-dashboard .spmb-dash-sub { color: rgba(255,255,255,.82); margin-top: 7px; }
.spmb-dashboard .spmb-dash-sub strong { color: #fff; }
.spmb-dashboard #spmb-logout-btn {
	color: #fff;
	border-color: rgba(255,255,255,.28);
	background: rgba(255,255,255,.10);
	backdrop-filter: blur(8px);
}
.spmb-dashboard #spmb-logout-btn:hover { background: rgba(255,255,255,.18); }

.spmb-dashboard .spmb-card {
	background: var(--dash-surface);
	border: 1px solid var(--dash-line);
	border-radius: 22px;
	padding: 28px;
	margin-bottom: 20px;
	box-shadow: 0 12px 35px rgba(44,42,91,.07);
}
.spmb-dashboard .spmb-card:hover { box-shadow: 0 16px 42px rgba(44,42,91,.09); }
.spmb-dashboard .spmb-progress-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg,#fff 0%,#fbfbff 100%);
}
.spmb-dashboard .spmb-progress-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg,#4f46e5,#8b5cf6,#ec4899);
}
.spmb-dashboard .spmb-card-head { margin-bottom: 20px; }
.spmb-dashboard .spmb-card h3 { font-size: 19px; letter-spacing: -.2px; }

.spmb-dashboard .spmb-progress-bar-track {
	height: 12px;
	margin-bottom: 26px;
	background: #eeeef8;
	box-shadow: inset 0 1px 2px rgba(30,30,70,.05);
}
.spmb-dashboard .spmb-progress-bar-fill {
	background: linear-gradient(90deg,#4f46e5,#7c5cff,#a855f7);
	box-shadow: 0 3px 10px rgba(91,77,242,.25);
}
.spmb-dashboard .spmb-progress-steps::before { background: #e3e4ef; }
.spmb-dashboard .spmb-step-dot {
	width: 36px;
	height: 36px;
	border-width: 2px;
	box-shadow: 0 4px 12px rgba(50,50,90,.06);
}
.spmb-dashboard .spmb-progress-step.active .spmb-step-dot {
	box-shadow: 0 0 0 5px rgba(91,77,242,.10);
}
.spmb-dashboard .spmb-progress-step.done .spmb-step-dot {
	box-shadow: 0 7px 16px rgba(91,77,242,.22);
}

.spmb-dashboard .spmb-dash-tabs {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
	padding: 6px;
	margin: 0 0 18px;
	border: 1px solid var(--dash-line);
	border-radius: 18px;
	background: #f5f5fb;
	box-shadow: inset 0 1px 2px rgba(40,40,90,.03);
}
.spmb-dashboard .spmb-dash-tab-btn {
	width: 100%;
	padding: 13px 18px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: transparent;
	color: #74788f;
	font-weight: 800;
}
.spmb-dashboard .spmb-dash-tab-btn:hover { color: var(--dash-accent); background: rgba(255,255,255,.72); }
.spmb-dashboard .spmb-dash-tab-btn.active {
	background: #fff;
	border-color: #e5e3ff;
	color: var(--dash-accent);
	box-shadow: 0 7px 18px rgba(62,53,150,.10);
}

.spmb-dashboard .spmb-dash-panel {
	min-height: 220px;
}
.spmb-dashboard .spmb-dash-panel > h3 { margin-bottom: 7px; }
.spmb-dashboard .spmb-dash-panel > .spmb-muted { margin-top: 0; margin-bottom: 18px; }
.spmb-dashboard .spmb-form-section-title {
	margin-top: 28px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(90deg,#f1efff 0%,#faf9ff 70%,transparent 100%);
	color: #4f46b8;
	font-size: 13px;
	letter-spacing: .1px;
}
.spmb-dashboard .spmb-form-section-title:first-of-type { margin-top: 12px; }
.spmb-dashboard .spmb-label { color: #34374b; font-size: 13px; }
.spmb-dashboard .spmb-input {
	box-sizing: border-box;
	background: #fbfbfe;
	border-color: #e1e2ed;
	min-height: 48px;
}
.spmb-dashboard .spmb-input:hover { border-color: #cfcff0; }
.spmb-dashboard .spmb-input:focus {
	border-color: #6d5bf0;
	box-shadow: 0 0 0 4px rgba(109,91,240,.10);
}
.spmb-dashboard textarea.spmb-input { min-height: 90px; }
.spmb-dashboard .spmb-btn-primary {
	background: linear-gradient(135deg,#5543e5,#7357f5 55%,#865ef4);
}
.spmb-dashboard .spmb-btn-lg { border-radius: 13px; }

.spmb-dashboard .spmb-berkas-list { gap: 14px; }
.spmb-dashboard .spmb-berkas-item {
	background: linear-gradient(135deg,#fff 0%,#fbfbff 100%);
	border-color: #e7e7f0;
	padding: 16px 18px;
}
.spmb-dashboard .spmb-berkas-item:hover {
	border-color: #cfc9ff;
	box-shadow: 0 8px 22px rgba(67,56,202,.07);
}
.spmb-dashboard .spmb-berkas-icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #f2f0ff;
}

.spmb-dashboard .spmb-status-detail {
	padding: 4px 16px;
	border: 1px solid var(--dash-line);
	border-radius: 15px;
	background: #fbfbfe;
}
.spmb-dashboard .spmb-status-row { padding: 13px 0; }
.spmb-dashboard .spmb-timeline {
	padding: 18px 20px 4px 34px;
	border: 1px solid var(--dash-line);
	border-radius: 15px;
	background: #fff;
}

@media (min-width: 961px) {
	.spmb-dashboard .spmb-form-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
	.spmb-dashboard .spmb-card { padding-left: 34px; padding-right: 34px; }
}
@media (max-width: 960px) {
	.spmb-wrap.spmb-dashboard { width: calc(100% - 24px); }
}
@media (max-width: 640px) {
	.spmb-wrap.spmb-dashboard { width: calc(100% - 20px); padding-top: 14px; }
	.spmb-dashboard .spmb-dash-header { padding: 20px; border-radius: 19px; }
	.spmb-dashboard .spmb-dash-tabs { grid-template-columns: 1fr; overflow: visible; }
	.spmb-dashboard .spmb-dash-tab-btn { padding: 11px 14px; }
	.spmb-dashboard .spmb-card { padding: 20px 16px; border-radius: 18px; }
	.spmb-dashboard .spmb-card-head { align-items: flex-start; gap: 10px; }
	.spmb-dashboard .spmb-progress-steps { flex-wrap: nowrap; gap: 4px; }
	.spmb-dashboard .spmb-progress-step { min-width: 0; }
	.spmb-dashboard .spmb-step-label { font-size: 10px; line-height: 1.25; }
	.spmb-dashboard .spmb-step-dot { width: 32px; height: 32px; }
	.spmb-dashboard .spmb-status-row { gap: 15px; }
}


/* ================================================================
   SPMB PORTAL LANDING MODERN v1.2.0
   ================================================================ */
.spmb-portal-guest { max-width:1180px; width:calc(100% - 28px); padding-top:28px; }
.spmb-portal-hero { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#3026a6 0%,#5146e5 42%,#7c3aed 76%,#c026d3 100%); box-shadow:0 24px 70px rgba(67,56,202,.22); }
.spmb-portal-hero h1 { font-size:clamp(30px,5vw,48px); line-height:1.08; letter-spacing:-1.4px; margin-bottom:16px; }
.spmb-portal-hero h1 span { color:#e9d5ff; }
.spmb-portal-hero p { max-width:700px; font-size:15px; line-height:1.7; }
.spmb-live-dot { width:7px; height:7px; border-radius:50%; background:#86efac; box-shadow:0 0 0 5px rgba(134,239,172,.12); }
.spmb-hero-points { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; position:relative; }
.spmb-hero-points span { padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(8px); font-size:11px; font-weight:700; }
.spmb-hero-orb { position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.08); }
.spmb-hero-orb-one { width:280px;height:280px;right:-90px;top:-90px; }
.spmb-hero-orb-two { width:190px;height:190px;left:-70px;bottom:-80px; }
.spmb-process-strip { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; margin:-16px auto 28px; position:relative; z-index:3; max-width:930px; padding:14px 18px; border:1px solid rgba(231,232,245,.9); border-radius:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 16px 36px rgba(44,42,91,.10); }
.spmb-process-strip > div { display:grid; grid-template-columns:34px 1fr; column-gap:8px; align-items:center; }
.spmb-process-strip > div span { grid-row:1/3; width:34px;height:34px; display:grid;place-items:center;border-radius:11px;background:#eef1ff;color:#4f46e5;font-size:11px;font-weight:900; }
.spmb-process-strip strong { font-size:12px; line-height:1.1; }
.spmb-process-strip small { color:#98a2b3; font-size:9.5px; margin-top:3px; }
.spmb-process-strip i { width:24px;height:1px;background:#dfe2ee; }
.spmb-section-heading { text-align:center; margin:8px 0 16px; }
.spmb-section-eyebrow { color:#6366f1; font-size:10px; font-weight:900; letter-spacing:.14em; }
.spmb-section-heading h2 { margin:4px 0 5px; font-size:22px; letter-spacing:-.5px; }
.spmb-section-heading p { margin:0; color:#7a8096; font-size:12px; }
.spmb-auth-section { max-width:780px; }
.spmb-auth-card { padding:26px; border-radius:22px; box-shadow:0 16px 45px rgba(44,42,91,.08); }
.spmb-auth-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.spmb-auth-card-top h3 { margin:2px 0 0; font-size:19px; letter-spacing:-.3px; }
.spmb-auth-kicker { font-size:9px; font-weight:900; color:#8b5cf6; letter-spacing:.12em; }
.spmb-secure-pill { padding:6px 10px; border-radius:999px; background:#ecfdf3; color:#067647; font-size:10px; font-weight:800; }
.spmb-tabs { margin-bottom:18px; }
.spmb-tab-btn.active { box-shadow:0 5px 14px rgba(67,56,202,.12); }
.spmb-select-unit { gap:9px; }
.spmb-radio-card { min-height:74px; border-radius:15px; border:1px solid #e6e7f0; background:#fbfbfe; transition:.2s ease; }
.spmb-radio-card:hover { transform:translateY(-2px); border-color:#c9c5ff; box-shadow:0 9px 20px rgba(67,56,202,.07); }
.spmb-radio-card:has(input:checked) { border-color:#7c5cff; background:linear-gradient(135deg,#f2f0ff,#faf9ff); box-shadow:0 8px 20px rgba(67,56,202,.10); }
.spmb-input { min-height:48px; border-radius:12px; background:#fbfbfe; border-color:#e1e2ed; }
.spmb-input:focus { border-color:#6d5bf0; box-shadow:0 0 0 4px rgba(109,91,240,.10); }
.spmb-gelombang-preview { margin-top:14px; padding:14px; border:1px solid #e9e8f5; border-radius:15px; background:#fafaff; }
.spmb-gelombang-item { border-radius:12px; padding:12px 14px; background:#fff; border:1px solid #ececf4; box-shadow:0 5px 14px rgba(44,42,91,.04); }
.spmb-gelombang-item + .spmb-gelombang-item { margin-top:8px; }
.spmb-btn-primary { box-shadow:0 12px 25px rgba(67,56,202,.22); }
.spmb-fineprint { font-size:10.5px; color:#98a2b3; text-align:center; margin:12px 0 0; }

@media (max-width:760px) {
  .spmb-portal-guest { width:calc(100% - 18px); padding-top:14px; }
  .spmb-portal-hero { min-height:360px; padding:42px 18px; }
  .spmb-portal-hero h1 { font-size:30px; }
  .spmb-process-strip { grid-template-columns:1fr 1fr; margin-top:-10px; gap:10px; padding:12px; }
  .spmb-process-strip i { display:none; }
  .spmb-process-strip > div { min-width:0; }
  .spmb-auth-card { padding:20px 16px; }
}


/* SPMB v1.2.3 unit logo polish */
.spmb-unit-logo-image { width:56px; height:56px; object-fit:contain; border-radius:16px; padding:6px; background:#fff; border:1px solid rgba(226,232,240,.9); box-shadow:0 8px 20px rgba(15,23,42,.07); }
.spmb-unit-card .spmb-unit-icon.spmb-has-logo { width:64px; height:64px; background:#fff !important; display:flex; align-items:center; justify-content:center; }
.spmb-radio-logo { width:34px; height:34px; object-fit:contain; border-radius:10px; padding:3px; background:#fff; border:1px solid #e7e9f0; }

/* ---------- MODERN ACTION MODAL ---------- */
.spmb-action-modal{display:none;position:fixed;inset:0;z-index:999999;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(8px)}
.spmb-action-modal.open{display:flex;animation:spmb-modal-in .18s ease both}
.spmb-action-modal-card{position:relative;width:min(430px,100%);background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:32px 28px 26px;text-align:center;box-shadow:0 30px 90px rgba(15,23,42,.24);animation:spmb-modal-card-in .22s cubic-bezier(.2,.8,.2,1) both}
.spmb-action-modal-icon{width:62px;height:62px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center;font-size:30px;font-weight:900;background:#eef2ff;color:#4f46e5}
.spmb-action-modal.success .spmb-action-modal-icon{background:#ecfdf3;color:#16a34a}
.spmb-action-modal.error .spmb-action-modal-icon{background:#fef2f2;color:#dc2626}
.spmb-action-modal-title{margin:0 0 8px!important;font:800 21px/1.2 'Sora','Plus Jakarta Sans',sans-serif!important;color:#10112b}
.spmb-action-modal-message{margin:0 auto 22px;max-width:340px;color:#6b7089;font-size:14px;line-height:1.65}
.spmb-action-modal-ok{width:100%;border:0;border-radius:14px;padding:12px 18px;background:linear-gradient(135deg,#4338ca,#7c3aed);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(67,56,202,.2)}
.spmb-action-modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:12px;background:#f5f6fa;color:#667085;font-size:24px;line-height:1;cursor:pointer}
@keyframes spmb-modal-in{from{opacity:0}to{opacity:1}}
@keyframes spmb-modal-card-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}


/* ================================================================
   SPMB v1.2.10 — PENDAFTAR MODERN POLISH
   ================================================================ */
.spmb-dashboard-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}
.spmb-summary-item{min-width:0;display:flex;align-items:center;gap:12px;padding:15px 16px;background:#fff;border:1px solid #e5e7f2;border-radius:17px;box-shadow:0 8px 24px rgba(67,56,202,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.spmb-summary-item:hover{transform:translateY(-2px);border-color:#cfd3f8;box-shadow:0 12px 30px rgba(67,56,202,.10)}
.spmb-summary-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:var(--spmb-primary-light);color:var(--spmb-primary);font-size:18px;font-weight:800}
.spmb-summary-item small{display:block;color:#858aa3;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;margin-bottom:3px}
.spmb-summary-item strong{display:block;color:#25264a;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spmb-summary-number .spmb-summary-icon{background:var(--spmb-grad);color:#fff;font-size:14px}
.spmb-dashboard .spmb-dash-header{padding:28px 30px;border-radius:26px}
.spmb-dashboard .spmb-dash-header:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 55%);pointer-events:none}
.spmb-dashboard .spmb-progress-card{border-color:#e1e2f2}
.spmb-dashboard .spmb-dash-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:6px;background:#f0f1fa;border:1px solid #e5e6f1;border-radius:16px}
.spmb-dashboard .spmb-dash-tab-btn{width:100%;min-width:0;border:0;background:transparent;box-shadow:none;padding:13px 14px;color:#666b84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spmb-dashboard .spmb-dash-tab-btn.active{background:var(--spmb-grad);color:#fff;box-shadow:0 8px 20px rgba(67,56,202,.22)}
.spmb-dashboard .spmb-form-section-title{display:flex;align-items:center;gap:8px;color:var(--spmb-primary);border-bottom-color:#e7e8fb}
.spmb-dashboard .spmb-form-section-title:before{content:"";width:4px;height:18px;border-radius:99px;background:var(--spmb-grad);flex:0 0 auto}
.spmb-dashboard .spmb-input{background:#fafaff;border-color:#e0e2ef}
.spmb-dashboard .spmb-input:hover{border-color:#c8cbec}
.spmb-dashboard .spmb-berkas-item{background:linear-gradient(180deg,#fff,#fcfcff);box-shadow:0 5px 18px rgba(67,56,202,.04)}
.spmb-dashboard .spmb-status-detail{background:#fbfbff;border:1px solid #ececf6;border-radius:16px;padding:5px 16px}
.spmb-dashboard .spmb-status-row:last-child{border-bottom:0}
.spmb-dashboard .spmb-btn-primary{background:var(--spmb-grad);border:1px solid rgba(67,56,202,.15)}
.spmb-dashboard .spmb-btn-outline{background:#fff}
@media(max-width:900px){.spmb-dashboard-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.spmb-dashboard-summary{grid-template-columns:1fr;gap:9px}.spmb-summary-item{padding:13px 14px}.spmb-dashboard .spmb-dash-header{padding:22px 20px}.spmb-dashboard .spmb-dash-tabs{grid-template-columns:1fr;padding:5px}.spmb-dashboard .spmb-dash-tab-btn{white-space:normal;min-height:44px}.spmb-summary-item strong{white-space:normal}.spmb-dashboard .spmb-card-head{flex-wrap:wrap}.spmb-dashboard .spmb-status-pill{margin-left:auto}}


/* v1.4.0: Cetak formulir & Tes Observasi */
.spmb-dash-header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spmb-print-inline{margin-bottom:18px}.spmb-observasi-card{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border:1px solid #e9ddff;background:linear-gradient(135deg,#faf7ff,#f5f3ff);border-radius:16px}.spmb-observasi-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#fff;font-size:22px;box-shadow:0 5px 16px rgba(76,29,149,.08)}.spmb-observasi-card small{display:block;color:#7c3aed;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:10px}.spmb-observasi-card strong{display:block;margin-top:4px;font-size:15px;color:#1f2937}.spmb-observasi-card span{display:block;margin-top:3px;color:#64748b;font-size:12px}@media(max-width:640px){.spmb-dash-header-actions{width:100%}.spmb-dash-header-actions .spmb-btn{flex:1;justify-content:center}.spmb-observasi-card{align-items:flex-start}}

/* ==========================================================================
   SPMB Modern Blue Edition — visual refresh
   ========================================================================== */
.spmb-wrap {
	--spmb-primary: #1769e0;
	--spmb-primary-dark: #0d47a1;
	--spmb-primary-light: #eaf3ff;
	--spmb-primary-mid: #cfe2ff;
	--spmb-accent: #f97316;
	--spmb-accent-2: #38bdf8;
	--spmb-text: #0f172a;
	--spmb-text-muted: #64748b;
	--spmb-border: #dbe5f1;
	--spmb-bg: #f4f8fc;
	--spmb-shadow: 0 12px 32px rgba(15, 76, 145, .09);
	--spmb-shadow-lg: 0 24px 60px rgba(15, 76, 145, .16);
	--spmb-grad: linear-gradient(135deg, #0d47a1 0%, #1769e0 52%, #38bdf8 100%);
	--spmb-grad-soft: linear-gradient(135deg, #edf5ff 0%, #f7fbff 100%);
}

/* Hero: premium blue, cleaner typography */
.spmb-portal-hero,
.spmb-hero {
	background: linear-gradient(135deg, #082b67 0%, #0d47a1 38%, #1769e0 72%, #38bdf8 100%) !important;
	box-shadow: 0 26px 70px rgba(13, 71, 161, .22) !important;
}
.spmb-hero-title,
.spmb-hero-title span {
	font-family: Helvetica, Arial, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -1.1px !important;
}
.spmb-hero-title span {
	background: none !important;
	-webkit-text-fill-color: #fff !important;
	color: #fff !important;
}
.spmb-hero-badge {
	background: rgba(255,255,255,.13) !important;
	border-color: rgba(255,255,255,.30) !important;
}

/* Blue-first cards, controls and navigation */
.spmb-unit-card:hover { border-color: #9fc5f7 !important; }
.spmb-unit-card:nth-child(4n+1) .spmb-unit-icon,
.spmb-unit-card:nth-child(4n+2) .spmb-unit-icon,
.spmb-unit-card:nth-child(4n+3) .spmb-unit-icon,
.spmb-unit-card:nth-child(4n+4) .spmb-unit-icon {
	background: linear-gradient(135deg,#eaf3ff,#dcecff) !important;
}
.spmb-process-strip > div span {
	background: #eaf3ff !important;
	color: #1769e0 !important;
}
.spmb-process-strip i { background: #c9d9eb !important; }
.spmb-section-eyebrow,
.spmb-auth-kicker { color: #1769e0 !important; }
.spmb-radio-card:hover { border-color: #9fc5f7 !important; }
.spmb-radio-card:has(input:checked) {
	border-color: #5b9bea !important;
	background: linear-gradient(135deg,#edf5ff,#fff) !important;
}
.spmb-input:focus {
	border-color: #1769e0 !important;
	box-shadow: 0 0 0 4px rgba(23,105,224,.11) !important;
}

/* Primary buttons */
.spmb-btn-primary,
.spmb-btn-primary:hover,
.spmb-btn-submit,
.spmb-dashboard .spmb-dash-tab-btn.active,
.spmb-action-modal-ok {
	background: linear-gradient(135deg,#0d47a1,#1769e0) !important;
	border-color: #1769e0 !important;
	box-shadow: 0 10px 24px rgba(23,105,224,.20) !important;
}
.spmb-btn-outline:hover {
	border-color: #1769e0 !important;
	color: #0d47a1 !important;
	background: #edf5ff !important;
}

/* Progres Pendaftaran: green */
.spmb-progress-bar-fill,
.spmb-dashboard .spmb-progress-bar-fill {
    background: linear-gradient(90deg,#16a34a,#22c55e,#4ade80) !important;
    box-shadow: 0 3px 10px rgba(22,163,74,.22) !important;
}
.spmb-dashboard .spmb-progress-card::before {
    background: linear-gradient(90deg,#0d47a1,#1769e0) !important;
}
.spmb-progress-step.active .spmb-step-dot {
    border-color: #16a34a !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
}
.spmb-progress-step.done .spmb-step-dot {
    background: linear-gradient(135deg,#16a34a,#22c55e) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.spmb-progress-steps::before {
    background: #bbf7d0 !important;
}

/* Blue dominant accents */

.spmb-unit-gelombang .spmb-dot,
.spmb-live-dot { background: #f97316 !important; }
.spmb-catatan-admin {
	background: #fff7ed !important;
	border-color: #fed7aa !important;
}

/* Modern portal surface */
.spmb-portal-guest .spmb-process-strip,
.spmb-portal-guest .spmb-auth-section,
.spmb-portal-guest .spmb-unit-card {
	border-color: #dbe5f1;
}
.spmb-auth-section,
.spmb-process-strip {
	box-shadow: 0 12px 35px rgba(15,76,145,.06) !important;
}
.spmb-dashboard .spmb-dash-tabs {
	background: #eef5fc !important;
	border-color: #dbe5f1 !important;
}
.spmb-dashboard .spmb-dash-tab-btn.active {
	background: linear-gradient(135deg,#0d47a1,#1769e0) !important;
}

/* Remove remaining purple-heavy gradients from portal/dashboard */
.spmb-portal-hero + .spmb-process-strip,
.spmb-dashboard .spmb-summary-number .spmb-summary-icon {
	--spmb-grad: linear-gradient(135deg,#0d47a1,#1769e0);
}
.spmb-summary-number .spmb-summary-icon,
.spmb-dashboard .spmb-summary-number .spmb-summary-icon {
	background: linear-gradient(135deg,#0d47a1,#1769e0) !important;
}

/* Subtle page depth */
.spmb-wrap {
	background: radial-gradient(circle at 50% -10%, rgba(56,189,248,.09), transparent 34%), var(--spmb-bg);
	border-radius: 26px;
}

/* FINAL THEME OVERRIDE — SPMB Pendaftar Dashboard */
.spmb-wrap.spmb-dashboard {
    --spmb-primary: #1769e0;
    --spmb-primary-dark: #0d47a1;
    --spmb-primary-light: #edf5ff;
    --spmb-primary-mid: #d8eaff;
    --spmb-grad: linear-gradient(135deg,#0d47a1 0%,#1769e0 55%,#2196f3 100%);
    --dash-accent: #1769e0;
    --dash-accent-2: #2196f3;
}
.spmb-dashboard .spmb-dash-header {
    background: linear-gradient(135deg,#0d47a1 0%,#1769e0 55%,#2196f3 100%) !important;
    box-shadow: 0 18px 45px rgba(13,71,161,.20) !important;
}
.spmb-dashboard .spmb-dash-tabs {
    background: #eef5fc !important;
    border-color: #dbe5f1 !important;
}
.spmb-dashboard .spmb-dash-tab-btn.active {
    background: linear-gradient(135deg,#0d47a1,#1769e0) !important;
    border-color: #1769e0 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(23,105,224,.22) !important;
}
.spmb-dashboard .spmb-form-section-title {
    color: #0d47a1 !important;
    background: linear-gradient(90deg,#edf5ff 0%,#f7fbff 70%,transparent 100%) !important;
}
.spmb-dashboard .spmb-form-section-title:before {
    background: linear-gradient(180deg,#0d47a1,#2196f3) !important;
}
.spmb-dashboard .spmb-input:focus {
    border-color: #1769e0 !important;
    box-shadow: 0 0 0 4px rgba(23,105,224,.11) !important;
}
.spmb-dashboard .spmb-btn-primary,
.spmb-dashboard .spmb-btn-primary:hover,
.spmb-dashboard .spmb-btn-submit {
    background: linear-gradient(135deg,#0d47a1,#1769e0) !important;
    border-color: #1769e0 !important;
}
.spmb-dashboard .spmb-progress-bar-fill {
    background: linear-gradient(90deg,#16a34a,#22c55e,#4ade80) !important;
}
.spmb-dashboard .spmb-progress-card::before {
    background: linear-gradient(90deg,#0d47a1,#1769e0) !important;
}
.spmb-dashboard .spmb-progress-step.active .spmb-step-dot {
    border-color: #16a34a !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 5px rgba(22,163,74,.10) !important;
}
.spmb-dashboard .spmb-progress-step.done .spmb-step-dot {
    background: linear-gradient(135deg,#16a34a,#22c55e) !important;
    border-color: transparent !important;
    box-shadow: 0 7px 16px rgba(22,163,74,.20) !important;
}
.spmb-dashboard .spmb-progress-steps::before {
    background: #bbf7d0 !important;
}


/* ---------- HERO PREMIUM 1.6 ---------- */
.spmb-portal-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
	align-items: center;
	gap: 22px;
	padding: 42px 46px 38px;
	text-align: left;
	min-height: 330px;
}
.spmb-hero-copy { position: relative; z-index: 3; }
.spmb-portal-hero .spmb-hero-badge { margin-bottom: 16px; }
.spmb-portal-hero .spmb-hero-title { margin: 0 0 16px; }
.spmb-portal-hero .spmb-hero-copy > p { margin: 0; max-width: 610px; }
.spmb-hero-points { position: relative; display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.spmb-hero-points span {
	display:inline-flex; align-items:center; gap:5px; padding:8px 12px;
	border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1);
	border-radius:999px; font-size:12px; font-weight:700; backdrop-filter:blur(8px);
}
.spmb-hero-visual {
	position:relative; z-index:2; min-height:285px; display:flex; align-items:center; justify-content:center;
}
.spmb-hero-visual svg { width:100%; max-width:520px; height:auto; filter:drop-shadow(0 20px 28px rgba(20,30,80,.2)); }
.spmb-hero-visual-glow {
	position:absolute; width:260px; height:260px; border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);
	filter:blur(3px);
}
.spmb-hero-floating-card {
	position:absolute; right:2%; bottom:6%; display:flex; align-items:center; gap:9px;
	padding:11px 14px; border:1px solid rgba(255,255,255,.3); border-radius:14px;
	background:rgba(255,255,255,.16); backdrop-filter:blur(14px); box-shadow:0 12px 30px rgba(20,30,80,.18);
}
.spmb-hero-floating-card > span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.22); }
.spmb-hero-floating-card strong { display:block; font-size:11px; color:#fff; }
.spmb-hero-floating-card small { display:block; margin-top:2px; color:rgba(255,255,255,.82); font-size:9px; }
@media (max-width: 780px) {
	.spmb-portal-hero { grid-template-columns:1fr; padding:34px 24px 28px; text-align:center; }
	.spmb-portal-hero .spmb-hero-copy > p { margin-left:auto; margin-right:auto; }
	.spmb-hero-points { justify-content:center; }
	.spmb-hero-visual { min-height:220px; margin-top:-8px; }
	.spmb-hero-floating-card { right:0; bottom:0; transform:scale(.9); transform-origin:right bottom; }
}

/* Custom hero image */
.spmb-hero-custom-image{width:100%;max-width:520px;height:300px;object-fit:cover;border-radius:28px;display:block;position:relative;z-index:2;box-shadow:0 24px 50px rgba(15,23,42,.24);border:1px solid rgba(255,255,255,.28)}
@media (max-width:767px){.spmb-hero-custom-image{height:220px;border-radius:22px}.spmb-hero-visual{width:100%}}

/* Payment notice - biaya pendaftaran berwarna merah */
.spmb-payment-notice:not(.is-free){
	border-color:#fecdca;
	background:#fff6f5;
	color:#b42318;
}
.spmb-payment-notice:not(.is-free) strong,
.spmb-payment-notice:not(.is-free) span,
.spmb-payment-notice:not(.is-free) b{
	color:#b42318;
}