/* ==========================================================================
   NitroPlay+ — Telas fora do painel
     .np-login        index.php                    (login do painel)
     .np-signup       cadastro.php                 (cadastro publico)
     .np-temas-login  temas-admin/admin/login.php  (login do API de Temas)
     .np-temas-app    temas-admin/admin/index.php  (dashboard do API de Temas)

   O escopo agora vem de uma classe no <body> de cada pagina, e nao de um
   container interno. Na revisao anterior eu escopei pelo ".login-shell",
   sem notar que ali ele e a COLUNA do cartao (max-width:380px) e nao a
   pagina — o que espremeu a tela toda numa faixa.

   Nas duas telas do API de Temas as regras mexem apenas em COR: o layout
   delas ja funcionava e nao vale o risco de reescrever.
   ========================================================================== */

:root {
  --np-pink: #F892B2;
  --np-purple: #CB76F5;
  --np-grad: linear-gradient(135deg, #F892B2 0%, #CB76F5 100%);
  --np-grad-deep: linear-gradient(140deg, #A93BE0 0%, #7E1FB0 100%);

  --np-primary: #A93BE0;
  --np-primary-hover: #9C31D4;
  --np-primary-press: #8E24C4;
  --np-primary-50: #FBF2FE;
  --np-primary-200: #EED9FA;

  --np-bg: #F5F6F8;
  --np-surface: #FFFFFF;
  --np-surface-2: #FAFBFC;
  --np-border: #ECEEF2;
  --np-border-strong: #DFE3EA;
  --np-text: #0F1524;
  --np-text-2: #2E3543;
  --np-text-3: #667085;

  --np-danger: #D92D45;  --np-danger-bg: #FDECEF;
  --np-success: #128A4B; --np-success-bg: #E9F7EF;

  --np-r: 16px;
  --np-r-sm: 10px;
  --np-r-xs: 8px;
  --np-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --np-shadow-lg: 0 20px 56px rgba(16,24,40,.14);

  --np-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
             'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* A fonte e aplicada no body e herdada. NAO usar o seletor universal "*":
   ele atinge as tags <i> dos icones e sobrescreve a fonte do Font Awesome,
   fazendo os icones virarem quadradinhos. Controles de formulario nao
   herdam font-family por padrao, entao sao listados a parte. */
.np-login, .np-signup, .np-temas-login, .np-temas-app {
  font-family: var(--np-font) !important;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.np-login input, .np-login select, .np-login textarea, .np-login button,
.np-signup input, .np-signup select, .np-signup textarea, .np-signup button,
.np-temas-login input, .np-temas-login select, .np-temas-login textarea, .np-temas-login button,
.np-temas-app input, .np-temas-app select, .np-temas-app textarea, .np-temas-app button {
  font-family: var(--np-font);
}

/* ==========================================================================
   1. LOGIN DO PAINEL   (body.np-login)

   Estrutura real, conferida no arquivo:
     .field
       .field-row   -> LINHA DO ROTULO (flex, space-between). NAO e campo.
       .field-box   -> position:relative; o <i> dentro dele e absoluto e o
                       input tem padding para nao passar por baixo do icone.
   Na revisao anterior eu tratei .field-row e .field-box como caixas de
   input: por isso apareciam duas areas por campo e o icone cobria o texto.
   ========================================================================== */

.np-login {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--np-bg) !important;
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(248,146,178,.16), transparent 62%),
    radial-gradient(760px 400px at 92% 108%, rgba(203,118,245,.16), transparent 62%) !important;
}

.np-login .login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  background: transparent !important;
}

.np-login .login-card {
  width: 100%;
  max-width: 430px;
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--np-shadow-lg) !important;
  padding: 38px 34px 28px !important;
  text-align: center;
}

.np-login .login-logo {
  width: 74px !important;
  height: 74px !important;
  margin: 0 auto 16px !important;
  border-radius: 21px !important;
  object-fit: cover;
  display: block;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(126,31,176,.2) !important;
}

.np-login .login-kicker {
  display: block;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--np-primary-press) !important;
  margin-bottom: 5px;
}
.np-login .login-card h1,
.np-login .login-card h2 {
  font-size: 1.66rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--np-text) !important;
  margin: 0 0 6px !important;
}
.np-login .login-subtitle {
  font-size: .875rem !important;
  color: var(--np-text-3) !important;
  margin: 0 0 24px !important;
  line-height: 1.55;
}

/* Campo */
.np-login .field { text-align: left; margin-bottom: 16px; }

/* Linha do rotulo — nunca uma caixa */
.np-login .field-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.np-login .field label {
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--np-text-2) !important;
  margin: 0;
}

/* Caixa do campo: apenas o contexto de posicionamento */
.np-login .field-box {
  position: relative !important;
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.np-login .field-box > i {
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--np-text-3) !important;
  font-size: 1rem !important;
  pointer-events: none;
  z-index: 2;
}
.np-login .field-box input {
  width: 100% !important;
  height: 54px !important;
  padding: 0 48px 0 45px !important;
  background: var(--np-surface-2) !important;
  border: 1px solid var(--np-border-strong) !important;
  border-radius: 13px !important;
  color: var(--np-text) !important;
  font-size: .95rem !important;
  font-family: inherit;
  outline: 0 !important;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.np-login .field-box input::placeholder { color: #98A1B0 !important; }
.np-login .field-box input:focus {
  background: var(--np-surface) !important;
  border-color: var(--np-primary) !important;
  box-shadow: 0 0 0 4px var(--np-primary-50) !important;
}

.np-login .toggle-password {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--np-text-3) !important;
  cursor: pointer;
  font-size: 1rem !important;
  display: grid;
  place-items: center;
  border-radius: 9px;
  z-index: 3;
}
.np-login .toggle-password:hover { color: var(--np-primary-press) !important; background: var(--np-primary-50) !important; }

.np-login .remember-row {
  display: flex !important;
  align-items: center;
  gap: 9px;
  font-size: .845rem !important;
  color: var(--np-text-2) !important;
  margin: 2px 0 20px !important;
  cursor: pointer;
  text-align: left;
  font-weight: 500;
}
.np-login .remember-row input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--np-primary);
  margin: 0;
}

.np-login .login-button {
  width: 100% !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--np-primary) !important;
  color: #fff !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 20px rgba(169,59,224,.24) !important;
  transition: background .15s, transform .08s;
}
.np-login .login-button:hover { background: var(--np-primary-hover) !important; }
.np-login .login-button:active { transform: translateY(1px); }

.np-login .install-panel-button {
  width: 100%;
  height: 46px;
  margin-top: 11px;
  border: 1px solid var(--np-border-strong) !important;
  border-radius: 12px !important;
  background: var(--np-surface) !important;
  color: var(--np-text-2) !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, border-color .15s, color .15s;
}
.np-login .install-panel-button:hover {
  background: var(--np-primary-50) !important;
  border-color: var(--np-primary-200) !important;
  color: var(--np-primary-press) !important;
}

.np-login .login-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  background: var(--np-danger-bg) !important;
  border: 1px solid #F6CDD4 !important;
  color: #A81F33 !important;
  border-radius: var(--np-r-sm) !important;
  padding: 12px 14px !important;
  font-size: .85rem !important;
  margin-bottom: 18px;
}

.np-login .login-signup,
.np-login .login-footer {
  margin-top: 18px !important;
  font-size: .83rem !important;
  color: var(--np-text-3) !important;
}
.np-login .login-signup a,
.np-login .login-footer a {
  color: var(--np-primary-press) !important;
  font-weight: 650;
  text-decoration: none;
}
.np-login .login-signup a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .np-login .login-card { padding: 30px 22px 22px !important; border-radius: 18px !important; }
  .np-login .login-logo { width: 64px !important; height: 64px !important; }
  .np-login .login-card h1, .np-login .login-card h2 { font-size: 1.42rem !important; }
}

/* ==========================================================================
   2. CADASTRO   (body.np-signup)
   ========================================================================== */

.np-signup {
  background: var(--np-bg) !important;
  background-image:
    radial-gradient(900px 400px at 8% -6%, rgba(248,146,178,.14), transparent 60%),
    radial-gradient(800px 400px at 96% 4%, rgba(203,118,245,.14), transparent 60%) !important;
  color: var(--np-text) !important;
}

.np-signup .shell { background: transparent !important; }

.np-signup .brand {
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--np-text) !important;
}
.np-signup .brand img { border-radius: 13px; box-shadow: 0 4px 12px rgba(126,31,176,.18); }

.np-signup .promo {
  background: var(--np-grad-deep) !important;
  border: 0 !important;
  border-radius: 20px !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(126,31,176,.22) !important;
}
.np-signup .promo h1, .np-signup .promo h2,
.np-signup .promo strong, .np-signup .promo p { color: #fff !important; }
.np-signup .promo h1 { font-weight: 800 !important; letter-spacing: -.028em !important; }

.np-signup .box {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-r) !important;
  box-shadow: var(--np-shadow) !important;
}
.np-signup .box h2, .np-signup .box h3 {
  font-weight: 700 !important;
  color: var(--np-text) !important;
  letter-spacing: -.015em;
}
.np-signup .muted { color: var(--np-text-3) !important; }

.np-signup .form-group label {
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--np-text-2) !important;
}
.np-signup input, .np-signup select, .np-signup textarea {
  background: var(--np-surface-2) !important;
  border: 1px solid var(--np-border-strong) !important;
  border-radius: var(--np-r-sm) !important;
  color: var(--np-text) !important;
  font-family: inherit;
  outline: 0;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.np-signup input:focus, .np-signup select:focus, .np-signup textarea:focus {
  border-color: var(--np-primary) !important;
  background: var(--np-surface) !important;
  box-shadow: 0 0 0 4px var(--np-primary-50) !important;
}

.np-signup .plan {
  border: 1.5px solid var(--np-border-strong) !important;
  border-radius: var(--np-r-sm) !important;
  background: var(--np-surface) !important;
  transition: border-color .16s, background .16s;
}
.np-signup .plan:hover { border-color: var(--np-primary-200) !important; background: var(--np-primary-50) !important; }
.np-signup .plan:has(input:checked) { border-color: var(--np-primary) !important; background: var(--np-primary-50) !important; }
.np-signup .price { font-weight: 800 !important; color: var(--np-text) !important; letter-spacing: -.02em; }

.np-signup .trial {
  background: var(--np-success-bg) !important;
  border: 1px solid #C9E9D6 !important;
  color: #0C6B3A !important;
  border-radius: var(--np-r-sm) !important;
}
.np-signup .alert {
  background: var(--np-danger-bg) !important;
  border: 1px solid #F6CDD4 !important;
  color: #A81F33 !important;
  border-radius: var(--np-r-sm) !important;
}
.np-signup button[type="submit"] {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--np-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(169,59,224,.22) !important;
  transition: background .15s;
}
.np-signup button[type="submit"]:hover { background: var(--np-primary-hover) !important; }
.np-signup a { color: var(--np-primary-press) !important; }

/* ==========================================================================
   3. LOGIN DO API DE TEMAS   (body.np-temas-login)
   Apenas cor. O layout original (coluna .login-shell de 380px centralizada)
   permanece intacto — foi justamente o que quebrou na revisao anterior.
   ========================================================================== */

.np-temas-login {
  background: var(--np-bg) !important;
  background-image:
    radial-gradient(880px 420px at 14% -8%, rgba(248,146,178,.16), transparent 62%),
    radial-gradient(760px 400px at 88% 106%, rgba(203,118,245,.16), transparent 62%) !important;
  color: var(--np-text) !important;
}

.np-temas-login .logo {
  background: var(--np-grad) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(126,31,176,.2) !important;
  color: #fff !important;
}
.np-temas-login .title {
  color: var(--np-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}
.np-temas-login .subtitle,
.np-temas-login .lead,
.np-temas-login .footnote { color: var(--np-text-3) !important; }

.np-temas-login .card {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--np-shadow-lg) !important;
}
.np-temas-login .card > label,
.np-temas-login label {
  color: var(--np-text-2) !important;
  font-weight: 600 !important;
}

.np-temas-login .field input,
.np-temas-login input[type="password"],
.np-temas-login input[type="text"] {
  background: var(--np-surface-2) !important;
  border: 1px solid var(--np-border-strong) !important;
  border-radius: 12px !important;
  color: var(--np-text) !important;
  font-family: inherit;
  outline: 0 !important;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.np-temas-login .field input:focus {
  background: var(--np-surface) !important;
  border-color: var(--np-primary) !important;
  box-shadow: 0 0 0 4px var(--np-primary-50) !important;
}
.np-temas-login .lock,
.np-temas-login .toggle-eye { color: var(--np-text-3) !important; }
.np-temas-login .toggle-eye:hover {
  color: var(--np-primary-press) !important;
  background: var(--np-primary-50) !important;
}

.np-temas-login .submit {
  background: var(--np-primary) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(169,59,224,.22) !important;
}
.np-temas-login .submit:hover { background: var(--np-primary-hover) !important; filter: none !important; }

.np-temas-login .alert {
  background: var(--np-danger-bg) !important;
  border: 1px solid #F6CDD4 !important;
  color: #A81F33 !important;
  border-radius: var(--np-r-sm) !important;
}

/* ==========================================================================
   4. DASHBOARD DO API DE TEMAS   (body.np-temas-app)
   Tambem so cor. A pagina tem 1200 linhas e layout proprio (sidebar fixa,
   abas, modais) — reescrever posicionamento aqui so traria risco.
   ========================================================================== */

.np-temas-app {
  background: var(--np-bg) !important;
  color: var(--np-text) !important;
}
.np-temas-app .app, .np-temas-app .main { background: transparent !important; }

/* Barra lateral — faltava na revisao anterior, por isso ficou de outra cor */
.np-temas-app .sidebar {
  background: var(--np-surface) !important;
  border-right: 1px solid var(--np-border) !important;
  box-shadow: none !important;
  color: var(--np-text-2) !important;
}
.np-temas-app .sidebar .brand,
.np-temas-app .brand { color: var(--np-text) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.np-temas-app .brand .logo,
.np-temas-app .sidebar .logo {
  background: var(--np-grad) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(126,31,176,.18) !important;
}
.np-temas-app .nav-label { color: var(--np-text-3) !important; }
.np-temas-app .nav-item {
  color: var(--np-text-2) !important;
  border-radius: 9px !important;
}
.np-temas-app .nav-item:hover { background: #F2F4F7 !important; color: var(--np-text) !important; }
.np-temas-app .nav-item.active {
  background: #EFDFFC !important;
  color: #6B199A !important;
  font-weight: 650 !important;
}
.np-temas-app .nav-item svg { opacity: 1 !important; }
.np-temas-app .sidebar-foot { border-top: 1px solid var(--np-border) !important; }
.np-temas-app .logout-link { color: var(--np-danger) !important; font-weight: 600 !important; }
.np-temas-app .menu-toggle {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  color: var(--np-text-2) !important;
}

/* Superficies */
.np-temas-app .box,
.np-temas-app .card,
.np-temas-app .stat-card,
.np-temas-app .modal {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-r) !important;
  box-shadow: var(--np-shadow) !important;
  color: var(--np-text) !important;
}
.np-temas-app .modal { border-radius: 20px !important; box-shadow: var(--np-shadow-lg) !important; }
.np-temas-app .box-head,
.np-temas-app .modal-head { border-bottom: 1px solid var(--np-border) !important; color: var(--np-text) !important; }
.np-temas-app .modal-foot { border-top: 1px solid var(--np-border) !important; }
.np-temas-app .modal-overlay { background: rgba(15,21,36,.42) !important; backdrop-filter: blur(4px); }
.np-temas-app .modal-close { color: var(--np-text-3) !important; background: transparent !important; }
.np-temas-app .modal-close:hover { background: #F2F4F7 !important; color: var(--np-text) !important; }

.np-temas-app .sub,
.np-temas-app .hint,
.np-temas-app .field-hint,
.np-temas-app .stat-label,
.np-temas-app .id,
.np-temas-app .empty-state { color: var(--np-text-3) !important; }
.np-temas-app .stat-value { color: var(--np-text) !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
.np-temas-app .stat-icon { background: var(--np-primary-50) !important; color: var(--np-primary) !important; }
.np-temas-app .fname, .np-temas-app .name { color: var(--np-text) !important; }

/* Botoes */
.np-temas-app .btn {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border-strong) !important;
  border-radius: var(--np-r-xs) !important;
  color: var(--np-text-2) !important;
  font-family: inherit;
  font-weight: 600 !important;
}
.np-temas-app .btn:hover { background: var(--np-surface-2) !important; color: var(--np-text) !important; }
.np-temas-app .btn-primary {
  background: var(--np-primary) !important;
  border-color: var(--np-primary) !important;
  color: #fff !important;
}
.np-temas-app .btn-primary:hover { background: var(--np-primary-hover) !important; border-color: var(--np-primary-hover) !important; }
.np-temas-app .btn-danger {
  background: var(--np-danger) !important;
  border-color: var(--np-danger) !important;
  color: #fff !important;
}
.np-temas-app .btn-danger:hover { background: #C2263B !important; }

/* Campos */
.np-temas-app input[type="text"],
.np-temas-app input[type="password"],
.np-temas-app input[type="number"],
.np-temas-app input[type="search"],
.np-temas-app input[type="url"],
.np-temas-app select,
.np-temas-app textarea,
.np-temas-app .search-input {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border-strong) !important;
  border-radius: var(--np-r-xs) !important;
  color: var(--np-text) !important;
  font-family: inherit;
  outline: 0;
}
.np-temas-app input:focus,
.np-temas-app select:focus,
.np-temas-app textarea:focus,
.np-temas-app .search-input:focus {
  border-color: var(--np-primary) !important;
  box-shadow: 0 0 0 4px var(--np-primary-50) !important;
}
.np-temas-app input[type="checkbox"] { accent-color: var(--np-primary); }

/* Tabelas */
.np-temas-app thead th {
  background: var(--np-surface-2) !important;
  border-bottom: 1px solid var(--np-border) !important;
  color: var(--np-text-3) !important;
}
.np-temas-app tbody td {
  border-top: 1px solid var(--np-border) !important;
  color: var(--np-text-2) !important;
}
.np-temas-app tbody tr:hover { background: var(--np-surface-2) !important; }

/* Selos, avisos, envio */
.np-temas-app .badge-count {
  background: var(--np-primary-50) !important;
  color: var(--np-primary-press) !important;
  border: 1px solid var(--np-primary-200) !important;
}
.np-temas-app .alert-success { background: var(--np-success-bg) !important; border: 1px solid #C9E9D6 !important; color: #0C6B3A !important; }
.np-temas-app .alert-error   { background: var(--np-danger-bg)  !important; border: 1px solid #F6CDD4 !important; color: #A81F33 !important; }
.np-temas-app .file-drop {
  border: 1.5px dashed var(--np-border-strong) !important;
  background: var(--np-surface-2) !important;
  color: var(--np-text-3) !important;
}
.np-temas-app .file-drop:hover { border-color: var(--np-primary) !important; background: var(--np-primary-50) !important; }
.np-temas-app .divider { background: var(--np-border) !important; }
.np-temas-app .thumb-wrap { border: 1px solid var(--np-border) !important; }
.np-temas-app a { color: var(--np-primary-press) !important; }

/* ==========================================================================
   5. ESTRUTURA DO BLOCO "marketing-login-4", ADAPTADA
   O bloco de referencia e escuro; aqui a ESTRUTURA dele foi trazida e a
   paleta continua sendo a clara do site, como pedido.

   O que veio do bloco:
     - marca horizontal (icone + nome lado a lado) no lugar da logo grande
     - titulo e subtitulo centralizados logo abaixo
     - fundo com trama de pontos discreta
     - linha divisoria de borda a borda antes do rodape
     - cartao mais estreito e com cantos menos arredondados
   ========================================================================== */

/* Trama de pontos do fundo */
.np-login, .np-temas-login {
  background-image:
    radial-gradient(circle, rgba(15,21,36,.055) 1px, transparent 1px),
    radial-gradient(900px 420px at 12% -8%, rgba(248,146,178,.15), transparent 62%),
    radial-gradient(760px 400px at 92% 108%, rgba(203,118,245,.15), transparent 62%) !important;
  background-size: 22px 22px, auto, auto !important;
  background-position: 0 0, 0 0, 0 0 !important;
}

/* Marca horizontal */
.np-brand-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0 0 20px !important;
}
.np-login .np-brand-row .login-logo,
.np-temas-login .np-brand-row .logo {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  border-radius: 12px !important;
  margin: 0 !important;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
/* O nome da marca deixa de ser um rotulo minusculo e vira o titulo da marca */
.np-login .np-brand-row .login-kicker,
.np-temas-login .np-brand-row .title {
  display: block !important;
  margin: 0 !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  text-transform: none !important;
  color: var(--np-text) !important;
  line-height: 1.2;
}

/* Cartao no formato do bloco: mais estreito, cantos menores */
.np-login .login-card {
  max-width: 452px !important;
  border-radius: 18px !important;
  padding: 34px 34px 26px !important;
}
.np-login .login-card h1,
.np-login .login-card h2 {
  font-size: 1.78rem !important;
  margin: 0 0 7px !important;
}
.np-login .login-subtitle { margin-bottom: 26px !important; }

.np-temas-login .card {
  border-radius: 18px !important;
  padding: 30px 30px 24px !important;
}

/* Linha divisoria de borda a borda, como no bloco */
.np-login-divider {
  height: 1px;
  background: var(--np-border);
  border: 0;
  margin: 22px -34px 16px;
}
.np-temas-login .np-login-divider { margin: 20px -30px 14px; }

.np-login .login-signup,
.np-temas-login .footnote { margin-top: 0 !important; }
.np-login .login-footer { margin-top: 8px !important; font-size: .78rem !important; }

/* Linha do "manter conectado": preparada para um link a direita,
   caso um dia exista recuperacao de senha no painel. */
.np-login .remember-row {
  justify-content: flex-start;
  margin-bottom: 22px !important;
}

@media (max-width: 480px) {
  .np-login .login-card { padding: 28px 22px 22px !important; border-radius: 16px !important; }
  .np-login-divider { margin-left: -22px; margin-right: -22px; }
  .np-temas-login .card { padding: 26px 20px 20px !important; }
  .np-temas-login .np-login-divider { margin-left: -20px; margin-right: -20px; }
  .np-login .login-card h1 { font-size: 1.5rem !important; }
}

/* ==========================================================================
   6. ADAPTAÇÃO POR CONTEXTO DE USO — telas fora do painel
   Mesma logica do painel: ponteiro e hover, alem da largura. Estas quatro
   telas tinham apenas 2 consultas de media no total.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 PONTEIRO GROSSO
   O olho da senha era 38px e fica colado na borda direita do campo — e o
   alvo mais errado da tela de login no celular.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .np-login .toggle-password,
  .np-temas-login .toggle-eye {
    width: 44px !important;
    height: 44px !important;
    right: 5px !important;
  }
  .np-login .field-box input { padding-right: 54px !important; }

  .np-login .remember-row {
    min-height: 44px;
    align-items: center;
  }
  .np-login .remember-row input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
  }

  .np-login .login-button,
  .np-login .install-panel-button,
  .np-temas-login .submit,
  .np-signup button[type="submit"] { min-height: 48px !important; }

  .np-signup .plan { min-height: 56px; display: flex; align-items: center; }

  .np-temas-app .btn { min-height: 44px !important; }
  .np-temas-app .btn-sm { min-height: 40px !important; }
  .np-temas-app .nav-item { min-height: 46px !important; }
  .np-temas-app .modal-close { width: 44px !important; height: 44px !important; }
}

/* Sem hover: evita o estado grudado depois do toque */
@media (hover: none) {
  .np-login .toggle-password:hover,
  .np-temas-login .toggle-eye:hover { background: transparent !important; }
  .np-signup .plan:hover {
    border-color: var(--np-border-strong) !important;
    background: var(--np-surface) !important;
  }
  .np-signup .plan:has(input:checked) {
    border-color: var(--np-primary) !important;
    background: var(--np-primary-50) !important;
  }
  .np-temas-app .nav-item:hover { background: transparent !important; }
  .np-temas-app .nav-item:active { background: #F2F4F7 !important; }
  .np-temas-app .btn:active { filter: brightness(.96); }
}

/* --------------------------------------------------------------------------
   6.2 TELA BAIXA — celular deitado com o teclado aberto
   O cartao centralizado em 100dvh perdia o topo quando o teclado subia, e
   nao havia como rolar ate ele. Alinhar ao topo resolve sem mexer no
   desktop, onde a centralizacao continua.
   -------------------------------------------------------------------------- */
@media (max-height: 620px) {
  .np-login .login-page {
    align-items: start !important;
    min-height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }
  .np-login .login-card { padding-top: 26px !important; padding-bottom: 20px !important; }
  .np-login .np-brand-row { margin-bottom: 14px !important; }
  .np-login .login-subtitle { margin-bottom: 18px !important; }

  .np-temas-login {
    align-items: start !important;
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }
}

/* --------------------------------------------------------------------------
   6.3 ÁREAS SEGURAS
   -------------------------------------------------------------------------- */
.np-login .login-page,
.np-temas-login {
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
.np-signup .shell {
  padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(50px, env(safe-area-inset-bottom, 0px)) !important;
}

/* --------------------------------------------------------------------------
   6.4 TELA MUITO ESTREITA (320px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .np-login .login-card { padding: 24px 18px 18px !important; }
  .np-login-divider { margin-left: -18px; margin-right: -18px; }
  .np-login .np-brand-row { gap: 9px !important; }
  .np-login .np-brand-row .login-kicker { font-size: 1rem !important; }
  .np-login .field-box input { height: 50px !important; font-size: .9rem !important; }

  .np-temas-login .card { padding: 22px 17px 18px !important; }
  .np-temas-login .np-login-divider { margin-left: -17px; margin-right: -17px; }

  .np-signup .grid { grid-template-columns: 1fr !important; }
  .np-signup .promo { padding: 20px !important; }
  .np-temas-app .main { padding: 12px 10px 60px !important; }
}