body {
	font-size: 15px
	}

	/* ── Grain overlay (dark only) ───────────────────────────── */
	[data-bs-theme="dark"] body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
	radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--color-text) 5%, transparent), transparent 40%),
	radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--color-text) 3%, transparent), transparent 35%),
	repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-text) 2%, transparent) 0, color-mix(in srgb, var(--color-text) 2%, transparent) 1px, transparent 1px, transparent 3px);
	mix-blend-mode: overlay;
	opacity: .16;
	z-index: 0
	}

	.manage-wrap {
	padding: 40px 0;
	min-height: 100vh;
	position: relative;
	z-index: 1
	}

	/* ── Shell ────────────────────────────────────────────────── */
	.manage-shell {
	max-width: 900px;
	margin: 0 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	overflow: hidden
	}

	[data-bs-theme="dark"] .manage-shell {
	background: linear-gradient(180deg, color-mix(in srgb, var(--color-text) 5.5%, transparent), color-mix(in srgb, var(--color-text) 3%, transparent));
	border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
	box-shadow: 0 30px 100px color-mix(in srgb, var(--color-background) 50%, transparent)
	}

	[data-bs-theme="light"] .manage-shell {
	box-shadow: 0 16px 50px color-mix(in srgb, var(--color-background) 10%, transparent)
	}

	/* ── Header / Body ────────────────────────────────────────── */
	.manage-header {
	padding: 24px 30px;
	border-bottom: 1px solid var(--color-border)
	}

	.manage-body {
	padding: 30px
	}

	.login-shell {
	max-width: 480px
	}

	/* ── Logo ─────────────────────────────────────────────────── */
	[data-bs-theme="dark"] .manage-header img {
	filter: drop-shadow(0 8px 30px color-mix(in srgb, var(--color-background) 60%, transparent))
	}

	[data-bs-theme="light"] .manage-header img {
	filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--color-background) 8%, transparent))
	}

	/* ── Credential rows ──────────────────────────────────────── */
	.cred-row {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px
	}

	[data-bs-theme="dark"] .cred-row {
	background: color-mix(in srgb, var(--color-background) 30%, transparent);
	border-color: color-mix(in srgb, var(--color-text) 8%, transparent)
	}

	.cred-row .label {
	font-size: .8rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .5px;
	min-width: 90px
	}

	.cred-row .value {
	font-family: 'Courier New', monospace;
	font-size: 1rem;
	flex: 1;
	word-break: break-all;
	color: var(--color-text)
	}

	/* ── Copy button ──────────────────────────────────────────── */
	.copy-btn {
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
	color: var(--color-accent);
	padding: .4rem .75rem;
	border-radius: 8px;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s;
	white-space: nowrap
	}

	.copy-btn:hover {
	background: color-mix(in srgb, var(--color-accent) 20%, transparent)
	}

	/* ── Section headers ──────────────────────────────────────── */
	.section-header {
	font-size: 12pt;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-text-muted);
	margin-bottom: 12px;
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 8px
	}

	.section-header:first-child {
	margin-top: 0
	}

	.section-header i {
	color: var(--color-accent);
	font-size: .9rem
	}

	/* ── Stat cards ───────────────────────────────────────────── */
	.stat-card {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 16px;
	text-align: center
	}

	[data-bs-theme="dark"] .stat-card {
	background: color-mix(in srgb, var(--color-background) 25%, transparent);
	border-color: color-mix(in srgb, var(--color-text) 8%, transparent)
	}

	.stat-card .label {
	font-size: .75rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-bottom: 4px
	}

	.stat-card .value {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-text)
	}

	/* ── Product cards ─────────────────────────────────────────── */
	.product-card {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 18px;
	cursor: pointer;
	transition: all .2s;
	text-align: center
	}

	[data-bs-theme="dark"] .product-card {
	background: color-mix(in srgb, var(--color-background) 25%, transparent);
	border-color: color-mix(in srgb, var(--color-text) 8%, transparent)
	}

	.product-card:hover,
	.product-card.selected {
	border-color: var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 6%, transparent)
	}

	.product-card .name {
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 6px;
	color: var(--color-text)
	}

	.product-card .price {
	font-size: 1.4rem;
	font-weight: 900;
	color: var(--color-accent)
	}

	.product-card .meta {
	font-size: .9rem;
	color: var(--color-text-muted);
	margin-top: 4px
	}

	/* ── Info banner ───────────────────────────────────────────── */
	.info-banner {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 24px
	}

	[data-bs-theme="dark"] .info-banner {
	background: color-mix(in srgb, var(--color-background) 30%, transparent);
	border-color: color-mix(in srgb, var(--color-text) 8%, transparent)
	}

	.info-banner .product-name {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 6px
	}

	.info-banner .meta-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	color: var(--color-text-muted);
	font-size: 12pt;
	}

	.info-banner .meta-row span {
	display: flex;
	align-items: center;
	gap: 6px
	}

	.info-banner .meta-row i {
	color: var(--color-accent);
	font-size: .85rem
	}

	/* ── Nav pills ─────────────────────────────────────────────── */
	.nav-pills .nav-link {
	color: var(--color-text-muted);
	border-radius: 10px;
	padding: .6rem 1.2rem;
	font-size: 12pt;
	}

	.nav-pills .nav-link.active {
	background: color-mix(in srgb, var(--color-accent) 15%, transparent);
	color: var(--color-accent);
	font-weight: 700
	}

	.nav-pills .nav-link:hover:not(.active) {
	color: var(--color-text)
	}

	/* ── Bouquet list ──────────────────────────────────────────── */
	.bouquet-list {
	height: auto;
	overflow-y: auto
	}

	/* ── Bouquet check label ───────────────────────────────────── */
	.bq-check-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	font-size: .9rem;
	transition: background .1s
	}

	.bq-check-label:hover {
	background: var(--color-surface-alt)
	}

	/* ── Wizard step indicator ─────────────────────────────────── */
	.bq-steps {
	display: flex;
	align-items: center;
	margin-bottom: 28px
	}

	.bq-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px
	}

	.bq-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .85rem;
	background: var(--color-surface-alt);
	border: 2px solid var(--color-border);
	color: var(--color-text-muted);
	transition: all .2s
	}

	.bq-step-label {
	font-size: .75rem;
	color: var(--color-text-muted);
	font-weight: 600;
	white-space: nowrap
	}

	.bq-step.active .bq-step-num {
	background: color-mix(in srgb, var(--color-accent) 15%, transparent);
	border-color: var(--color-accent);
	color: var(--color-accent)
	}

	.bq-step.active .bq-step-label {
	color: var(--color-accent)
	}

	.bq-step.done .bq-step-num {
	background: color-mix(in srgb, #10b981 15%, transparent);
	border-color: #10b981;
	color: #10b981
	}

	.bq-step.done .bq-step-label {
	color: #10b981
	}

	.bq-step-line {
	flex: 1;
	height: 2px;
	background: var(--color-border);
	margin: 0 6px;
	margin-bottom: 20px;
	transition: background .2s
	}

	/* ── Wizard step panels ────────────────────────────────────── */
	.bq-wizard-step {
	display: none
	}

	.bq-wizard-step.active {
	display: block
	}

	/* ── Wizard toolbar (All/None/search/count) ────────────────── */
	.bq-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
	}

	.bq-toolbar .bq-search-input {
	flex: 1;
	min-width: 120px;
	max-width: 220px;
	height: 31px;
	padding: .25rem .5rem;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: .25rem
	}

	.bq-sel-count {
	font-size: .8rem;
	color: var(--color-text-muted);
	margin-left: auto
	}

	/* ── Wizard step: empty / skipped ──────────────────────────── */
	.bq-step-empty .bq-step-num {
	opacity: .3
	}

	.bq-step-empty .bq-step-label {
	opacity: .3
	}

	.bq-step-line-empty {
	opacity: .25
	}

	/* ── Wizard nav row ────────────────────────────────────────── */
	.bq-nav {
	display: flex;
	gap: 10px;
	margin-top: 20px
	}

	/* ── Confirm summary cards ─────────────────────────────────── */
	.bq-confirm-card {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 10px
	}

	[data-bs-theme="dark"] .bq-confirm-card {
	background: color-mix(in srgb, var(--color-background) 30%, transparent)
	}

	.bq-confirm-card .bq-confirm-title {
	font-weight: 700;
	font-size: .9rem;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px
	}

	.bq-confirm-card .bq-confirm-count {
	font-size: .85rem;
	color: var(--color-text-muted)
	}

	/* ── Category tab buttons (kept for reference) ─────────────── */
	.bq-cat-tab {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	border-radius: 10px;
	padding: .4rem .9rem;
	font-size: .88rem;
	transition: all .15s
	}

	.bq-cat-tab.active {
	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
	border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
	color: var(--color-accent);
	font-weight: 700
	}

	/* ── Form inputs ──────────────────────────────────────────── */
	.form-label {
	font-size: .95rem;
	color: var(--color-text)
	}

	.form-control,
	.form-select {
	font-size: .95rem;
	background: var(--color-surface-alt) !important;
	border: 1px solid var(--color-border) !important;
	color: var(--color-text) !important
	}

	[data-bs-theme="dark"] .form-control,
	[data-bs-theme="dark"] .form-select {
	background: color-mix(in srgb, var(--color-text) 4%, transparent) !important;
	border-color: color-mix(in srgb, var(--color-text) 12%, transparent) !important
	}

	.form-control:focus,
	.form-select:focus {
	border-color: color-mix(in srgb, var(--color-accent) 35%, transparent) !important;
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-accent) 12%, transparent) !important
	}

	.form-control::placeholder {
	color: var(--color-text-muted) !important
	}

	/* ── Form check ────────────────────────────────────────────── */
	.form-check-input {
	background-color: var(--color-surface-alt);
	border-color: var(--color-border)
	}

	[data-bs-theme="dark"] .form-check-input {
	background-color: color-mix(in srgb, var(--color-text) 6%, transparent);
	border-color: color-mix(in srgb, var(--color-text) 15%, transparent)
	}

	.form-check-input:checked {
	background-color: var(--color-accent);
	border-color: var(--color-accent)
	}

	.form-check-label {
	color: var(--color-text)
	}

	/* ── Submit button ─────────────────────────────────────────── */
	.btn-brand {
	border-radius: 14px;
	font-weight: 900;
	padding: .95rem 1rem;
	width: 100%;
	font-size: 1.05rem;
	background: var(--color-primary);
	color: #fff;
	border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary) 18%, transparent);
	transition: all .3s
	}

	.btn-brand:hover {
	transform: translateY(-1px);
	background: var(--color-primary-hover);
	color: #fff
	}

	/* ── Alerts ────────────────────────────────────────────────── */
	.alert {
	font-size: .95rem
	}

	.alert-info {
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
	color: var(--color-accent)
	}

	/* ── Text helpers ──────────────────────────────────────────── */
	.text-muted {
	color: var(--color-text-muted) !important
	}

	.turnstile-container {
	text-align: center;
	margin-bottom: 10pt;
	}

	h4,
	h3 {
	color: var(--color-text)
	}

	/* ── Responsive ────────────────────────────────────────────── */
	@media (max-width: 768px) {
	.manage-header {
	padding: 20px
	}

	.manage-body {
	padding: 20px
	}

	.manage-shell {
	border-radius: 14px
	}
	}