:root {
	--bg-soft: #f4f7ff;
	--bg-surface: #ffffff;
	--text-strong: #1f2937;
	--text-muted: #6b7280;
	--brand-shadow: 0 14px 30px rgba(15, 23, 42, .08);
	--brand-1: #4f46e5;
	--brand-2: #7c3aed;
	--brand-3: #06b6d4;
	--brand-4: #f59e0b;
}

body {
	color: var(--text-strong);
	background: radial-gradient(1100px 560px at 8% 0%, #e8eeff 0%, rgba(232,238,255,0) 58%),
				radial-gradient(820px 420px at 94% 2%, rgba(236, 72, 153, .12) 0%, rgba(236, 72, 153, 0) 60%),
				radial-gradient(700px 360px at 90% 88%, rgba(6, 182, 212, .12) 0%, rgba(6, 182, 212, 0) 62%),
				linear-gradient(180deg, #f7f9ff 0%, var(--bg-soft) 100%);
}

.app-navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: linear-gradient(90deg, #1e293b 0%, #0f172a 30%, #312e81 65%, #4f46e5 100%) !important;
	box-shadow: 0 10px 24px rgba(15, 23, 42, .35);
}

.navbar-brand {
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2px;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

.navbar-brand small {
	font-size: .72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .72);
	letter-spacing: .35px;
	text-transform: uppercase;
}

.navbar .nav-link {
	border-radius: 8px;
	padding: .4rem .65rem;
	transition: background-color .15s ease, transform .15s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	transform: translateY(-1px);
}

.app-env {
	padding-left: .5rem;
	border-left: 1px solid rgba(255, 255, 255, .18);
}

.app-main {
	min-height: calc(100vh - 140px);
}

.auth-wrap {
	min-height: calc(100vh - 260px);
}

.auth-card {
	max-width: 560px;
	margin-inline: auto;
}

.auth-form .form-control {
	height: 44px;
}

.metric-tile {
	border: 1px solid rgba(148, 163, 184, .24);
	border-radius: 12px;
	padding: .7rem .75rem;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.quick-actions {
	border-style: dashed;
}

.quick-actions .btn {
	min-width: 140px;
}

.receipt-wrap {
	max-width: 820px;
	margin: 0 auto;
}

.receipt-card .card {
	box-shadow: none;
}

.customer-invoice {
	background: #fff;
	color: #111827;
}

.receipt-main {
	max-width: 420px;
	margin: 0 auto;
	padding: .5rem;
}

.customer-invoice .receipt-card .table {
	font-size: .92rem;
}

.thermal-receipt .card-body {
	padding: .5rem !important;
}

.thermal-shop-name {
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.thermal-meta {
	font-size: .84rem;
	line-height: 1.35;
}

.thermal-sep {
	border-top: 1px dashed #6b7280;
	margin: .35rem 0;
}

.thermal-table thead th {
	font-size: .9rem;
	padding: .25rem .2rem;
	background: transparent;
	border-bottom: 1px dashed #6b7280;
}

.thermal-table tbody td {
	font-size: .88rem;
	padding: .18rem .2rem;
	border-bottom: 0;
}

.thermal-total {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: .3px;
}

.thermal-thanks {
	font-weight: 600;
	letter-spacing: .2px;
}

.card {
	border: 1px solid rgba(148, 163, 184, .16);
	border-radius: 14px;
	background: var(--bg-surface);
	box-shadow: var(--brand-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px rgba(15, 23, 42, .12);
}

.table thead th {
	white-space: nowrap;
	color: #1e293b;
	background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
	border-bottom-color: rgba(15, 23, 42, .12);
	font-weight: 600;
}

.table tbody td { vertical-align: middle; }
.table tbody tr:hover { background: rgba(79, 70, 229, .04); }
.text-muted, .form-text { color: var(--text-muted) !important; }
.form-label { color: #374151; font-weight: 500; }

.form-control,
.form-select {
	border-radius: 10px;
	border-color: rgba(148, 163, 184, .45);
	background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
	border-color: rgba(79, 70, 229, .45);
	box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .16);
}

.btn {
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: .1px;
}

.btn-primary {
	border: 0;
	background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
}

.btn-primary:hover,
.btn-primary:focus {
	background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

.btn-outline-primary {
	border-color: rgba(79, 70, 229, .55);
	color: #4338ca;
}

.btn-outline-primary:hover {
	background: rgba(79, 70, 229, .1);
	border-color: rgba(79, 70, 229, .72);
	color: #312e81;
}

.btn-success {
	border: 0;
	background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
}

.btn-outline-secondary {
	border-color: rgba(71, 85, 105, .42);
}

.btn:focus { box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .2) !important; }

.badge.text-bg-success {
	background: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
}

.badge.text-bg-warning {
	background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
	color: #fff !important;
}

.display-6 {
	font-weight: 800;
	color: #0f172a;
}

.row.g-3 .col-md-4 .card .card-body,
.row.g-3 .col-md-6 .card .card-body {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
}

.row.g-3 .col-md-4:nth-child(1) .card .card-body,
.row.g-3 .col-md-6:nth-child(1) .card .card-body {
	background: linear-gradient(135deg, rgba(79,70,229,.12) 0%, rgba(129,140,248,.08) 100%);
}

.row.g-3 .col-md-4:nth-child(2) .card .card-body,
.row.g-3 .col-md-6:nth-child(2) .card .card-body {
	background: linear-gradient(135deg, rgba(6,182,212,.12) 0%, rgba(14,165,233,.08) 100%);
}

.row.g-3 .col-md-4:nth-child(3) .card .card-body {
	background: linear-gradient(135deg, rgba(245,158,11,.14) 0%, rgba(251,191,36,.08) 100%);
}

.alert {
	border: 0;
	border-radius: 12px;
}

.future-landing {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
}

.future-landing .card {
	background: linear-gradient(135deg, rgba(15, 23, 42, .93) 0%, rgba(49, 46, 129, .93) 45%, rgba(15, 118, 110, .86) 100%);
	color: #fff;
	box-shadow: 0 24px 46px rgba(15, 23, 42, .25);
	border: 1px solid rgba(255, 255, 255, .15);
}

.future-title {
	font-weight: 800;
	letter-spacing: .2px;
	color: #fff;
}

.future-chip {
	font-size: .75rem;
	font-weight: 600;
	padding: .35rem .65rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #e0e7ff;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.future-mini-card {
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	padding: .6rem .7rem;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
	color: #fff;
}

.future-side-panel {
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 14px;
	padding: 1rem;
	background: rgba(255, 255, 255, .09);
	backdrop-filter: blur(8px);
	color: #fff;
}

.future-logo-wrap {
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 14px;
	padding: .8rem;
	background: rgba(255, 255, 255, .08);
}

.future-logo-wrap img {
	filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .35));
}

.future-step {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem .5rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
}

.future-step-num {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
	font-weight: 700;
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

.future-orb {
	position: absolute;
	border-radius: 999px;
	filter: blur(2px);
	pointer-events: none;
}

.future-orb-1 {
	width: 180px;
	height: 180px;
	top: -44px;
	right: -30px;
	background: radial-gradient(circle, rgba(56, 189, 248, .45) 0%, rgba(56, 189, 248, 0) 70%);
}

.future-orb-2 {
	width: 220px;
	height: 220px;
	left: -48px;
	bottom: -72px;
	background: radial-gradient(circle, rgba(251, 191, 36, .35) 0%, rgba(251, 191, 36, 0) 72%);
}

.app-footer {
	font-size: .9rem;
	color: #64748b;
	padding: 1rem 0 1.25rem;
}

@media print {
	@page {
		size: 80mm auto;
		margin: 0;
	}

	html,
	body {
		width: 80mm !important;
		max-width: 80mm !important;
	}

	body { background: #fff; }
	nav.navbar, .no-print, .app-footer { display: none !important; }
	.alert { display: none !important; }
	main.container { padding-top: 0 !important; }
	.card { box-shadow: none !important; border-radius: 0 !important; border: 0 !important; }

	body.customer-invoice {
		margin: 0 !important;
		padding: 0 !important;
		width: 80mm;
	}

	body.customer-invoice .receipt-main {
		max-width: 80mm;
		padding: 0;
	}

	body.customer-invoice .receipt-wrap {
		max-width: 80mm;
		margin: 0;
	}

	body.customer-invoice .receipt-card,
	body.customer-invoice .receipt-card .card,
	body.customer-invoice .receipt-card .card-body {
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	body.customer-invoice .table {
		font-size: 12px;
	}
}