* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #0f172a; background: #f8fafc; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.site-header { background: #ffffff; border-bottom: 1px solid #e2e8f0; }
.header-flex { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { font-weight: 700; color: #111827; text-decoration: none; font-size: 20px; }
.nav a { margin-left: 16px; text-decoration: none; color: #334155; }
.nav a.btn { background: #0ea5e9; color: #fff; padding: 8px 14px; border-radius: 6px; }

.hero { padding: 60px 0; display: grid; grid-template-columns: 1fr; gap: 24px; }
.hero h1 { font-size: 36px; margin: 0 0 12px; }
.hero p { font-size: 18px; color: #475569; }
.hero .cta { margin-top: 16px; }
.btn-primary { background: #0ea5e9; color: #fff; padding: 12px 18px; border-radius: 8px; display: inline-block; text-decoration: none; }

.features { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.card h3 { margin-top: 0; }

.auth { max-width: 420px; margin: 40px auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; }
.auth h2 { margin-top: 0; }
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 6px; color: #334155; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px; }
.actions { display: flex; gap: 12px; align-items: center; }
.error { color: #b91c1c; margin-bottom: 10px; }
.success { color: #065f46; margin-bottom: 10px; }

.dashboard { padding: 20px 0; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.gallery img { display: block; }
.dropzone { border: 2px dashed #94a3b8; padding: 16px; border-radius: 10px; text-align: center; background: #f8fafc; color: #475569; }
.dropzone.dragover { background: #e0f2fe; border-color: #0ea5e9; }
[data-bs-theme="dark"] .dropzone { background: #0f172a; color: #cbd5e1; border-color: #334155; }
[data-bs-theme="dark"] .dropzone.dragover { background: #0b3b53; border-color: #38bdf8; }

/* Skeleton loading */
.skeleton { position: relative; overflow: hidden; background: #e2e8f0; }
[data-bs-theme="dark"] .skeleton { background: #334155; }
.skeleton:after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Global form fields - smooth borders and consistent focus */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-control,
.form-select {
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 12px 14px;
	min-height: 44px;
	background: #ffffff;
	color: #0f172a;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
	border-color: #0ea5e9;
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Dark mode adjustments */
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="time"],
.dark textarea,
.dark select,
.dark .form-control,
.dark .form-select {
	background: #0f172a;
	color: #e2e8f0;
	border-color: #334155;
}

.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="date"]:focus,
.dark input[type="time"]:focus,
.dark textarea:focus,
.dark select:focus,
.dark .form-control:focus,
.dark .form-select:focus {
	border-color: #38bdf8;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* Update dropzone dark mode to Tailwind dark class */
.dark .dropzone { background: #0f172a; color: #cbd5e1; border-color: #334155; }
.dark .dropzone.dragover { background: #0b3b53; border-color: #38bdf8; }

/* Progress bar visual */
.upload-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(14, 165, 233, 0.2);
	z-index: 9999;
	display: none;
}

.upload-progress.active {
	display: block;
}

.upload-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #0ea5e9, #38bdf8);
	width: 0;
	transition: width 0.2s ease;
	box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Error messages inline */
.upload-error {
	display: none;
	margin-top: 8px;
	padding: 8px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #b91c1c;
	font-size: 13px;
}

.dark .upload-error {
	background: #450a0a;
	border-color: #7f1d1d;
	color: #fca5a5;
}

.upload-error.show {
	display: block;
}

/* Success message inline */
.upload-success {
	display: none;
	margin-top: 8px;
	padding: 8px 12px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	color: #065f46;
	font-size: 13px;
}

.dark .upload-success {
	background: #064e3b;
	border-color: #065f46;
	color: #6ee7b7;
}

.upload-success.show {
	display: block;
}

/* Autosave indicator enhancement */
.autosave-indicator {
	position: fixed;
	top: 80px;
	right: 20px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	font-size: 13px;
	color: #475569;
	z-index: 1000;
	display: none;
}

.dark .autosave-indicator {
	background: #1e293b;
	border-color: #334155;
	color: #cbd5e1;
}

.autosave-indicator.saving {
	border-color: #0ea5e9;
	color: #0ea5e9;
}

.autosave-indicator.saved {
	border-color: #10b981;
	color: #10b981;
}

@media (min-width: 800px) {
	.hero { grid-template-columns: 1.2fr 1fr; align-items: center; }
	.features { grid-template-columns: repeat(3, 1fr); }
}