/* ===================================================
               MOBILE RESPONSIVE — comprehensive overhaul
               =================================================== */

@media (max-width: 768px) {
	/* Panel1 full width on mobile */
	#panel1 {
		max-width: 100% !important;
		width: 100% !important;
	}
	/* Header */
	.header {
		padding: 12px 16px;
		flex-wrap: wrap;
		gap: 8px;
	}
	.logo h1 {
		font-size: 17px;
	}
	.logo p {
		font-size: 14px;
	}
	.header-right {
		gap: 8px;
		flex-wrap: wrap;
	}
	.user-pill {
		padding: 5px 12px;
		font-size: 12px;
	}

	/* Container & panels */
	.container {
		padding: 0 12px;
		max-width: 100%;
	}
	.panel {
		padding: 20px 16px;
		border-radius: 16px;
	}
	.panel h2 {
		font-size: 17px;
	}

	/* Form grid */
	#panel1 {
		max-width: 100% !important;
	}
	#panel1 .form-grid {
		grid-template-columns: 1fr 1fr !important;
	}
	.form-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	/* Buttons */
	.btn-group {
		flex-direction: column;
		gap: 10px;
	}
	.btn {
		width: 100%;
		padding: 13px 18px;
		font-size: 14px;
	}
	.btn-group-demo {
		flex-direction: column;
		gap: 10px;
	}

	/* Tabs */
	.tabs {
		gap: 2px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tab {
		padding: 8px 10px;
		font-size: 12px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* Counters */
	.counters {
		gap: 6px;
	}
	.counter {
		font-size: 11px;
		padding: 4px 10px;
	}

	/* Output */
	.output-header {
		padding: 14px;
	}
	.output-header h3 {
		font-size: 15px;
	}

	/* Admin dashboard */
	.admin-header {
		padding: 10px 12px;
		gap: 8px;
	}
	.admin-header h1 {
		font-size: 15px;
	}
	.admin-title-full {
		display: none;
	}
	.admin-title-short {
		display: inline;
	}
	.admin-header-controls {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.admin-search-wrap {
		max-width: 100%;
		min-width: unset;
	}
	.admin-btn-row {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 5px;
	}
	.admin-btn {
		padding: 7px 6px;
		font-size: 11px;
		text-align: center;
	}
	.abtn-label {
		display: none;
	}
	.admin-body {
		padding: 12px 10px;
	}
	.stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-bottom: 16px;
	}
	.stat-card {
		padding: 12px;
		border-radius: 12px;
	}
	.stat-card .sval {
		font-size: 24px;
	}
	.stat-card .slabel {
		font-size: 11px;
	}
	.admin-section {
		padding: 14px 10px;
		border-radius: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.admin-section h3 {
		font-size: 13px;
	}
	.atbl {
		font-size: 11.5px;
	}
	.atbl th,
	.atbl td {
		padding: 7px 7px;
	}

	/* Signature */
	.signature-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	/* Toast */
	.toast {
		left: 12px;
		right: 12px;
		bottom: 16px;
		font-size: 13px;
	}

	/* Modal */
	.modal-box {
		padding: 24px 20px;
		border-radius: 18px;
	}
	.modal-logo h2 {
		font-size: 18px;
	}
	.modal-logo p {
		font-size: 12px;
	}
	.mfield input {
		font-size: 15px;
		padding: 12px 14px;
	}
	.mbtn {
		padding: 14px;
		font-size: 15px;
	}

	/* Payment modal */
	.pay-box {
		border-radius: 18px !important;
	}
	.pay-modal-header {
		padding: 16px 18px 0 !important;
	}
	.pay-modal-scroll {
		padding: 0 18px !important;
	}
	.pay-modal-footer {
		padding: 14px 18px 18px !important;
	}
	.mpesa-card .amount {
		font-size: 28px;
	}
	.mpesa-card .number {
		font-size: 18px;
		letter-spacing: 1px;
	}
	.pay-steps {
		gap: 6px;
	}
	.pay-step {
		padding: 8px 4px;
		font-size: 10px;
	}
	.pay-step .pnum {
		width: 22px;
		height: 22px;
		font-size: 11px;
	}

	/* Plan */
	.plan-selection-grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.plan-option .price {
		font-size: 18px;
	}
	.plan-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* Upload */
	.upload-panel-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.upload-area {
		padding: 24px 16px;
	}
	.upload-icon {
		font-size: 36px;
	}
	.upload-title {
		font-size: 14px;
	}

	/* Doc pages */
	.doc-landscape,
	.doc-outline,
	.doc-portrait {
		padding: 0.4in 0.35in;
		margin-bottom: 16px;
	}
	.doc-institution {
		font-size: 15px;
	}
	.doc-title {
		font-size: 13px;
	}
	table {
		font-size: 9pt;
	}
	td,
	th {
		padding: 5px 4px;
	}

	/* Summary */
	.summary-box {
		padding: 14px;
	}
	.summary-item {
		font-size: 13px;
		gap: 10px;
	}
	.outcomes-preview {
		padding: 14px;
	}
}

@media (max-width: 480px) {
	/* Header */
	.header {
		padding: 10px 14px;
	}
	.logo h1 {
		font-size: 15px;
	}
	.logo p {
		display: block;
		font-size: 12px;
		white-space: normal;
		line-height: 1.3;
	}
	.header-right {
		width: 100%;
		justify-content: flex-end;
	}

	/* Forms — single column */
	#panel1 .form-grid {
		grid-template-columns: 1fr !important;
	}
	.form-grid {
		grid-template-columns: 1fr !important;
	}

	/* Panels */
	.panel {
		padding: 16px 14px;
		border-radius: 14px;
	}
	.panel h2 {
		font-size: 16px;
	}

	/* Admin stats */
	.stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.stat-card .sval {
		font-size: 22px;
	}

	/* Plan cards horizontal scroll */
	.plan-cards {
		grid-template-columns: repeat(4, 140px);
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.plan-cards::-webkit-scrollbar {
		display: none;
	}

	/* Modal */
	.modal-box {
		padding: 20px 16px !important;
		border-radius: 16px;
	}
	.modal-logo .icon {
		font-size: 32px;
	}
	.modal-logo h2 {
		font-size: 16px !important;
	}
	.plan-card {
		padding: 12px 8px !important;
	}

	/* Toast */
	.toast {
		left: 8px;
		right: 8px;
		bottom: 12px;
	}

	/* Pay modal */
	.mpesa-card {
		padding: 12px;
	}
	.mpesa-card .amount {
		font-size: 26px;
	}
	.mpesa-card .number {
		font-size: 16px;
		padding: 5px 10px;
	}
	.mpesa-info {
		font-size: 11px;
	}

	/* Doc pages */
	.doc-landscape,
	.doc-outline,
	.doc-portrait {
		padding: 0.3in 0.25in;
	}
	table {
		font-size: 8.5pt;
	}
	td,
	th {
		padding: 4px 3px;
	}

	/* Signature */
	.signature-line {
		font-size: 9pt;
	}
	.signature-label {
		font-size: 9pt;
	}

	/* Buttons */
	.btn {
		padding: 12px 16px;
		font-size: 13px;
	}
	.mbtn {
		padding: 13px;
		font-size: 14px !important;
	}
	#verifyBtn {
		padding: 14px !important;
		font-size: 14px !important;
	}
	.download-all-btn {
		padding: 11px 18px;
		font-size: 13px;
	}

	/* User pill truncate */
	.user-pill .name {
		max-width: 80px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Admin header */
	.admin-header {
		flex-wrap: wrap;
		gap: 8px;
	}
	.admin-btn-row {
		gap: 5px;
	}
	.admin-btn {
		padding: 7px 12px;
		font-size: 12px;
	}
}

@media (max-width: 380px) {
	.logo h1 {
		font-size: 13px;
	}
	.stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.stat-card {
		padding: 10px;
	}
	.stat-card .sval {
		font-size: 20px;
	}
	.stat-card .slabel {
		font-size: 11px;
	}
	.modal-box {
		padding: 18px 12px !important;
	}
	.plan-option .price {
		font-size: 16px;
	}
	.plan-option .units {
		font-size: 15px;
	}
	table {
		font-size: 8pt;
	}
}

@media (max-width: 400px) {
	.logo h1 {
		font-size: 13px;
	}
	.step span:last-child {
		display: inline;
		font-size: 9px;
	}
	.step {
		padding: 4px 4px;
	}
	.step-number {
		width: 18px;
		height: 18px;
		font-size: 9px;
	}
	table {
		font-size: 6.5pt;
	}
	th,
	td {
		padding: 2px 2px;
	}
}

/* Enhanced mobile display for header and steps */
@media (max-width: 600px) {
	.header {
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 16px;
	}

	.logo h1 {
		font-size: 16px;
		line-height: 1.3;
		margin-bottom: 4px;
	}

	.logo p {
		font-size: 14px !important;
		display: block !important;
		margin-top: 2px;
		color: #ef4444 !important;
	}

	.header-right {
		width: 100%;
		justify-content: space-between;
		margin-top: 8px;
	}

	.steps {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	.step {
		flex: 0 1 auto;
		min-width: 80px;
		padding: 6px 8px;
	}

	.step span:last-child {
		display: inline !important;
		font-size: 10px;
	}

	.divider {
		width: 8px;
	}
}

/* Extra small devices */
@media (max-width: 380px) {
	.logo h1 {
		font-size: 14px;
	}

	.logo p {
		font-size: 12px !important;
		line-height: 1.2;
	}

	.step {
		min-width: 70px;
		padding: 4px 4px;
	}

	.step span:last-child {
		font-size: 9px;
	}

	.step-number {
		width: 16px;
		height: 16px;
		font-size: 8px;
	}
}

/* Fix for very small screens */
@media (max-width: 320px) {
	.logo h1 {
		font-size: 12px;
	}

	.logo p {
		font-size: 11px !important;
	}

	.step {
		min-width: 65px;
	}
}

/* Plan option hover for new design */
.plan-option:hover {
	border-color: #fbbf24 !important;
	background: #fef9e7 !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(251, 191, 36, 0.2);
}

/* Spinning animation for polling */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.admin-action-btn {
	font-size: 11px;
	padding: 3px 8px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	margin: 0 2px;
}
.admin-action-btn:hover {
	opacity: 0.8;
}
.admin-credit-input {
	width: 44px;
	font-size: 11px;
	padding: 3px 4px;
	border: 1.5px solid #e2e8f0;
	border-radius: 6px;
	text-align: center;
	font-weight: 600;
	color: #0f172a;
	outline: none;
}
.admin-credit-input:focus {
	border-color: #22c55e;
	box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.plan-selection-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 20px 0;
}

.plan-option {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s;
}

.plan-option:hover {
	border-color: #fbbf24;
	background: #fef9e7;
}

.plan-option.selected {
	border-color: #fbbf24;
	background: #fef9e7;
	box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.plan-option .units {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
}

.plan-option .price {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 8px 0;
}

.plan-option .price small {
	font-size: 12px;
	font-weight: 400;
	color: #64748b;
}

.network-error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
	border-radius: 12px;
	padding: 16px;
	margin: 20px 0;
	text-align: center;
	font-weight: 600;
	display: none;
}

.network-error.show {
	display: block;
}

.download-all-btn {
	background: #0f172a;
	color: #fbbf24;
	border: none;
	border-radius: 40px;
	padding: 12px 24px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	margin-top: 10px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.download-all-btn:hover {
	background: #1e293b;
	transform: translateY(-2px);
}

.doc-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.doc-header-left {
	text-align: center;
}

.doc-header-right {
	margin-bottom: 15px;
	text-align: center;
}
.plan-card {
	transition: all 0.2s ease;
	cursor: pointer;
}

.plan-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.plan-card.selected {
	border-color: #fbbf24 !important;
	background: #fef9e7 !important;
}

.code-input {
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.code-input:focus {
	border-color: #00a651;
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1);
}
/* Add to your existing styles */
.modal-box {
	position: relative;
	animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.plan-card {
	transition: all 0.2s ease;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.plan-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.plan-card.selected {
	border-color: #fbbf24 !important;
	background: #fef9e7 !important;
	transform: scale(1.02);
}

.code-input:focus {
	border-color: #00a651 !important;
	outline: none;
	box-shadow: 0 0 0 4px rgba(0, 166, 81, 0.15);
}

#verifyBtn {
	transition: all 0.2s ease;
}

#verifyBtn:hover {
	background: #008542 !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 166, 81, 0.2);
}

#verifyBtn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* ══════════════════════════════════
               MOBILE RESPONSIVE
               ══════════════════════════════════ */
@media (max-width: 768px) {
	* {
		box-sizing: border-box;
	}
	.container {
		padding: 0 10px;
		margin: 12px auto;
		width: 100%;
	}

	/* Header */
	.header {
		padding: 10px 14px;
		flex-wrap: wrap;
		gap: 8px;
	}
	.logo h1 {
		font-size: 13px;
		line-height: 1.3;
	}
	.logo p {
		font-size: 15px !important;
	}
	.header-right {
		gap: 6px;
		flex-wrap: wrap;
	}
	.quota-pill,
	.user-pill {
		font-size: 11px;
		padding: 5px 10px;
	}
	.user-pill .name {
		max-width: 90px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.hbtn {
		padding: 7px 12px;
		font-size: 12px;
	}

	/* Progress bar */
	.progress {
		padding: 10px 14px 6px;
	}
	.steps {
		gap: 4px;
	}
	.step {
		padding: 7px 8px;
		font-size: 11px;
		gap: 5px;
	}
	.step-number {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}
	.divider {
		width: 12px;
	}

	/* Panels */
	#panel1 {
		max-width: 100% !important;
		width: 100% !important;
		padding: 16px 12px !important;
	}
	.panel {
		padding: 16px 12px;
		border-radius: 14px;
	}
	.panel h2 {
		font-size: 15px;
	}

	/* Form — single column on mobile */
	.form-grid {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
	.field label {
		font-size: 12px;
	}
	.field input,
	.field select {
		font-size: 14px;
		padding: 10px 12px;
		border-radius: 10px;
	}
	.pw-eye {
		right: 10px;
		font-size: 14px;
	}

	/* Buttons */
	.btn-group {
		flex-direction: column;
		gap: 8px;
	}
	.btn {
		width: 100%;
		padding: 12px 14px;
		font-size: 13px;
	}
	.download-all-btn {
		font-size: 13px;
		padding: 11px 14px;
	}

	/* Upload */
	.upload-panel-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.upload-area {
		padding: 20px 12px;
		border-radius: 12px;
	}
	.upload-icon {
		font-size: 30px;
	}
	.upload-title {
		font-size: 13px;
	}
	.upload-hint {
		font-size: 11px;
	}
	.upload-instruction-box {
		font-size: 11px;
		padding: 11px;
	}

	/* Output header / counters */
	.output-header {
		padding: 12px;
		border-radius: 12px;
	}
	.output-header h3 {
		font-size: 14px;
	}
	.counters {
		gap: 5px;
		flex-wrap: wrap;
	}
	.counter {
		font-size: 11px;
		padding: 4px 8px;
	}

	/* Tabs */
	.tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 0;
	}
	.tab {
		padding: 8px 12px;
		font-size: 12px;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* Generated documents — scroll horizontally */
	#output {
		width: 100%;
		overflow-x: hidden;
	}
	#tabPlan,
	#tabOutline,
	#tabSessions {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		display: block;
	}
	.doc-landscape {
		padding: 10px 6px;
		font-size: 7.5pt;
		width: max-content;
		min-width: 100%;
		margin-bottom: 10px;
	}
	.doc-outline,
	.doc-portrait {
		padding: 12px 8px;
		font-size: 8pt;
		overflow-x: auto;
		margin-bottom: 10px;
	}
	.doc-institution {
		font-size: 12px !important;
	}
	.doc-title {
		font-size: 10px !important;
	}
	table {
		font-size: 7.5pt;
		table-layout: auto;
	}
	th,
	td {
		padding: 3px 3px;
		font-size: 7pt;
		word-break: break-word;
	}
	.doc-meta td {
		padding: 3px 5px;
		font-size: 7.5pt;
	}
	.doc-meta .label {
		width: 80px;
		font-size: 7pt;
	}
	.signature-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.signature-line {
		margin-top: 14px;
		font-size: 8pt;
	}
	.signature-label {
		font-size: 8pt;
	}

	/* Summary */
	.summary-box {
		padding: 12px;
		border-radius: 10px;
	}
	.summary-item {
		font-size: 12px;
		gap: 8px;
	}
	.outcomes-preview {
		padding: 12px;
	}
	.outcome-item {
		font-size: 11px;
		padding: 5px 8px;
	}

	/* Toast */
	.toast {
		left: 10px;
		right: 10px;
		bottom: 12px;
		font-size: 12px;
	}

	/* Modal */
	.modal-box {
		padding: 22px 16px;
		border-radius: 16px;
	}
	.modal-logo h2 {
		font-size: 17px;
	}
	.mfield input {
		font-size: 14px;
		padding: 11px 12px;
	}
	.mbtn {
		padding: 13px;
		font-size: 14px;
	}

	/* Admin */
	.admin-header {
		padding: 10px 10px;
		flex-wrap: wrap;
		gap: 6px;
	}
	.admin-header h1 {
		font-size: 13px;
	}
	.admin-btn-row {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 4px;
	}
	.admin-btn {
		padding: 6px 5px;
		font-size: 11px;
	}
	.admin-body {
		padding: 10px 8px;
	}
	.stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.stat-card {
		padding: 12px;
	}
	.stat-card .sval {
		font-size: 22px;
	}
	.stat-card .slabel {
		font-size: 11px;
	}
	.admin-section {
		padding: 12px 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.atbl {
		font-size: 11px;
	}
	.atbl th,
	.atbl td {
		padding: 5px 5px;
	}

	/* My Docs panel */
	#myDocsPanel {
		padding: 12px !important;
	}
}
/* ===== MOBILE BUTTON LABELS AND STYLES ===== */
/* Keep all admin button text visible on mobile devices */
@media (max-width: 768px) {
	/* Override any existing styles that hide button text */
	.abtn-label {
		display: inline !important;
		font-size: 11px;
		margin-left: 4px;
	}

	/* Make admin buttons more touch-friendly */
	.admin-btn {
		padding: 10px 14px !important;
		font-size: 13px !important;
		min-width: 70px;
		border-radius: 30px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Style icons inside buttons */
	.admin-btn i {
		font-size: 13px;
		margin-right: 5px;
	}

	/* Improve button row layout */
	.admin-btn-row {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		justify-content: flex-end !important;
	}

	/* Make header controls stack nicely */
	.admin-header-controls {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	/* Full width search on mobile */
	.admin-search-wrap {
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Improve search input for touch */
	.admin-search-wrap input {
		padding: 12px 40px 12px 15px !important;
		font-size: 14px !important;
		height: 44px !important;
	}

	/* Adjust search icon position */
	.admin-search-icon {
		right: 15px !important;
		font-size: 14px !important;
	}
}

/* Extra small devices (phones under 480px) */
@media (max-width: 480px) {
	/* Make buttons even more compact but still readable */
	.admin-btn {
		padding: 8px 12px !important;
		font-size: 12px !important;
		min-width: 60px;
	}

	.admin-btn i {
		font-size: 12px;
		margin-right: 4px;
	}

	.abtn-label {
		font-size: 11px !important;
	}

	/* Stack buttons in a 2x2 grid on very small screens */
	.admin-btn-row {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 6px !important;
	}

	/* Make buttons full width in grid */
	.admin-btn {
		width: 100% !important;
	}
}

/* For extremely small devices */
@media (max-width: 360px) {
	.admin-btn {
		padding: 7px 8px !important;
		font-size: 11px !important;
	}

	.admin-btn i {
		font-size: 11px;
		margin-right: 3px;
	}

	.abtn-label {
		font-size: 10px !important;
	}
}

/* ╔══════════════════════════════════════════════════════════════╗
               ║        ICS ENHANCED DESIGN SYSTEM  v2.0                     ║
               ║        Typography · Color · Motion · Accessibility          ║
               ╚══════════════════════════════════════════════════════════════╝ */