@font-face {
	font-family: "Fira Sans";
	src: local("Fira Sans"), url("/static/fonts/FiraSans-Regular.ttf");
}

:root {
	color-scheme: dark;

	--bg:        #070c16;
	--bg-2:      #0b1220;
	--surface:   #0f1829;
	--surface-2: #162033;
	--surface-3: #1c2840;
	--border:    #1d2d42;
	--border-2:  #253548;

	--text:   #dde8f8;
	--text-2: #7a9ab8;
	--text-3: #3d5568;

	--accent:       #4e8ff7;
	--accent-2:     #f5a558;
	--accent-glow:  rgba(78, 143, 247, 0.13);
	--accent-hover: #6da4ff;

	--green:  #20c87c;
	--red:    #f06868;
	--yellow: #f4ba40;

	--shadow:    0 4px 28px rgba(0, 0, 0, 0.5);
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);

	--radius:    12px;
	--radius-sm: 8px;
	--radius-lg: 18px;

	--btn-bg:     #162033;
	--btn-border: #253548;
	--btn-hover:  rgba(78, 143, 247, 0.1);
}

body[data-theme="light"] {
	color-scheme: light;

	--bg:        #eef2fa;
	--bg-2:      #e6ecf7;
	--surface:   #ffffff;
	--surface-2: #f4f7fd;
	--surface-3: #eaeff8;
	--border:    #d8e2f0;
	--border-2:  #c4d2e8;

	--text:   #0c1627;
	--text-2: #47607c;
	--text-3: #8099b2;

	--accent:       #3574e8;
	--accent-2:     #e0712e;
	--accent-glow:  rgba(53, 116, 232, 0.1);
	--accent-hover: #5289f5;

	--green:  #12a85e;
	--red:    #dc3c3c;
	--yellow: #c98c08;

	--shadow:    0 4px 24px rgba(0, 0, 0, 0.07);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);

	--btn-bg:     #eef2fa;
	--btn-border: #d2ddf0;
	--btn-hover:  rgba(53, 116, 232, 0.07);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: "Fira Sans", system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	display: flex;
	min-height: 100vh;
}

body > div {
	display: flex;
	flex-flow: column;
	flex-grow: 1;
	min-width: 0;
}

/* ── Header ─────────────────────────────── */
#header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(7, 12, 22, 0.88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
	height: 58px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

body[data-theme="light"] #header {
	background: rgba(238, 242, 250, 0.9);
}

#header .logo {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--text);
	text-decoration: none;
	letter-spacing: -0.02em;
}

#header .placeholder { flex-grow: 1; }

#header a {
	color: var(--text-2);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	transition: color 0.15s, background 0.15s;
}

#header a:hover {
	color: var(--text);
	background: var(--surface-2);
}

#header > nav { display: flex; gap: 4px; }

/* Theme toggle */
#theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	height: 32px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-2);
	cursor: pointer;
	font-size: 0.83rem;
	font-weight: 500;
	font-family: inherit;
	transition: all 0.15s;
}

#theme-toggle:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-glow);
}

#theme-toggle i { font-size: 1rem; }

/* ── Content ─────────────────────────────── */
#content {
	flex-grow: 1;
	padding: 28px;
	background: var(--bg);
	color: var(--text);
}

/* ── Buttons ─────────────────────────────── */
button, .button, a.button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
	padding: 0 14px;
	height: 34px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--btn-border);
	font-size: 0.865rem;
	font-weight: 500;
	font-family: inherit;
	background: var(--btn-bg);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
	white-space: nowrap;
	user-select: none;
}

button:hover, .button:hover, a.button:hover {
	border-color: var(--accent);
	background: var(--btn-hover);
	color: var(--accent);
}

button.primary, .button.primary {
	background: var(--accent);
	border-color: transparent;
	color: #fff;
}

button.primary:hover, .button.primary:hover {
	background: var(--accent-hover);
	color: #fff;
}

button.danger, .button.danger {
	border-color: var(--red);
	color: var(--red);
}

button.danger:hover { background: rgba(240, 104, 104, 0.1); }

a.action {
	color: var(--accent);
	text-decoration: none;
	transition: opacity 0.15s;
}

a.action:hover { opacity: 0.75; }

.warning { color: var(--yellow); }

/* ── Cards / Panels ──────────────────────── */
.card, .panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: var(--shadow-sm);
}

details, .group {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow-sm);
}

.import {
	background: var(--surface-2);
	border-radius: var(--radius-lg);
}

details > .features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-top: 10px;
}

summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--text);
	user-select: none;
}

/* ── Inputs ──────────────────────────────── */
input, select, textarea {
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	font-size: 0.9rem;
	font-family: inherit;
	max-width: 480px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Tables ──────────────────────────────── */
table {
	border-collapse: collapse;
	width: 100%;
	color: var(--text);
}

thead { background: var(--surface-2); }

th {
	font-size: 0.77rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--text-2);
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--border);
}

tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* ── Feature / Pill badges ───────────────── */
.feature {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--accent-glow);
	border: 1px solid rgba(78, 143, 247, 0.28);
	color: var(--accent);
	font-size: 0.77rem;
	padding: 3px 9px;
	border-radius: 20px;
	font-weight: 500;
}

.pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 0.77rem;
	font-weight: 600;
	background: var(--surface-3);
	color: var(--text-2);
}

.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
}

.badge-green { background: rgba(32, 200, 124, 0.14); color: var(--green); }
.badge-red   { background: rgba(240, 104, 104, 0.14); color: var(--red); }
.badge-yellow{ background: rgba(244, 186, 64, 0.14);  color: var(--yellow); }
.badge-blue  { background: var(--accent-glow); color: var(--accent); }

/* ── Icon buttons ────────────────────────── */
.group-wrapper .buttons form button,
.group-wrapper .buttons a.button,
.group .buttons button {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-2);
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--radius-sm);
	justify-content: center;
}

.group-wrapper .buttons form button:hover,
.group-wrapper .buttons a.button:hover,
.group .buttons button:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-glow);
}

/* ── Typography ──────────────────────────── */
h1, h2, h3, h4 {
	color: var(--text);
	margin-top: 0;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h1 { font-size: 1.55rem; margin-bottom: 6px; }
h2 { font-size: 1.2rem;  margin-bottom: 4px; }
h3 { font-size: 1rem;    margin-bottom: 4px; }

/* ── Helpers ─────────────────────────────── */
.placeholder { flex-grow: 1; }

.section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.section-header h1, .section-header h2 { margin: 0; }

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--border-2);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }