html, body.cmp-login-body, body.cmp-app-body { margin: 0; padding: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* ---------- Login ---------- */
body.cmp-login-body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
}
.cmp-login-card {
	background: #111827;
	border-radius: 12px;
	padding: 40px 36px;
	width: 100%;
	max-width: 360px;
	box-shadow: 0 20px 50px rgba(0,0,0,.4);
	text-align: center;
}
.cmp-login-logo { max-width: 160px; max-height: 90px; margin-bottom: 18px; }
.cmp-login-card h1 { color: #fff; font-size: 18px; margin: 0 0 20px; font-weight: 600; }
.cmp-login-card form { text-align: left; }
.cmp-login-card label { display: block; color: #9ca3af; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 6px; }
.cmp-login-card input[type=text], .cmp-login-card input[type=password] {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 6px; border: 1px solid #374151;
	background: #1f2937; color: #fff; font-size: 14px;
}
.cmp-login-card button {
	width: 100%; margin-top: 22px; padding: 11px; border: none; border-radius: 6px;
	background: #2563eb; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
}
.cmp-login-card button:hover { background: #1d4ed8; }
.cmp-login-erro { background: #7f1d1d; color: #fecaca; font-size: 13px; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; }
.cmp-login-sair { display: inline-block; margin-top: 18px; color: #93c5fd; font-size: 13px; text-decoration: none; }

/* ---------- App shell ---------- */
body.cmp-app-body { background: #f4f5f7; }
.cmp-app-shell { display: flex; min-height: 100vh; }

.cmp-app-sidebar {
	width: 230px; flex-shrink: 0; background: #111827; color: #d1d5db;
	display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.cmp-app-logo { padding: 22px 18px 10px; }
.cmp-app-logo img { max-width: 100%; max-height: 60px; }
.cmp-app-sidebar nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.cmp-app-nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 18px; color: #9ca3af; text-decoration: none; font-size: 13px; border-left: 3px solid transparent; }
.cmp-app-nav-item:hover { background: #1f2937; color: #fff; }
.cmp-app-nav-item.active { background: #1f2937; color: #fff; border-left-color: #2563eb; }
.cmp-app-nav-icone { font-size: 14px; }
.cmp-app-user { padding: 16px 18px; border-top: 1px solid #1f2937; font-size: 13px; }
.cmp-app-user div { color: #fff; margin-bottom: 6px; }
.cmp-app-user a { color: #93c5fd; text-decoration: none; font-size: 12px; }

.cmp-app-main { flex: 1; padding: 28px 32px; overflow-x: auto; }

.cmp-config-logo-preview { background: #111827; padding: 24px; border-radius: 8px; display: inline-block; margin-bottom: 16px; }
.cmp-config-logo-preview img { max-width: 220px; max-height: 120px; display: block; }

@media (max-width: 780px) {
	.cmp-app-shell { flex-direction: column; }
	.cmp-app-sidebar { width: 100%; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.cmp-app-sidebar nav { display: flex; flex-wrap: wrap; }
	.cmp-app-user { border-top: none; }
}