* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: Inter, Segoe UI, Arial, sans-serif;
	background: #090f1d;
	color: #e6eef8;
}


.layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar {
	background: #060c18;
	border-right: 1px solid #1f2a44;
	padding: 18px 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.brand-wrap { margin: 2px 8px 8px; }
.brand { font-weight: 800; color: #facc15; font-size: 18px; }
.brand-sub { color: #91a4c4; font-size: 12px; margin-top: 2px; }
.nav-group { display: flex; flex-direction: column; gap: 6px; }
.nav-group-title { color: #91a4c4; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0 10px 4px; }
.nav-link { color: #d3def0; text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 600; border: 1px solid transparent; }
.nav-link:hover, .nav-link.active { background: #111a34; color: #ffffff; border-color: #22345f; }
.nav-group-last { margin-top: auto; }

.main-area { display: flex; flex-direction: column; }
.topbar {
	border-bottom: 1px solid #1f2a44;
	padding: 14px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	background: #0a1227;
	position: sticky;
	top: 0;
	z-index: 10;
}
.topbar-title h1 { margin: 0; font-size: 20px; }
.topbar-title p { margin: 2px 0 0; color: #a7b8d4; font-size: 13px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.container { padding: 20px; max-width: 1400px; width: 100%; margin: 0 auto; }

h1 { margin: 0 0 6px; }
h2 { margin: 0 0 10px; font-size: 18px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-bottom: 16px; }
.card { background: #0c162d; border: 1px solid #1f2a44; padding: 16px; border-radius: 14px; margin-bottom: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.20); }
.hero { background: linear-gradient(135deg, #0e1b39 0%, #0c162d 70%); }
.muted { color: #b6c3d9; }
.error-text { color: #fca5a5; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid #1f2a44; text-align: left; font-size: 14px; }

.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.metric-row { display: flex; flex-wrap: wrap; gap: 10px; }
.metric-chip { background: #0b1020; border: 1px solid #1f2a44; border-radius: 8px; padding: 8px 10px; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.field-label { display: flex; flex-direction: column; gap: 6px; }
.field-label input, .field-label textarea, .field-label select, #books-files {
	background: #0b1020;
	color: #e6eef8;
	border: 1px solid #2a3758;
	border-radius: 8px;
	padding: 9px;
}

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-top: 4px; }
.check-grid label { display: flex; align-items: center; gap: 6px; }

.row-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.btn {
	background: #1a2544;
	color: #e6eef8;
	border: 1px solid #2a3758;
	border-radius: 10px;
	padding: 8px 12px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: #facc15; color: #0c1122; border-color: #facc15; }
.btn-danger { background: #8b1c2f; border-color: #8b1c2f; }
.btn-outline { background: transparent; }
.btn-block { width: 100%; }

.status-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-ok { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.status-bad { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

.log-box {
	white-space: pre-wrap;
	background: #0b1020;
	border: 1px solid #223253;
	border-radius: 8px;
	padding: 10px;
	max-height: 280px;
	overflow: auto;
	font-size: 12px;
}

.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
	width: min(420px, 94vw);
	background: #0d1731;
	border: 1px solid #1f2a44;
	border-radius: 14px;
	padding: 20px;
}

@media (max-width: 980px) {
	.layout { grid-template-columns: 1fr; }
	.sidebar { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #1f2a44; height: auto; position: static; }
	.brand-wrap, .nav-group-title { display: none; }
	.nav-group { flex-direction: row; }
	.nav-group-last { margin-top: 0; }
	.topbar { position: static; }
}