:root {
  /* Core palette based on m4variant.com */
  --m4-bg: #020617; /* page background */
  --m4-surface: #0b1120; /* cards / panels */
  --m4-surface-2: #1e293b; /* raised surfaces / inputs */
  --m4-accent: #3b82f6; /* links, primary buttons */
  --m4-accent-soft: #38bdf8; /* hover / subtle highlights */
  --m4-text-white: #e5e7eb; /* white text*/
  --m4-text: #e2e8f0; /* primary text */
  --m4-text-muted: #9ca3af; /* secondary text */
  --m4-border: #1f2937; /* low-contrast borders */
  --color-bg-gradient-top: rgba(2, 6, 23, 0.1);
  --color-bg-gradient-bottom: rgba(2, 6, 23, 0.5);
  --color-bg-band: rgba(2, 6, 23, 0.9);
  --color-overlay: rgba(107, 114, 128, 0.3);
  --color-text-primary: #e5e7eb;
  --color-text-muted: #6b7280;
  --color-text-subtle: #9ca3af;
  --color-text-secondary: #d1d5db;
  --color-text-strong: #f9fafb;
}

/* Match homepage font stack */
body,
.app-page,
.app-container,
input,
button,
.auth-title,
.portal-title,
.logo-txt {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif !important;
}

/* Already hiding bookmarks, keeping it */
#bookmarks {
  display: none !important;
}

/* === Lighten the area behind the entire card for separation === */
.app-page {
  background: radial-gradient(
      circle at 50% 20%,
      rgba(56, 189, 248, 0.25),   /* lighter accent blue */
      rgba(2, 6, 23, 1) 80%
  ) !important;
}

/* === LOGIN BOX = “BAND” PANEL FROM HOMEPAGE === */
.app-container {
  background: var(--color-bg-band) !important;  /* homepage .band */
  border-radius: 0.75rem;
  padding: 2rem 1.75rem !important;
  border: 1px solid rgba(148, 163, 184, 0.10);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 1;
}

.app-inp-lbl,
.text-primary-700,
.logo-txt {
	--tw-text-opacity: 1;
	color: var(--color-text-primary);
}

.app-inp-txt {
    background-color: var(--color-text-secondary);
}

.app-btn-pri {
	color: var(--color-text-primary);
}

.logo-img {
	margin-left: auto;
	margin-right: auto;
	height: 6rem;
	width: auto;
	border-color: var(--color-text-primary);
	border-width: 4px;
	border-radius: 10px;
	padding: 5px;
	background-color: #2f3b5e;
}