@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--bg-main: #0d0f14;
	--bg-panel: #121620;
	--bg-card: #171c28;
	--bg-card-soft: #1d2332;
	--border: #2a3246;
	--text: #e7ebf3;
	--muted: #9aa6bf;
	--primary: #22d3ee;
	--primary-2: #3b82f6;
	--purple: #8b5cf6;
	--danger: #ef4444;
	--success: #10b981;
	--warning: #f59e0b;
}

* {
	box-sizing: border-box;
}

body.dark-ui {
	margin: 0;
	min-height: 100vh;
	font-family: 'Inter', sans-serif;
	color: var(--text);
	background: radial-gradient(circle at 10% 10%, #25325e 0%, #1a1e33 25%, var(--bg-main) 65%);
}

.app-shell {
	display: flex;
	min-height: 100vh;
	padding: 24px;
	gap: 18px;
}

.sidebar {
	width: 250px;
	background: linear-gradient(180deg, #111520 0%, #0f131d 100%);
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 22px 14px;
	display: flex;
	flex-direction: column;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	letter-spacing: 0.5px;
	margin-bottom: 24px;
	padding: 0 10px;
}

.brand-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(45deg, var(--primary), var(--primary-2));
	box-shadow: 0 0 16px var(--primary);
}

.side-nav {
	display: grid;
	gap: 6px;
}

.side-nav a {
	color: #d6deee;
	text-decoration: none;
	padding: 11px 12px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
}

.side-nav a:hover {
	background: #1c2435;
	border-color: var(--border);
}

.side-nav a.active {
	background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.08));
	border-color: #2e4d69;
	color: #dff8ff;
}

.side-bottom {
	margin-top: auto;
	padding: 10px;
	color: var(--muted);
	font-size: 0.84rem;
}

.main-panel {
	flex: 1;
	background: #0d111a;
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 22px;
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.topbar h1 {
	font-size: 1.2rem;
	margin: 0;
	font-weight: 700;
}

.badge-pro {
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	color: #fff;
	border-radius: 14px;
	padding: 8px 16px;
	font-weight: 700;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.stat-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 14px;
}

.stat-title {
	color: var(--muted);
	font-size: 0.78rem;
	margin-bottom: 6px;
}

.stat-value {
	font-weight: 700;
	font-size: 1.2rem;
}

.panel-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 14px;
}

.card h3 {
	margin: 0 0 12px;
	font-size: 0.95rem;
}

.task-list {
	display: grid;
	gap: 10px;
}

.task-item {
	display: flex;
	justify-content: space-between;
	color: #d2dbed;
	font-size: 0.9rem;
}

.quick-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.quick-btn {
	background: var(--bg-card-soft);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 12px;
	color: #dbe6fb;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.quick-btn:hover {
	border-color: #36517a;
	color: #fff;
}

.charts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.bar-wrap {
	height: 180px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 6px 4px;
}

.bar {
	flex: 1;
	border-radius: 8px 8px 2px 2px;
	background: linear-gradient(180deg, var(--primary), var(--primary-2));
	min-height: 12px;
}

.bar.purple {
	background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

.bar.slate {
	background: linear-gradient(180deg, #94a3b8, #64748b);
}

.chart-caption {
	margin-top: 10px;
	color: var(--muted);
	font-size: 0.84rem;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
}

.data-table th,
.data-table td {
	text-align: left;
	border-bottom: 1px solid #253047;
	padding: 10px 8px;
	font-size: 0.88rem;
}

.data-table th {
	color: var(--muted);
	font-weight: 600;
}

.pill {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	font-size: 0.72rem;
	padding: 4px 9px;
	font-weight: 700;
}

.pill.ok { background: rgba(16,185,129,0.2); color: #7ef7ca; }
.pill.warn { background: rgba(245,158,11,0.2); color: #ffd086; }
.pill.bad { background: rgba(239,68,68,0.2); color: #ff9d9d; }

.alert-row {
	border: 1px solid #5a2323;
	background: rgba(90, 35, 35, 0.35);
	color: #ffb3b3;
	border-radius: 12px;
	padding: 10px 12px;
	margin-top: 10px;
	font-size: 0.9rem;
	font-weight: 600;
}

.limit-form {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.limit-form input {
	flex: 1;
	min-width: 120px;
	background: #0f1420;
	border: 1px solid #2f3a53;
	border-radius: 10px;
	color: #e8eefb;
	padding: 10px;
}

.btn {
	border: none;
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 700;
	cursor: pointer;
}

.btn-primary {
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	color: #05131f;
}

.btn-ghost {
	background: #1c2434;
	color: #d9e6ff;
	border: 1px solid #2f3d5a;
}

.table-actions {
	display: flex;
	gap: 8px;
}

.inline-form {
	display: inline;
}

@media (max-width: 1100px) {
	.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.panel-grid, .charts-grid { grid-template-columns: 1fr; }
	.quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.app-shell { flex-direction: column; padding: 12px; }
	.sidebar { width: 100%; }
}

/* ---------- Auth pages ---------- */
body.auth-body {
	margin: 0;
	min-height: 100vh;
	font-family: 'Inter', sans-serif;
	background: radial-gradient(circle at 10% 10%, #25325e 0%, #1a1e33 25%, var(--bg-main) 65%);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.auth-wrap {
	width: 100%;
	max-width: 1040px;
}

.auth-title {
	text-align: center;
	margin: 0 0 18px;
	color: #f1f5ff;
	font-size: 2rem;
	font-weight: 700;
}

.auth-card {
	background: #f4f7ff;
	border-radius: 10px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	box-shadow: 0 22px 50px rgba(4, 10, 35, 0.35);
}

.auth-visual {
	background: radial-gradient(circle at 40% 20%, #b5a9d8 0%, #a193cb 100%);
	min-height: 460px;
	display: grid;
	place-items: center;
	padding: 24px;
}

.auth-visual-art {
	width: 86%;
	aspect-ratio: 1/1;
	border-radius: 999px;
	background: rgba(255,255,255,0.22);
	border: 1px solid rgba(255,255,255,0.35);
	display: grid;
	place-items: center;
	color: #fff;
	text-align: center;
	padding: 20px;
	font-weight: 700;
}

.auth-panel {
	padding: 32px 34px;
	color: #1f2937;
}

.auth-panel h2 {
	margin: 0 0 18px;
	text-align: center;
	font-size: 1.7rem;
}

.auth-sub {
	text-align: center;
	margin: 0 0 22px;
	color: #64748b;
	font-size: 0.94rem;
}

.auth-form label {
	display: block;
	font-size: 0.88rem;
	color: #6b7280;
	margin: 0 0 7px;
	font-weight: 600;
}

.auth-form input {
	width: 100%;
	border-radius: 999px;
	border: 1px solid #d6dbe8;
	padding: 12px 15px;
	margin-bottom: 14px;
	font-size: 0.95rem;
}

.auth-form input:focus {
	outline: none;
	border-color: #5d7ae1;
	box-shadow: 0 0 0 3px rgba(93, 122, 225, 0.18);
}

.auth-btn {
	width: 100%;
	border: none;
	border-radius: 999px;
	background: linear-gradient(90deg, #5d7ae1, #4870de);
	color: #fff;
	font-weight: 700;
	padding: 12px;
	cursor: pointer;
	margin-top: 4px;
}

.auth-footer {
	text-align: center;
	margin-top: 18px;
	font-size: 0.88rem;
	color: #64748b;
}

.auth-footer a {
	color: #4c67cc;
	text-decoration: none;
	font-weight: 700;
}

.auth-alert {
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 14px;
	font-size: 0.86rem;
}

.auth-alert.error { background: #fee2e2; color: #b91c1c; }
.auth-alert.success { background: #dcfce7; color: #166534; }

/* ---------- Shared inner form pages ---------- */
.content-wrap {
	max-width: 860px;
	margin: 0 auto;
}

.form-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-row.full {
	grid-column: 1 / -1;
}

.form-row label {
	color: #b8c4df;
	font-size: 0.85rem;
	font-weight: 600;
}

.form-row input,
.form-row select {
	background: #0f1420;
	border: 1px solid #2f3a53;
	border-radius: 10px;
	color: #e8eefb;
	padding: 11px 12px;
}

.form-row input:focus,
.form-row select:focus {
	outline: none;
	border-color: #4b79ff;
	box-shadow: 0 0 0 3px rgba(75, 121, 255, 0.2);
}

.form-actions {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.auth-card { grid-template-columns: 1fr; }
	.auth-visual { min-height: 210px; }
}

@media (max-width: 700px) {
	.form-grid { grid-template-columns: 1fr; }
}