/* ============================================
   app.css — Linktree-style UI
   ============================================ */

/* --- CSS Variables --- */
:root {
	--primary: #0d6efd;
	--primary-hover: #0b5ed7;
	--bg-body: #f8f9fa;
	--bg-white: #ffffff;
	--text-dark: #111827;
	--text-muted: #6b7280;
	--text-light: #9ca3af;
	--border: #e5e7eb;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-full: 9999px;
	--transition: 0.2s ease;
}

/* --- Base --- */
body {
	font-family: 'Inter', sans-serif;
	background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
	color: var(--text-dark);
	min-height: 100vh;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover {
	color: var(--primary-hover);
}

/* ============================================
   PUBLIC — Linktree Layout
   ============================================ */
.lt-container {
	min-height: 100dvh;
	max-width: 500px;
	margin: 0 auto;
	padding: 1rem 1rem 5rem;
}

.lt-cover-full {
	max-width: 500px;
	margin: 0 auto;
}

/* Site cover banner (homepage hero) */
.lt-cover {
	max-width: 500px;
	margin: 0 auto;
}
.lt-cover img {
	width: 100%;
	border-radius:  0 0 1rem 1rem;
	display: block;
}

/* Product gallery slider (detail page) */
.lt-cover-full .swiper-main {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #e5e7eb;
	overflow: hidden;
}
.lt-cover-full .swiper-wrapper {
	width: 100%;
	height: 100%;
}
.lt-cover-full .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e5e7eb;
	width: 100%;
	height: 100%;
}
.lt-cover-full .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lt-cover-full .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid rgba(17, 24, 39, 0.4);
	opacity: 1;
}
.lt-cover-full .swiper-pagination-bullet-active {
	background: var(--primary);
	border-color: var(--primary);
}
.lt-cover-full .swiper-button-next,
.lt-cover-full .swiper-button-prev {
	color: #fff;
	width: 38px;
	height: 38px;
	background: rgba(17, 24, 39, 0.5);
	border-radius: 50%;
	font-size: 1rem;
}
.lt-cover-full .swiper-button-next::after,
.lt-cover-full .swiper-button-prev::after {
	font-size: 1rem;
	font-weight: 700;
}

/* Reusable page nav — back bar (detail, checkout, etc.) */
.lt-navbar {
	max-width: 500px;
	margin: 0 auto;
	background: var(--bg-white);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.65rem 1rem;
}

.lt-nav-back {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition);
	font-size: 1.15rem;
}

.lt-nav-back:hover {
	background: #f3f4f6;
}

.lt-nav-title {
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-dark);
}

/* Avatar */
.lt-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--bg-white);
	box-shadow: var(--shadow-md);
}

/* Name & Bio */
.lt-name {
	font-size: 1.5rem;
	color: var(--text-dark);
	margin-bottom: 0.25rem;
}

.lt-bio {
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 0;
}

/* Legal pages (Terms & Privacy) */
.lt-legal h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text-dark);
	margin: 1.75rem 0 0.5rem;
}

.lt-legal p,
.lt-legal li {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.lt-legal ul {
	padding-left: 1.25rem;
	margin-bottom: 1rem;
}

.lt-legal strong {
	color: var(--text-dark);
}

/* Home footer legal links */
.lt-legal-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e5e7eb;
	font-size: 0.8rem;
}

.lt-legal-links a {
	color: var(--text-muted);
	text-decoration: none;
}

.lt-legal-links a:hover {
	color: var(--text-dark);
	text-decoration: underline;
}

/* Home copyright */
.lt-copyright {
	text-align: center;
	font-size: 0.75rem;
	color: var(--text-muted);
	margin: 1.25rem 0 0;
}

/* Social Icons */
.lt-socials {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

.lt-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bg-white);
	color: var(--text-dark);
	box-shadow: var(--shadow-sm);
	font-size: 1.2rem;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.lt-socials a:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	background: var(--primary);
	color: #fff;
}
.lt-socials .lt-social-icon {
	width: 1.2rem;
	height: 1.2rem;
	display: block;
}

/* Section Title */
.lt-section-title { 
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	color: var(--text-dark);
	margin-bottom: 1rem;
}

/* Product Card — stacked vertically */
.lt-card {
	display: block;
	background: var(--bg-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-bottom: 0.875rem;
	transition: transform var(--transition), box-shadow var(--transition);
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--border);
}
.lt-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	color: inherit;
	text-decoration: none;
}

.lt-card-horizontal {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.875rem;
}

.lt-card-img {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	flex-shrink: 0;
	background: #f3f4f6;
}

.lt-card-horizontal .lt-card-info {
	flex: 1;
	min-width: 0;
}

.lt-card-horizontal .lt-card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 0.15rem;
	line-height: 1.35;
}

.lt-card-horizontal .lt-card-price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--primary);
}

/* Original (pre-discount) price — shown struck-through next to the promo price */
.lt-price-old {
	text-decoration: line-through;
	color: var(--text-muted);
	font-weight: 500;
}
.lt-card-horizontal .lt-price-old {
	font-size: 0.75rem;
	font-weight: 500;
}

/* CTA Link (full-width button style) */
.lt-cta {
	display: block;
	background: var(--bg-white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 0.875rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--text-dark);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
	margin-bottom: 0.875rem;
}
.lt-cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	background: var(--primary);
	color: #fff;
	text-decoration: none;
}

/* Primary Button (filled) */
.lt-btn-primary {
	display: block;
	width: 100%;
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	padding: 0.875rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.lt-btn-primary:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: #fff;
	text-decoration: none;
}
.lt-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Outline Button */
.lt-btn-outline {
	display: block;
	width: 100%;
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--primary);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.lt-btn-outline:hover {
	background: var(--primary);
	color: #fff;
	text-decoration: none;
}

/* Footer */
.lt-footer {
	text-align: center;
	font-size: 0.8rem;
	color: var(--text-light);
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

/* Empty State */
.lt-empty {
	text-align: center;
	color: var(--text-muted);
	padding: 3rem 1rem;
}

/* 404 — Page Not Found (centered both axes) */
.lt-404-page {
	min-height: 100dvh;
	padding: 2rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.lt-404-icon {
	font-size: 3rem;
	line-height: 1;
	color: var(--primary);
	margin-bottom: 0.75rem;
	display: block;
}

.lt-404-code {
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--text-light);
	margin-bottom: 0.5rem;
}

/* ============================================
   PUBLIC — Pages
   ============================================ */

/* Checkout */
.lt-checkout-summary {
	background: var(--bg-white);
	border-radius: var(--radius-md);
	padding: 1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--border);
}

.lt-form-group {
	margin-bottom: 1rem;
}
.lt-form-group label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 0.35rem;
}
.lt-form-group input,
.lt-form-group textarea,
.lt-form-group select {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	font-family: 'Inter', sans-serif;
	color: var(--text-dark);
	background: var(--bg-white);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.lt-form-group input:focus,
.lt-form-group textarea:focus,
.lt-form-group select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

.lt-form-note {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
}

/* Payment Finish */
.lt-status-icon {
	font-size: 4rem;
	line-height: 1;
	margin-bottom: 1rem;
}

.lt-alert {
	border-radius: var(--radius-md);
	padding: 1rem;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}
.lt-alert-success {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
.lt-alert-danger {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}
.lt-alert-info {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}
.lt-alert-warning {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fde68a;
}

/* Detail Page — Fixed Bottom Bar */
.lt-detail-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 500px;
	background: var(--bg-white);
	padding: 0.75rem 1rem;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
	z-index: 1040;
}
.lt-detail-bottom-bar .lt-btn-primary {
	margin: 0;
}

/* Rich-text product description: wrap naturally per word */
.lt-description {
	overflow-wrap: break-word;
}
.lt-description pre {
	white-space: pre-wrap;
	overflow-wrap: break-word;
}
.lt-description img,
.lt-description video {
	max-width: 100%;
	height: auto;
}

/* Product video: YouTube embed locked to 16:9 so it fills the detail column */
.lt-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #000;
}
.lt-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Admin rich-text editor: wrap long words only when needed */
.admin-form-group .ql-editor {
	overflow-wrap: break-word;
}

/* ============================================
   ADMIN — Sidebar
   ============================================ */
.sidebar {
	min-height: 100vh;
	background: #111827;
	padding: 1.5rem 0.75rem;
}
.sidebar-brand {
	font-size: 1.1rem;
	font-weight: 800;
	color: #fff;
	padding: 0 0.5rem;
	margin-bottom: 1.75rem;
	display: block;
}
.sidebar a {
	color: #9ca3af;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 500;
	transition: background var(--transition), color var(--transition);
	margin-bottom: 2px;
}
.sidebar a i {
	font-size: 1.1rem;
	width: 1.25rem;
	text-align: center;
}
.sidebar a:hover {
	background: #1f2937;
	color: #fff;
}
.sidebar a.active {
	background: #1f2937;
	color: #fff;
	font-weight: 600;
}
.sidebar-badge {
	margin-left: auto;
	background: #dc2626;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	min-width: 1.3rem;
	height: 1.3rem;
	line-height: 1.3rem;
	padding: 0 0.35rem;
	border-radius: var(--radius-full);
	text-align: center;
}
.sidebar hr {
	border-color: #374151;
	margin: 0.75rem 0.5rem;
}

/* Mobile admin topbar (pengganti tombol hamburger mengambang) */
.admin-topbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: sticky;
	top: 0;
	z-index: 1030;
	height: 56px;
	padding: 0 0.75rem;
	background: var(--bg-white);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
}
.admin-topbar-title {
	flex: 1;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.admin-topbar-spacer {
	flex: 0 0 38px;
	width: 38px;
}
.admin-topbar-btn {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-dark);
	font-size: 1.35rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition);
}
.admin-topbar-btn:hover,
.admin-topbar-btn:focus-visible {
	background: var(--bg-body);
}

/* ============================================
   ADMIN — Stat Cards
   ============================================ */
.stat-card {
	background: var(--bg-white);
	border-radius: var(--radius-md);
	padding: 1.25rem;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
	transition: box-shadow var(--transition);
	display: flex;
	align-items: center;
	gap: 1rem;
}
.stat-card:hover {
	box-shadow: var(--shadow-md);
}
.stat-card-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}
.stat-card-info {
	min-width: 0;
}
.stat-card-label {
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 500;
	margin-bottom: 0.15rem;
}
.stat-card-value {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--text-dark);
	line-height: 1.2;
}

.stat-icon-blue { background: #dbeafe; color: #2563eb; }
.stat-icon-green { background: #d1fae5; color: #059669; }
.stat-icon-purple { background: #ede9fe; color: #7c3aed; }
.stat-icon-amber { background: #fef3c7; color: #d97706; }

/* ============================================
   ADMIN — Tables
   ============================================ */
.table-modern {
	background: var(--bg-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	border: 1px solid var(--border);
}
.table-modern .table {
	margin-bottom: 0;
}
.table-modern.table-responsive {
	overflow-x: auto;
	overflow-y: hidden;
}
.email-status-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-top: 0.25rem;
}
.table-modern .table thead th {
	background: #f9fafb;
	border-bottom: 2px solid var(--border);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.75rem;
	white-space: nowrap;
}
.table-modern .table td {
	padding: 0.75rem;
	vertical-align: middle;
	font-size: 0.875rem;
	border-color: var(--border);
}
.table-modern .table tbody tr {
	transition: background var(--transition);
}
.table-modern .table tbody tr:hover {
	background: #f9fafb;
}

/* Product drag & drop reorder */
.product-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.product-list-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--bg-white);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 0.75rem 1rem;
	transition: background var(--transition);
}
.product-list-item:hover {
	background: #f9fafb;
}
.product-list .drag-handle {
	cursor: grab;
	color: var(--text-muted);
	opacity: 0.55;
	font-size: 1.1rem;
	transition: color var(--transition), opacity var(--transition);
}
.product-list .drag-handle:active {
	cursor: grabbing;
}
.product-list .drag-handle:hover {
	opacity: 1;
	color: var(--text-strong, inherit);
}
.product-list-main {
	flex: 1;
	min-width: 0;
}
.product-list-title {
	font-weight: 600;
	color: var(--text-strong, inherit);
	text-decoration: none;
}
.product-list-title:hover {
	text-decoration: underline;
}
.product-list-item .product-list-menu {
	position: relative;
}
.product-menu-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: 1050;
	min-width: 150px;
	background: var(--bg-white);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	display: none;
}
.product-menu-dropdown.show {
	display: block;
}
.product-menu-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 0.9rem;
	border: none;
	background: transparent;
	font-size: 0.875rem;
	color: var(--text-strong, inherit);
	cursor: pointer;
	text-align: left;
}
.product-menu-item:hover {
	background: #f3f4f6;
}
.product-menu-danger {
	color: #dc2626;
}
.product-menu-danger:hover {
	background: #fee2e2;
}
.product-menu-divider {
	height: 1px;
	background: var(--border);
	margin: 0.25rem 0.9rem;
}
.product-toggle {
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
}
.product-toggle-label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.product-toggle-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.product-toggle-input:disabled + .product-toggle-switch {
	opacity: 0.5;
	cursor: not-allowed;
}
.product-toggle-switch {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 22px;
	background: #d1d5db;
	border-radius: var(--radius-full);
	transition: background var(--transition);
	margin-left: auto;
}
.product-toggle-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease;
}
.product-toggle-input:checked + .product-toggle-switch {
	background: #16a34a;
}
.product-toggle-input:checked + .product-toggle-switch::after {
	transform: translateX(16px);
}
.sortable-ghost {
	opacity: 0.4;
	background: #eef2ff !important;
}
.reorder-toast {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 1080;
	padding: 0.75rem 1.1rem;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md, 0 10px 25px rgba(0,0,0,0.15));
	font-size: 0.875rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.reorder-toast.reorder-toast-error {
	background: #dc2626;
	color: #fff;
}
.reorder-toast.reorder-toast-success {
	background: #16a34a;
	color: #fff;
}
.reorder-toast.reorder-toast-info {
	background: #2563eb;
	color: #fff;
}
.reorder-toast.show {
	opacity: 1;
	transform: translateY(0);
}

/* Badges */
.badge-status {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.3em 0.65em;
	border-radius: var(--radius-full);
}

/* ============================================
   ADMIN — Gallery Management
   ============================================ */
.admin-gallery-item {
	position: relative;
	background: var(--bg-white);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
}
.admin-gallery-item.marked {
	outline: 2px solid var(--primary);
	outline-offset: 1px;
	opacity: 0.6;
}
.admin-gallery-item .admin-gallery-img {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	object-fit: cover;
	display: block;
	background: #f3f4f6;
}
.admin-gallery-badge {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	background: var(--primary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.admin-gallery-remove {
	display: block;
	padding: 0.4rem 0.5rem;
	font-size: 0.8rem;
	color: var(--text-muted);
	cursor: pointer;
	user-select: none;
}
.admin-gallery-remove input {
	margin-right: 0.35rem;
}

/* Dropzone — square upload box with centered placeholder + live preview */
.admin-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	border: 2px dashed var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-white);
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--transition), background var(--transition);
}
.admin-dropzone:hover {
	border-color: var(--primary);
	background: #f8faff;
}
.admin-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.dropzone-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	color: var(--text-muted);
	font-size: 0.8rem;
	font-weight: 500;
	pointer-events: none;
}
.dropzone-placeholder i {
	font-size: 1.5rem;
	color: var(--text-light);
}
.admin-dropzone .dropzone-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #f3f4f6;
}
.admin-dropzone .dropzone-remove {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.75);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	cursor: pointer;
	z-index: 2;
	transition: background var(--transition);
}
.admin-dropzone .dropzone-remove:hover {
	background: var(--primary);
}

/* ============================================
   ADMIN — Forms
   ============================================ */
.admin-card {
	background: var(--bg-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
	overflow: hidden;
}
.admin-card-body {
	padding: 1.5rem;
}
.admin-section-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}

.admin-form-group {
	margin-bottom: 1.125rem;
}
.admin-form-group label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 0.35rem;
}
.admin-form-group input[type="text"],
.admin-form-group input[type="email"],
.admin-form-group input[type="password"],
.admin-form-group input[type="url"],
.admin-form-group input[type="number"],
.admin-form-group input[type="file"],
.admin-form-group textarea,
.admin-form-group select {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-family: 'Inter', sans-serif;
	color: var(--text-dark);
	background: var(--bg-white);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
}
.admin-form-group .form-text {
	font-size: 0.78rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
}

/* Buttons */
.btn-modern {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
	text-decoration: none;
}
.btn-modern:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
}
.btn-modern-primary {
	background: var(--primary);
	color: #fff;
}
.btn-modern-primary:hover {
	background: var(--primary-hover);
	color: #fff;
}
.btn-modern-success {
	background: #059669;
	color: #fff;
}
.btn-modern-danger {
	background: #dc3545;
	color: #fff;
}
.btn-modern-outline {
	background: transparent;
	color: var(--text-muted);
	border: 1px solid var(--border);
}
.btn-modern-outline:hover {
	background: #f9fafb;
	color: var(--text-dark);
}
.btn-modern-sm {
	padding: 0.35rem 0.65rem;
	font-size: 0.8rem;
}

/* ============================================
   ADMIN — Login
   ============================================ */
.login-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
	padding: 1rem;
}
.login-card {
	background: var(--bg-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	max-width: 400px;
	padding: 2.5rem 2rem;
}
.login-title {
	font-size: 1.5rem;
	font-weight: 800;
	text-align: center;
	color: var(--text-dark);
	margin-bottom: 1.75rem;
}

/* ============================================
   ADMIN — Alert
   ============================================ */
.admin-alert {
	position: relative;
	padding: 0.75rem 2.5rem 0.75rem 1rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.admin-alert-dismiss {
	position: absolute;
	top: 50%;
	right: 0.4rem;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: inherit;
	opacity: 0.5;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.4rem;
	border-radius: var(--radius-sm);
}
.admin-alert-dismiss:hover {
	opacity: 1;
}
.admin-alert-dismiss:focus {
	outline: none;
}
.admin-alert-success {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}
.admin-alert-danger {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* ============================================
   ADMIN — Page Header
   ============================================ */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.page-header h2 {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--text-dark);
	margin: 0;
}

/* Dashboard card (charts) */
.card-modern {
	background: var(--bg-white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.card-modern-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border);
}
.card-modern-body {
	padding: 1.25rem;
	position: relative;
}
.card-modern-body canvas {
	width: 100% !important;
	height: 260px !important;
}
.analytics-totals {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.75rem;
	padding-bottom: 1rem;
}
.analytics-total {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	color: var(--muted);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	user-select: none;
	text-align: center;
	font-family: inherit;
	line-height: 1.2;
}
.analytics-total strong {
	color: var(--text);
	font-size: 1.5rem;
	font-weight: 700;
}
.analytics-total-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}
.analytics-total.off {
	opacity: 0.45;
}
.analytics-total.off .analytics-total-label {
	text-decoration: line-through;
}
/* Varian statis (tanpa toggle dataset): bukan klik, teksnya boleh dicopy. */
.analytics-total.static {
	cursor: default;
	user-select: text;
}

/* Tiga bar chart di halaman Analitik satu produk: tinggi diurus Chart.js lewat
   options.aspectRatio (sumber kebenaran tunggal di view), bukan 260px tetap yang
   disetel untuk chart stacked di Dashboard. Selector ID supaya mengalahkan
   .card-modern-body canvas. #trafficChart wajib ikut daftar ini — kalau tidak,
   ia ikut terkunci 260px sementara dua chart di atasnya mengikuti aspectRatio,
   jadi tinggi ketiga grafik tidak sama. */
#orderChart,
#revenueChart,
#trafficChart {
	width: 100% !important;
	height: auto !important;
}

/* Donut Top Produk: aturan canvas 260px di atas berlaku untuk semua canvas,
   jadi height di sini harus di-override, kalau tidak tergambar gepeng.
   Dua kartu (pembagian pendapatan & jumlah order) harus digambar sama
   perfect, jadi aturan ini dipakai bersama oleh keduanya.

   PERINGATAN: aspect-ratio di bawah WAJIB sama dengan options.aspectRatio
   di renderDonut() (index.php). Chart.js menggambar di backing store
   berukuran width/aspectRatio, sementara CSS menentukan ukuran elemen yang
   menampilkannya; kalau keduanya beda, hasilnya bukan lingkaran tapi oval.
   Nepel aturan ini tanpa menyesuaikan aspectRatio di view = oval lagi. */
#topProductsChart,
#topOrdersChart {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	max-width: 300px;
	margin: 0 auto;
}
.top-products-legend {
	display: flex;
	flex-direction: column;
	margin-top: 1.25rem;
}
.top-products-legend .legend-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0;
	border-top: 1px solid var(--border);
	font-size: 0.8125rem;
}
.top-products-legend .legend-row:first-child {
	border-top: none;
	padding-top: 0;
}
.top-products-legend .legend-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	flex: 0 0 auto;
}
.top-products-legend .legend-name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--text);
}
.top-products-legend .legend-share {
	color: var(--muted);
	flex: 0 0 auto;
}
.top-products-legend .legend-value {
	color: var(--text);
	font-weight: 600;
	flex: 0 0 auto;
}

/* Daftar Lifetime Sales di bawah row grafik. Barisnya dirakit di JS, jadi
   kelas di sini adalah satu-satunya sumber tampilannya. Sengaja div, bukan
   <table>: dua metrik per produk ditumpuk sebagai teks di dalam satu blok,
   sehingga tidak ada header kolom dan judul panjang bisa dipotong di HP. */
.lifetime-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid var(--border);
}
/* Pemisah terakhir ditangani border-top paginasi, jadi baris terakhir tidak
   perlu garis bawah yang akan langsung bertumpuk dengan garis paginasi. */
.lifetime-item:last-child {
	border-bottom: 0;
}
.lifetime-item:hover {
	background: #f9fafb;
}
.lifetime-thumb {
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: #f9fafb;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: 1rem;
}
.lifetime-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Kolom tengah: judul di atas, jumlah order di bawah. flex + min-width:0 di
   dua tempat ini yang membuat judul bisa terpotong — tanpa min-width:0 flex
   item menolak menyusut ke bawah lebar teksnya. */
.lifetime-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.lifetime-name-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}
.lifetime-product-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	/* --text-dark, bukan --text: stylesheet ini memang punya beberapa
	   deklarasi color: var(--text)/var(--muted) yang tidak ada di :root
	   (hanya --text-dark/--text-muted yang ada), jadi nilainya jadi tidak
	   berlaku. Jangan diulang di sini. */
	color: var(--text-dark);
}
.lifetime-meta {
	font-size: 0.8rem;
	color: var(--text-muted);
}
.lifetime-tag {
	/* Badge duduk di samping judul yang dipotong, jadi tidak boleh ikut menyusut
	   — harus selalu cukup ruang untuk teks "Dihapus". */
	flex: 0 0 auto;
	font-size: 0.65rem;
	font-weight: 600;
}
.lifetime-amount {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
	color: var(--text-dark);
}
.lifetime-detail {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--primary);
	background: var(--bs-gray-100);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	text-decoration: none;
	transition: opacity .15s ease;
}
.lifetime-detail:hover {
	opacity: .7;
}
.lifetime-detail:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
.lifetime-detail:focus-visible .bi {
	margin-left: 0.1em;
}
.lifetime-empty {
	text-align: center;
	color: var(--text-muted);
	padding: 1.75rem 1.25rem;
}
/* Di bawah 400px nilai pendapatan jadi baris penuh di bawah nama produk,
   karena tiga kolom dalam satu baris terlalu sempit untuk dibaca. */
@media (max-width: 400px) {
	.lifetime-item {
		flex-wrap: wrap;
	}
	.lifetime-amount {
		flex: 1 0 100%;
		padding-left: 3.625rem;
	}
}
/* Paginasi di luar badan kartu, jadi butuh padding sendiri. */
.lifetime-pager {
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--border);
}
/* .page-link dipakai di atas <button>, bukan <a>. Bootstrap memberi .page-link
   sebuah border, yang di <a> tidak terlihat karena teksnya decoration:none —
   di button hasilnya kotak bergaris yang tidak cocok dengan tetangganya. */
.lifetime-pager .page-link {
	background: transparent;
	border-color: transparent;
}
.lifetime-pager .page-item.active .page-link,
.lifetime-pager .page-item.disabled .page-link {
	background: #f9fafb;
	border-color: var(--border);
}

/* Paginasi di bawah tabel (daftar Order di halaman Analitik Produk). Nilai dan
   aturannya sama persis dengan .lifetime-pager — pemisahnya di luar badan
   kartu, jadi butuh padding sendiri dan reset border di .page-link. Dipisah
   hanya supaya namanya tidak ikut menunjuk daftar Lifetime Sales. */
.table-pager {
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--border);
}
.table-pager .page-link {
	background: transparent;
	border-color: transparent;
}
.table-pager .page-item.active .page-link,
.table-pager .page-item.disabled .page-link {
	background: #f9fafb;
	border-color: var(--border);
}

/* Tab di kartu Analitik Produk: berpindah antara grafik dan daftar order.
   Hanya variabel Bootstrap yang ditulis ulang, tanpa selector struktural.
   Alasannya: .nav-tabs .nav-link.active di Bootstrap 5.3 memberi warna teks
   dark dan garis bawah abu-abu (keduanya di-bind ke --bs-emphasis-color),
   bukan biru. Tiga variabel di bawah membuat tab aktif biru seperti tombol
   primary di repo ini, dengan background tab aktif disamakan dengan kartu
   supaya tidak ada garis abu-abu di belakang teksnya.
   Border-color ditulis tiga nilai (atas / kiri-kanan / bawah): atas mengikuti
   kartu, bawah menjadi garis bawah biru. Garis abu-abu .nav-tabs tetap jadi
   tempat tab aktif duduk karena margin-bottom -1px dari Bootstrap terpasang
   persis di atas garis itu. */
.analytics-tabs-wrap {
	padding: 0.75rem 1.25rem 0;
}
.analytics-tabs {
	--bs-nav-tabs-link-active-color: var(--primary);
	--bs-nav-tabs-link-active-bg: var(--bg-white);
	--bs-nav-tabs-link-active-border-color: var(--bg-white) var(--border) var(--primary);
}
.analytics-tabs .nav-link {
	color: var(--text-muted);
}
.analytics-tabs .nav-link:hover {
	color: var(--primary);
}
.analytics-tabs-wrap {
	padding: 0.75rem 1.25rem 0;
}
.analytics-tabs {
	--bs-nav-tabs-link-active-color: var(--primary);
	--bs-nav-tabs-link-active-bg: var(--bg-white);
	--bs-nav-tabs-link-active-border-color: var(--bg-white) var(--border) var(--primary);
}
.analytics-tabs .nav-link {
	color: var(--text-muted);
}
.analytics-tabs .nav-link:hover {
	color: var(--primary);
}

/* Filter Pills */
.filter-pills {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}
.filter-pills .nav-link {
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-full);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-muted);
	background: var(--bg-white);
	border: 1px solid var(--border);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}
.filter-pills .nav-link:hover {
	background: #f3f4f6;
	color: var(--text-dark);
}
.filter-pills .nav-link.active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}
.filter-pills .badge {
	font-size: 0.7rem;
	margin-left: 0.25rem;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-gradient {
	background: linear-gradient(135deg, #6366f1, #a855f7);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Mobile (incl. tablet portrait) — sidebar off-canvas */
@media (max-width: 767.98px) {
	/* Public — Linktree */
	.lt-avatar {
		width: 100px;
		height: 100px;
	}
	.lt-name {
		font-size: 1.25rem;
	}
	.lt-socials a {
		width: 40px;
		height: 40px;
		font-size: 1.05rem;
	}

	/* Admin */
	.sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: -260px;
		width: 260px;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		z-index: 1050;
		transition: left 0.3s ease;
	}
	.sidebar.show {
		left: 0;
		display: block !important;
	}
	body.nav-open {
		overflow: hidden;
	}
	.sidebar-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		z-index: 1040;
	}
	.sidebar-overlay.show {
		display: block;
	}

	.stat-card-value {
		font-size: 1.25rem;
	}

	.table-modern {
		border-radius: var(--radius-sm);
		background: transparent;
		border: none;
		box-shadow: none;
		overflow: visible;
	}
	.table-modern .table thead {
		display: none;
	}
	.table-modern .table tbody tr {
		display: block;
		background: var(--bg-white);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-sm);
		border: 1px solid var(--border);
		margin-bottom: 0.75rem;
		padding: 0.625rem 0.75rem;
	}
	.table-modern .table tbody tr:hover {
		background: var(--bg-white);
	}
	.table-modern .table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 0.3rem 0;
		border: none;
		font-size: 0.85rem;
		gap: 0.5rem;
	}
	.table-modern .table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--text-muted);
		font-size: 0.78rem;
		white-space: nowrap;
		flex-shrink: 0;
	}
	.table-modern .table td[data-label] {
		text-align: right;
	}
	.table-modern .table td.td-actions {
		justify-content: flex-end;
		border-top: 1px solid var(--border);
		padding-top: 0.5rem;
		margin-top: 0.25rem;
	}
	.table-modern .table td.td-actions::before {
		display: none;
	}
	.table-modern .table td.td-empty {
		justify-content: center;
		text-align: center;
		padding: 1rem 0;
	}
	.table-modern .table td.td-empty::before {
		display: none;
	}

	.page-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.page-header .btn-modern {
		width: 100%;
		justify-content: center;
	}
}

/* Tablet */
@media (min-width: 576px) and (max-width: 767.98px) {
	.lt-container {
		padding: 2rem 1rem 1.5rem;
	}
}

/* ===== Checkout: Payment Detail card (berbayar) ===== */
.lt-pay-head {
	font-weight: 700;
	font-size: 1rem;
	color: var(--text-dark);
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}

.lt-pay-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	color: var(--text-muted);
	padding: 0.35rem 0;
}

.lt-pay-total {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text-dark);
	border-top: 1px solid #e5e7eb;
	padding-top: 0.75rem;
	margin-top: 0.25rem;
}

.lt-pay-divider {
	border-top: 1px solid #e5e7eb;
	margin: 0.75rem 0;
}

.lt-voucher-discount {
	color: #16a34a;
	font-weight: 600;
}

.lt-voucher-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--bg-gray, #f3f4f6);
	border: 1px dashed var(--primary);
	color: var(--primary);
	border-radius: var(--radius-md);
	padding: 0.6rem 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	margin: 0.5rem 0 0.25rem;
	transition: background var(--transition);
}

.lt-voucher-btn:hover {
	background: rgba(37, 99, 235, 0.08);
}

.lt-voucher-cancel {
	background: transparent;
	border: none;
	color: #dc2626;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0 0.25rem;
}

.lt-terms {
	font-size: 0.82rem;
	color: var(--text-muted);
}

.lt-terms .form-check-input {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.15em;
	border: 1.5px solid #c7cdd6;
	cursor: pointer;
}

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

.lt-terms a {
	color: var(--primary);
	text-decoration: underline;
}

/* ===== Voucher modal ===== */
.lt-modal {
	border-radius: 1rem;
	border: none;
	overflow: hidden;
}

.lt-modal .modal-header,
.lt-modal .modal-footer {
	border: none;
}

.lt-modal .modal-footer {
	justify-content: space-between;
	align-items: center;
}

.lt-modal .modal-footer .lt-btn-primary {
	flex: 1;
	margin-left: 0.5rem;
}

.lt-btn-secondary {
	display: inline-block;
	background: var(--bg-gray, #f3f4f6);
	color: var(--text-dark);
	border: none;
	border-radius: var(--radius-md);
	padding: 0.6rem 1rem;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}

.lt-btn-secondary:hover {
	background: #e5e7eb;
	color: var(--text-dark);
}