:root {
	--bg: #f4f6f8;
	--surface: #ffffff;
	--surface-hover: #f0f2f5;
	--border: #e1e4e8;
	--text: #1f2328;
	--text-secondary: #656d76;
	--primary: #2563eb;
	--primary-hover: #1d4ed8;
	--success: #16a34a;
	--danger: #dc2626;
	--warning: #ca8a04;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--radius: 8px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--sidebar-width: 260px;
	--header-height: 56px;
}

[data-theme="dark"] {
	--bg: #0d1117;
	--surface: #161b22;
	--surface-hover: #1f242c;
	--border: #30363d;
	--text: #c9d1d9;
	--text-secondary: #8b949e;
	--primary: #58a6ff;
	--primary-hover: #79b8ff;
	--success: #3fb950;
	--danger: #f85149;
	--warning: #d29922;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	line-height: 1.5;
	transition: background 0.2s, color 0.2s;
}

.app {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* Header */
.header {
	height: var(--header-height);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	z-index: 10;
}

.header-brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.logo {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary);
	letter-spacing: -0.5px;
}

.subtitle {
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
}

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

.btn-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, border-color 0.15s;
}

.btn-icon:hover {
	background: var(--surface-hover);
	border-color: var(--text-secondary);
}

/* Layout */
.layout {
	display: flex;
	flex: 1;
	overflow: hidden;
}

/* Sidebar */
.sidebar {
	width: var(--sidebar-width);
	background: var(--surface);
	border-right: 1px solid var(--border);
	overflow-y: auto;
	flex-shrink: 0;
}

.nav {
	padding: 12px 0;
}

.nav-section {
	margin-bottom: 4px;
}

.nav-label {
	display: block;
	padding: 8px 16px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-secondary);
}

.nav-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 7px 16px;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 13px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-item:hover {
	background: var(--surface-hover);
}

.nav-item.active {
	background: var(--surface-hover);
	border-left-color: var(--primary);
	color: var(--primary);
	font-weight: 600;
}

/* Main */
.main {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Panel */
.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.panel-header {
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.panel-header h2 {
	font-size: 15px;
	font-weight: 600;
}

.panel-body {
	padding: 18px;
}

/* Form */
.form-group {
	margin-bottom: 14px;
}

.form-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.form-group input,
.form-group textarea,
.form-group select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--text);
	font-size: 13px;
	font-family: var(--font);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
	font-family: var(--mono);
	resize: vertical;
}

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

/* Button */
.btn-primary {
	padding: 10px 18px;
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.btn-primary:hover {
	background: var(--primary-hover);
}

/* Badge */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: var(--border);
	color: var(--text);
}

.badge.success {
	background: rgba(22, 163, 74, 0.15);
	color: var(--success);
}

.badge.error {
	background: rgba(220, 38, 38, 0.15);
	color: var(--danger);
}

/* Empty state */
.empty {
	color: var(--text-secondary);
	font-size: 13px;
	text-align: center;
	padding: 40px 0;
}

/* Table */
.table-wrap {
	overflow-x: auto;
	margin-bottom: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

th,
td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

th {
	background: var(--surface-hover);
	font-weight: 600;
	color: var(--text-secondary);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	position: sticky;
	top: 0;
}

tr:hover td {
	background: var(--surface-hover);
}

td {
	font-family: var(--mono);
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Raw JSON */
.raw-json {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px;
	font-family: var(--mono);
	font-size: 12px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--text);
}

/* Utilities */
.hidden {
	display: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}

.auth-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.btn-danger {
	background: var(--danger);
	margin-left: 12px;
}

.btn-danger:hover {
	background: #b91c1c;
}

#authLoggedIn {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

#authLoggedIn p {
	margin: 0;
	color: var(--text-secondary);
	font-size: 13px;
}

#authUserDisplay {
	color: var(--primary);
	font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
	.sidebar {
		position: fixed;
		left: 0;
		top: var(--header-height);
		bottom: 0;
		transform: translateX(-100%);
		transition: transform 0.2s;
		z-index: 9;
	}

	.sidebar.open {
		transform: translateX(0);
	}

	.main {
		padding: 14px;
	}

	.form-row {
		grid-template-columns: 1fr;
	}
}