@font-face {
	font-family: Comfortaa;
	src: url('../fonts/comfortaa.ttf');
	font-display: swap;
}
:root {
	--bg: #faf8f3;
	--surface: #fff;
	--text: #302c27;
	--muted: #6c645b;
	--border: #e8e2d7;
	--accent: #a55028;
	--soft: #f7ead8;
}
body.dark {
	--bg: #191c20;
	--surface: #24282c;
	--text: #f0ece5;
	--muted: #c8c1b5;
	--border: #45494b;
	--accent: #efb285;
	--soft: #373028;
}
body,
button,
input,
select,
textarea {
	font-family: Comfortaa, Arial, sans-serif;
	font-size: 13px;
}
body,
.content-wrapper {
	background: var(--bg);
	color: var(--text);
}
h1,
.content-header h1 {
	font-size: 24px;
	line-height: 1.6;
}
h2 {
	font-size: 23px;
}
h3 {
	font-size: 17px;
}
a {
	color: var(--accent);
}
.card,
.main-header,
.main-sidebar,
.main-footer,
.form-control,
.public-nav,
.input-group-text {
	background: var(--surface) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}
.content {
	padding: 0 24px 24px !important;
}
.content-header {
	padding: 24px !important;
}
.brand-link {
	color: var(--accent) !important;
}
.sidebar .nav-link,
.brand-text,
.main-footer,
label,
.table {
	color: var(--text) !important;
}
.sidebar-caption {
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 1px;
	margin: 25px 12px;
}
.sidebar .nav-link:hover {
	background: var(--soft) !important;
}
.btn-primary,
.nav-pills .nav-link.active {
	background: #a55028 !important;
	border-color: #a55028 !important;
	color: #fff !important;
}
.btn-outline-secondary {
	color: var(--text) !important;
	border-color: var(--border) !important;
	background: var(--surface) !important;
}
.btn-outline-secondary:hover {
	background: var(--soft) !important;
}
.btn-outline-danger {
	color: #a92f2f;
}
body.dark .btn-outline-danger {
	color: #ffb0b0;
}
.small,
small,
.lead {
	color: var(--muted);
}
.form-control:focus {
	border-color: #b87535 !important;
	box-shadow: 0 0 0 3px #c5924733;
}
.form-control[readonly] {
	background: var(--soft) !important;
}
.table th,
.table td {
	border-color: var(--border);
	font-size: 12px;
	vertical-align: middle;
}
.alert-success {
	background: #e2f2e8 !important;
	color: #17492f !important;
	border-color: #abd0b7 !important;
}
.alert-danger {
	background: #fbe5e3 !important;
	color: #712b28 !important;
	border-color: #e6b9b4 !important;
}
.alert-warning {
	background: #fff0cf !important;
	color: #5e4119 !important;
	border-color: #e0c489 !important;
}
.alert-info {
	background: #e7eef9 !important;
	color: #2b436b !important;
	border-color: #bfcede !important;
}
.dark .alert-success {
	background: #244536 !important;
	color: #d0f4de !important;
}
.dark .alert-danger {
	background: #52302f !important;
	color: #ffe0dd !important;
}
.dark .alert-warning {
	background: #4b3d25 !important;
	color: #ffedc5 !important;
}
.dark .alert-info {
	background: #2c3c54 !important;
	color: #dae9ff !important;
}
.auth-container {
	max-width: 500px;
	margin: 50px auto;
	padding: 18px;
}
.setup-container {
	max-width: 620px;
}
.profile-card {
	max-width: 650px;
}
.member-actions {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}
.brand-public {
	font-size: 24px;
}
.public-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
}
.public-nav a {
	font-size: 25px;
}
.landing-hero {
	min-height: 500px;
}
.landing-hero h1 {
	font-size: 36px;
	line-height: 1.5;
}
.lead {
	font-size: 14px;
	line-height: 1.9;
}
.eyebrow {
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--accent);
}
.sample-card {
	background: var(--soft);
	border-radius: 18px;
	padding: 35px;
}
.sample-card p {
	font-size: 11px;
}
.visual-bars {
	height: 170px;
	display: flex;
	align-items: end;
	gap: 16px;
	margin: 25px 0;
}
.visual-bars i {
	height: 35%;
	width: 40px;
	background: #d7a175;
	border-radius: 5px;
}
.visual-bars i:nth-child(2) {
	height: 50%;
	background: #e7c77c;
}
.visual-bars i:nth-child(3) {
	height: 45%;
}
.visual-bars i:nth-child(4) {
	height: 70%;
	background: #e7c77c;
}
.visual-bars i:nth-child(5) {
	height: 95%;
}
@media (max-width: 600px) {
	.landing-hero h1 {
		font-size: 27px;
	}
	.auth-container {
		margin: 20px auto;
	}
	.content {
		padding: 0 12px 20px !important;
	}
	.main-header span {
		display: none;
	}
}
@media screen and (max-width: 767.98px) {
	body:not(.sidebar-open) .main-sidebar {
		transform: translateX(-100%) !important;
		margin-left: 0 !important;
	}
	body.sidebar-open .main-sidebar {
		transform: translateX(0) !important;
		margin-left: 0 !important;
	}
	.wrapper > .content-wrapper,
	.wrapper > .main-header,
	.wrapper > .main-footer {
		margin-left: 0 !important;
	}
}