:root {
	--tmr-primary: #2563eb;
	--tmr-primary-dark: #1d4ed8;
	--tmr-bg: #ffffff;
	--tmr-surface: #f8fafc;
	--tmr-border: #e2e8f0;
	--tmr-text: #0f172a;
	--tmr-muted: #64748b;
	--tmr-success: #16a34a;
	--tmr-danger: #dc2626;
	--tmr-warning: #d97706;
	--tmr-radius: 8px;
	--tmr-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
	--tmr-font: "Segoe UI", system-ui, sans-serif;
}

.tmr-app,
.tmr-shell {
	box-sizing: border-box;
	color: var(--tmr-text);
	font-family: var(--tmr-font);
}

.tmr-app *,
.tmr-shell * {
	box-sizing: border-box;
}

.tmr-app {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	min-height: 680px;
	background: var(--tmr-bg);
	border: 1px solid var(--tmr-border);
}

.tmr-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	background: #0f172a;
	color: #fff;
}

.tmr-nav strong {
	font-size: 22px;
	margin-bottom: 14px;
}

.tmr-nav button {
	border: 0;
	border-radius: var(--tmr-radius);
	background: transparent;
	color: #dbeafe;
	cursor: pointer;
	padding: 11px 12px;
	text-align: left;
}

.tmr-nav button:hover,
.tmr-nav button.is-active {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.tmr-main {
	min-width: 0;
	padding: 22px;
	background: var(--tmr-surface);
}

.tmr-toolbar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.tmr-toolbar h2,
.tmr-shell h2 {
	font-size: 24px;
	margin: 0;
}

.tmr-panel,
.tmr-shell {
	background: #fff;
	border: 1px solid var(--tmr-border);
	border-radius: var(--tmr-radius);
	box-shadow: var(--tmr-shadow);
	padding: 20px;
}

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

.tmr-card {
	background: #fff;
	border: 1px solid var(--tmr-border);
	border-radius: var(--tmr-radius);
	padding: 16px;
}

.tmr-card span {
	color: var(--tmr-muted);
	display: block;
	font-size: 13px;
}

.tmr-card strong {
	display: block;
	font-size: 28px;
	margin-top: 6px;
}

.tmr-grid {
	display: grid;
	gap: 12px;
}

.tmr-grid input,
.tmr-grid select,
.tmr-grid textarea,
.tmr-login input {
	border: 1px solid var(--tmr-border);
	border-radius: var(--tmr-radius);
	display: block;
	margin-top: 5px;
	padding: 10px 12px;
	width: 100%;
}

.tmr-btn {
	background: var(--tmr-primary);
	border: 0;
	border-radius: var(--tmr-radius);
	color: #fff;
	cursor: pointer;
	font-weight: 600;
	padding: 10px 14px;
}

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

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

.tmr-table th,
.tmr-table td {
	border-bottom: 1px solid var(--tmr-border);
	padding: 10px;
	text-align: left;
}

.tmr-message {
	color: var(--tmr-muted);
	min-height: 22px;
}

@media (max-width: 768px) {
	.tmr-app {
		display: block;
		padding-bottom: 66px;
	}

	.tmr-nav {
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		left: 0;
		overflow-x: auto;
		padding: 8px;
		position: fixed;
		right: 0;
		z-index: 50;
	}

	.tmr-nav strong {
		display: none;
	}

	.tmr-nav button {
		font-size: 12px;
		padding: 9px 8px;
		text-align: center;
	}

	.tmr-cards {
		grid-template-columns: 1fr;
	}
}