@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root,
html[data-theme="hibrido"] {
  --bg-main: #f3f6f5;
  --bg-surface: #ffffff;
  --bg-surface-hover: #e8f0ee;
  --text-main: #152724;
  --text-muted: #657673;
  --border-color: #d8e1df;
  --border-light: #bacbc7;
  --primary: #087f72;
  --primary-hover: #05665c;
  --sidebar-bg: #102a2a;
  --sidebar-surface: #173837;
  --sidebar-text: #a8c4bf;
  --sidebar-text-active: #ffffff;
  --topbar-bg: #163433;
  --shadow-sm: 0 1px 3px rgba(18, 49, 46, 0.08);
  --shadow-md: 0 14px 34px rgba(18, 49, 46, 0.12);
  color-scheme: light;
}

html[data-theme="claro"] {
  --bg-main: #f6f8f7;
  --bg-surface: #ffffff;
  --bg-surface-hover: #edf3f1;
  --text-main: #182522;
  --text-muted: #65716e;
  --border-color: #dce4e1;
  --border-light: #becdc8;
  --primary: #087f72;
  --primary-hover: #05665c;
  --sidebar-bg: #ffffff;
  --sidebar-surface: #edf3f1;
  --sidebar-text: #596a66;
  --sidebar-text-active: #0f302d;
  --topbar-bg: #ffffff;
  color-scheme: light;
}

html[data-theme="escuro"] {
  --bg-main: #091413;
  --bg-surface: #10201e;
  --bg-surface-hover: #18302d;
  --text-main: #eef7f5;
  --text-muted: #90aaa5;
  --border-color: #243c38;
  --border-light: #36534e;
  --primary: #42c7b4;
  --primary-hover: #68d7c7;
  --sidebar-bg: #071110;
  --sidebar-surface: #132724;
  --sidebar-text: #86a49f;
  --sidebar-text-active: #effffb;
  --topbar-bg: #0d1b19;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html[data-theme="adminlte_matrix"] {
  --bg-main: #ecf0f5;
  --bg-surface: #ffffff;
  --bg-surface-hover: #e7ebef;
  --text-main: #30383f;
  --text-muted: #6d7880;
  --border-color: #d2d6de;
  --border-light: #b8c1ca;
  --primary: #00a65a;
  --primary-hover: #008d4c;
  --sidebar-bg: #171d20;
  --sidebar-surface: #222d32;
  --sidebar-text: #b8c7ce;
  --sidebar-text-active: #ffffff;
  --topbar-bg: #00a65a;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 3px;
  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.16);
  color-scheme: light;
}

body {
  font-family: "Source Sans 3", sans-serif;
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 28rem),
    var(--bg-main);
}

h1, h2, h3, h4, h5, h6,
.sidebar-header,
.brand-wordmark {
  font-family: "Outfit", sans-serif;
}

.sidebar {
  background: var(--sidebar-bg);
  border-color: color-mix(in srgb, var(--sidebar-bg) 70%, white);
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--sidebar-text-active);
  letter-spacing: -0.025em;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.brand-logo-sidebar {
  width: 184px;
  max-height: 54px;
}

html[data-theme="hibrido"] .brand-logo-sidebar,
html[data-theme="escuro"] .brand-logo-sidebar,
html[data-theme="adminlte_matrix"] .brand-logo-sidebar {
  content: url("/img/fluxo-nfe-logo-dark.svg");
}

.sidebar-header::after {
  content: "fiscal intelligence";
  display: block;
  margin-top: .2rem;
  color: var(--primary);
  font-family: "Source Sans 3", sans-serif;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sidebar .nav-item {
  color: var(--sidebar-text);
}

.sidebar .nav-item .nav-icon {
  display: inline-block;
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.sidebar .icon-dashboard {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.sidebar .icon-invoices {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5M9 13h7M9 17h7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5M9 13h7M9 17h7'/%3E%3C/svg%3E");
}

.sidebar .icon-emit {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.sidebar .icon-clients {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M16 5.5a3 3 0 0 1 0 5.5M17 14c2.4.6 4 2.8 4 5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M16 5.5a3 3 0 0 1 0 5.5M17 14c2.4.6 4 2.8 4 5'/%3E%3C/svg%3E");
}

.sidebar .icon-products {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m4 7 8-4 8 4-8 4zM4 7v10l8 4 8-4V7M12 11v10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m4 7 8-4 8 4-8 4zM4 7v10l8 4 8-4V7M12 11v10'/%3E%3C/svg%3E");
}

.sidebar .icon-services {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2M3 12h18M10 12v2h4v-2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2M3 12h18M10 12v2h4v-2'/%3E%3C/svg%3E");
}

.sidebar .icon-transport {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v11H3zM14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v11H3zM14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

.sidebar .icon-company {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6l8-4 8 4v15M2 21h20M8 9h2M14 9h2M8 13h2M14 13h2M10 21v-4h4v4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6l8-4 8 4v15M2 21h20M8 9h2M14 9h2M8 13h2M14 13h2M10 21v-4h4v4'/%3E%3C/svg%3E");
}

.sidebar .icon-aliquotas {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 8l10 8M7 16l10-8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 8l10 8M7 16l10-8'/%3E%3C/svg%3E");
}

.sidebar .icon-prefeituras {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6M9 13h.01M15 13h.01M12 13h.01'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6M9 13h.01M15 13h.01M12 13h.01'/%3E%3C/svg%3E");
}

.sidebar .icon-alerts {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

.sidebar .icon-settings {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
}

.sidebar .icon-whatsapp {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.7 7.4L3 21l2.2-5.1A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M8.5 10.5c.5 2 2.5 4 4.5 4.5M10 8.5c.2-.5.7-1 1.3-1h.2M14.5 14c.5-.2 1-.7 1-1.3v-.2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.7 7.4L3 21l2.2-5.1A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M8.5 10.5c.5 2 2.5 4 4.5 4.5M10 8.5c.2-.5.7-1 1.3-1h.2M14.5 14c.5-.2 1-.7 1-1.3v-.2'/%3E%3C/svg%3E");
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active {
  color: var(--sidebar-text-active);
  background: var(--sidebar-surface);
  border-right-color: var(--primary);
}

.header {
  background: var(--topbar-bg);
}

html[data-theme="hibrido"] .header,
html[data-theme="escuro"] .header,
html[data-theme="adminlte_matrix"] .header {
  color: #fff;
  border-bottom-color: transparent;
}

/* Botão Sair legível no topo escuro/verde */
html[data-theme="hibrido"] .header .btn-secondary,
html[data-theme="escuro"] .header .btn-secondary,
html[data-theme="adminlte_matrix"] .header .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
  background: transparent;
}

html[data-theme="hibrido"] .header .btn-secondary:hover:not(:disabled),
html[data-theme="escuro"] .header .btn-secondary:hover:not(:disabled),
html[data-theme="adminlte_matrix"] .header .btn-secondary:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.9);
}

html[data-theme="hibrido"] .header .empresa-razao-social,
html[data-theme="escuro"] .header .empresa-razao-social,
html[data-theme="adminlte_matrix"] .header .empresa-razao-social {
  color: #ffffff;
}

html[data-theme="adminlte_matrix"] .card {
  border-top: 3px solid var(--primary);
}

html[data-theme="adminlte_matrix"] .table th,
html[data-theme="adminlte_matrix"] .table td {
  padding: .62rem .8rem;
}

html[data-theme="adminlte_matrix"] .sidebar {
  width: 230px;
}

html[data-theme="adminlte_matrix"] .sidebar-header {
  min-height: 58px;
  padding: 1rem;
  background: #008d4c;
  border-bottom: 0;
  color: #fff;
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}

html[data-theme="adminlte_matrix"] .brand-logo-sidebar {
  width: 148px;
  max-height: 39px;
}

html[data-theme="adminlte_matrix"] .sidebar-header::after {
  content: "MATRIX CONTROL";
  margin-top: .1rem;
  color: rgba(255, 255, 255, .72);
  font-size: .58rem;
  letter-spacing: .12em;
}

html[data-theme="adminlte_matrix"] .sidebar-nav {
  padding: .7rem 0;
}

html[data-theme="adminlte_matrix"] .sidebar-nav::before {
  content: "NAVEGAÇÃO PRINCIPAL";
  display: block;
  padding: .55rem 1rem;
  background: #1a2226;
  color: #4b646f;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
}

html[data-theme="adminlte_matrix"] .sidebar .nav-item {
  min-height: 42px;
  padding: .68rem 1rem;
  gap: .72rem;
  border: 0;
  border-left: 3px solid transparent;
  color: #b8c7ce;
  font-family: "Source Sans 3", sans-serif;
  font-size: .9rem;
  font-weight: 400;
}

html[data-theme="adminlte_matrix"] .sidebar .nav-item .nav-icon {
  flex-basis: 1rem;
  width: 1rem;
  height: 1rem;
}

html[data-theme="adminlte_matrix"] .sidebar .nav-item:hover,
html[data-theme="adminlte_matrix"] .sidebar .nav-item.active {
  background: #1e282c;
  border-left-color: #00a65a;
  color: #fff;
}

html[data-theme="adminlte_matrix"] .sidebar .nav-item.active {
  font-weight: 600;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.theme-option {
  position: relative;
  display: block;
  padding: .85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-main);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}

.theme-option:hover,
.theme-option:has(input:checked) {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.theme-option input {
  position: absolute;
  opacity: 0;
}

.theme-swatch {
  display: grid;
  grid-template-columns: 28% 72%;
  height: 42px;
  margin-bottom: .55rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.theme-swatch span:first-child { background: var(--swatch-side); }
.theme-swatch span:last-child { background: var(--swatch-main); }

/* Login */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(130deg, rgba(4, 39, 36, .96), rgba(7, 87, 78, .88)),
    var(--bg-main);
}

.login-page::before {
  content: "";
  position: fixed;
  width: 34rem;
  height: 34rem;
  right: -10rem;
  top: -12rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(255,255,255,.025), 0 0 0 10rem rgba(255,255,255,.018);
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(940px, calc(100% - 2rem));
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(7, 35, 33, .64);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px);
}

.login-brand-panel {
  display: flex;
  min-height: 570px;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.2rem;
  color: #fff;
}

.login-brand-logo-wrap {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-logo-login {
  width: clamp(220px, 26vw, 290px);
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .16));
}

.brand-wordmark {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.04em;
}

.brand-wordmark span { color: #69dbc9; }

.login-brand-panel h1 {
  max-width: 11ch;
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.login-brand-panel p {
  max-width: 36ch;
  color: rgba(255,255,255,.7);
}

.environment-pill {
  width: fit-content;
  padding: .38rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.2rem;
  background: var(--bg-surface);
}

.login-form-panel h2 { margin-bottom: .35rem; font-size: 1.85rem; }
.login-form-panel > p { margin-bottom: 1.8rem; }
.login-form-panel .btn { min-height: 48px; }

.otp-code {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
}

.login-feedback {
  display: none;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: .88rem;
}

.login-feedback.visible { display: block; }
.login-feedback.error { color: var(--danger); background: var(--danger-bg); }
.login-feedback.success { color: var(--success); background: var(--success-bg); }

.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 220px; padding: 2rem; }
  .login-brand-panel h1 { font-size: 2.7rem; }
  .login-form-panel { padding: 2rem; }
  .theme-picker { grid-template-columns: 1fr; }
  .sidebar { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}