.ilx-tracker{
	--ilx-primary: #0b5cab;
	--ilx-primary-2: #0a7ccf;
	--ilx-text: #0f172a;
	--ilx-muted: #64748b;
	--ilx-border: #e2e8f0;
	--ilx-card: #ffffff;
	--ilx-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
	--ilx-radius: 16px;
	color: var(--ilx-text);
}

.ilx-tracker *{
	box-sizing: border-box;
}

.ilx-tracker .ilx-card{
	background: var(--ilx-card);
	border: 1px solid var(--ilx-border);
	border-radius: var(--ilx-radius);
	box-shadow: var(--ilx-shadow);
	padding: 20px;
}

.ilx-tracker .ilx-card + .ilx-card{
	margin-top: 16px;
}

.ilx-tracker.ilx-tracker-form{
	max-width: 860px;
	margin: 0 auto;
	padding: 12px 0;
}

.ilx-tracker .ilx-card-form{
	padding: 24px;
}

.ilx-tracker .ilx-label{
	display: block;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 10px;
}

.ilx-tracker .ilx-input-row{
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.ilx-tracker .ilx-input{
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--ilx-border);
	border-radius: 14px;
	font-size: 16px;
	line-height: 1.2;
	background: #fff;
}

.ilx-tracker .ilx-input:focus{
	outline: none;
	border-color: rgba(11, 92, 171, 0.45);
	box-shadow: 0 0 0 4px rgba(11, 92, 171, 0.14);
}

.ilx-tracker .ilx-btn{
	white-space: nowrap;
	padding: 14px 18px;
	border: none;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--ilx-primary), var(--ilx-primary-2));
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}

.ilx-tracker .ilx-btn:hover{
	filter: brightness(0.98);
}

.ilx-tracker .ilx-btn:active{
	transform: translateY(1px);
}

.ilx-tracker .ilx-card-title{
	font-weight: 800;
	font-size: 14px;
	margin-bottom: 12px;
	color: var(--ilx-text);
}

.ilx-tracker .ilx-empty{
	margin: 0;
	text-align: center;
	color: var(--ilx-muted);
	font-weight: 600;
}

.ilx-tracker .ilx-muted{
	color: var(--ilx-muted);
	font-size: 13px;
	margin-top: 6px;
}

.ilx-tracker .ilx-v{
	color: var(--ilx-text);
	font-weight: 650;
}

.ilx-tracker .ilx-k{
	color: var(--ilx-muted);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.ilx-tracker .ilx-header{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ilx-tracker .ilx-summary-top{
	display: flex;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.ilx-tracker .ilx-summary-title{
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.ilx-tracker .ilx-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	background: rgba(11, 92, 171, 0.10);
	color: var(--ilx-primary);
	border: 1px solid rgba(11, 92, 171, 0.18);
}

.ilx-tracker .ilx-summary-grid{
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

.ilx-tracker .ilx-summary-item .ilx-v{
	font-size: 14px;
	word-break: break-word;
}

	.ilx-tracker .ilx-notes{
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--ilx-border);
	}

	.ilx-tracker .ilx-progress{
		position: relative;
		padding-top: 2px;
	}

	.ilx-tracker .ilx-progress-bar{
		position: absolute;
		left: 0;
		right: 0;
		top: 7px;
		height: 10px;
		background: linear-gradient(90deg, #f1f5f9, #e2e8f0);
		border: 1px solid var(--ilx-border);
		border-radius: 999px;
		overflow: hidden;
		z-index: 1;
	}

	.ilx-tracker .ilx-progress-fill{
		height: 100%;
		background: linear-gradient(90deg, var(--ilx-primary), var(--ilx-primary-2), var(--ilx-primary));
		background-size: 200% 200%;
		animation: ilxGradientMove 2.2s ease infinite;
		border-radius: 999px;
		position: relative;
		box-shadow: 0 8px 18px rgba(11, 92, 171, 0.18);
	}

		.ilx-tracker .ilx-progress-steps{
			position: relative;
			z-index: 2;
			margin-top: 0;
			display: flex;
			justify-content: space-between;
			gap: 10px;
			padding: 0;
		}

	.ilx-tracker .ilx-step{
		flex: 1;
		min-width: 80px;
	text-align: center;
}

	.ilx-tracker .ilx-step-dot{
		width: 24px;
		height: 24px;
		border-radius: 999px;
		background: #fff;
		border: 2px solid var(--ilx-border);
		margin: 0 auto 8px;
		position: relative;
		z-index: 2;
		display: grid;
		place-items: center;
		color: var(--ilx-muted);
		font-weight: 900;
		font-size: 12px;
		box-shadow: none;
	}

	.ilx-tracker .ilx-step-dot::after{
		content: attr(data-step);
	}

	.ilx-tracker .ilx-step.is-done .ilx-step-dot{
		background: linear-gradient(135deg, var(--ilx-primary), var(--ilx-primary-2));
		border-color: transparent;
		color: #fff;
		box-shadow: 0 10px 20px rgba(11, 92, 171, 0.14);
	}

	.ilx-tracker .ilx-step.is-current .ilx-step-dot{
		background: linear-gradient(135deg, var(--ilx-primary), var(--ilx-primary-2));
		border-color: transparent;
		color: #fff;
		box-shadow: 0 0 0 7px rgba(11, 92, 171, 0.16), 0 14px 30px rgba(2, 6, 23, 0.18);
		animation: ilxPulse 1.6s ease-in-out infinite;
	}

.ilx-tracker .ilx-step-label{
	font-size: 11px;
	color: var(--ilx-muted);
	font-weight: 700;
}

.ilx-tracker .ilx-step.is-current .ilx-step-label{
	color: var(--ilx-primary);
}

.ilx-tracker .ilx-step.is-done .ilx-step-label{
	color: var(--ilx-text);
}

	.ilx-tracker .ilx-step.is-done .ilx-step-dot::after{
		content: "✓";
		position: absolute;
		inset: 0;
		display: grid;
	place-items: center;
	color: #fff;
		font-weight: 900;
		font-size: 12px;
	}

	@keyframes ilxGradientMove{
		0%{ background-position: 0% 50%; }
		50%{ background-position: 100% 50%; }
		100%{ background-position: 0% 50%; }
	}

	@keyframes ilxPulse{
		0%, 100%{ box-shadow: 0 0 0 8px rgba(11, 92, 171, 0.10); }
		50%{ box-shadow: 0 0 0 12px rgba(11, 92, 171, 0.16); }
	}

.ilx-tracker .ilx-grid-2{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.ilx-tracker .ilx-card-mini{
	padding: 16px;
}

.ilx-tracker .ilx-card-details{
	margin-top: 16px;
}

.ilx-tracker .ilx-details-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

.ilx-tracker .ilx-detail .ilx-v{
	font-size: 14px;
	word-break: break-word;
}

.ilx-tracker .ilx-card-timeline{
	margin-top: 16px;
}

.ilx-tracker .ilx-timeline{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ilx-tracker .ilx-timeline-item{
	border: 1px solid var(--ilx-border);
	border-radius: 14px;
	padding: 14px 16px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.ilx-tracker .ilx-timeline-top{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	flex-wrap: wrap;
}

.ilx-tracker .ilx-timeline-event{
	font-weight: 900;
	font-size: 14px;
}

.ilx-tracker .ilx-timeline-when{
	font-size: 12px;
	color: var(--ilx-muted);
	font-weight: 700;
}

.ilx-tracker .ilx-timeline-loc{
	margin-top: 6px;
	font-size: 13px;
	font-weight: 650;
}

.ilx-tracker .ilx-timeline-remarks{
	margin-top: 8px;
	font-size: 13px;
	color: var(--ilx-muted);
}

@media (max-width: 720px){
	.ilx-tracker .ilx-summary-grid{
		grid-template-columns: 1fr;
	}
	.ilx-tracker .ilx-details-grid{
		grid-template-columns: 1fr;
	}
	.ilx-tracker .ilx-grid-2{
		grid-template-columns: 1fr;
	}
	.ilx-tracker .ilx-progress-steps{
		overflow-x: auto;
		padding-bottom: 6px;
	}
}

@media (max-width: 640px){
	.ilx-tracker .ilx-input-row{
		flex-direction: column;
	}
	.ilx-tracker .ilx-btn{
		width: 100%;
	}
}

/* Admin enhancements */
body.wp-admin .ilx-admin .ilx-admin-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

body.wp-admin .ilx-admin .ilx-field label{
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

body.wp-admin .ilx-admin .ilx-field-full{
	grid-column: 1 / -1;
}

body.wp-admin .ilx-admin .regular-text,
body.wp-admin .ilx-admin .large-text{
	max-width: 100%;
	width: 100%;
}

body.wp-admin .ilx-history-other-wrap{
	margin-top: 8px;
	display: none;
}

body.wp-admin .ilx-history-other-wrap.is-visible{
	display: block;
}

@media (max-width: 782px){
	body.wp-admin .ilx-admin .ilx-admin-grid{
		grid-template-columns: 1fr;
	}
}