:root {
	--yellow: #EFB509;
	--yellow-light: rgba(239, 181, 9, .1);
	--yellow-border: rgba(239, 181, 9, .3);
	--navy: #16253D;
	--navy-mid: #2a3d5a;
	--bg: #f8f8f6;
	--surface: #ffffff;
	--border: rgba(22, 37, 61, .1);
	--text: #16253D;
	--muted: #6b7280;
	--green: #22c55e;
	--green-light: rgba(34, 197, 94, .1);
	--font: "IBM Plex Sans", system-ui, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
}

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
	min-height: 100vh;


}

.doc {
	max-width: 820px;
	margin: 0 auto;
    margin-top: 2rem;
	background: var(--surface);
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(22, 37, 61, .12);
	overflow: hidden;
}

.doc-header {
	background: var(--navy);
	padding: 2.5rem 2.5rem 2rem;
   
	position: relative;
	overflow: hidden;
}



.header-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--yellow);
	background: rgba(239, 181, 9, .12);
	border: 1px solid rgba(239, 181, 9, .25);
	border-radius: 999px;
	padding: .25rem .75rem;
	margin-bottom: 1rem;

}

.header-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .5;
		transform: scale(.8)
	}
}

.doc-title {
	font-size: 1.875rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
	margin-bottom: .6rem;
}

.doc-title span {
	color: var(--yellow);
}

.doc-subtitle {
	font-size: .9375rem;
	color: rgba(255, 255, 255, .6);
	max-width: 55ch;
}

.header-meta {
	display: flex;
	gap: 1.5rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .5);
}

.meta-item svg {
	width: 12px;
	height: 12px;
	stroke: rgba(239, 181, 9, .7);
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 2.5rem;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	flex-wrap: wrap;
	gap: .75rem;
}

.progress-wrap {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.progress-bar-track {
	width: 180px;
	height: 6px;
	background: rgba(22, 37, 61, .08);
	border-radius: 999px;
	overflow: hidden;
}

.progress-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--yellow);
	width: 0%;
	transition: width .4s ease;
}

.progress-label {
	font-size: .75rem;
	font-weight: 600;
	color: var(--muted);
}

.btn-print {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--navy);
	background: var(--yellow);
	border: none;
	border-radius: 8px;
	padding: .5rem 1rem;
	cursor: pointer;
	transition: background .18s, box-shadow .18s;
}

.btn-print:hover {
	background: #d9a400;
	box-shadow: 0 2px 8px rgba(239, 181, 9, .4);
}

.btn-print svg {
	width: 14px;
	height: 14px;
	stroke: var(--navy);
}

.btn-reset {
	font-family: var(--font);
	font-size: .75rem;
	font-weight: 500;
	color: var(--muted);
	background: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: .5rem .85rem;
	cursor: pointer;
}

.btn-reset:hover {
	border-color: rgba(22, 37, 61, .2);
	color: var(--navy);
}

.doc-body {
	padding: 2rem 2.5rem 3rem;
}

.section {
	margin-bottom: 2rem;
}

.section-header {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--border);
}

.section-num {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--yellow);
	color: var(--navy);
	font-size: .75rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.section-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
}

.section-desc {
	font-size: .8125rem;
	color: var(--muted);
	margin-left: auto;
	font-style: italic;
}

.items {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.item {
	display: grid;
	grid-template-columns: 20px 1fr auto;
	align-items: start;
	gap: .65rem;
	padding: .65rem .85rem;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	user-select: none;
}

.item:hover {
	background: rgba(239, 181, 9, .05);
	border-color: var(--yellow-border);
}

.item.checked {
	background: var(--green-light);
	border-color: rgba(34, 197, 94, .2);
}

.checkbox {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid rgba(22, 37, 61, .2);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
	transition: background .15s, border-color .15s;
}

.item.checked .checkbox {
	background: var(--green);
	border-color: var(--green);
}

.checkbox svg {
	width: 10px;
	height: 10px;
	stroke: #fff;
	opacity: 0;
	transition: opacity .15s;
}

.item.checked .checkbox svg {
	opacity: 1;
}

.item-text {
	font-size: .875rem;
	color: var(--text);
	line-height: 1.45;
}

.item.checked .item-text {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-color: rgba(34, 197, 94, .5);
}

.item-tag {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .15rem .45rem;
	border-radius: 999px;
	white-space: nowrap;
	align-self: start;
	margin-top: 2px;
}

.tag-odoo {
	background: rgba(22, 37, 61, .08);
	color: var(--navy);
}

.tag-ebay {
	background: rgba(229, 50, 56, .08);
	color: #c0392b;
}

.tag-shopify {
	background: rgba(150, 191, 72, .1);
	color: #5a8a00;
}

.tag-critical {
	background: rgba(239, 181, 9, .15);
	color: #9a6800;
}

.tag-optional {
	background: rgba(107, 114, 128, .08);
	color: var(--muted);
}

.tip {
	display: flex;
	gap: .65rem;
	background: rgba(239, 181, 9, .07);
	border: 1px solid rgba(239, 181, 9, .2);
	border-radius: 10px;
	padding: .85rem 1rem;
	margin-top: .75rem;
	font-size: .8125rem;
	color: var(--navy-mid);
	line-height: 1.5;
}

.tip-icon {
	width: 16px;
	height: 16px;
	stroke: var(--yellow);
	flex-shrink: 0;
	margin-top: 1px;
}

.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.doc-footer {
	padding: 1.25rem 2.5rem;
	border-top: 1px solid var(--border);
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;

}

.footer-brand {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--muted);
}

.footer-brand span {
	color: var(--yellow);
}

.footer-url {
	font-size: .6875rem;
	color: rgba(22, 37, 61, .35);
}

@media print {
	body {
		background: #fff;
		padding: 0;
	}

	.doc {
		box-shadow: none;
		border-radius: 0;
	}

	.toolbar {
		display: none !important;
	}

	.item {
		break-inside: avoid;
	}

	.section {
		break-inside: avoid;
	}
}

@media(max-width:600px) {

	.doc-header,
	.doc-body,
	.toolbar,
	.doc-footer {
		padding-inline: 1.25rem;
		
		
	}
	.doc {
		margin-top: 0;
		border-radius: 0;
	}

	.doc-title {
		font-size: 1.375rem;
	}

	.two-col {
		grid-template-columns: 1fr;
	}

	.progress-bar-track {
		width: 120px;
	}
}