/* ============================================================================
   NITRO PAY — CAMADA DE MODERNIZAÇÃO VISUAL
   ----------------------------------------------------------------------------
   Escopo: SOMENTE apresentação (tipografia, cores já existentes, espaçamento,
   ícones, estados e responsividade).

   Não altera: regras de negócio, pagamentos, taxas, saldos, autenticação,
   banco de dados, APIs, webhooks, callbacks, rotas ou integrações.

   Carregado por último em views/layout/header.php, logo tem precedência sobre
   styles.css e cyberpunk.css sem reescrever nenhum deles.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TIPOGRAFIA — fontes auto-hospedadas (sem CDN externo em runtime)
   ------------------------------------------------------------------------ */
@font-face{
  font-family:'NPSans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/Inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'NPSans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/Inter-var-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'NPDisplay';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/SpaceGrotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'NPDisplay';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/SpaceGrotesk-var-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'NPMono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/JetBrainsMono-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'NPMono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/JetBrainsMono-var-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* fontes */
  --np-font:'NPSans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --np-font-display:'NPDisplay','NPSans',system-ui,sans-serif;
  --np-font-mono:'NPMono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* escala de texto — hierarquia consistente */
  --np-fs-display:clamp(1.75rem,1.15rem + 1.55vw,2.5rem);
  --np-fs-h1:clamp(1.4rem,1.05rem + .95vw,1.95rem);
  --np-fs-h2:clamp(1.15rem,.98rem + .55vw,1.4rem);
  --np-fs-h3:1.08rem;
  --np-fs-body:.9375rem;
  --np-fs-sm:.875rem;
  --np-fs-xs:.8125rem;
  --np-fs-micro:.75rem;

  /* ritmo vertical */
  --np-gap-1:.25rem; --np-gap-2:.5rem; --np-gap-3:.75rem;
  --np-gap-4:1rem;  --np-gap-5:1.5rem; --np-gap-6:2rem;

  /* raios e contornos */
  --np-r-sm:10px; --np-r-md:14px; --np-r-lg:18px; --np-r-xl:24px;
  --np-ring:0 0 0 3px rgba(0,215,255,.22);
  --np-ring-danger:0 0 0 3px rgba(255,100,120,.24);

  /* duração única para todo o conjunto */
  --np-dur:.22s;
  --np-ease:cubic-bezier(.4,.14,.3,1);
}

/* ---------------------------------------------------------------------------
   2. BASE — tipografia, foco acessível, seleção
   ------------------------------------------------------------------------ */
body,input,select,textarea,button,.btn,.btn-primary{
  font-family:var(--np-font);
  font-size:var(--np-fs-body);
  font-feature-settings:'cv05' 1,'cv08' 1,'ss03' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Títulos com personality e ritmo */
h1,.np-page-head h1,.np-page-hero h1,.auth-hero-card h1,.topbar h1{
  font-family:var(--np-font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.022em;
  text-wrap:balance;
}
h2,.np-panel h2,.np-panel h3,.card h2,.card h3,.auth-panel-head h2{
  font-family:var(--np-font-display);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.012em;
}
.np-eyebrow,.section-label,.stat small,.np-kpi small,.np-mini-metric small{
  font-family:var(--np-font);
  font-weight:700;
  letter-spacing:.1em;
}

/* Números alinháveis: valores, IDs, chaves e códigos */
strong,stat-value,.np-kpi strong,.np-mini-metric strong,
.stat-value,.np-activity-stat strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
table td,table th,.money,.copy-box,.code-block,.mono{
  font-variant-numeric:tabular-nums;
}
code,kbd,pre,.code-block,.copy-box,textarea[readonly]{
  font-family:var(--np-font-mono)!important;
  font-size:.8125rem;
  letter-spacing:0;
}
code,pre{font-variant-ligatures:none}

/* Foco visível e consistente em teclado */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--np-cyan);
  outline-offset:2px;
  border-radius:var(--np-r-sm);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

::selection{background:rgba(239,53,204,.32);color:#fff}

/* Texto secundário legível sobre fundo escuro */
.subtext,.muted,td small,.profile-meta span,.np-kpi span,.np-panel p{
  color:#a3b8d6;
}

/* ---------------------------------------------------------------------------
   3. CORREÇÕES DE LAYOUT
   ------------------------------------------------------------------------ */
/* .card::after (brilho) usa inset:auto -20% 0 auto. Como .card não era
   posicionado, esse -20% era calculado contra a viewport e o brilho saía
   ~288px para fora da página, criando rolagem horizontal em toda tela.
   position:relative faz o pseudo-elemento ficar contido no próprio cartão. */
.card{position:relative}
/* O brilho do canto usava inset:auto -20% 0 auto, que jogava a forma para
   fora do cartão. Mantido o mesmo efeito visual, agora dentro dos limites. */
.card::after{inset:auto 0 0 auto}
.card,.profile-card,.hero-box,.mini-box,.stat,.np-panel,.np-kpi,.np-activity-card,.np-page-hero,.auth-hero-card{
  overflow-x:clip;
}
body.app-body{overflow-x:clip}
html{scrollbar-gutter:stable}

/* Grades nunca estouram a coluna */
.grid,.grid-2,.grid-3,.grid-4,.np-panel-grid,.np-kpi-grid,
.np-metric-row,.np-feature-grid,.admin-columns,.action-grid{
  min-width:0;
}
.grid>*,.np-panel-grid>*,.np-kpi-grid>*,.np-metric-row>*{min-width:0}

/* Tabelas largas rolam dentro do próprio cartão */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.np-table-card{overflow:hidden}

/* ---------------------------------------------------------------------------
   4. LOGO "N" — rotação discreta e elegante
   O desenho, as proporções e a leitura da letra permanecem intactos: apenas o
   anel de luz por trás gira devagar e a letra recebe um balanço mínimo.
   ------------------------------------------------------------------------ */
.brand{
  position:relative;
  isolation:isolate;
  overflow:visible;
  font-family:var(--np-font-display);
  font-weight:700;
  letter-spacing:-.02em;
}
.brand::before{
  content:"";
  position:absolute;
  inset:-22%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--np-pink) 0deg, var(--np-violet) 80deg,
    var(--np-blue) 160deg, var(--np-cyan) 240deg,
    var(--np-pink) 360deg);
  filter:blur(11px);
  opacity:.5;
  z-index:-1;
  animation:np-logo-orbit 16s linear infinite;
  will-change:transform;
}
.brand>span{
  display:inline-block;
  animation:np-logo-breathe 7.5s var(--np-ease) infinite;
  transform-origin:50% 62%;
  will-change:transform;
}
/* Pausa ao passar o mouse: não distrai durante o uso */
.brand-wrap:hover .brand::before,
.brand-wrap:hover .brand>span{animation-play-state:paused}

/* Logo em imagem (login mobile / auth): só o halo gira, a arte fica estática
   para não perder legibilidade. */
.nitro-mobile-brand img,
.auth-brand-logo,
.brand-logo{position:relative;isolation:isolate}
.nitro-mobile-brand img::after,
.auth-brand-logo::after,
.brand-logo::after{
  content:"";
  position:absolute;
  inset:-34%;
  border-radius:inherit;
  background:conic-gradient(from 0deg,
    rgba(239,53,204,.55), rgba(142,66,255,.5),
    rgba(39,141,255,.5), rgba(0,215,255,.5), rgba(239,53,204,.55));
  filter:blur(10px);
  opacity:.45;
  z-index:-1;
  animation:np-logo-orbit 18s linear infinite;
  pointer-events:none;
}
.brand-logo.preview::after{animation:none;opacity:0}
/* A arte do ícone é escura e ficava apagada em fundo escuro: emoldura e
   ilumina sem alterar o desenho da marca. */
.nitro-mobile-brand img{
  filter:brightness(1.22) saturate(1.1);
  box-shadow:
    0 0 0 1.5px rgba(239,53,204,.5),
    0 0 0 3.5px rgba(0,215,255,.16),
    0 0 18px rgba(111,88,255,.34);
}

@keyframes np-logo-orbit{to{transform:rotate(360deg)}}
@keyframes np-logo-breathe{
  0%,100%{transform:perspective(220px) rotateY(-6deg)}
  50%    {transform:perspective(220px) rotateY(6deg)}
}

/* ---------------------------------------------------------------------------
   5. NAVEGAÇÃO — ícones, alinhamento e estado ativo
   Ícones via máscara SVG: nenhum markup, rota ou lógica alterada.
   ------------------------------------------------------------------------ */
/* A marca ficava com uma "caixa" herdada de uma regra antiga; aqui volta a ser
   um bloco limpo com apenas o filete inferior. */
.brand-wrap{
  border:0!important;
  border-bottom:1px solid rgba(81,139,221,.16)!important;
  padding:6px 2px 16px!important;
  margin-bottom:4px!important;
}
.brand-text h2{font-family:var(--np-font-display);font-weight:700;letter-spacing:-.015em}
.brand-text p{font-size:var(--np-fs-micro);line-height:1.4}

.sidebar nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  font-size:var(--np-fs-sm);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.005em;
  border-radius:var(--np-r-md);
  transition:background var(--np-dur) var(--np-ease),
             border-color var(--np-dur) var(--np-ease),
             color var(--np-dur) var(--np-ease);
}
.sidebar nav a::before{
  content:"";
  flex:0 0 19px;
  width:19px;height:19px;
  background:currentColor;
  opacity:.72;
  -webkit-mask:no-repeat center/contain var(--np-ico,none);
  mask:no-repeat center/contain var(--np-ico,none);
  transition:opacity var(--np-dur) var(--np-ease);
}
.sidebar nav a:hover::before{opacity:1}
.sidebar nav a.active::before{opacity:1}
.sidebar nav a.active{
  font-weight:700;
  letter-spacing:-.01em;
}
/* Trilho do item ativo, alinhado com o texto */
.sidebar nav a.active::after{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:3px;height:22px;
  margin-top:-11px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.25));
}
.sidebar nav a[href$="page=logout"]{color:#ffb3be}
.sidebar nav a[href$="page=logout"]::before{opacity:.55}

/* Mapa de ícones por rota (o link é o mesmo, só muda a arte) */
.sidebar nav a[href$="page=dashboard"]        {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=deposit"]          {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='7' height='6' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='5' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='5' rx='1.6'/%3E%3Cpath d='M14 5h7M14 8.5h7'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=withdraw"]         {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='m7.5 11.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4.5 20.5h15'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=statement"]        {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v3M16 3v3'/%3E%3Cpath d='M8 14h3M8 17.5h6'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=kyc"]              {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.2 2.9 7.9 7 9 4.1-1.1 7-4.8 7-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=affiliate"]        {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3 2.9-4.6 5.5-4.6s4.9 1.6 5.5 4.6'/%3E%3Cpath d='M16.5 7.5h4M16.5 11h4M16.5 14.5h4'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=api_keys"]         {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 8.5-4 3.5 4 3.5M15.5 8.5l4 3.5-4 3.5M13.6 5l-3.2 14'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=docs"]             {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h6a2.5 2.5 0 0 1 2 1 2.5 2.5 0 0 1 2-1h4v13h-4a2.5 2.5 0 0 0-2 1 2.5 2.5 0 0 0-2-1H5Z'/%3E%3Cpath d='M13 5.5v13'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin"]            {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 4.5 6.3v5.1c0 4.4 3.1 8.3 7.5 9.4 4.4-1.1 7.5-5 7.5-9.4V6.3Z'/%3E%3Cpath d='M12 8.6v3.2M12 14.4h.01'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_veopag_topup"]{--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v9M14.6 9.4a3 3 0 0 0-2.6-1.4c-1.6 0-2.7 1-2.7 2.3 0 3 5.4 1.6 5.4 4.6 0 1.4-1.2 2.4-2.8 2.4a3.2 3.2 0 0 1-2.9-1.6'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_users"]      {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3 2.9-4.6 5.5-4.6s4.9 1.6 5.5 4.6'/%3E%3Ccircle cx='17.5' cy='9' r='2.4'/%3E%3Cpath d='M16 14.6c2.7 0 4.4 1.5 4.9 4'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_kyc"]        {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8.5L19 8v12.5H6Z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_transactions"]{--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h13l-3-3M20 17H7l3 3'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_withdrawals"]{--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12.5' rx='2.4'/%3E%3Ccircle cx='12' cy='12.2' r='2.7'/%3E%3Cpath d='M6 9.5v5.4M18 9.5v5.4'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_api_clients"]{--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17.5a4.5 4.5 0 0 1-.6-8.96 6 6 0 0 1 11.4 1.6A3.9 3.9 0 0 1 17.6 17.5Z'/%3E%3Cpath d='M12 12v5M10 14.5 12 17l2-2.5'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_callbacks"]  {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 0 1 13-5.2M19.5 12a7.5 7.5 0 0 1-13 5.2'/%3E%3Cpath d='M17.5 3.5V7H14M6.5 20.5V17H10'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_webhooks"]    {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='18' cy='18' r='2.6'/%3E%3Ccircle cx='18' cy='6' r='2.6'/%3E%3Cpath d='M8.6 6H15.4M6 8.6v6.8a2.6 2.6 0 0 0 2.6 2.6h6.8'/%3E%3Cpath d='M15.4 6 8 18'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_ips"]        {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.2 2.4 3.4 5.4 3.4 8.5S14.2 18.1 12 20.5c-2.2-2.4-3.4-5.4-3.4-8.5S9.8 5.9 12 3.5Z'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=admin_branding"]   {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.3 0 2-.9 2-1.9 0-1.6-1.3-1.8-1.3-3 0-.9.7-1.6 1.7-1.6H16a4.5 4.5 0 0 0 4.5-4.5c0-3.6-3.8-6-8.5-6Z'/%3E%3Ccircle cx='8' cy='10' r='1.1' fill='%23000'/%3E%3Ccircle cx='12' cy='7.8' r='1.1' fill='%23000'/%3E%3Ccircle cx='16' cy='10' r='1.1' fill='%23000'/%3E%3C/svg%3E")}
.sidebar nav a[href$="page=logout"]           {--np-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 8V5.5H4.5v13h10V16'/%3E%3Cpath d='M10 12h10M17 9l3 3-3 3'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------------------
   6. BOTÕES, CAMPOS E ESTADOS
   ------------------------------------------------------------------------ */
.btn,.btn-primary,button,.nitro-login-submit{
  font-family:var(--np-font);
  font-weight:700;
  font-size:var(--np-fs-sm);
  letter-spacing:-.005em;
  border-radius:var(--np-r-md);
  min-height:44px;
  padding:.7rem 1.15rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  line-height:1.2;
  transition:transform var(--np-dur) var(--np-ease),
             filter var(--np-dur) var(--np-ease),
             box-shadow var(--np-dur) var(--np-ease);
}
.btn:hover,.btn-primary:hover,button:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active,.btn-primary:active,button:active{transform:translateY(0) scale(.985)}
button:disabled,.btn[aria-disabled="true"],button[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}
.btn.small,button.small{min-height:38px;padding:.5rem .85rem;font-size:var(--np-fs-xs)}

.field{margin-bottom:var(--np-gap-4)}
.field label,.np-panel label,form label{
  display:block;
  margin-bottom:.4rem;
  font-size:var(--np-fs-xs);
  font-weight:650;
  letter-spacing:.01em;
  color:#c3d4ea;
}
input,select,textarea{
  font-family:var(--np-font);
  font-size:var(--np-fs-sm);
  min-height:46px;
  padding:.65rem .85rem;
  border-radius:var(--np-r-md);
  transition:border-color var(--np-dur) var(--np-ease),
             box-shadow var(--np-dur) var(--np-ease),
             background var(--np-dur) var(--np-ease);
}
textarea{min-height:110px;line-height:1.6}
input[type="color"]{padding:.25rem;min-height:46px;cursor:pointer}
input[type="checkbox"],input[type="radio"]{min-height:0;width:18px;height:18px;accent-color:var(--np-pink)}
input::placeholder,textarea::placeholder{color:#7d94b5;opacity:1}

/* Estado de carregamento dos botões (sem tocar no PHP: só a aparência) */
.btn.is-loading,.btn-primary.is-loading,button.is-loading{
  position:relative;
  color:transparent!important;
  pointer-events:none;
}
.btn.is-loading::after,.btn-primary.is-loading::after,button.is-loading::after{
  content:"";
  position:absolute;
  width:17px;height:17px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  animation:np-spin .7s linear infinite;
}
@keyframes np-spin{to{transform:rotate(360deg)}}

/* Estados de alerta com ícone visual consistente */
.alert{border-radius:var(--np-r-md);font-size:var(--np-fs-sm);line-height:1.6;padding:.9rem 1.05rem}
.alert.success{border-color:rgba(18,216,165,.34)!important;background:linear-gradient(180deg,rgba(18,216,165,.14),rgba(18,216,165,.07))!important}
.alert.error,.alert.danger{border-color:rgba(255,100,120,.36)!important;background:linear-gradient(180deg,rgba(255,100,120,.14),rgba(255,100,120,.07))!important}
.alert.info{border-color:rgba(0,215,255,.28)!important;background:linear-gradient(180deg,rgba(0,215,255,.12),rgba(0,215,255,.06))!important}

/* Códigos copiáveis */
.copy-box,.code-block{
  border-radius:var(--np-r-md);
  padding:.9rem 1rem;
  line-height:1.6;
  word-break:break-all;
}

/* ---------------------------------------------------------------------------
   7. TABELAS — legibilidade e alinhamento de números
   ------------------------------------------------------------------------ */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--np-fs-sm)}
thead th{
  position:sticky;top:0;z-index:2;
  background:#0b1729;
  font-family:var(--np-font);
  font-size:var(--np-fs-micro);
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#a8c0de;
  text-align:left;
  padding:.8rem .9rem;
  white-space:nowrap;
  border-bottom:1px solid rgba(81,139,221,.26);
}
tbody td{padding:.78rem .9rem;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
tbody tr{transition:background var(--np-dur) var(--np-ease)}
tbody tr:hover{background:rgba(0,215,255,.05)}
tbody tr:last-child td{border-bottom:0}
/* Cabeçalho e células usam o mesmo alinhamento, senão a coluna "desalinha"
   entre thead e tbody. Números mantêm figuras tabulares para bater o ponto. */
thead th,tbody td{text-align:left}

/* ---------------------------------------------------------------------------
   8. CARTÕES E PAINÉIS — unidade de espaçamento
   ------------------------------------------------------------------------ */
.card,.profile-card,.hero-box,.mini-box,.np-panel,.np-page-hero,.auth-hero-card{
  border-radius:var(--np-r-lg);
}
.card,.np-panel{padding:1.35rem}
.np-panel h2,.np-panel h3{margin-bottom:.55rem}
.np-kpi{padding:1.05rem 1.1rem}
.np-kpi strong{line-height:1.1}
.stat{padding:1.15rem 1.25rem}

/* Os indicadores usavam glifos de texto (✓ ▣ ⬜ ◎ ⇄) que mudam de desenho
   entre sistemas. Trocados por ícones de traço, sem alterar o texto exibido
   para leitores de tela (continua no DOM, só invisível). */
.np-kpi-icon{font-size:0!important}
.np-kpi-icon::after{
  content:"";
  width:27px;height:27px;
  display:block;
  background:currentColor;
  -webkit-mask:no-repeat center/contain var(--np-kpi-ico);
  mask:no-repeat center/contain var(--np-kpi-ico);
}
.np-kpi--violet{--np-kpi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6.3v5.1c0 4.4 3.1 8.3 7.5 9.4 4.4-1.1 7.5-5 7.5-9.4V6.3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.np-kpi--blue{--np-kpi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.6'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 14.5h4'/%3E%3C/svg%3E")}
.np-kpi--purple{--np-kpi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.4'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3Ccircle cx='12' cy='15.5' r='1.4'/%3E%3C/svg%3E")}
.np-kpi--green{--np-kpi-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Ccircle cx='16.5' cy='10' r='2.4'/%3E%3Cpath d='M3.5 18.5c.6-2.8 2.9-4.3 5.5-4.3 1 0 1.9.2 2.7.6M14 14.6c2.8 0 4.6 1.5 5 3.9'/%3E%3C/svg%3E")}
/* demais marcadores de cartão */
.np-mini-metric,.np-fee-bar,.np-notice{line-height:1.5}
.np-activity-icon{font-size:0!important}
.np-activity-icon::after{
  content:"";
  width:30px;height:30px;
  display:block;
  background:#fff;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.2-3.2M20 16H7l3.2 3.2'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3.2-3.2M20 16H7l3.2 3.2'/%3E%3C/svg%3E");
}

.np-page-head h1{font-size:var(--np-fs-display)}
.np-page-head p{font-size:var(--np-fs-sm);line-height:1.55;max-width:62ch}
.np-eyebrow{font-size:var(--np-fs-micro)}

/* Rodapé sem roubar espaço do conteúdo */
.np-site-footer{
  padding:1.1rem 1.5rem;
  font-size:var(--np-fs-xs);
  border-top:1px solid rgba(81,139,221,.14);
}

/* Botão flutuante não cobre o conteúdo */
.whatsapp-float{font-size:var(--np-fs-xs);font-weight:700}

/* ---------------------------------------------------------------------------
   9. LOGIN — o texto da arte e o placeholder se sobrepunham
   ------------------------------------------------------------------------ */
@media (min-width:861px){
  /* Na arte o texto já está impresso; o placeholder duplicava a dica.
     Seletor mais específico que a folha embutida de login.php, que é
     impressa depois no <body>. */
  body .nitro-login-form .nitro-field input::placeholder,
  body .nitro-login-form .nitro-field input:focus::placeholder{color:transparent}
}
.nitro-mobile-brand{font-family:var(--np-font-display);letter-spacing:-.01em}

/* ---------------------------------------------------------------------------
   10. RESPONSIVO — celular, tablet e desktop
   ------------------------------------------------------------------------ */
@media (max-width:1100px){
  .np-page,.np-dashboard{max-width:100%}
}
@media (max-width:760px){
  :root{--np-fs-body:.925rem}
  .card,.np-panel{padding:1.1rem;border-radius:var(--np-r-md)}
  .np-kpi{padding:.9rem;border-radius:var(--np-r-md)}
  .np-kpi strong{font-size:1.05rem}
  .np-kpi span,.np-mini-metric small{font-size:var(--np-fs-micro)}
  .sidebar nav a{padding:12px 13px}
  .btn,.btn-primary,button{width:100%}
  .actions{display:grid;gap:.55rem;width:100%}
  thead th,tbody td{padding:.68rem .7rem}
  table{font-size:var(--np-fs-xs)}
  .np-site-footer{text-align:center;padding:1rem}
  /* tabela larga vira lista rolável no lugar de estourar a tela */
  .table-wrap{-webkit-overflow-scrolling:touch}

  /* barra superior: a marca estava sendo espremida até virar "NITR…" */
  .mobile-topbar{gap:10px;padding:10px 12px}
  .mobile-topbar strong{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
    font-size:.9375rem;
    font-family:var(--np-font-display);
    letter-spacing:-.01em;
  }
  .mobile-topbar .btn.small{width:auto;flex:0 0 auto;min-height:38px;padding:.45rem .8rem}
}
@media (max-width:420px){
  .np-kpi-grid{grid-template-columns:1fr}
  h1{font-size:1.45rem}
}

/* Paisagem baixa no celular: não deixa a barra fixa cobrir o conteúdo */
@media (max-height:520px) and (max-width:1100px){
  .whatsapp-float{width:52px;height:52px}
}

/* ---------------------------------------------------------------------------
   11. MOVIMENTO REDUZIDO — a marca e as animações ficam estáticas
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .brand::before,.brand>span,
  .nitro-mobile-brand img::after,.auth-brand-logo::after,.brand-logo::after{
    animation:none!important;
    transform:none!important;
    opacity:.32;
  }
  .card:hover,.btn:hover,button:hover{transform:none!important}
}