@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap');

:root {
	--bg: #0f1419;
	--fg: #eef2f6;
	--muted: #8b98a5;
	--line: #26303d;
	--accent: #47a3ff;
	--danger: #f87171;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	background: var(--bg);
	color: var(--fg);
	min-height: 100vh;
}

.hidden { display: none !important; }

#view-login.panel {
	max-width: 400px;
	margin: 4rem auto;
	padding: 2rem;
	background: #161d26;
	border: 1px solid var(--line);
	border-radius: 12px;
}
#view-login h1 { margin-top: 0; }
#form-login label { display: block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--muted); }
#form-login input {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: #0f1419;
	color: var(--fg);
}
#form-login button {
	margin-top: 0.5rem;
	padding: 0.65rem 1rem;
	border: none;
	border-radius: 8px;
	background: var(--accent);
	color: #0a0e12;
	font-weight: 600;
	cursor: pointer;
}

.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--line);
}
.bar h1 { margin: 0; font-size: 1.25rem; }
#btn-logout {
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0.45rem 0.85rem;
	cursor: pointer;
}

.grid {
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	max-width: 1200px;
}
@media (max-width: 900px) {
	.grid { grid-template-columns: 1fr; }
}

.card {
	background: #161d26;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1.25rem;
}
.card.wide { grid-column: 1 / -1; }
.card h2 { margin-top: 0; font-size: 1rem; color: var(--muted); font-weight: 600; }

#form-create label { display: block; margin-bottom: 0.85rem; font-size: 0.85rem; color: var(--muted); }
#form-create input {
	width: 100%;
	margin-top: 0.3rem;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: #0f1419;
	color: var(--fg);
}
#form-create button {
	margin-top: 0.25rem;
	padding: 0.55rem 1rem;
	border-radius: 8px;
	border: none;
	background: var(--accent);
	font-weight: 600;
	cursor: pointer;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
button.small-danger {
	background: transparent;
	color: var(--danger);
	border: 1px solid rgba(248, 113, 113, 0.35);
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	font-size: 0.8rem;
}

.err { color: var(--danger); min-height: 1.2em; }
.msg { color: #86efac; min-height: 1.2em; font-size: 0.9rem; }