/* ===== ENHANCED V4 ADDITIONS ===== */
.tab#tab-guide {
	background: linear-gradient(135deg, #f3e8ff, #faf5ff);
	color: #7c3aed;
	border-bottom: 2px solid #7c3aed;
}
.tab#tab-guide.active {
	background: #7c3aed;
	color: #fff;
	border-color: #7c3aed;
}
.tab#tab-guide i {
	color: inherit;
}

/* Smooth input focus glow */
.field input:focus,
.field select:focus {
	background: #fff !important;
	border-color: #fbbf24 !important;
	box-shadow:
		0 0 0 3px rgba(251, 191, 36, 0.12),
		0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Better button gradient */
.btn-primary,
.btn-gold {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
	color: #0f172a !important;
	font-weight: 700 !important;
}
.btn-primary:hover,
.btn-gold:hover {
	background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(251, 191, 36, 0.35) !important;
}

/* Step number font */
.step-number {
	font-family: "Playfair Display", serif !important;
	font-weight: 700 !important;
}

/* Auth modal heading */
.modal-logo h2 {
	font-family: "Playfair Display", serif !important;
}

/* Toast notification enhancement */
.toast {
	border-radius: 12px !important;
	backdrop-filter: blur(10px) !important;
}

/* Output section tabs enhancement */
.tabs {
	border-bottom: 2px solid #e2e8f0;
}
.tab.active {
	border-bottom: 2px solid #0f172a !important;
	color: #0f172a !important;
	font-weight: 700 !important;
}

/* Progress bar enhancement */
.progress {
	border-bottom: 1px solid #f1f5f9;
}

/* Upload area hover effect */
.upload-area:hover,
.upload-area.dragover {
	border-color: #fbbf24 !important;
	background: linear-gradient(135deg, #fef9e7 0%, #fffbeb 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(251, 191, 36, 0.15);
}

/* Counters (outcomes display) enhancement */
.counter {
	border-radius: 14px !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Document table headers — all document types share the same font */
.doc-landscape th,
.doc-outline th,
.doc-portrait th {
	font-family: "Plus Jakarta Sans", sans-serif !important;
	letter-spacing: 0.3px;
}

/* ── Learning Plan & Course Outline table parity with Session Plan ── */
/* Ensure alternating rows, hover highlight, and first-col accent     */
/* are applied even when app-level resets strip !important context    */
.doc-landscape table,
.doc-outline table {
	border-collapse: collapse !important;
}

.doc-landscape tbody tr:nth-child(even) td,
.doc-outline tbody tr:nth-child(even) td {
	background-color: #f9fafb !important;
}

.doc-landscape tbody tr:hover td,
.doc-outline tbody tr:hover td {
	background-color: #fffbeb !important;
	transition: background-color 0.15s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
               WELCOME / SPLASH MODAL  —  shown before login/register
               ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
               WELCOME / SPLASH MODAL — fully responsive, WCAG 2.1 AA
               Breakpoints: 480 | 640 | 860+
               ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
#welcomeModal {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: linear-gradient(135deg, rgba(10, 15, 30, 0.97) 0%, rgba(15, 23, 42, 0.97) 100%);
	display: flex;
	align-items: flex-start; /* allow card to push down on small screens */
	justify-content: center;
	padding: 12px 12px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 1;
	transition: opacity 0.35s ease;
}
#welcomeModal.wm-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ── Card ── */
.wm-card {
	background: #fff;
	border-radius: 20px;
	width: 100%;
	max-width: 860px;
	margin: auto; /* vertical centering when content is short */
	box-shadow:
		0 32px 80px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(251, 191, 36, 0.12);
	overflow: hidden;
	animation: wmPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	flex-direction: column;
}
@keyframes wmPop {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* ── Header ── */
.wm-header {
	background: linear-gradient(135deg, #0a0f1e 0%, #0f172a 60%, #1a2540 100%);
	padding: 22px 24px 18px;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, #f59e0b, #fbbf24, #fde68a, #fbbf24) 1;
	text-align: center;
	flex-shrink: 0;
}
.wm-header-icon {
	font-size: 32px;
	color: #fbbf24;
	margin-bottom: 6px;
	display: block;
}
.wm-header h1 {
	font-family: "Playfair Display", serif;
	font-size: clamp(16px, 3vw, 22px);
	font-weight: 800;
	color: #fbbf24;
	margin: 0 0 4px;
	line-height: 1.3;
}
.wm-header p {
	font-size: clamp(10px, 2vw, 12px);
	color: rgba(251, 191, 36, 0.65);
	margin: 0;
	font-weight: 500;
}

/* ── Body ── */
.wm-body {
	padding: 20px 24px 20px;
	background: #f8fafc;
	flex: 1;
}

/* ── Tagline ── */
.wm-tagline {
	text-align: center;
	margin-bottom: 16px;
}
.wm-tagline h2 {
	font-size: clamp(13px, 2.2vw, 17px);
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
	line-height: 1.4;
}
.wm-tagline p {
	font-size: clamp(11px, 1.8vw, 13px);
	color: #64748b;
	margin: 0;
}

/* ── Benefits grid — 3 cols desktop, 2 tablet, 1 phone ── */
.wm-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.wm-benefit-item {
	background: #fff;
	border-radius: 10px;
	padding: 12px 12px 10px;
	border: 1.5px solid #e2e8f0;
	transition:
		border-color 0.2s,
		box-shadow 0.2s,
		transform 0.2s;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.wm-benefit-item:hover {
	border-color: #fbbf24;
	box-shadow: 0 4px 14px rgba(251, 191, 36, 0.15);
	transform: translateY(-2px);
}
.wm-benefit-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.wm-benefit-title {
	font-size: 11.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.wm-benefit-desc {
	font-size: 10.5px;
	color: #64748b;
	line-height: 1.4;
}

/* ── Flow diagram ── */
.wm-flow-wrap {
	background: #fff;
	border-radius: 12px;
	border: 1.5px solid #e2e8f0;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.wm-flow-label {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #94a3b8;
	text-align: center;
	margin-bottom: 10px;
}
.wm-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: nowrap;
}
.wm-flow-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 1;
	min-width: 0;
}
.wm-flow-bubble {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.wm-flow-step-label {
	font-size: 10px;
	font-weight: 600;
	color: #374151;
	text-align: center;
	line-height: 1.3;
}
.wm-flow-arrow {
	color: #cbd5e1;
	font-size: 14px;
	flex-shrink: 0;
	transition: transform 0.2s;
}

/* ── CTA row ── */
.wm-cta-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 2px;
}
.wm-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, #f59e0b, #fbbf24);
	color: #0f172a;
	font-size: 14px;
	font-weight: 800;
	padding: 13px 28px;
	border-radius: 50px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition:
		transform 0.18s,
		box-shadow 0.18s,
		filter 0.18s;
	box-shadow: 0 4px 18px rgba(251, 191, 36, 0.4);
	letter-spacing: 0.2px;
	white-space: nowrap;
}
.wm-btn-primary:hover,
.wm-btn-primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(251, 191, 36, 0.5);
	filter: brightness(1.05);
}
.wm-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: #0f172a;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 50px;
	border: 2px solid #cbd5e1;
	cursor: pointer;
	text-decoration: none;
	transition:
		border-color 0.18s,
		color 0.18s,
		transform 0.18s;
	white-space: nowrap;
}
.wm-btn-secondary:hover,
.wm-btn-secondary:focus-visible {
	border-color: #0f172a;
	color: #0f172a;
	transform: translateY(-1px);
}
.wm-btn-primary:focus-visible,
.wm-btn-secondary:focus-visible {
	outline: 3px solid #fbbf24;
	outline-offset: 3px;
}

/* ── Footer ── */
.wm-footer {
	text-align: center;
	padding: 12px 20px 16px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	font-size: 11px;
	color: #94a3b8;
	flex-shrink: 0;
}
.wm-footer a {
	color: #f59e0b;
	text-decoration: none;
	font-weight: 600;
}
.wm-footer a:hover {
	text-decoration: underline;
}

/* ── Skip link (a11y) ── */
.wm-skip {
	position: fixed;
	left: -9999px;
	top: 8px;
	background: #fbbf24;
	color: #0f172a;
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 13px;
	z-index: 9999;
}
.wm-skip:focus {
	left: 8px;
}

/* ══════════════════════════════════════════════════════════════
               RESPONSIVE BREAKPOINTS
               ══════════════════════════════════════════════════════════════ */

/* ── ≤ 860px — tablet / landscape phone ── */
@media (max-width: 860px) {
	.wm-card {
		border-radius: 16px;
	}
}

/* ── ≤ 640px — portrait tablet / large phone ── */
@media (max-width: 640px) {
	#welcomeModal {
		padding: 10px 10px 20px;
		align-items: flex-start;
	}
	.wm-card {
		border-radius: 14px;
		margin: 0 auto;
	}
	.wm-header {
		padding: 16px 16px 14px;
	}
	.wm-header-icon {
		font-size: 26px;
		margin-bottom: 4px;
	}
	.wm-header h1 {
		font-size: 15px;
	}
	.wm-body {
		padding: 14px 14px 16px;
	}
	.wm-tagline {
		margin-bottom: 12px;
	}
	.wm-tagline h2 {
		font-size: 13px;
	}
	.wm-tagline p {
		font-size: 11px;
	}
	.wm-benefits {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-bottom: 12px;
	}
	.wm-benefit-item {
		padding: 10px 10px 8px;
	}
	.wm-benefit-icon {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
	.wm-benefit-title {
		font-size: 10.5px;
	}
	.wm-benefit-desc {
		font-size: 10px;
	}
	.wm-flow-wrap {
		padding: 10px 12px;
		margin-bottom: 14px;
	}
	/* Flow goes vertical on phones */
	.wm-flow {
		flex-direction: column;
		gap: 6px;
		align-items: stretch;
	}
	.wm-flow-step {
		flex-direction: row;
		gap: 10px;
		align-items: center;
		flex: unset;
	}
	.wm-flow-bubble {
		width: 36px;
		height: 36px;
		font-size: 16px;
		flex-shrink: 0;
	}
	.wm-flow-step-label {
		text-align: left;
		font-size: 11px;
	}
	.wm-flow-arrow {
		transform: rotate(90deg);
		align-self: center;
		font-size: 12px;
	}
	/* Buttons stack and go full-width */
	.wm-cta-row {
		flex-direction: column;
		gap: 8px;
		padding-top: 0;
	}
	.wm-btn-primary,
	.wm-btn-secondary {
		width: 100%;
		font-size: 13px;
		padding: 13px 16px;
		justify-content: center;
	}
	.wm-footer {
		padding: 10px 14px 14px;
		font-size: 10.5px;
	}
}

/* ── ≤ 480px — small phone ── */
@media (max-width: 480px) {
	#welcomeModal {
		padding: 8px 8px 16px;
	}
	.wm-header {
		padding: 14px 14px 12px;
	}
	.wm-header-icon {
		font-size: 24px;
	}
	.wm-header h1 {
		font-size: 14px;
	}
	.wm-header p {
		font-size: 10px;
	}
	.wm-body {
		padding: 12px 12px 14px;
	}
	.wm-tagline h2 {
		font-size: 12.5px;
	}
	/* Keep 2-col benefit grid — more compact */
	.wm-benefits {
		gap: 6px;
		margin-bottom: 10px;
	}
	.wm-benefit-item {
		padding: 8px 8px 7px;
		gap: 4px;
	}
	.wm-benefit-desc {
		display: none;
	} /* hide desc on very small screens */
	.wm-flow-wrap {
		padding: 8px 10px;
		margin-bottom: 12px;
	}
	.wm-flow-step-label {
		font-size: 10.5px;
	}
	.wm-btn-primary,
	.wm-btn-secondary {
		font-size: 12.5px;
		padding: 12px 14px;
	}
}

/* ── ≤ 360px — extra-small phone ── */
@media (max-width: 360px) {
	.wm-benefits {
		grid-template-columns: 1fr;
	}
	.wm-benefit-desc {
		display: none;
	}
	.wm-header h1 {
		font-size: 13px;
	}
}

/* ══════════════════════════════════════════════════════════════
               AUTH MODAL — RESPONSIVE FIX  (Sign In + Create Account)
               Scoped to #authModal to avoid affecting other modals.
               Fixes: form cutoff, button invisible, fields inaccessible.
               ══════════════════════════════════════════════════════════════ */

/* 1 — Overlay: scrollable so nothing clips on small viewports */
#authModal.modal-overlay {
	align-items: flex-start !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 20px 16px 32px !important;
}

/* 2 — Box: auto-margins centre it; never clips content */
#authModal .modal-box {
	margin: auto !important;
	width: 100% !important;
	max-width: 440px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	padding: 32px 36px !important;
}

/* 3 — Logo: fluid sizing */
#authModal .modal-logo {
	margin-bottom: 20px !important;
}
#authModal .modal-logo .icon {
	width: 56px !important;
	height: 56px !important;
	font-size: 26px !important;
	margin: 0 auto 10px !important;
}
#authModal .modal-logo h2 {
	font-size: clamp(15px, 4vw, 20px) !important;
	line-height: 1.3 !important;
}
#authModal .modal-logo p {
	font-size: clamp(11px, 3vw, 13px) !important;
	line-height: 1.4 !important;
}

/* 4 — Tabs */
#authModal .modal-tabs {
	margin-bottom: 18px !important;
}
#authModal .modal-tab {
	padding: 10px 8px !important;
	font-size: clamp(13px, 3.5vw, 14px) !important;
	min-height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 5 — Fields */
#authModal .mfield {
	margin-bottom: 14px !important;
}
#authModal .mfield label {
	font-size: clamp(10px, 2.5vw, 12px) !important;
	margin-bottom: 5px !important;
}
#authModal .mfield input {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 11px 14px !important;
	font-size: 16px !important;
	border-radius: 10px !important;
}
#authModal .pw-wrap input {
	padding-right: 48px !important;
}

/* 6 — Submit button: always fully visible */
#authModal .mbtn {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px !important;
	font-size: clamp(14px, 3.5vw, 15px) !important;
	min-height: 48px !important;
	margin-top: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

/* ── ≤ 768px tablet ── */
@media (max-width: 768px) {
	#authModal.modal-overlay {
		padding: 16px 12px 28px !important;
	}
	#authModal .modal-box {
		padding: 24px 20px !important;
		border-radius: 18px !important;
	}
	#authModal .modal-logo {
		margin-bottom: 16px !important;
	}
	#authModal .modal-logo .icon {
		width: 48px !important;
		height: 48px !important;
		font-size: 22px !important;
	}
	#authModal .mfield {
		margin-bottom: 12px !important;
	}
}

/* ── ≤ 480px portrait phone ── */
@media (max-width: 480px) {
	#authModal.modal-overlay {
		padding: 12px 10px 24px !important;
	}
	#authModal .modal-box {
		padding: 20px 16px !important;
		border-radius: 16px !important;
	}
	#authModal .modal-logo {
		margin-bottom: 12px !important;
	}
	#authModal .modal-logo .icon {
		width: 42px !important;
		height: 42px !important;
		font-size: 20px !important;
		margin-bottom: 8px !important;
	}
	#authModal .modal-tabs {
		margin-bottom: 14px !important;
	}
	#authModal .modal-tab {
		font-size: 13px !important;
		padding: 9px 6px !important;
	}
	#authModal .mfield {
		margin-bottom: 10px !important;
	}
	#authModal .mfield label {
		font-size: 10px !important;
	}
	#authModal .mbtn {
		padding: 13px !important;
		font-size: 14px !important;
	}
	#authModal .mlink {
		font-size: 11.5px !important;
		margin-top: 10px !important;
	}
}

/* ── ≤ 380px small phone ── */
@media (max-width: 380px) {
	#authModal.modal-overlay {
		padding: 8px 8px 20px !important;
	}
	#authModal .modal-box {
		padding: 16px 14px !important;
		border-radius: 14px !important;
	}
	#authModal .modal-logo {
		margin-bottom: 10px !important;
	}
	#authModal .modal-logo .icon {
		width: 38px !important;
		height: 38px !important;
		font-size: 18px !important;
	}
	#authModal .mfield {
		margin-bottom: 8px !important;
	}
	#authModal .mfield input {
		padding: 10px 12px !important;
	}
	#authModal .mbtn {
		padding: 12px !important;
		font-size: 13.5px !important;
	}
	#authModal .mlink {
		font-size: 11px !important;
	}
}

/* ── ≤ 320px extra-small ── */
@media (max-width: 320px) {
	#authModal.modal-overlay {
		padding: 6px 6px 16px !important;
	}
	#authModal .modal-box {
		padding: 14px 12px !important;
		border-radius: 12px !important;
	}
	#authModal .mfield {
		margin-bottom: 7px !important;
	}
	#authModal .mfield input {
		padding: 9px 10px !important;
	}
	#authModal .mbtn {
		padding: 11px !important;
		font-size: 13px !important;
	}
}

/* ── Landscape phone: short viewport height ── */
@media (max-height: 600px) and (orientation: landscape) {
	#authModal.modal-overlay {
		padding-top: 8px !important;
		padding-bottom: 16px !important;
	}
	#authModal .modal-logo {
		margin-bottom: 8px !important;
	}
	#authModal .modal-logo .icon {
		display: none !important;
	}
	#authModal .modal-logo p {
		display: none !important;
	}
	#authModal .mfield {
		margin-bottom: 7px !important;
	}
	#authModal .modal-tabs {
		margin-bottom: 10px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
               ICS HEADER REDESIGN — centred brand, right-aligned user controls
               Builds on existing .header, .logo, .user-pill, .hbtn tokens
               ══════════════════════════════════════════════════════════════════ */

/* ── 1. Outer header shell: 3-column flex ── */
.header {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	align-items: center !important;
	padding: 10px 24px !important;
	gap: 12px !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 200 !important;
}

/* ── 2. Left spacer (invisible, mirrors right-side width) ── */
.header-spacer {
	/* Intentionally empty — provides balance so .logo stays centred */
	min-width: 0;
}

/* ── 3. Centre brand block ── */
.logo {
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}
.logo-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}
.logo-icon-badge {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.08));
	border: 1.5px solid rgba(251, 191, 36, 0.35);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #fbbf24;
	flex-shrink: 0;
}
.logo-text-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1px;
}

/* ── Heading 1: system name (largest) ── */
.logo-title-main {
	font-family: "Playfair Display", "Syne", serif !important;
	font-size: clamp(15px, 2.2vw, 22px) !important;
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	background: linear-gradient(135deg, #fbbf24 0%, #fde68a 55%, #fbbf24 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	display: block !important;
}

/* ── Heading 2: document types (medium) ── */
.logo-title-sub {
	font-family: "DM Sans", sans-serif !important;
	font-size: clamp(9px, 1.2vw, 12px) !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.55) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	display: block !important;
}

/* ── Heading 3: tagline (accent) ── */
.logo-tagline {
	font-family: "DM Sans", sans-serif !important;
	font-size: clamp(9px, 1.1vw, 11.5px) !important;
	font-weight: 600 !important;
	color: rgba(251, 191, 36, 0.7) !important;
	-webkit-text-fill-color: rgba(251, 191, 36, 0.7) !important;
	letter-spacing: 0.2px !important;
	line-height: 1.4 !important;
	margin: 2px 0 0 !important;
	display: block !important;
}

/* ── 4. Right controls cluster ── */
.header-right {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	flex-shrink: 0 !important;
}

/* ── Credits pill ── */
.quota-pill {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #94a3b8 !important;
	padding: 6px 14px !important;
	border-radius: 30px !important;
	font-size: 12px !important;
	white-space: nowrap !important;
	font-family: "DM Sans", sans-serif !important;
}
.quota-pill i {
	color: #fbbf24;
	font-size: 11px;
}
.quota-pill strong {
	color: #fbbf24 !important;
	-webkit-text-fill-color: #fbbf24 !important;
	font-weight: 800 !important;
}

/* ── User pill: name + email stacked ── */
.user-pill {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	padding: 6px 14px !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	cursor: default;
	transition: background 0.2s !important;
}
.user-pill:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}
.user-pill > i {
	font-size: 17px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	flex-shrink: 0 !important;
}
.user-pill-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.25;
}
.user-pill-name {
	font-weight: 700 !important;
	color: #fbbf24 !important;
	-webkit-text-fill-color: #fbbf24 !important;
	font-size: 13px !important;
	white-space: nowrap;
}
.user-pill-email {
	font-size: 10.5px !important;
	color: rgba(255, 255, 255, 0.45) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
	white-space: nowrap;
	font-weight: 400 !important;
}

/* ── Sign-out button ── */
.hbtn-signout {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	background: rgba(239, 68, 68, 0.15) !important;
	color: #fca5a5 !important;
	border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
	border-radius: 30px !important;
	padding: 7px 16px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition:
		background 0.2s,
		border-color 0.2s,
		color 0.2s,
		transform 0.15s !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}
.hbtn-signout:hover {
	background: rgba(239, 68, 68, 0.28) !important;
	border-color: rgba(239, 68, 68, 0.6) !important;
	color: #fff !important;
	transform: translateY(-1px) !important;
}
.hbtn-signout i {
	font-size: 14px !important;
}
.signout-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.1px;
}

/* ══════════════════════════════════════════════════════════════════
               HEADER RESPONSIVE RULES
               ══════════════════════════════════════════════════════════════════ */

/* ── ≤ 900px: compact the right-side items ── */
@media (max-width: 900px) {
	.header {
		padding: 10px 18px !important;
		gap: 8px !important;
	}
	.quota-pill {
		padding: 5px 12px !important;
		font-size: 11px !important;
	}
	.user-pill {
		padding: 5px 12px !important;
	}
	.user-pill-email {
		display: none !important;
	}
	.logo-icon-badge {
		width: 38px;
		height: 38px;
		font-size: 17px;
	}
}

/* ── ≤ 768px: single tight row — logo left, controls right ── */
@media (max-width: 768px) {
	.header {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 8px 14px !important;
		gap: 8px !important;
		min-height: 0 !important;
	}
	.header-spacer {
		display: none !important;
	}

	/* Logo: left-aligned, single row, no wrap */
	.logo {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		text-align: left !important;
		padding: 0 !important;
	}
	.logo-inner {
		gap: 8px !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		min-width: 0 !important;
	}
	.logo-icon-badge {
		display: flex !important;
		width: 32px !important;
		height: 32px !important;
		font-size: 15px !important;
		flex-shrink: 0 !important;
	}
	.logo-text-block {
		align-items: flex-start !important;
		gap: 0 !important;
		min-width: 0 !important;
	}
	/* Main title: single line, clipped */
	.logo-title-main {
		font-size: 14px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		line-height: 1.25 !important;
	}
	/* Hide subtitle and tagline to keep header compact */
	.logo-title-sub {
		display: none !important;
	}
	.logo-tagline {
		display: none !important;
	}

	/* Controls: tight row */
	.header-right {
		flex-shrink: 0 !important;
		gap: 6px !important;
	}

	/* Credits pill: icon + number only */
	.quota-pill {
		display: inline-flex !important;
		padding: 5px 9px !important;
		font-size: 11px !important;
		gap: 4px !important;
		white-space: nowrap !important;
	}
	.quota-pill > span {
		font-size: 0 !important;
		white-space: nowrap;
	}
	.quota-pill > span > strong {
		font-size: 12px !important;
		display: inline !important;
		-webkit-text-fill-color: #fbbf24 !important;
	}

	/* User pill: icon + name only */
	.user-pill {
		padding: 5px 10px !important;
		gap: 6px !important;
		max-width: 130px !important;
	}
	.user-pill-email {
		display: none !important;
	}
	.user-pill-name {
		font-size: 12px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-width: 80px !important;
	}

	/* Sign-out: icon-only circle */
	.signout-label {
		display: none !important;
	}
	.hbtn-signout {
		padding: 0 !important;
		width: 34px !important;
		height: 34px !important;
		border-radius: 50% !important;
		justify-content: center !important;
		flex-shrink: 0 !important;
	}
	.hbtn-signout i {
		font-size: 14px !important;
		margin: 0 !important;
	}
}

/* ── ≤ 420px: ultra-compact — tighten further ── */
@media (max-width: 420px) {
	.header {
		padding: 7px 10px !important;
		gap: 5px !important;
	}
	.logo-icon-badge {
		width: 28px !important;
		height: 28px !important;
		font-size: 13px !important;
	}
	.logo-title-main {
		font-size: 13px !important;
	}
	.header-right {
		gap: 4px !important;
	}
	.quota-pill {
		padding: 4px 7px !important;
	}
	.user-pill {
		padding: 4px 8px !important;
		max-width: 100px !important;
	}
	.user-pill > i {
		font-size: 14px !important;
	}
	.user-pill-name {
		font-size: 11px !important;
		max-width: 58px !important;
	}
	.hbtn-signout {
		width: 30px !important;
		height: 30px !important;
	}
	.hbtn-signout i {
		font-size: 13px !important;
	}
}

/* ── ≤ 320px: absolute minimum ── */
@media (max-width: 320px) {
	.logo-icon-badge {
		display: none !important;
	}
	.logo-title-main {
		font-size: 12px !important;
	}
	.user-pill {
		max-width: 80px !important;
	}
	.user-pill-name {
		max-width: 44px !important;
		font-size: 10px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
               PROFILE / SETTINGS MODAL
               ═══════════════════════════════════════════════════════════════ */

/* Clickable user pill hint */
.user-pill[role="button"]::after {
	content: "\f044";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 10px;
	color: rgba(251, 191, 36, 0.55);
	margin-left: 6px;
}
.user-pill[role="button"]:hover::after {
	color: #fbbf24;
}

/* Profile tab active state */
#profileTab[aria-selected="true"] {
	border-color: #fbbf24 !important;
	background: rgba(251, 191, 36, 0.18) !important;
	color: #fbbf24 !important;
}
#passwordTab[aria-selected="true"] {
	border-color: #fbbf24 !important;
	background: rgba(251, 191, 36, 0.18) !important;
	color: #fbbf24 !important;
}
#profileTab[aria-selected="false"],
#passwordTab[aria-selected="false"] {
	border-color: rgba(255, 255, 255, 0.12) !important;
	background: transparent !important;
	color: #64748b !important;
}

/* Password requirement checks */
.pfReq-met {
	color: #22c55e !important;
}
.pfReq-met::before {
	content: "✓ ";
}
.pfReq-fail {
	color: #94a3b8 !important;
}
.pfReq-fail::before {
	content: "○ ";
}

/* Success message */
.msuc {
	display: block;
}

/* Responsive: full-width modal on mobile */
@media (max-width: 480px) {
	#profileModal .modal-box {
		border-radius: 20px 20px 0 0 !important;
		max-width: 100% !important;
	}
}

/* ═══════════════════════════════════════════════
               PROFILE MODAL v2 — Avatar + Bio + Completeness
               ═══════════════════════════════════════════════ */

/* Modal scroll on small screens */
#profileModal .modal-box-scroller {
	max-height: 65vh;
	overflow-y: auto;
}

/* Textarea in mfield */
.mfield textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	color: #1e293b;
	background: #f8fafc;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
	box-sizing: border-box;
}
.mfield textarea:focus {
	outline: none;
	border-color: #fbbf24 !important;
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18) !important;
	background: #fff;
}

/* Profile tab active underline */
#profileTab[aria-selected="true"],
#passwordTab[aria-selected="true"] {
	color: #fbbf24 !important;
	border-bottom-color: #fbbf24 !important;
}
#profileTab[aria-selected="false"],
#passwordTab[aria-selected="false"] {
	color: #64748b !important;
	border-bottom-color: transparent !important;
}

/* Avatar hover overlay (handled inline but add pointer-events) */
#pfAvatarWrap {
	user-select: none;
}

/* Completeness checklist item */
#pfChecklistItems > div:hover {
	background: #f1f5f9;
	border-radius: 6px;
}

/* Success message flex */
#profileSuc[style*="flex"] {
	display: flex !important;
}

/* Responsive: full-width modal sheet on mobile */
@media (max-width: 480px) {
	#profileModalBox {
		border-radius: 20px 20px 0 0 !important;
		max-width: 100% !important;
	}
	#profileModal {
		align-items: flex-end !important;
		padding: 0 !important;
	}
}
/* ── Enhanced stat grid ───────────────────────────────────────────── */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}
.stat-card {
	background: #fff;
	border-radius: 16px;
	padding: 18px 20px 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	border-left: 4px solid #fbbf24;
	position: relative;
	overflow: hidden;
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}
.stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.11);
}
.stat-card .sval {
	font-size: 28px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.stat-card .slabel {
	font-size: 12px;
	color: #64748b;
	margin-top: 5px;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.stat-card .schange {
	font-size: 11px;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 20px;
	display: inline-block;
	font-weight: 700;
}
.schange.up {
	background: #dcfce7;
	color: #166534;
}
.schange.down {
	background: #fee2e2;
	color: #991b1b;
}
.schange.neu {
	background: #f1f5f9;
	color: #64748b;
}
.stat-card .stat-icon {
	position: absolute;
	right: 16px;
	top: 14px;
	font-size: 22px;
	opacity: 0.12;
}

/* ── Insight row (3-col layout to fill space) ──────────────────────── */
.insight-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
@media (max-width: 1080px) {
	.insight-row {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 720px) {
	.insight-row {
		grid-template-columns: 1fr;
	}
}

/* ── Institution breakdown card ──────────────────────────────────── */
.inst-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 400px;
	overflow-y: auto;
}
.inst-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}
.inst-list li:last-child {
	border-bottom: none;
}
.inst-bar-wrap {
	flex: 1;
	background: #f1f5f9;
	border-radius: 6px;
	height: 7px;
	overflow: hidden;
	min-width: 60px;
}
.inst-bar {
	height: 100%;
	border-radius: 6px;
	background: #fbbf24;
	transition: width 0.5s;
}
.inst-name {
	min-width: 0;
	flex: 2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #1e293b;
}
.inst-count {
	font-weight: 700;
	color: #0f172a;
	min-width: 28px;
	text-align: right;
	font-size: 13px;
}

/* ── Top generators card ─────────────────────────────────────────── */
.topgen-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.topgen-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13px;
}
.topgen-list li:last-child {
	border-bottom: none;
}
.topgen-rank {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.topgen-rank.gold {
	background: #fef9c3;
	color: #854d0e;
}
.topgen-rank.silver {
	background: #f1f5f9;
	color: #475569;
}
.topgen-rank.bronze {
	background: #fed7aa;
	color: #9a3412;
}
.topgen-name {
	flex: 1;
	font-weight: 600;
	color: #0f172a;
}
.topgen-meta {
	font-size: 11.5px;
	color: #64748b;
}
.topgen-pill {
	background: #f0f9ff;
	color: #0369a1;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 20px;
}

/* ── Activity spark bars ─────────────────────────────────────────── */
.spark-wrap {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 48px;
	padding-top: 4px;
}
.spark-bar {
	flex: 1;
	background: #fbbf24;
	border-radius: 3px 3px 0 0;
	min-height: 4px;
	transition: height 0.4s;
	cursor: default;
	position: relative;
}
.spark-bar:hover {
	background: #f59e0b;
}
.spark-bar[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	background: #0f172a;
	color: #fbbf24;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 6px;
	white-space: nowrap;
	z-index: 9;
	pointer-events: none;
}
.spark-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 3px;
	font-size: 10px;
	color: #94a3b8;
	font-weight: 600;
}

/* ── Summary insight badges ──────────────────────────────────────── */
.insight-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.ibadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	border: 1.5px solid transparent;
}
.ibadge.blue {
	background: #eff6ff;
	color: #1d4ed8;
	border-color: #bfdbfe;
}
.ibadge.green {
	background: #f0fdf4;
	color: #166534;
	border-color: #bbf7d0;
}
.ibadge.amber {
	background: #fffbeb;
	color: #92400e;
	border-color: #fde68a;
}
.ibadge.purple {
	background: #f5f3ff;
	color: #5b21b6;
	border-color: #ddd6fe;
}
.ibadge.red {
	background: #fef2f2;
	color: #991b1b;
	border-color: #fecaca;
}

/* ── Section sub-title ───────────────────────────────────────────── */
.section-meta {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 500;
	margin-left: 6px;
}

/* ── Users table — institution badge ────────────────────────────── */
.inst-badge {
	display: inline-block;
	max-width: 160px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 11.5px;
	color: #334155;
	vertical-align: middle;
}

/* ── Revenue per user stat ───────────────────────────────────────── */
#statARPU {
	font-size: 22px;
}

/* ══════════════════════════════════════════════════════════════════════
               ADMIN DASHBOARD — ENHANCED RESPONSIVE IMPROVEMENTS
               ══════════════════════════════════════════════════════════════════════ */

/* ── Stat card subtle gradient background ─────────────────────────── */
.stat-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* ── Admin section/body mobile padding ────────────────────────────── */
@media (max-width: 640px) {
	.admin-section {
		padding: 16px !important;
		overflow-x: visible !important;
	}
	.admin-body {
		padding: 16px !important;
	}
	/* Admin header search full-width on mobile */
	.admin-overlay #adminSearchInput {
		width: 100% !important;
		min-width: 0 !important;
	}
}

/* ── Admin tables: responsive card layout on mobile ───────────────── */
@media (max-width: 768px) {
	.atbl thead {
		display: none;
	}
	.atbl,
	.atbl tbody,
	.atbl tr,
	.atbl td {
		display: block;
		width: 100%;
	}
	.atbl tbody {
		width: 100%;
	}
	.atbl tr {
		margin-bottom: 12px;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		padding: 12px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	}
	.atbl td {
		text-align: left !important;
		padding: 8px 0 !important;
		border-bottom: 1px solid #f1f5f9;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: unset !important;
		max-width: 100% !important;
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		font-size: 13px !important;
	}
	.atbl td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #475569;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-right: 12px;
		min-width: 100px;
		flex-shrink: 0;
	}
	.atbl td:last-child {
		border-bottom: none;
	}
	/* Hide the inline nth-child labels from old approach */
	.atbl td::after {
		display: none;
	}
}

/* ── Very small screens: single column stats ──────────────────────── */
@media (max-width: 400px) {
	.stat-grid {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	.stat-card .sval {
		font-size: 24px !important;
	}
	.stat-card {
		padding: 14px !important;
	}
	/* Smaller data-label min-width */
	.atbl td::before {
		min-width: 80px !important;
		font-size: 10px !important;
	}
}

/* ── Mobile admin stat grid: force 2 columns with smaller gap ─────── */
@media (max-width: 640px) {
	.stat-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}
	.stat-card .sval {
		font-size: 26px !important;
	}
}

/* ── Admin header inline search responsive ────────────────────────── */
@media (max-width: 768px) {
	.admin-overlay [style*="width: 220px"] {
		width: 100% !important;
		min-width: 0 !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
           REVAMPED RESPONSIVE UI — Complete Overhaul
           - Admin dashboard tables: card layout on mobile
           - Profile modal: fully responsive
           - myDocs / myAssess panels: responsive
           - Admin email section: responsive
           - Output document tables: responsive
           - Admin header: mobile-optimized
           - Welcome modal: enhanced responsive
           ═══════════════════════════════════════════════════════════════════ */

/* ── SCROLLBAR STYLING ──────────────────────────────────────────── */
.admin-section::-webkit-scrollbar,
.admin-body::-webkit-scrollbar,
.modal-overlay::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.admin-section::-webkit-scrollbar-track,
.admin-body::-webkit-scrollbar-track {
	background: transparent;
}
.admin-section::-webkit-scrollbar-thumb,
.admin-body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}
.admin-section::-webkit-scrollbar-thumb:hover,
.admin-body::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* ── ADMIN OVERLAY: improve on all screens ─────────────────────── */
.admin-overlay {
	-webkit-overflow-scrolling: touch;
}
.admin-overlay > div:first-child {
	/* admin top bar */
	position: sticky;
	top: 0;
	z-index: 10;
	background: #fff;
}

/* ── ADMIN HEADER BAR: mobile responsive ───────────────────────── */
@media (max-width: 768px) {
	.admin-overlay > div:first-child {
		padding: 10px 12px !important;
		gap: 8px !important;
	}
	.admin-overlay > div:first-child > div:first-child span:first-child {
		font-size: 13px !important;
	}
	.admin-overlay > div:first-child > div:first-child span:last-child {
		display: none !important;
	}
	.admin-overlay > div:first-child > div:last-child {
		gap: 6px !important;
	}
	.admin-overlay > div:first-child > div:last-child input {
		width: 140px !important;
		font-size: 12px !important;
	}
	.admin-overlay > div:first-child > div:last-child button span {
		display: none !important;
	}
	.admin-overlay > div:first-child > div:last-child button {
		padding: 0 8px !important;
	}
}
@media (max-width: 480px) {
	.admin-overlay > div:first-child > div:last-child input {
		width: 100% !important;
		order: -1;
	}
	.admin-overlay > div:first-child > div:last-child > div[style*="width: 1px"] {
		display: none !important;
	}
}

/* ── ADMIN BODY PADDING ─────────────────────────────────────────── */
@media (max-width: 480px) {
	.admin-body {
		padding: 12px !important;
	}
}

/* ── STAT GRID: refined for all breakpoints ────────────────────── */
@media (max-width: 480px) {
	.stat-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		margin-bottom: 16px !important;
	}
	.stat-card {
		padding: 14px 12px !important;
		border-radius: 12px !important;
	}
	.stat-card .sval {
		font-size: 22px !important;
	}
	.stat-card .slabel {
		font-size: 11px !important;
	}
	.stat-card .stat-icon {
		font-size: 16px !important;
	}
}
@media (max-width: 320px) {
	.stat-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── INSIGHT ROW: stack on mobile ──────────────────────────────── */
.insight-row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}
@media (max-width: 768px) {
	.insight-row {
		flex-direction: column !important;
		gap: 16px !important;
	}
}

/* ── INSIGHT BADGES: wrap on small screens ──────────────────────── */
.insight-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
@media (max-width: 480px) {
	.insight-badges {
		gap: 6px;
		margin-bottom: 12px;
	}
	.insight-badges .ibadge {
		font-size: 10px !important;
		padding: 4px 8px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           ADMIN TABLES — RESPONSIVE CARD LAYOUT
           On screens ≤ 768px, the .atbl tables switch to a
           card-based layout where each <tr> becomes a card
           and each <td> shows its label via ::before pseudo-element
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	/* Hide thead on mobile */
	.atbl thead {
		display: none;
	}

	/* Table as block, each row as card */
	.atbl,
	.atbl tbody {
		display: block;
		width: 100%;
	}

	.atbl tr {
		display: block;
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
		position: relative;
	}
	.atbl tr:hover td,
	.atbl tr:hover {
		background: #fff;
	}
	.atbl tr:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		border-color: #fbbf24;
	}

	/* Each cell as a row with label */
	.atbl td {
		display: flex !important;
		justify-content: space-between;
		align-items: flex-start;
		padding: 6px 0 !important;
		border-bottom: 1px solid #f1f5f9 !important;
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		min-width: 0 !important;
		gap: 8px;
		line-height: 1.4;
	}
	.atbl td:last-child {
		border-bottom: none !important;
	}

	/* Labels via data-label attribute */
	.atbl td::before {
		content: attr(data-label);
		font-weight: 700;
		font-size: 11px;
		color: #64748b;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		min-width: 90px;
		flex-shrink: 0;
		padding-top: 1px;
	}

	/* Action column: full width, no label */
	.atbl td:last-child {
		display: flex !important;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 8px;
		padding-top: 10px !important;
		border-top: 2px solid #f1f5f9 !important;
	}
	.atbl td:last-child::before {
		display: none !important;
	}

	/* Admin section: remove overflow-x on mobile since we use cards */
	.admin-section {
		overflow-x: visible !important;
	}
}

/* ── Extra small phones ─────────────────────────────────────────── */
@media (max-width: 400px) {
	.atbl tr {
		padding: 10px !important;
		border-radius: 10px !important;
	}
	.atbl td::before {
		min-width: 75px !important;
		font-size: 10px !important;
	}
	.atbl td {
		font-size: 12px !important;
	}
}

/* ── Admin section responsive headers ───────────────────────────── */
@media (max-width: 480px) {
	.admin-section {
		padding: 16px 12px !important;
		border-radius: 12px !important;
		margin-bottom: 12px !important;
	}
	.admin-section h3 {
		font-size: 14px !important;
		margin-bottom: 12px !important;
		padding-bottom: 8px !important;
	}
	.section-meta {
		font-size: 10px !important;
	}
}

/* ── ADMIN PASSWORD + EMAIL FLEX: stack on mobile ──────────────── */
@media (max-width: 640px) {
	.admin-body > div[style*="display: flex"][style*="gap: 24px"] {
		flex-direction: column !important;
		gap: 16px !important;
	}
	.admin-body > div[style*="display: flex"][style*="gap: 24px"] > .admin-section {
		min-width: 0 !important;
		flex: none !important;
	}
}

/* ── ADMIN EMAIL SECTION: responsive inputs ─────────────────────── */
@media (max-width: 480px) {
	#adminEmailSection .mfield label {
		font-size: 11px !important;
	}
	#adminEmailSection input,
	#adminEmailSection select,
	#adminEmailSection textarea {
		font-size: 13px !important;
		padding: 9px 12px !important;
	}
	#adminEmailSection textarea {
		min-height: 60px !important;
	}
	#adminEmailSection div[style*="display: flex"][style*="gap: 8px"] {
		flex-direction: column !important;
		gap: 6px !important;
	}
	#adminEmailSection div[style*="display: flex"][style*="gap: 8px"] button {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	#sendEmailBtn {
		width: 100% !important;
		justify-content: center !important;
		font-size: 14px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           PROFILE MODAL — RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	#profileModal .modal-box,
	#profileModal > div:not(.hidden) > div {
		border-radius: 16px !important;
		padding: 20px 16px !important;
		margin: 8px !important;
		max-height: 95vh !important;
	}
}
@media (max-width: 380px) {
	#profileModal .modal-box,
	#profileModal > div:not(.hidden) > div {
		padding: 16px 12px !important;
		margin: 4px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           MY DOCS / MY ASSESS PANELS — RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	#myDocsPanel > div,
	#myAssessPanel > div {
		border-radius: 16px !important;
		margin: 8px !important;
		max-width: 100% !important;
	}
	#myDocsPanel > div > div:first-child,
	#myAssessPanel > div > div:first-child {
		padding: 12px 14px !important;
	}
	#myDocsPanel > div > div:first-child h2,
	#myAssessPanel > div > div:first-child h2 {
		font-size: 14px !important;
	}
	#myDocsPanel > div > div:first-child p,
	#myAssessPanel > div > div:first-child p {
		display: none !important;
	}
	#myDocsPanel > div > div:not(:first-child),
	#myAssessPanel > div > div:not(:first-child) {
		padding: 12px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           OUTPUT DOCUMENT TABLES (generated by JS) — RESPONSIVE WRAPPER
           These are the Learning Plan, Course Outline, Session Plan tables
           ═════════════════════════════════════════════════════════════ */
#output .panel table,
#output .doc-content table,
.doc-table-wrap table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	border-radius: 8px;
}

/* Meta info tables (4-col key-value) */
#output table.meta-table,
#output table[style*="border-collapse"] {
	display: table;
	width: 100%;
}
@media (max-width: 600px) {
	#output table.meta-table,
	#output table[style*="border-collapse"]:not(.atbl) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ── Document content area responsive ───────────────────────────── */
@media (max-width: 600px) {
	#output .panel {
		padding: 16px 10px !important;
		border-radius: 14px !important;
	}
	#output .panel h2 {
		font-size: 16px !important;
	}
	#output .panel h3 {
		font-size: 14px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           WELCOME MODAL — ENHANCED RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
	.wm-card {
		margin: 8px !important;
		border-radius: 16px !important;
		overflow: hidden;
	}
	.wm-header h1 {
		font-size: 18px !important;
	}
	.wm-tagline h2 {
		font-size: 18px !important;
	}
	.wm-benefit-item {
		padding: 10px !important;
		border-radius: 10px !important;
	}
	.wm-benefit-title {
		font-size: 12px !important;
	}
	.wm-benefit-desc {
		font-size: 10px !important;
	}
	.wm-flow-step-label {
		font-size: 9px !important;
	}
	.wm-btn-primary,
	.wm-btn-secondary {
		font-size: 12px !important;
		padding: 10px 16px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           AUTH MODAL — ENHANCED SMALL SCREENS
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
	.modal-box {
		padding: 24px 16px !important;
		border-radius: 16px !important;
		margin: 8px !important;
	}
	.modal-logo h2 {
		font-size: 18px !important;
	}
	.mfield input {
		padding: 10px 12px !important;
		font-size: 13px !important;
	}
	.mbtn {
		padding: 11px !important;
		font-size: 14px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           PLAN SELECTION MODAL — RESPONSIVE FIXES
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
	#planModal .modal-box {
		padding: 20px 14px !important;
		border-radius: 16px !important;
		margin: 8px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           PROGRESS / WORKFLOW STEPS — ENHANCED RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
	.progress {
		padding: 10px 12px !important;
	}
	.steps {
		gap: 4px !important;
	}
	.step {
		padding: 6px 8px !important;
		font-size: 10px !important;
		border-radius: 20px !important;
	}
	.step-number {
		width: 20px !important;
		height: 20px !important;
		font-size: 10px !important;
	}
	.divider {
		width: 12px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           MAIN FORM PANELS — EXTRA SMALL SCREENS
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
	.panel {
		padding: 16px 10px !important;
		border-radius: 14px !important;
		margin-bottom: 16px !important;
	}
	.panel h2 {
		font-size: 16px !important;
	}
	.field input,
	.field select {
		padding: 9px 10px !important;
		font-size: 13px !important;
	}
	.field label {
		font-size: 11px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           LIMIT REACHED / STK MODAL — RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
	#limitReachedModal .modal-box,
	#stkModal .modal-box {
		padding: 24px 16px !important;
		border-radius: 16px !important;
		margin: 8px !important;
	}
	#limitReachedModal .modal-box > div div[style*="display: flex"][style*="gap: 12px"] {
		flex-direction: column !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           CREDIT BADGE — ENHANCED RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
	#ics-credit-badge {
		padding: 4px 8px !important;
		font-size: 11px !important;
	}
	#ics-credit-badge .cb-count {
		font-size: 13px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           TABS (Output tabs) — RESPONSIVE
           ═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.doc-tabs,
	.tab-row {
		gap: 4px !important;
	}
	.doc-tabs button,
	.tab-row button {
		font-size: 10px !important;
		padding: 6px 8px !important;
		border-radius: 8px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
           GENERAL IMPROVEMENTS
           ═════════════════════════════════════════════════════════════ */

/* Better focus styles for accessibility */
*:focus-visible {
	outline: 2px solid #fbbf24 !important;
	outline-offset: 2px !important;
}

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* Better selection color */
::selection {
	background: #fbbf24;
	color: #0f172a;
}

/* Admin panel fade-in animation */
.admin-overlay.show {
	animation: adminFadeIn 0.3s ease;
}
@keyframes adminFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Table card hover transition */
.atbl tr {
	transition:
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

/* Hide # column on mobile cards */
@media (max-width: 768px) {
	.atbl td[data-label="#"] {
		display: none !important;
	}
	/* Better badge display inside cards */
	.atbl td .badge-ok,
	.atbl td .badge-used,
	.atbl td .badge-pend {
		display: inline-block;
		font-size: 10px !important;
		padding: 2px 8px !important;
	}
	.atbl td .inst-badge {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.atbl td small {
		font-size: 10px !important;
		color: #94a3b8 !important;
	}
	.atbl td strong {
		font-size: 13px;
	}
	.atbl td .admin-action-btn {
		font-size: 11px !important;
		padding: 4px 10px !important;
	}
}

/* ── Landscape orientation fixes ────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
	.modal-box {
		max-height: 90vh !important;
		overflow-y: auto !important;
	}
	.wm-card {
		max-height: 90vh !important;
		overflow-y: auto !important;
	}
}

/* ── Admin table card: subtle row number indicator ──────────────── */
@media (max-width: 768px) {
	.atbl tr::before {
		content: attr(data-row);
		position: absolute;
		top: 8px;
		right: 10px;
		font-size: 10px;
		font-weight: 700;
		color: #94a3b8;
		background: #f1f5f9;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ── Better empty state for tables on mobile ────────────────────── */
@media (max-width: 768px) {
	.atbl tr td[colspan] {
		display: block !important;
		text-align: center !important;
		padding: 24px 16px !important;
		color: #94a3b8;
		font-style: italic;
	}
}

/* Print-friendly admin tables */
@media print {
	.atbl thead {
		display: table-header-group !important;
	}
	.atbl,
	.atbl tbody {
		display: table !important;
	}
	.atbl tr {
		display: table-row !important;
		border: none !important;
		border-radius: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}
	.atbl td {
		display: table-cell !important;
		border-bottom: 1px solid #ddd !important;
	}
	.atbl td::before {
		display: none !important;
	}
	.atbl td[data-label="#"] {
		display: table-cell !important;
	}
	.atbl tr::before {
		display: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
           COMPREHENSIVE UI ENHANCEMENT LAYER
           1. Welcome modal → full-page landing (no card)
           2. Welcome CTA → differentiated colors & icons
           3. Header → balanced, visible, polished
           4. Review/Summary section → enhanced cards
           5. Buy Credits & Generate buttons → premium CTAs
           6. Form inputs → premium interactive fields
           7. Panels → full-bleed page sections
           ══════════════════════════════════════════════════════════════════════ */

/* ── 0. DESIGN TOKENS ────────────────────────────────────────────── */
:root {
	--ics-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--ics-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--ics-transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
           1. WELCOME MODAL → TRUE FULL-PAGE (ZERO CARD CUES)
           ═══════════════════════════════════════════════════════════════════════ */

#welcomeModal {
	background: #f8fafc !important;
	padding: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

.wm-card {
	background: transparent !important;
	max-width: 100% !important;
	width: 100% !important;
	min-height: 100vh;
	min-height: 100dvh;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	overflow: visible !important;
	animation: wmPageIn 0.6s ease-out !important;
	display: flex;
	flex-direction: column;
}
@keyframes wmPageIn {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Hero — full-bleed, no card border */
.wm-header {
	padding: 56px 32px 48px !important;
	background: linear-gradient(160deg, #0a0f1e 0%, #111827 40%, #1a2540 100%) !important;
	border-image: none !important;
	border-bottom: none !important;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.wm-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
			ellipse 600px 400px at 25% 60%,
			rgba(251, 191, 36, 0.07) 0%,
			transparent 100%
		),
		radial-gradient(ellipse 400px 300px at 75% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 100%);
	pointer-events: none;
}
.wm-header-icon {
	font-size: 52px !important;
	margin-bottom: 14px !important;
	filter: drop-shadow(0 4px 16px rgba(251, 191, 36, 0.35));
	position: relative;
	z-index: 1;
}
.wm-header h1 {
	font-size: clamp(24px, 4.5vw, 40px) !important;
	letter-spacing: -0.5px;
	position: relative;
	z-index: 1;
	text-shadow: 0 2px 12px rgba(251, 191, 36, 0.15);
}
.wm-header p {
	font-size: clamp(12px, 2.2vw, 15px) !important;
	color: rgba(251, 191, 36, 0.7) !important;
	position: relative;
	z-index: 1;
	letter-spacing: 0.5px;
}

.wm-body {
	background: transparent !important;
	flex: 1;
	padding: 40px 32px 48px !important;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.wm-tagline {
	text-align: center;
	margin-bottom: 40px !important;
	padding-bottom: 32px;
	border-bottom: 1px solid #e2e8f0;
}
.wm-tagline h2 {
	font-size: clamp(20px, 3.8vw, 32px) !important;
	font-weight: 800 !important;
	color: #0f172a;
	margin-bottom: 10px !important;
	letter-spacing: -0.3px;
	line-height: 1.3;
}
.wm-tagline p {
	font-size: clamp(13px, 2vw, 16px) !important;
	color: #64748b !important;
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.7;
}

.wm-benefits {
	gap: 16px !important;
	margin-bottom: 40px !important;
}
.wm-benefit-item {
	padding: 22px 20px 18px !important;
	border-radius: 16px !important;
	border: 1.5px solid #e2e8f0 !important;
	background: #ffffff !important;
	transition:
		transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s ease,
		border-color 0.25s ease !important;
}
.wm-benefit-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
	border-color: #fbbf24 !important;
}
.wm-benefit-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px !important;
	font-size: 18px !important;
	margin-bottom: 6px !important;
}
.wm-benefit-title {
	font-size: 14px !important;
	font-weight: 700 !important;
}
.wm-benefit-desc {
	font-size: 12.5px !important;
	line-height: 1.55 !important;
}

.wm-flow-wrap {
	padding: 28px 32px !important;
	margin-bottom: 40px !important;
	border-radius: 16px !important;
	border: 1.5px solid #e2e8f0 !important;
	background: #ffffff !important;
}
.wm-flow-label {
	font-size: 14px !important;
	font-weight: 800 !important;
	margin-bottom: 22px !important;
	color: #0f172a !important;
}

/* Footer — seamless */
.wm-footer {
	padding: 24px 32px !important;
	font-size: 12px !important;
	background: transparent !important;
	border-top: 1px solid #e2e8f0 !important;
	margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
           2. WELCOME CTA BUTTONS — DIFFERENTIATED COLORS & ICONS
           ═══════════════════════════════════════════════════════════════════════ */

.wm-cta-row {
	flex-direction: column !important;
	gap: 14px !important;
	padding-top: 8px !important;
}

/* ── VIEW LIVE DEMO — Teal/Cyan with play icon ── */
#wm-demo-btn {
	background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	padding: 16px 36px !important;
	border-radius: 50px !important;
	box-shadow: 0 6px 24px rgba(13, 148, 136, 0.35) !important;
	border: none !important;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	font-weight: 800 !important;
	width: 100% !important;
}
#wm-demo-btn i {
	display: none !important; /* hide original rocket icon */
}
/* Custom play icon via ::before */
#wm-demo-btn::before {
	content: "▶";
	font-size: 14px;
	margin-right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	flex-shrink: 0;
}
#wm-demo-btn:hover {
	box-shadow: 0 10px 40px rgba(13, 148, 136, 0.45) !important;
	transform: translateY(-2px) !important;
	filter: brightness(1.08);
}
#wm-demo-btn:active {
	transform: translateY(0) scale(0.98) !important;
}

/* ── CREATE ACCOUNT — Gold/Amber with user-plus icon ── */
#wm-get-started {
	background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
	color: #0f172a !important;
	font-size: 16px !important;
	padding: 16px 36px !important;
	border-radius: 50px !important;
	box-shadow: 0 6px 24px rgba(251, 191, 36, 0.4) !important;
	border: none !important;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	font-weight: 800 !important;
	width: 100% !important;
}
#wm-get-started i {
	display: none !important; /* hide original rocket icon */
}
/* Custom user-plus icon via ::before */
#wm-get-started::before {
	content: "✚";
	font-size: 16px;
	margin-right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	flex-shrink: 0;
}
#wm-get-started:hover {
	box-shadow: 0 10px 40px rgba(251, 191, 36, 0.5) !important;
	transform: translateY(-2px) !important;
}
#wm-get-started:active {
	transform: translateY(0) scale(0.98) !important;
}

/* ── SIGN IN — outline/secondary ── */
.wm-btn-secondary {
	font-size: 15px !important;
	padding: 14px 32px !important;
	border-radius: 50px !important;
	border: 2px solid #cbd5e1 !important;
	color: #475569 !important;
	background: #ffffff !important;
	transition: all 0.25s ease !important;
	font-weight: 700 !important;
	width: 100% !important;
}
.wm-btn-secondary:hover {
	border-color: #0f172a !important;
	color: #0f172a !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
           3. HEADER — BALANCED, VISIBLE, POLISHED
           ═══════════════════════════════════════════════════════════════════════ */

.header {
	background: linear-gradient(135deg, #0a0f1e 0%, #0f172a 60%, #1a2540 100%) !important;
	padding: 10px 20px !important;
	border-image: none !important;
	border-bottom: 1px solid rgba(251, 191, 36, 0.2) !important;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !important;
	align-items: center !important;
	position: sticky !important;
	top: 0;
	z-index: 100;
}
.header::after {
	background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.3), transparent) !important;
	height: 1px !important;
}

/* Logo block — clean and centered */
.logo {
	text-align: center !important;
	flex-shrink: 1 !important;
	min-width: 0 !important;
	padding: 0 8px !important;
}
.logo-inner {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.logo-icon-badge {
	width: 38px !important;
	height: 38px !important;
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.08)) !important;
	border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
	border-radius: 10px !important;
	font-size: 18px !important;
	flex-shrink: 0 !important;
}
.logo-text-block {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0 !important;
	min-width: 0 !important;
}
.logo-title-main {
	font-size: clamp(13px, 2vw, 18px) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 280px !important;
}
.logo-title-sub {
	font-size: clamp(8px, 1vw, 10px) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 280px !important;
}
.logo-tagline {
	font-size: clamp(8px, 1vw, 10px) !important;
	display: none !important; /* Hide on header — too much text */
}

/* Header spacer — match right side width */
.header-spacer {
	min-width: 0 !important;
	flex-shrink: 1 !important;
}

/* Right cluster — compact and balanced */
.header-right {
	gap: 6px !important;
	flex-shrink: 0 !important;
}

/* Credits pill — compact gold */
.quota-pill {
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08)) !important;
	border: 1px solid rgba(251, 191, 36, 0.3) !important;
	padding: 5px 12px !important;
	border-radius: 30px !important;
	font-size: 11px !important;
}
.quota-pill i {
	color: #fbbf24 !important;
	font-size: 10px !important;
}
.quota-pill strong {
	color: #fbbf24 !important;
	font-weight: 800 !important;
	-webkit-text-fill-color: #fbbf24 !important;
	font-size: 12px !important;
}

/* User pill — compact */
.user-pill {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	padding: 5px 12px !important;
	border-radius: 30px !important;
	gap: 6px !important;
}
.user-pill > i {
	font-size: 15px !important;
	color: rgba(255, 255, 255, 0.6) !important;
}
.user-pill-name {
	font-size: 11px !important;
	color: #fbbf24 !important;
	-webkit-text-fill-color: #fbbf24 !important;
	white-space: nowrap !important;
}
.user-pill-email {
	display: none !important; /* Hide email on header for balance */
}

/* Sign-out — compact */
.hbtn-signout {
	padding: 5px 12px !important;
	border-radius: 30px !important;
	font-size: 11px !important;
	background: rgba(239, 68, 68, 0.15) !important;
	border: 1px solid rgba(239, 68, 68, 0.3) !important;
	color: #fca5a5 !important;
}
.hbtn-signout i {
	font-size: 12px !important;
}
.signout-label {
	font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
           4. REVIEW / SUMMARY SECTION — ENHANCED CARDS
           ═══════════════════════════════════════════════════════════════════════ */

.summary-box {
	background: #ffffff !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 20px !important;
	margin-bottom: 20px !important;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}
.summary-item {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 12px 14px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	transition: background var(--ics-transition-fast) !important;
}
.summary-item:last-child {
	border-bottom: none !important;
}
.summary-item:hover {
	background: #f8fafc !important;
}
.summary-item i {
	color: #fbbf24 !important;
	width: 20px !important;
	height: 20px !important;
	font-size: 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fffbeb !important;
	border-radius: 8px !important;
	padding: 4px !important;
	flex-shrink: 0 !important;
}
.summary-item span {
	color: #334155 !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

/* Panel heading for Review */
#panel3 h2 {
	margin-bottom: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
           5. BUY CREDITS & GENERATE BUTTONS — PREMIUM CTAs
           ═══════════════════════════════════════════════════════════════════════ */

/* Buy Credits button — gold, prominent */
.btn-gold {
	background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
	color: #0f172a !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	padding: 14px 24px !important;
	border-radius: 14px !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3) !important;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.btn-gold i {
	color: #0f172a !important;
	font-size: 16px !important;
}
.btn-gold:hover {
	background: linear-gradient(135deg, #fbbf24, #fcd34d) !important;
	box-shadow: 0 8px 28px rgba(251, 191, 36, 0.4) !important;
	transform: translateY(-2px) !important;
}
.btn-gold:active {
	transform: translateY(0) scale(0.98) !important;
}

/* Generate Documents button — green, bold */
.btn-primary[style*="background: #22c55e"],
.btn-primary[style*="background:#22c55e"],
#generateBtn {
	background: linear-gradient(135deg, #16a34a, #22c55e) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	padding: 14px 24px !important;
	border-radius: 14px !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3) !important;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	letter-spacing: 0 !important;
}
.btn-primary[style*="background: #22c55e"] i,
.btn-primary[style*="background:#22c55e"] i,
#generateBtn i {
	color: #ffffff !important;
	font-size: 16px !important;
}
.btn-primary[style*="background: #22c55e"]:hover,
.btn-primary[style*="background:#22c55e"]:hover,
#generateBtn:hover {
	box-shadow: 0 8px 28px rgba(22, 163, 74, 0.4) !important;
	transform: translateY(-2px) !important;
	filter: brightness(1.08);
}
.btn-primary[style*="background: #22c55e"]:active,
.btn-primary[style*="background:#22c55e"]:active,
#generateBtn:active {
	transform: translateY(0) scale(0.98) !important;
}

/* Generate button container — spacing */
#generateButtonContainer {
	margin-bottom: 16px !important;
}
#generateButtonContainer p {
	font-size: 12px !important;
	color: #64748b !important;
	background: #f0fdf4 !important;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	border: 1px solid #bbf7d0 !important;
	margin-top: 10px !important;
}

/* Payment button container */
#paymentBtn {
	margin-bottom: 12px !important;
}

/* Download All button */
.download-all-btn {
	background: linear-gradient(135deg, #0f172a, #1e293b) !important;
	color: #fbbf24 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 13px 24px !important;
	border-radius: 14px !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2) !important;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	width: 100% !important;
}
.download-all-btn i {
	color: #fbbf24 !important;
}
.download-all-btn:hover {
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.3) !important;
	transform: translateY(-2px) !important;
}

/* General .btn polish */
.btn {
	border-radius: 14px !important;
	font-weight: 700 !important;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-ghost {
	border: 2px solid #e2e8f0 !important;
	color: #64748b !important;
	background: #ffffff !important;
}
.btn-ghost:hover {
	border-color: #0f172a !important;
	color: #0f172a !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.btn-primary {
	border-radius: 14px !important;
}
.btn-primary:hover {
	transform: translateY(-1px) !important;
}

/* Button group */
.btn-group {
	gap: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
           6. FORM INPUTS — PREMIUM INTERACTIVE FIELDS
           ═══════════════════════════════════════════════════════════════════════ */

.field {
	position: relative;
}
.field label {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-bottom: 6px !important;
	transition: color 0.2s ease !important;
}
.field label i {
	font-size: 10px !important;
	color: #94a3b8 !important;
	transition:
		color 0.2s ease,
		transform 0.2s ease !important;
}
.field:focus-within label {
	color: #0f172a !important;
}
.field:focus-within label i {
	color: #f59e0b !important;
	transform: scale(1.2) !important;
}
.field input,
.field select {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 11px 14px !important;
	border: 2px solid #e2e8f0 !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	color: #0f172a !important;
	background: #f8fafc !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.field input:hover:not(:focus),
.field select:hover:not(:focus) {
	border-color: #cbd5e1 !important;
	background: #ffffff !important;
}
.field input:focus,
.field select:focus {
	outline: none !important;
	border-color: #fbbf24 !important;
	background: #ffffff !important;
	box-shadow:
		0 0 0 4px rgba(251, 191, 36, 0.1),
		0 2px 8px rgba(251, 191, 36, 0.08) !important;
}
.field input::placeholder {
	color: #94a3b8 !important;
}
.field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 36px !important;
}
.field select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.required {
	color: #ef4444 !important;
	font-weight: 700 !important;
}
.form-grid {
	gap: 16px !important;
	margin-bottom: 22px !important;
}

/* Auth modal fields */
#authModal .mfield {
	position: relative;
}
#authModal .mfield label {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 5px !important;
}
#authModal .mfield:focus-within label {
	color: #0f172a !important;
}
#authModal .mfield input {
	padding: 12px 14px !important;
	border: 2px solid #e2e8f0 !important;
	border-radius: 12px !important;
	background: #f8fafc !important;
	font-size: 15px !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#authModal .mfield input:hover:not(:focus) {
	border-color: #cbd5e1 !important;
	background: #ffffff !important;
}
#authModal .mfield input:focus {
	outline: none !important;
	border-color: #fbbf24 !important;
	background: #ffffff !important;
	box-shadow:
		0 0 0 4px rgba(251, 191, 36, 0.1),
		0 2px 8px rgba(251, 191, 36, 0.08) !important;
}
#authModal .mfield input::placeholder {
	color: #94a3b8 !important;
}

/* Upload area */
.upload-area {
	border: 2px dashed #cbd5e1 !important;
	border-radius: 16px !important;
	padding: 36px 24px !important;
	background: #f8fafc !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.upload-area:hover {
	border-color: #fbbf24 !important;
	background: #fffbeb !important;
	box-shadow: 0 4px 20px rgba(251, 191, 36, 0.1) !important;
}
.upload-area.dragover {
	border-color: #f59e0b !important;
	background: #fef3c7 !important;
	box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
           7. MAIN APP — FULL-BLEED PAGE LAYOUT
           ═══════════════════════════════════════════════════════════════════════ */

body {
	overflow-x: hidden !important;
	background: #f1f5f9 !important;
}

.progress {
	position: sticky !important;
	top: 52px;
	z-index: 99;
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.container {
	max-width: 100% !important;
	min-height: calc(100vh - 110px);
	min-height: calc(100dvh - 110px);
	padding: 0 !important;
}

.panel {
	background: #ffffff !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	padding: 28px 20px !important;
	margin-bottom: 0 !important;
	border-bottom: 1px solid #f1f5f9 !important;
}
.panel::before {
	display: none !important;
}
.panel:hover::before {
	display: none !important;
}
.panel h2 {
	font-size: 18px !important;
	margin-bottom: 18px !important;
}
.panel h2 i {
	color: #fbbf24 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
           8. SCROLLBAR + ACCESSIBILITY
           ═══════════════════════════════════════════════════════════════════════ */

* {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

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

/* ═══════════════════════════════════════════════════════════════════════
           9. RESPONSIVE
           ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.wm-header {
		padding: 36px 20px 32px !important;
	}
	.wm-header-icon {
		font-size: 42px !important;
	}
	.wm-body {
		padding: 28px 18px 36px !important;
	}
	.wm-tagline {
		margin-bottom: 28px !important;
		padding-bottom: 24px;
	}
	.wm-tagline h2 {
		font-size: 20px !important;
	}
	.wm-benefits {
		gap: 10px !important;
		margin-bottom: 28px !important;
	}
	.wm-benefit-item {
		padding: 16px 14px 14px !important;
		border-radius: 14px !important;
	}
	.wm-flow-wrap {
		padding: 20px 16px !important;
		margin-bottom: 28px !important;
	}
	.wm-btn-primary,
	.wm-btn-secondary {
		font-size: 15px !important;
		padding: 14px 24px !important;
	}
	.wm-footer {
		padding: 20px 18px !important;
	}

	/* Header mobile */
	.header {
		padding: 8px 12px !important;
	}
	.logo-inner {
		gap: 8px !important;
	}
	.logo-icon-badge {
		width: 32px !important;
		height: 32px !important;
		font-size: 15px !important;
	}
	.logo-title-main {
		max-width: 140px !important;
		font-size: 12px !important;
	}
	.logo-title-sub {
		max-width: 140px !important;
		font-size: 8px !important;
	}
	.quota-pill {
		padding: 4px 8px !important;
		font-size: 10px !important;
	}
	.user-pill {
		padding: 4px 8px !important;
	}
	.user-pill-name {
		font-size: 10px !important;
	}
	.hbtn-signout {
		padding: 4px 10px !important;
		font-size: 10px !important;
	}
	.signout-label {
		font-size: 10px !important;
	}

	/* Main app mobile */
	.panel {
		padding: 20px 14px !important;
	}
	.form-grid {
		gap: 12px !important;
	}
	.field input,
	.field select {
		padding: 11px 12px !important;
		font-size: 16px !important; /* prevent iOS zoom */
	}
	.summary-item {
		padding: 10px 12px !important;
		gap: 10px !important;
	}
	.btn-gold,
	.btn-primary,
	.download-all-btn {
		font-size: 14px !important;
		padding: 12px 20px !important;
	}
}

@media (max-width: 480px) {
	.wm-header {
		padding: 28px 16px 24px !important;
	}
	.wm-header h1 {
		font-size: 20px !important;
	}
	.wm-tagline h2 {
		font-size: 18px !important;
	}
	.wm-body {
		padding: 24px 14px 32px !important;
	}
	.wm-benefits {
		grid-template-columns: 1fr 1fr !important;
	}
	.logo-title-main {
		max-width: 100px !important;
		font-size: 11px !important;
	}
	.logo-title-sub {
		display: none !important;
	}
	.user-pill-info {
		display: none !important;
	}
}

@media (max-width: 360px) {
	.wm-benefits {
		grid-template-columns: 1fr !important;
	}
	.field input,
	.field select {
		padding: 10px 12px !important;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.wm-body {
		max-width: 100%;
		padding: 32px 40px 40px !important;
	}
}

@media (min-width: 481px) {
	.wm-benefits {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Desktop: wider benefits */
@media (min-width: 1024px) {
	.wm-body {
		padding: 48px 48px 56px !important;
	}
	.logo-title-main {
		max-width: 400px !important;
	}
	.logo-title-sub {
		max-width: 400px !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
           ROUND 5 — HEADER: BIG FULL-WIDTH TITLE + HIDE FLOATING CREDITS
           ═══════════════════════════════════════════════════════════════════ */

/* ── A. HIDE FLOATING GREEN CREDITS BADGE COMPLETELY ── */
#ics-credit-badge {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
}

/* ── B. HEADER — FULL WIDTH, BIG TITLE ── */
.header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 20px 32px !important;
	gap: 14px !important;
	position: relative !important;
}

/* Hide the left spacer — no longer needed for centering */
.header-spacer {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	flex: 0 !important;
}

/* Logo block — full width, centered, breathing room */
.logo {
	flex: 0 0 auto !important;
	text-align: center !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

/* Logo inner — center all children */
.logo-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
}

/* Icon badge — bigger, centered */
.logo-icon-badge {
	width: 52px !important;
	height: 52px !important;
	font-size: 26px !important;
	border-radius: 14px !important;
	margin-bottom: 4px !important;
}

/* Text block — centered */
.logo-text-block {
	align-items: center !important;
	text-align: center !important;
}

/* ── MAIN TITLE — BIG, BOLD, FULL WIDTH ── */
.logo-title-main {
	font-size: clamp(20px, 3.5vw, 34px) !important;
	font-weight: 900 !important;
	max-width: 100% !important;
	white-space: normal !important;
	text-overflow: unset !important;
	overflow: visible !important;
	letter-spacing: -0.3px !important;
	line-height: 1.2 !important;
	background: linear-gradient(135deg, #ffffff 0%, #fbbf24 50%, #ffffff 100%) !important;
	background-size: 200% 200% !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	animation: hdrTitleShimmer 4s ease-in-out infinite !important;
}

@keyframes hdrTitleShimmer {
	0%,
	100% {
		background-position: 0% 50% !important;
	}
	50% {
		background-position: 100% 50% !important;
	}
}

/* ── SUBTITLE — VISIBLE, ELEGANT ── */
.logo-title-sub {
	font-size: clamp(11px, 1.6vw, 16px) !important;
	max-width: 100% !important;
	white-space: normal !important;
	text-overflow: unset !important;
	overflow: visible !important;
	opacity: 0.75 !important;
	letter-spacing: 0.5px !important;
	margin-top: 2px !important;
}

/* ── TAGLINE — SHOW IT (was hidden, now visible in full-width header) ── */
.logo-tagline {
	display: block !important;
	font-size: clamp(11px, 1.4vw, 14px) !important;
	opacity: 0.6 !important;
	margin-top: 2px !important;
	animation: hdrTagPulse 3s ease-in-out infinite !important;
}

@keyframes hdrTagPulse {
	0%,
	100% {
		opacity: 0.6 !important;
	}
	50% {
		opacity: 0.85 !important;
	}
}

/* ── HEADER RIGHT — ROW BELOW THE TITLE ── */
.header-right {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	flex-shrink: 0 !important;
	width: auto !important;
	margin-top: 0 !important;
	padding-top: 10px !important;
	border-top: 1px solid rgba(251, 191, 36, 0.15) !important;
}

/* Quota pill inside header — subtle but readable */
.quota-pill {
	background: rgba(251, 191, 36, 0.1) !important;
	border: 1px solid rgba(251, 191, 36, 0.25) !important;
	padding: 6px 16px !important;
	font-size: 13px !important;
	border-radius: 999px !important;
	color: #fbbf24 !important;
}

/* ── RESPONSIVE: TABLET ── */
@media (max-width: 768px) {
	.header {
		padding: 16px 20px !important;
		gap: 10px !important;
	}
	.logo-title-main {
		font-size: clamp(18px, 4vw, 28px) !important;
	}
	.logo-title-sub {
		font-size: clamp(10px, 1.8vw, 14px) !important;
	}
	.logo-icon-badge {
		width: 44px !important;
		height: 44px !important;
		font-size: 22px !important;
	}
	.header-right {
		gap: 8px !important;
		padding-top: 8px !important;
	}
	.quota-pill {
		padding: 5px 12px !important;
		font-size: 12px !important;
	}
}

/* ── RESPONSIVE: MOBILE ── */
@media (max-width: 480px) {
	.header {
		padding: 14px 16px !important;
		gap: 8px !important;
	}
	.logo-title-main {
		font-size: clamp(16px, 5vw, 24px) !important;
	}
	.logo-title-sub {
		font-size: clamp(9px, 2vw, 12px) !important;
	}
	.logo-tagline {
		font-size: clamp(9px, 1.8vw, 11px) !important;
	}
	.logo-icon-badge {
		width: 38px !important;
		height: 38px !important;
		font-size: 18px !important;
		border-radius: 10px !important;
	}
	.header-right {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 6px !important;
		padding-top: 6px !important;
	}
}

/* ── RESPONSIVE: VERY SMALL ── */
@media (max-width: 360px) {
	.header {
		padding: 12px 12px !important;
	}
	.logo-title-main {
		font-size: 15px !important;
	}
	.logo-title-sub {
		font-size: 9px !important;
	}
	.logo-tagline {
		font-size: 9px !important;
	}
}

/* ── PRINT — keep header clean ── */
@media print {
	.header {
		padding: 10px 20px !important;
		border-bottom: 2px solid #0f172a !important;
	}
	.logo-title-main {
		-webkit-text-fill-color: #0f172a !important;
		background: none !important;
		font-size: 20px !important;
	}
	.logo-tagline {
		display: none !important;
	}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
	.logo-title-main {
		animation: none !important;
		background-position: 0% 50% !important;
	}
	.logo-tagline {
		animation: none !important;
		opacity: 0.7 !important;
	}
}