/* ==========================================================================
   Pagsim — design system
   Paleta derivada da logo: navy #01096d · cyan #31bcff · violet #4f0ee6
   Poppins (display) + Inter (texto/dados) — 100% local
   ========================================================================== */

/* ---------- Fontes locais ---------- */
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-ext-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}

@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}

/* ---------- Tokens de marca (invariantes) ---------- */
:root{
  --ps-navy:#01096d;
  --ps-cyan:#31bcff;
  --ps-mid:#4836ec;
  --ps-violet:#4f0ee6;
  --ps-link:#4836ec;

  --ps-grad: linear-gradient(135deg, var(--ps-cyan) 0%, var(--ps-mid) 62%, var(--ps-violet) 100%);
  --ps-grad-soft: linear-gradient(135deg, rgba(49,188,255,.12), rgba(79,14,230,.12));

  /* semânticos: entrada (a receber) / saída (a pagar) */
  --ps-in:#00b083;
  --ps-out:#f5476b;
  --ps-late:#f59e0b;

  --ps-r-sm:8px; --ps-r:12px; --ps-r-lg:18px; --ps-r-xl:26px;
  --ps-ease: cubic-bezier(.22,.85,.3,1);
  --ps-t: .35s var(--ps-ease);

  --ps-font-display:'Poppins',system-ui,sans-serif;
  --ps-font-body:'Inter',system-ui,-apple-system,sans-serif;
}

/* ---------- Tema claro ---------- */
[data-bs-theme="light"]{
  --ps-bg:#f5f6fc;
  --ps-bg-2:#eceefa;
  --ps-surface:#ffffff;
  --ps-surface-2:#f8f9fe;
  --ps-border:#e2e5f3;
  --ps-border-strong:#cdd2ea;
  --ps-ink:#0b1033;
  --ps-ink-2:#4a5178;
  --ps-ink-3:#6b7299;
  --ps-shadow: 0 1px 2px rgba(1,9,109,.04), 0 8px 24px -8px rgba(1,9,109,.10);
  --ps-shadow-lg: 0 2px 6px rgba(1,9,109,.05), 0 32px 64px -24px rgba(1,9,109,.22);
  --ps-glow: 0 18px 40px -12px rgba(79,14,230,.35);

  --bs-body-bg: var(--ps-bg);
  --bs-body-color: var(--ps-ink);
  --bs-border-color: var(--ps-border);
  --bs-emphasis-color: var(--ps-ink);
}

/* ---------- Tema escuro (base navy, não preto) ---------- */
[data-bs-theme="dark"]{
  --ps-link:#a9b4ff;   /* links legíveis no escuro (o violeta da marca some no fundo) */
  --ps-bg:#050929;
  --ps-bg-2:#0a1040;
  --ps-surface:#0d1440;
  --ps-surface-2:#131b52;
  --ps-border:#1f2a6b;
  --ps-border-strong:#2f3d8f;
  --ps-ink:#eef1ff;
  --ps-ink-2:#bfc6ef;
  --ps-ink-3:#9aa4d2;
  --ps-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --ps-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 32px 64px -24px rgba(0,0,0,.7);
  --ps-glow: 0 18px 44px -12px rgba(49,188,255,.30);

  --ps-in:#1fd6a3;
  --ps-out:#ff6b88;
  --ps-late:#fbbf24;

  --bs-body-bg: var(--ps-bg);
  --bs-body-color: var(--ps-ink);
  --bs-border-color: var(--ps-border);
  --bs-emphasis-color: #fff;
}

/* ---------- Base ---------- */
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--ps-font-body);
  background: var(--ps-bg);
  color: var(--ps-ink);
  font-size: 1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition: background-color .4s var(--ps-ease), color .4s var(--ps-ease);
  overflow-x:hidden;
}
h1,h2,h3,h4,.ps-display{
  font-family: var(--ps-font-display);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.12;
  color: var(--ps-ink);
}
.ps-num{ font-variant-numeric: tabular-nums; letter-spacing:-.01em; }

::selection{ background: rgba(79,14,230,.22); }
[data-bs-theme="dark"] ::selection{ background: rgba(49,188,255,.28); }

:focus-visible{
  outline:2px solid var(--ps-cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Utilitários de marca ---------- */
.ps-grad-text{
  background: var(--ps-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ps-eyebrow{
  font-family: var(--ps-font-body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--ps-ink-3);
  display:inline-flex; align-items:center; gap:.55rem;
}
.ps-eyebrow::before{
  content:''; width:22px; height:2px; border-radius:2px;
  background: var(--ps-grad);
}
.ps-lead{ color:var(--ps-ink-2); font-size:1.075rem; line-height:1.65; }
.ps-muted{ color: var(--ps-ink-3); }

/* ---------- Botões ---------- */
.btn{ font-family:var(--ps-font-body); font-weight:600; border-radius:var(--ps-r); transition: all .25s var(--ps-ease); }
.btn:focus{ box-shadow:none; }

.btn-ps{
  position:relative; border:0; color:#fff;
  background: var(--ps-grad);
  background-size:180% 180%; background-position:0% 50%;
  padding:.72rem 1.5rem;
  box-shadow: var(--ps-glow);
}
.btn-ps:hover{ color:#fff; background-position:100% 50%; transform:translateY(-2px); box-shadow:0 22px 48px -12px rgba(79,14,230,.5); }
.btn-ps:active{ transform:translateY(0); }

.btn-ps-ghost{
  border:1px solid var(--ps-border-strong);
  color: var(--ps-ink);
  background: var(--ps-surface);
  padding:.72rem 1.4rem;
}
.btn-ps-ghost:hover{ border-color:var(--ps-violet); color:var(--ps-ink); background:var(--ps-surface-2); transform:translateY(-2px); }

.btn-lg{ padding:.9rem 1.9rem; font-size:1.02rem; }

/* ---------- Cartões ---------- */
.ps-card{
  background: var(--ps-surface);
  border:1px solid var(--ps-border);
  border-radius: var(--ps-r-lg);
  box-shadow: var(--ps-shadow);
  transition: transform var(--ps-t), box-shadow var(--ps-t), border-color var(--ps-t);
}
.ps-card-hover:hover{ transform:translateY(-4px); box-shadow: var(--ps-shadow-lg); border-color: var(--ps-border-strong); }

/* ---------- Navbar ---------- */
.ps-nav{
  position:sticky; top:0; z-index:1030;
  background: color-mix(in srgb, var(--ps-bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition: border-color var(--ps-t), background var(--ps-t);
}
.ps-nav.is-stuck{ border-bottom-color: var(--ps-border); }
.ps-nav .navbar-brand img{ height:30px; width:auto; display:block; }
.ps-nav .nav-link{
  font-size:.925rem; font-weight:500; color:var(--ps-ink-2);
  padding:.4rem .9rem; border-radius:var(--ps-r-sm);
  transition: color .2s var(--ps-ease), background .2s var(--ps-ease);
}
.ps-nav .nav-link:hover{ color:var(--ps-ink); background:var(--ps-bg-2); }

/* trocador tema / idioma */
.ps-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:38px; padding:0 .7rem;
  border:1px solid var(--ps-border); border-radius:var(--ps-r-sm);
  background: var(--ps-surface); color:var(--ps-ink-2);
  font-size:.85rem; font-weight:500; cursor:pointer; text-decoration:none;
  transition: all .2s var(--ps-ease);
}
.ps-chip:hover{ color:var(--ps-ink); border-color:var(--ps-border-strong); }
.ps-chip svg{ width:17px; height:17px; }

/* ---------- Hero ---------- */
.ps-hero{ position:relative; padding: clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem); }
.ps-hero-aura{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(48% 55% at 18% 32%, rgba(49,188,255,.18), transparent 70%),
    radial-gradient(42% 50% at 82% 20%, rgba(79,14,230,.20), transparent 70%);
  filter: blur(20px);
  pointer-events:none; z-index:0;
}
[data-bs-theme="dark"] .ps-hero-aura{
  background:
    radial-gradient(48% 55% at 18% 32%, rgba(49,188,255,.22), transparent 70%),
    radial-gradient(42% 50% at 82% 20%, rgba(79,14,230,.34), transparent 70%);
}
.ps-hero > .container{ position:relative; z-index:1; }
.ps-h1{ font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight:600; }

/* ---------- Seções ---------- */
.ps-section{ padding: clamp(3.5rem,7vw,6rem) 0; }
.ps-section-alt{ background: var(--ps-bg-2); }

/* ---------- Movimento seguro: anima no CSS, sem depender de JS ----------
   Antes o conteúdo ficava invisível (opacity:0) até o JavaScript "revelar".
   Se o JS não rodasse, a página ficava EM BRANCO. Agora o conteúdo está
   sempre visível e a entrada é uma animação de CSS que roda sozinha. */
.ps-reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .ps-reveal{ animation: psReveal .7s var(--ps-ease) both; }
}
@keyframes psReveal{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .ps-reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   Assinatura: "Fluxo" — linha do tempo do dinheiro
   Entradas sobem, saídas descem, o saldo projetado atravessa no degradê da marca.
   ========================================================================== */
.ps-flow{
  position:relative;
  background: var(--ps-surface);
  border:1px solid var(--ps-border);
  border-radius: var(--ps-r-xl);
  box-shadow: var(--ps-shadow-lg);
  padding: 1.25rem 1.25rem 1rem;
  overflow:hidden;
}
.ps-flow::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background: var(--ps-grad); opacity:.85;
}
.ps-flow-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:.35rem;
}
.ps-flow-title{ font-family:var(--ps-font-display); font-weight:600; font-size:1rem; letter-spacing:-.02em; margin:0; }
.ps-flow-sub{ font-size:.78rem; color:var(--ps-ink-3); margin:0; }

.ps-flow-legend{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.ps-flow-legend span{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--ps-ink-2); font-weight:500; }
.ps-flow-legend i{ width:9px; height:9px; border-radius:3px; display:block; }
.ps-flow-legend .li-in{ background:var(--ps-in); }
.ps-flow-legend .li-out{ background:var(--ps-out); }
.ps-flow-legend .li-bal{ width:16px; height:3px; border-radius:2px; background:var(--ps-grad); }

.ps-flow-svg{ display:block; width:100%; height:auto; overflow:visible; cursor:crosshair; }

.ps-bar{ transition: opacity .18s var(--ps-ease); transform-origin: center; }
.ps-flow-svg:hover .ps-bar{ opacity:.32; }
.ps-flow-svg .ps-bar.is-active,
.ps-flow-svg:not(:hover) .ps-bar{ opacity:1; }

.ps-spine{ stroke: var(--ps-border-strong); stroke-width:1; }
.ps-today{ stroke: var(--ps-ink-3); stroke-width:1; stroke-dasharray:2 3; }
.ps-today-label{ fill: var(--ps-ink-3); font-family:var(--ps-font-body); font-size:9px; font-weight:600; letter-spacing:.08em; }
.ps-axis-label{ fill: var(--ps-ink-3); font-family:var(--ps-font-body); font-size:9.5px; font-weight:500; }

.ps-bal-line{ fill:none; stroke:url(#psGrad); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ps-bal-area{ fill:url(#psGradArea); opacity:.9; }
.ps-cursor{ stroke: var(--ps-violet); stroke-width:1; opacity:0; transition:opacity .15s; }
.ps-cursor.is-on{ opacity:.55; }
.ps-dot{ opacity:0; transition:opacity .15s; }
.ps-dot.is-on{ opacity:1; }

/* saldo negativo destacado */
.ps-danger-zone{ fill: var(--ps-out); opacity:.07; }

.ps-flow-tip{
  position:absolute; z-index:5; pointer-events:none;
  min-width:158px; padding:.6rem .7rem;
  background: var(--ps-surface); color:var(--ps-ink);
  border:1px solid var(--ps-border-strong); border-radius:var(--ps-r);
  box-shadow: var(--ps-shadow-lg);
  opacity:0; transform: translate(-50%, -8px) scale(.96);
  transition: opacity .16s var(--ps-ease), transform .16s var(--ps-ease);
}
.ps-flow-tip.is-on{ opacity:1; transform: translate(-50%, -12px) scale(1); }
.ps-flow-tip .t-day{ font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ps-ink-3); }
.ps-flow-tip .t-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; margin-top:.25rem; }
.ps-flow-tip .t-row b{ font-weight:600; font-variant-numeric:tabular-nums; }
.ps-flow-tip .t-in b{ color:var(--ps-in); }
.ps-flow-tip .t-out b{ color:var(--ps-out); }
.ps-flow-tip .t-bal{ border-top:1px solid var(--ps-border); margin-top:.4rem; padding-top:.35rem; }

/* rodapé de números do fluxo */
.ps-flow-foot{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap:.75rem; margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--ps-border);
}
.ps-flow-stat .k{ font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ps-ink-3); display:block; }
.ps-flow-stat .v{
  font-family:var(--ps-font-display); font-weight:600; font-size:1.15rem;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:block; margin-top:.1rem;
}
.ps-flow-stat .v.in{ color:var(--ps-in); }
.ps-flow-stat .v.out{ color:var(--ps-out); }

/* seletor de espaço acoplado ao fluxo — mostra "moeda por espaço" na prática */
.ps-space-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.ps-space-tab{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.34rem .7rem; border-radius:999px;
  border:1px solid var(--ps-border); background:var(--ps-surface-2);
  font-size:.78rem; font-weight:500; color:var(--ps-ink-2); cursor:pointer;
  transition: all .22s var(--ps-ease);
}
.ps-space-tab .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.6; }
.ps-space-tab:hover{ color:var(--ps-ink); border-color:var(--ps-border-strong); }
.ps-space-tab.is-on{
  color:#fff; border-color:transparent; background:var(--ps-grad);
  box-shadow:0 6px 16px -6px rgba(79,14,230,.5);
}
.ps-space-tab.is-on .dot{ opacity:1; }
.ps-space-tab .cur{ font-size:.68rem; opacity:.75; font-variant-numeric:tabular-nums; }

@media (max-width: 575.98px){
  .ps-flow{ padding:1rem .85rem .85rem; }
  .ps-flow-foot{ grid-template-columns:1fr; gap:.5rem; }
  .ps-flow-stat{ display:flex; justify-content:space-between; align-items:baseline; }
}

/* ícone do trocador de tema: mostra o destino, não o estado atual */
.ps-chip .ps-i-sun,.ps-chip .ps-i-moon{ display:none; width:17px; height:17px; }
[data-bs-theme="light"] .ps-chip .ps-i-moon{ display:block; }
[data-bs-theme="dark"]  .ps-chip .ps-i-sun{ display:block; }

/* ==========================================================================
   Telas de autenticação
   ========================================================================== */
.ps-auth-body{ min-height:100dvh; display:flex; }
.ps-auth-aura{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(42% 38% at 15% 8%, rgba(49,188,255,.16), transparent 70%),
    radial-gradient(40% 40% at 88% 92%, rgba(79,14,230,.16), transparent 70%);
}
[data-bs-theme="dark"] .ps-auth-aura{
  background:
    radial-gradient(42% 38% at 15% 8%, rgba(49,188,255,.14), transparent 70%),
    radial-gradient(44% 44% at 88% 92%, rgba(79,14,230,.30), transparent 70%);
}
.ps-auth-wrap{
  position:relative; z-index:1; flex:1;
  display:flex; flex-direction:column;
  width:100%; max-width:440px; margin:0 auto; padding:calc(1.25rem + env(safe-area-inset-top, 0px)) 1.15rem 2.5rem;
}
.ps-auth-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:auto; }
.ps-auth-top img{ height:26px; width:auto; display:block; }
.ps-auth-main{ margin:2.25rem 0 auto; }

.ps-auth-card{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  position:relative;
}
.ps-auth-card::before{ display:none; }
.ps-auth-card h1{ font-size:1.55rem; margin:0 0 .35rem; }
.ps-auth-card .sub{ color:var(--ps-ink-2); font-size:.92rem; margin:0 0 1.5rem; line-height:1.6; }
.ps-auth-below{ text-align:center; font-size:.86rem; color:var(--ps-ink-3); margin:1.15rem 0 0; }
.ps-auth-below a{ color:var(--ps-ink-2); font-weight:500; }

/* campos */
.ps-field{ margin-bottom:1rem; position:relative; }
.ps-label{
  display:block; font-size:.78rem; font-weight:600; color:var(--ps-ink-2);
  margin-bottom:.4rem; letter-spacing:-.01em;
}
.ps-input{
  width:100%; height:46px; padding:0 .9rem;
  font-family:var(--ps-font-body); font-size:.95rem; color:var(--ps-ink);
  background:var(--ps-surface-2);
  border:1px solid var(--ps-border); border-radius:var(--ps-r);
  transition:border-color .2s var(--ps-ease), box-shadow .2s var(--ps-ease), background .2s var(--ps-ease);
}
.ps-input::placeholder{ color:var(--ps-ink-3); }
.ps-input:focus{
  outline:none; background:var(--ps-surface);
  border-color:var(--ps-mid);
  box-shadow:0 0 0 3px rgba(72,54,236,.14);
}
.ps-field.has-error .ps-input{ border-color:var(--ps-out); }
.ps-field.has-error .ps-input:focus{ box-shadow:0 0 0 3px rgba(245,71,107,.14); }
.ps-hint{ font-size:.76rem; color:var(--ps-ink-3); margin:.35rem 0 0; }
.ps-err{ font-size:.76rem; color:var(--ps-out); margin:.35rem 0 0; font-weight:500; }

.ps-eye{
  position:absolute; right:6px; top:26px; width:36px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--ps-ink-3); cursor:pointer; border-radius:8px;
}
.ps-eye:hover{ color:var(--ps-ink-2); }
.ps-eye svg{ width:18px; height:18px; }
.ps-eye.is-off svg{ opacity:.45; }

/* avisos */
.ps-alert{
  border-radius:var(--ps-r); padding:.8rem .9rem; margin-bottom:1.15rem;
  font-size:.86rem; line-height:1.55; border:1px solid;
}
.ps-alert-error{ background:rgba(245,71,107,.08); border-color:rgba(245,71,107,.28); color:var(--ps-ink); }
.ps-alert-info{ background:var(--ps-grad-soft); border-color:var(--ps-border-strong); color:var(--ps-ink); }
.ps-alert-ok{ background:rgba(0,176,131,.08); border-color:rgba(0,176,131,.3); color:var(--ps-ink); }

/* código de 6 dígitos: um input real, visual de caixinhas */
.ps-code{
  width:100%; height:64px;
  font-family:var(--ps-font-body); font-size:1.9rem; font-weight:600;
  text-align:center; letter-spacing:.7em; text-indent:.7em;
  color:var(--ps-ink); background:var(--ps-surface-2);
  border:1px solid var(--ps-border); border-radius:var(--ps-r);
  font-variant-numeric:tabular-nums;
}
.ps-code:focus{
  outline:none; background:var(--ps-surface);
  border-color:var(--ps-mid); box-shadow:0 0 0 3px rgba(72,54,236,.14);
}
.ps-code::placeholder{ color:var(--ps-ink-3); opacity:.4; }

.ps-auth-card .btn-ps{ width:100%; height:46px; }
.ps-sep{
  display:flex; align-items:center; gap:.75rem;
  margin:1.15rem 0; color:var(--ps-ink-3); font-size:.78rem;
}
.ps-sep::before,.ps-sep::after{ content:''; flex:1; height:1px; background:var(--ps-border); }

.ps-inline-link{
  background:none; border:0; padding:0; font:inherit; font-size:.84rem;
  color:var(--ps-link); font-weight:500; cursor:pointer; text-decoration:none;
}
.ps-inline-link:hover{ text-decoration:underline; }
.ps-inline-link[disabled]{ color:var(--ps-ink-3); cursor:default; text-decoration:none; }

@media (max-width:420px){
  .ps-auth-card{ padding:0; }
  .ps-auth-card h1{ font-size:1.35rem; }
}

/* ==========================================================================
   Painel — trilha à esquerda no desktop, barra embaixo no celular
   ========================================================================== */
.ps-app{ min-height:100dvh; background:var(--ps-bg); }
@media (min-width:992px){ .ps-app{ display:grid; grid-template-columns:264px 1fr; } }
/* Modo enxuto (hub): sem rail, uma coluna só, em qualquer largura. */
.ps-app.ps-bare{ display:block; }
/* No modo foco (perfil, criar/gerenciar espaço) o conteúdo ocupa a largura
   toda — sem a sobra à direita que sobrava em telas grandes. */
.ps-app.ps-bare .ps-content{ max-width:none; }

/* Ícone da Pagsim no header. Fica escondido no desktop quando existe o rail
   (que já mostra o ícone); aparece no celular e nas páginas em modo foco. */
.ps-topbar-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.ps-topbar-logo img{ display:block; }
@media (min-width:992px){ .ps-app:not(.ps-bare) .ps-topbar-logo{ display:none; } }

/* Botão do header apenas com ícone (voltar ao hub). */
.ps-chip-btn.ps-icon-only{ padding:.4rem; width:2.2rem; height:2.2rem; justify-content:center; }
.ps-chip-btn.ps-icon-only svg{ width:18px; height:18px; }

/* Hub inicial: grade de cartões (espaços + criar + perfil + afiliados). */
.ps-hub{ max-width:60rem; margin:0 auto; padding:1.5rem 1.1rem 3rem; }
.ps-hub-head{ margin:.5rem 0 1.4rem; }
.ps-hub-logo{ display:block; margin:0 0 1.4rem; }
.ps-hub-grid{ display:grid; gap:.9rem; grid-template-columns:1fr; }
@media (min-width:560px){ .ps-hub-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .ps-hub-grid{ grid-template-columns:1fr 1fr 1fr; } }
.ps-hub-card{
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r-lg); padding:1.15rem; color:var(--ps-ink);
  transition:border-color .16s var(--ps-ease), transform .16s var(--ps-ease), box-shadow .16s var(--ps-ease);
}
.ps-hub-card:hover{
  border-color:var(--ps-border-strong); transform:translateY(-2px);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.18); color:var(--ps-ink);
}
.ps-hub-ic{
  width:2.6rem; height:2.6rem; border-radius:12px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ps-grad-soft); color:var(--ps-mid);
}
.ps-hub-ic svg{ width:20px; height:20px; }
.ps-hub-dot{ width:2.6rem; height:2.6rem; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.15rem; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.25); }
.ps-hub-title{ font-weight:700; font-size:1rem; }
.ps-hub-sub{ color:var(--ps-ink-3); font-size:.82rem; line-height:1.4; }
/* Cartão de ação (criar/perfil/afiliados) num tom mais discreto. */
.ps-hub-card.is-action{ border-style:dashed; }

.ps-rail{
  background:var(--ps-surface); border-right:1px solid var(--ps-border);
  display:flex; flex-direction:column; gap:1rem; padding:1rem .85rem;
  position:fixed; inset:0 auto 0 0; width:264px; z-index:60;
  transform:translateX(-100%); transition:transform .24s var(--ps-ease);
}
.ps-rail.is-open{ transform:none; }
@media (min-width:992px){ .ps-rail{ position:sticky; top:0; height:100dvh; transform:none; } }
.ps-rail-top{ display:flex; flex-direction:column; gap:.9rem; }
.ps-rail-logo img{ height:24px; width:auto; display:block; }
.ps-rail-nav{ display:flex; flex-direction:column; gap:2px; }
.ps-rail-item{
  display:flex; align-items:center; gap:.65rem; padding:.6rem .7rem;
  border-radius:10px; color:var(--ps-ink-2); font-size:.9rem; font-weight:500;
  text-decoration:none; transition:background .15s, color .15s;
}
.ps-rail-item svg{ width:18px; height:18px; flex:none; opacity:.75; }
.ps-rail-item:hover{ background:var(--ps-surface-2); color:var(--ps-ink); }
.ps-rail-item.is-active{ background:var(--ps-grad-soft); color:var(--ps-ink); font-weight:600; }
.ps-rail-item.is-active svg{ opacity:1; color:var(--ps-mid); }
.ps-rail-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:.6rem; }
.ps-rail-veil{ position:fixed; inset:0; background:rgba(4,7,32,.5); z-index:55; }
@media (min-width:992px){ .ps-rail-veil{ display:none; } }

/* seletor de espaço */
.ps-space-btn, .ps-user{
  width:100%; display:flex; align-items:center; gap:.55rem;
  padding:.55rem .65rem; background:var(--ps-surface-2);
  border:1px solid var(--ps-border); border-radius:10px;
  color:var(--ps-ink); font-size:.88rem; font-weight:500; text-align:left;
}
.ps-space-btn:hover, .ps-user:hover{ border-color:var(--ps-border-strong); }
.ps-space-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.ps-space-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-space-cur{
  font-size:.66rem; font-weight:700; letter-spacing:.04em;
  color:var(--ps-ink-3); background:var(--ps-bg);
  padding:.1rem .35rem; border-radius:5px; flex:none;
}
.ps-space-chev{ width:14px; height:14px; flex:none; opacity:.5; }
.ps-space-menu{ min-width:240px; }
.ps-space-menu .dropdown-item{ display:flex; align-items:center; gap:.5rem; }
.ps-avatar{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--ps-grad); color:#fff;
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
}
.ps-user-name{ flex:1; }

/* cota */
.ps-quota{
  display:block; padding:.6rem .7rem; border-radius:10px;
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  text-decoration:none;
}
.ps-quota-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.72rem; color:var(--ps-ink-3); margin-bottom:.4rem;
}
.ps-quota-head .ps-num{ color:var(--ps-ink-2); font-weight:600; }
.ps-quota-bar{ height:4px; background:var(--ps-border); border-radius:99px; overflow:hidden; }
.ps-quota-bar i{ display:block; height:100%; background:var(--ps-grad); border-radius:99px; }
.ps-quota.is-free .ps-quota-head{ margin:0; }

/* Uso do plano DENTRO da assinatura (R2.14). Mesmo visual da barrinha que
   estava no menu, agora onde ela faz sentido: ao lado do limite do plano. */
.ps-uso{ margin:.2rem 0 .3rem; }
.ps-uso-head{ display:flex; justify-content:space-between; align-items:baseline;
              font-size:.85rem; margin-bottom:.35rem; }
.ps-uso-head .ps-num{ font-variant-numeric:tabular-nums; color:var(--ps-ink-2); }
.ps-uso-bar{ height:6px; background:var(--ps-border); border-radius:99px; overflow:hidden; }
.ps-uso-bar i{ display:block; height:100%; background:var(--ps-grad); border-radius:99px; }

/* área principal */
.ps-main{ min-width:0; display:flex; flex-direction:column; }
.ps-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.1rem; background:var(--ps-surface);
  border-bottom:1px solid var(--ps-border);
}
.ps-page-title{ font-size:1.05rem; margin:0; flex:1; font-weight:600; }
.ps-topbar-actions{ display:flex; gap:.5rem; align-items:center; }
.ps-burger{
  width:36px; height:36px; display:grid; place-items:center;
  background:none; border:1px solid var(--ps-border); border-radius:9px; color:var(--ps-ink-2);
}
.ps-burger svg{ width:18px; height:18px; }
@media (min-width:992px){ .ps-burger{ display:none; } }
.ps-content{ padding:1.1rem; max-width:1180px; width:100%; }
@media (min-width:768px){ .ps-content{ padding:1.5rem; } }

/* faixas e recados */
.ps-banner{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.65rem 1.1rem; font-size:.86rem; border-bottom:1px solid var(--ps-border);
}
.ps-banner a{ font-weight:600; color:inherit; }
.ps-banner-trial{ background:var(--ps-grad-soft); color:var(--ps-ink); }
.ps-banner-warn{ background:rgba(255,159,28,.13); color:var(--ps-ink); }
.ps-banner-stop{ background:rgba(245,71,107,.1); color:var(--ps-ink); }
.ps-flash{
  margin:1.1rem 1.1rem 0; padding:.7rem .9rem; border-radius:10px;
  font-size:.87rem; border:1px solid;
}
.ps-flash-ok{ background:rgba(0,176,131,.09); border-color:rgba(0,176,131,.3); color:var(--ps-ink); }
.ps-flash-error{ background:rgba(245,71,107,.09); border-color:rgba(245,71,107,.3); color:var(--ps-ink); }
.ps-flash-info{ background:var(--ps-grad-soft); border-color:var(--ps-border-strong); color:var(--ps-ink); }

/* pílulas de status: cor + palavra, nunca só cor */
.ps-pill{
  display:inline-block; padding:.16rem .5rem; border-radius:99px;
  font-size:.72rem; font-weight:600; white-space:nowrap;
}
.ps-pill-neutral{ background:var(--ps-surface-2); color:var(--ps-ink-2); border:1px solid var(--ps-border); }
.ps-pill-in{ background:rgba(0,176,131,.12); color:#00815f; }
.ps-pill-out{ background:rgba(72,54,236,.12); color:var(--ps-mid); }
.ps-pill-late{ background:rgba(245,158,11,.15); color:#a86400; }
.ps-pill-off{ background:var(--ps-surface-2); color:var(--ps-ink-3); text-decoration:line-through; }
[data-bs-theme="dark"] .ps-pill-in{ color:#3ee5b4; }
[data-bs-theme="dark"] .ps-pill-late{ color:#fbbf4a; }
[data-bs-theme="dark"] .ps-pill-out{ color:#a99cff; }

/* ---------------------------------------------------- selo de afiliado
   Selo "premium" no gradiente da marca, usado no site e no painel. O selo
   base (Afiliado) é mais discreto; o Influenciador ganha o gradiente cheio,
   um brilho sutil e um anel — para o nível mais alto se destacar. */
.ps-selo{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.34rem .8rem .34rem .5rem; border-radius:99px;
  font-size:.82rem; font-weight:700; line-height:1; white-space:nowrap;
  letter-spacing:.01em; position:relative; isolation:isolate;
}
.ps-selo-ic{ display:inline-flex; width:1.15rem; height:1.15rem; flex:none; }
.ps-selo-ic svg{ width:100%; height:100%; display:block; }
.ps-selo-txt{ position:relative; z-index:1; }

/* Nível 1 — Afiliado: contorno com o gradiente suave, texto na cor da marca. */
.ps-selo-base{
  color:var(--ps-mid);
  background:var(--ps-grad-soft);
  border:1px solid rgba(79,14,230,.30);
}
[data-bs-theme="dark"] .ps-selo-base{ color:#b9c2ff; border-color:rgba(169,180,255,.35); }

/* Nível 2 — Afiliado Influenciador: gradiente cheio da marca, texto branco,
   um leve brilho por cima e uma sombra colorida para dar o ar "premium". */
.ps-selo-influ{
  color:#fff;
  background:var(--ps-grad);
  border:1px solid transparent;
  box-shadow:0 4px 14px -4px rgba(79,14,230,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
/* Brilho diagonal sutil que atravessa o selo. */
.ps-selo-influ::after{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:linear-gradient(120deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 42%);
  pointer-events:none;
}
.ps-selo-influ .ps-selo-ic{ color:#fff; }

/* Variante compacta, para caber ao lado de títulos no painel. */
.ps-selo-sm{ font-size:.72rem; padding:.26rem .6rem .26rem .4rem; gap:.35rem; }
.ps-selo-sm .ps-selo-ic{ width:1rem; height:1rem; }

/* Lista de saques mínimos por moeda (página de afiliados do site). */
.ps-af-min-list{ display:inline-flex; flex-wrap:wrap; gap:.3rem; margin-left:.15rem; vertical-align:middle; }
.ps-af-min-chip{
  display:inline-block; padding:.08rem .45rem; border-radius:99px;
  font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--ps-grad-soft); color:var(--ps-mid);
  border:1px solid rgba(79,14,230,.22);
}
[data-bs-theme="dark"] .ps-af-min-chip{ color:#b9c2ff; border-color:rgba(169,180,255,.3); }

/* cartões de número */
.ps-stats{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:1.2rem; }
.ps-stat{ background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); padding:1rem 1.1rem; }
.ps-stat-k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ps-ink-3); font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.ps-stat-v{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:.35rem 0 0; font-variant-numeric:tabular-nums; }
.ps-stat-v.is-in{ color:var(--ps-in); }
.ps-stat-v.is-out{ color:var(--ps-out); }
.ps-stat-v.is-neg{ color:var(--ps-out); }
.ps-stat-sub{ font-size:.75rem; color:var(--ps-ink-3); margin:.25rem 0 0; }
.ps-stat-sub.is-late{ color:var(--ps-late); font-weight:500; }

/* tabela */
.ps-table-wrap{ background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); overflow:hidden; }
.ps-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.ps-table th{
  text-align:left; padding:.7rem .9rem; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ps-ink-3);
  border-bottom:1px solid var(--ps-border); white-space:nowrap;
}
.ps-table td{ padding:.75rem .9rem; border-bottom:1px solid var(--ps-border); vertical-align:middle; }
.ps-table tr:last-child td{ border-bottom:0; }
.ps-table tbody tr:hover{ background:var(--ps-surface-2); }
.ps-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ps-table .is-in{ color:var(--ps-in); font-weight:600; }
.ps-table .is-out{ color:var(--ps-out); font-weight:600; }
.ps-tx-desc{ font-weight:500; color:var(--ps-ink); text-decoration:none; }
.ps-tx-desc:hover{ color:var(--ps-mid); }
.ps-tx-meta{ display:flex; gap:.4rem; align-items:center; margin-top:.15rem; color:var(--ps-ink-3); font-size:.74rem; }
.ps-tx-meta svg{ width:12px; height:12px; }
.ps-cat-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:.35rem; }
@media (max-width:767px){
  .ps-table thead{ display:none; }
  .ps-table tr{ display:grid; grid-template-columns:1fr auto; gap:.2rem .6rem; padding:.75rem .9rem; border-bottom:1px solid var(--ps-border); }
  .ps-table td{ border:0; padding:0; }
  .ps-table td[data-mob="hide"]{ display:none; }
  .ps-table td.num{ text-align:right; }
}

/* formulários do painel */
.ps-form-card{ background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); padding:1.25rem; }
.ps-grid2{ display:grid; gap:0 1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .ps-grid2{ grid-template-columns:1fr 1fr; } }
.ps-grid3{ display:grid; gap:0 1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .ps-grid3{ grid-template-columns:1fr 1fr 1fr; } }
.ps-adm-h{ font-size:.95rem; font-weight:600; margin:0 0 .8rem; color:var(--ps-ink); }
.ps-select{
  width:100%; height:46px; padding:0 .9rem; font-family:var(--ps-font-body); font-size:.95rem;
  color:var(--ps-ink); background:var(--ps-surface-2);
  border:1px solid var(--ps-border); border-radius:var(--ps-r);
}
.ps-select:focus{ outline:none; border-color:var(--ps-mid); box-shadow:0 0 0 3px rgba(72,54,236,.14); }
textarea.ps-input{ height:auto; padding:.7rem .9rem; resize:vertical; min-height:84px; }
.ps-money-wrap{ position:relative; }
.ps-money-wrap .cur{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--ps-ink-3); font-size:.9rem; pointer-events:none;
}
.ps-money-wrap .ps-input{ padding-left:2.6rem; font-variant-numeric:tabular-nums; }

/* vazio */
.ps-empty{ text-align:center; padding:3rem 1rem; }
.ps-empty h3{ font-size:1.05rem; margin:0 0 .3rem; }
.ps-empty p{ color:var(--ps-ink-3); font-size:.88rem; margin:0 0 1.1rem; }

.ps-section-h{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.5rem 0 .7rem; }
.ps-section-h h2{ font-size:1rem; margin:0; font-weight:600; }
.ps-chip-btn{
  display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .7rem;
  background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:9px;
  color:var(--ps-ink-2); font-size:.82rem; font-weight:500; text-decoration:none;
}
.ps-chip-btn:hover{ border-color:var(--ps-border-strong); color:var(--ps-ink); }
.ps-chip-btn svg{ width:14px; height:14px; }
.ps-chip-btn.is-danger{ color:var(--ps-out); border-color:rgba(245,71,107,.3); }
.ps-chip-btn.is-danger:hover{ color:var(--ps-out); border-color:var(--ps-out); background:rgba(245,71,107,.1); }

/* Dentro dos modais, o botão principal (gradiente) e o vermelho mantêm o texto
   branco em qualquer tela — no celular o texto chegava a sair preto. */
.ps-modal .btn-ps,
.ps-modal .btn-ps:hover,
.ps-status-opts .btn-ps{ color:#fff; }
.ps-modal .btn-ps-danger,
.ps-modal .btn-ps-danger:hover{ color:#fff; background:var(--ps-out); }

/* ==========================================================================
   Administração — barra no topo, sem trilha: aqui não existe espaço ativo
   ========================================================================== */
.ps-admin{ min-height:100dvh; background:var(--ps-bg); }
.ps-adm-bar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1.1rem; background:var(--ps-surface);
  border-bottom:1px solid var(--ps-border); position:sticky; top:0; z-index:40;
}
.ps-adm-logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.ps-adm-tag{
  font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--ps-grad); padding:.15rem .4rem; border-radius:5px;
}
.ps-adm-nav{ display:flex; gap:.15rem; flex:1; flex-wrap:wrap; }
.ps-adm-item{
  padding:.4rem .7rem; border-radius:8px; font-size:.86rem; font-weight:500;
  color:var(--ps-ink-2); text-decoration:none;
}
.ps-adm-item:hover{ background:var(--ps-surface-2); color:var(--ps-ink); }
.ps-adm-item.is-active{ background:var(--ps-grad-soft); color:var(--ps-ink); font-weight:600; }
.ps-adm-main{ padding:1.2rem; max-width:1100px; margin:0 auto; }
.ps-adm-note{
  padding:.7rem .9rem; border-radius:9px; font-size:.85rem;
  background:var(--ps-grad-soft); border:1px solid var(--ps-border-strong);
  color:var(--ps-ink-2); margin-bottom:1rem;
}
.ps-cert{
  display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem;
  border-radius:9px; font-size:.85rem; border:1px solid var(--ps-border);
  background:var(--ps-surface-2); margin-bottom:.6rem;
}
.ps-cert.is-ok{ border-color:rgba(0,176,131,.35); }
.ps-cert.is-miss{ border-color:rgba(245,158,11,.4); }

/* --------------------------------------------------------------- modais
   O <dialog> nativo já trava o foco e trata o ESC. Aqui é só a aparência. */
.ps-modal{
  border:0; padding:0; background:transparent;
  max-width:min(94vw, 27rem); width:100%;
  color:var(--ps-ink);
}
.ps-modal::backdrop{ background:rgba(11,16,51,.42); backdrop-filter:blur(2px); }
.ps-modal-box{
  background:var(--ps-surface);
  border:1px solid var(--ps-border);
  border-radius:var(--ps-r-lg);
  box-shadow:var(--ps-shadow-lg);
  padding:1.4rem;
}
/* R2.4: um fio no topo dá o tom da mensagem sem gritar — verde de sucesso,
   vermelho de erro. Discreto: a mensagem é o que importa, não a moldura. */
.ps-modal-box.is-ok    { border-top:3px solid var(--ps-in); }
.ps-modal-box.is-error { border-top:3px solid var(--ps-out); }
.ps-modal-title{ font-size:1.02rem; font-weight:600; margin:0 0 .4rem; letter-spacing:-.01em; }
.ps-modal-text{ font-size:.93rem; color:var(--ps-ink-2); margin:0 0 1.3rem; line-height:1.5; }
.ps-modal-acts{ display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap; margin-top:1.2rem; }
.ps-modal-acts .btn{ padding:.6rem 1.2rem; font-size:.92rem; }

/* Escolha entre várias opções: empilhadas e alinhadas à esquerda.
   Lado a lado, "Só esta / Esta e as 5 futuras / Todas as 8" viram três blocos
   de largura diferente que o olho compara errado — e a pressa apaga o mês certo
   pelo botão errado. Empilhado, cada uma é uma frase que se lê. */
.ps-modal-acts.is-column{ flex-direction:column; align-items:stretch; gap:.45rem; }
.ps-modal-acts.is-column .btn{ justify-content:flex-start; text-align:left; width:100%; }
/* O cancelar não é uma das opções: respira longe delas. */
.ps-modal-acts.is-column .btn.is-cancel{ margin-top:.35rem; justify-content:center; opacity:.85; }
/* Fecha rápido: uma animação lenta num "tem certeza?" atrasa quem já decidiu. */
.ps-modal[open]{ animation:ps-modal-in .14s ease-out; }
@keyframes ps-modal-in{ from{ opacity:0; transform:translateY(-6px) scale(.99); } }
@media (prefers-reduced-motion:reduce){ .ps-modal[open]{ animation:none; } }

/* Botão de ação destrutiva. Vermelho chapado, sem o gradiente do btn-ps:
   "Excluir" não pode parecer o botão de continuar. */
.btn-ps-danger{
  border:0; color:#fff; background:var(--ps-out);
  padding:.72rem 1.5rem;
  box-shadow:0 8px 24px -10px rgba(245,71,107,.7);
}
.btn-ps-danger:hover{ color:#fff; background:var(--ps-out); filter:brightness(1.06); transform:translateY(-2px); }
.btn-ps-danger:focus-visible{ color:#fff; background:var(--ps-out); }
.btn-ps-danger:active{ transform:translateY(0); }

/* ----------------------------------------------------------- botão + (fab)
   Fica acima da trilha do celular e respeita a área segura do iPhone —
   senão o botão nasce embaixo da barra de gestos e ninguém alcança. */
.ps-fab-wrap{
  position:fixed; right:1.1rem; z-index:40;
  bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem;
}
.ps-fab{
  width:3.5rem; height:3.5rem; border-radius:50%; border:0;
  display:grid; place-items:center; cursor:pointer;
  background:var(--ps-grad); color:#fff;
  box-shadow:var(--ps-glow), var(--ps-shadow-lg);
  transition:transform .16s ease, box-shadow .16s ease;
}
.ps-fab:hover{ transform:translateY(-2px) scale(1.03); color:#fff; }
.ps-fab:active{ transform:translateY(0) scale(.97); }
.ps-fab svg{ width:1.5rem; height:1.5rem; transition:transform .18s ease; }
.ps-fab-wrap.is-open .ps-fab svg{ transform:rotate(45deg); }   /* o + vira × */

.ps-fab-menu{
  display:flex; flex-direction:column; gap:.35rem;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); box-shadow:var(--ps-shadow-lg);
  padding:.4rem; min-width:12rem;
  animation:ps-fab-in .13s ease-out;
}
@keyframes ps-fab-in{ from{ opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce){ .ps-fab-menu{ animation:none; } .ps-fab{ transition:none; } }
.ps-fab-item{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.6rem .7rem; border-radius:var(--ps-r-sm);
  color:var(--ps-ink); font-size:.92rem; font-weight:500;
}
.ps-fab-item:hover{ background:var(--ps-surface-2); color:var(--ps-ink); }
.ps-fab-item svg{ width:1.05rem; height:1.05rem; color:var(--ps-ink-3); flex:none; }

/* O + no cabeçalho (R2.1): o botão traz texto ao lado do sinal, e o menu abre
   PARA BAIXO a partir do topo — não flutua de baixo pra cima como o FAB. */
.ps-add-inline{ display:inline-flex; align-items:center; gap:.4rem; }
.ps-add-inline svg{ width:1.05rem; height:1.05rem; }
.ps-add-wrap{ position:relative; }
.ps-fab-menu.is-inline{
  position:absolute; top:calc(100% + .4rem); right:0; z-index:1030;
  animation:ps-inline-in .13s ease-out;
}
/* Enquanto o menu do "+" está aberto, a topbar sobe acima da barra de espaço
   do celular (z-index 1020) — senão o menu abre atrás dela e fica escondido.
   Fora desse momento a topbar volta ao normal (40), para não cobrir o menu
   lateral (rail) quando ele abre. */
.ps-topbar:has(.ps-add-wrap.is-open){ z-index:1030; }
/* navegadores sem :has() — a classe no wrap eleva o próprio wrap */
.ps-add-wrap.is-open{ z-index:1030; }
@keyframes ps-inline-in{ from{ opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .ps-fab-menu.is-inline{ animation:none; } }

/* No celular a trilha inferior ocupa o rodapé: o + sobe para não cobri-la. */
@media (max-width:860px){
  .ps-fab-wrap{ bottom:calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------- upload
   O input fica escondido mas PRESENTE: sem JS, ainda é um seletor que
   funciona. display:none o tiraria do formulário. */
.ps-up-drop{
  position:relative; cursor:pointer;
  border:1.5px dashed var(--ps-border-strong); border-radius:var(--ps-r);
  background:var(--ps-surface-2);
  padding:1.5rem 1rem; text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.ps-up-drop:hover, .ps-up-drop:focus-visible{ border-color:var(--ps-violet); background:var(--ps-surface); }
.ps-up-drop.is-over{ border-color:var(--ps-violet); background:var(--ps-surface); border-style:solid; }
.ps-up-drop.is-full{ opacity:.55; }
.ps-up-drop input[type=file]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.ps-up-face{ display:flex; flex-direction:column; align-items:center; gap:.25rem; pointer-events:none; }
.ps-up-face svg{ width:1.6rem; height:1.6rem; color:var(--ps-ink-3); margin-bottom:.2rem; }
.ps-up-face b{ font-size:.92rem; font-weight:600; }
.ps-up-face span{ font-size:.8rem; color:var(--ps-ink-3); }

.ps-up-list{ display:flex; flex-direction:column; gap:.35rem; margin-top:.6rem; }
.ps-up-list:empty{ margin-top:0; }
.ps-up-item{
  display:flex; align-items:center; gap:.6rem;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r-sm); padding:.5rem .6rem; font-size:.87rem;
}
.ps-up-item.is-bad{ border-color:rgba(245,71,107,.45); background:rgba(245,71,107,.05); }
.ps-up-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-up-meta{ color:var(--ps-ink-3); font-size:.78rem; flex:none; }
.ps-up-item.is-bad .ps-up-meta{ color:var(--ps-out); }
.ps-up-x{
  border:0; background:transparent; color:var(--ps-ink-3);
  padding:.15rem; line-height:0; border-radius:6px; cursor:pointer; flex:none;
}
.ps-up-x:hover{ color:var(--ps-out); background:rgba(245,71,107,.1); }
.ps-up-x svg{ width:.95rem; height:.95rem; }

/* ---------------------------------------------------------- cores (15)
   Radios de verdade por baixo: teclado e leitor de tela funcionam sozinhos,
   e sem JS continua escolhendo. */
.ps-swatches{ display:flex; flex-wrap:wrap; gap:.45rem; }
.ps-swatch{ cursor:pointer; line-height:0; }
.ps-swatch input{ position:absolute; opacity:0; width:0; height:0; }
.ps-swatch span{
  display:block; width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:transform .12s ease, box-shadow .12s ease;
}
.ps-swatch:hover span{ transform:scale(1.12); }
/* O anel de seleção usa a própria cor: no tema escuro um anel branco fixo
   sumiria contra os tons claros da paleta. */
/* Só o rádio marcado pinta o anel. A classe .is-on vinha do servidor e NUNCA
   saía: ao clicar em outra cor, a primeira continuava com o anel e pareciam duas
   selecionadas. O :checked acompanha o clique sozinho. */
.ps-swatch input:checked + span{
  box-shadow:0 0 0 2px var(--ps-surface), 0 0 0 4px var(--c);
  transform:scale(1.06);
}
.ps-swatch input:focus-visible + span{ box-shadow:0 0 0 2px var(--ps-surface), 0 0 0 4px var(--ps-mid); }
@media (prefers-reduced-motion:reduce){ .ps-swatch span{ transition:none; } }

/* --------------------------------------------------- select com busca
   O <select> real continua aqui, só escondido: é ele que o formulário envia.
   display:none o tiraria do POST. */
.ps-combo{ position:relative; }
.ps-combo-real{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.ps-combo-input{ cursor:text; }
.ps-combo-list{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + .25rem);
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); box-shadow:var(--ps-shadow-lg);
  padding:.3rem; max-height:15rem; overflow-y:auto;
}
.ps-combo-item{
  padding:.5rem .6rem; border-radius:var(--ps-r-sm);
  font-size:.9rem; cursor:pointer; color:var(--ps-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ps-combo-item:hover, .ps-combo-item.is-cursor{ background:var(--ps-surface-2); }
/* O escolhido fica marcado mesmo com o cursor em outro item: sem isto, quem
   navega pelo teclado perde de vista o que já estava selecionado. */
.ps-combo-item.is-on{ color:var(--ps-mid); font-weight:600; }
.ps-combo-item.is-cursor{ box-shadow:inset 0 0 0 1px var(--ps-border-strong); }
.ps-combo-empty{ padding:.6rem; font-size:.86rem; color:var(--ps-ink-3); text-align:center; }
/* Item "Criar «texto»" no fim da lista de busca. */
.ps-combo-create{ color:var(--ps-mid); font-weight:600; border-top:1px solid var(--ps-border); }
.ps-combo-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--ps-mid); color:#fff; font-size:.85rem; line-height:1; margin-right:.15rem;
}

/* --------------------------------------------------------- repete / caixa
   Alvo grande: no celular, uma caixinha de 13px é o que faz a pessoa errar
   três vezes e desistir. */
.ps-check{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-size:.93rem; padding:.3rem 0; user-select:none;
}
.ps-check input{ width:1.1rem; height:1.1rem; accent-color:var(--ps-mid); cursor:pointer; flex:none; }

/* Rádio: mesma métrica do .ps-check, para as duas escolhas não brigarem quando
   aparecem juntas na mesma caixa. */
.ps-radio{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-size:.88rem; user-select:none;
}
.ps-radio input{ width:1rem; height:1rem; accent-color:var(--ps-mid); cursor:pointer; flex:none; }

/* "sempre / N vezes" + o número, numa linha que quebra no celular. */
.ps-repeat-vezes{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  margin-top:.6rem;
}
.ps-input-sm{ width:5.5rem; padding:.35rem .5rem; font-size:.88rem; }
.ps-input-sm:disabled{ opacity:.45; cursor:not-allowed; }
.ps-repeat-box{
  margin-top:.6rem; padding:.75rem;
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  border-radius:var(--ps-r);
  animation:ps-rep-in .14s ease-out;
}
@keyframes ps-rep-in{ from{ opacity:0; transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce){ .ps-repeat-box{ animation:none; } }

/* ------------------------------------------------------- ajuda contextual
   <details> nativo: abre no clique e no teclado sem uma linha de JS. */
/* ícone de ajuda (?) que abre o modal bonito */
.ps-help{
  display:inline-grid; place-items:center; vertical-align:middle; margin-left:.3rem;
  width:1.05rem; height:1.05rem; border-radius:50%; padding:0;
  font-size:.68rem; font-weight:700; line-height:1; cursor:pointer;
  color:var(--ps-ink-3); background:var(--ps-surface-2); border:1px solid var(--ps-border);
}
.ps-help:hover{ color:#fff; background:var(--ps-mid); border-color:var(--ps-mid); }

/* botão de ajuda no topo de uma aba */
.ps-help-aba{
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
  font-size:.8rem; font-weight:600; padding:.3rem .7rem; border-radius:99px;
  color:var(--ps-mid); background:var(--ps-grad-soft);
  border:1px solid transparent;
}
.ps-help-aba:hover{ border-color:var(--ps-mid); }
.ps-help-aba svg{ width:1rem; height:1rem; }
.ps-help-aba.is-icon{ padding:.35rem; gap:0; border-radius:99px; line-height:0; }
.ps-help-aba.is-icon svg{ width:1.05rem; height:1.05rem; }

/* modal de ajuda: cabeçalho com ícone, texto e exemplos */
.ps-ajuda-modal .ps-modal-box{ text-align:left; }
.ps-ajuda-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.ps-ajuda-ic{
  flex:none; width:2.4rem; height:2.4rem;
  display:grid; place-items:center;
}
.ps-ajuda-ic svg{ width:100%; height:100%; display:block; }
.ps-ajuda-modal .ps-modal-title{ margin:0; }
.ps-ajuda-modal .ps-modal-text{ font-size:.9rem; line-height:1.55; color:var(--ps-ink-2); }
.ps-ajuda-ex{
  margin-top:.8rem; padding:.7rem .9rem; border-radius:var(--ps-r);
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
}
.ps-ajuda-ex-h{
  display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ps-ink-3); margin-bottom:.4rem;
}
.ps-ajuda-ex ul{ margin:0; padding-left:1.1rem; }
.ps-ajuda-ex li{ font-size:.86rem; line-height:1.5; color:var(--ps-ink-2); margin-bottom:.2rem; }

/* ------------------------------------------------- páginas de conteúdo
   Texto longo (termos, privacidade) precisa de respiro e medida de linha:
   65 caracteres é onde o olho volta certo para a linha seguinte. */
.ps-prosa{ color:var(--ps-ink-2); font-size:.95rem; line-height:1.75; }
.ps-prosa h2{
  font-size:1.05rem; font-weight:650; color:var(--ps-ink);
  margin:2rem 0 .6rem; letter-spacing:-.01em;
}
.ps-prosa h3{ font-size:.92rem; font-weight:650; color:var(--ps-ink); margin:1.4rem 0 .4rem; }
.ps-prosa p{ margin:0 0 .9rem; }
.ps-prosa ul, .ps-prosa ol{ margin:0 0 .9rem; padding-left:1.2rem; }
.ps-prosa li{ margin-bottom:.4rem; }
.ps-prosa a{ color:var(--ps-link); }
.ps-prosa strong{ color:var(--ps-ink); font-weight:600; }
.ps-prosa hr{ border:0; border-top:1px solid var(--ps-border); margin:2rem 0; }

.ps-callout{
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); padding:1.1rem 1.2rem;
}

/* A isca do antispam.
   NÃO usa display:none: alguns robôs pulam campos escondidos assim. Fica fora
   da tela, mas "presente" — o robô que varre o formulário o encontra e o
   preenche; o humano nunca o vê. */
.ps-isca{
  position:absolute !important;
  left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

/* ------------------------------------------------------------ cofre
   O segredo revelado. Monoespaçado porque quem lê vai DIGITAR isto em outro
   lugar, e em fonte proporcional l/I/1 e O/0 viram a mesma coisa. */
.ps-segredo{
  display:flex; align-items:center; gap:.6rem;
  margin-top:.7rem; padding:.7rem .8rem;
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  border-radius:var(--ps-r);
}
.ps-segredo code{
  flex:1; font-size:.95rem; color:var(--ps-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all; user-select:all;   /* um clique seleciona tudo */
}

/* ---------------------------------------------------------- abas da conta
   Usa o componente nativo do Bootstrap (.nav-tabs); aqui só o tema Pagsim. */
.ps-tabs.nav-tabs{ border-bottom:1px solid var(--ps-border); gap:.15rem; flex-wrap:wrap; }
.ps-tabs .nav-link{
  border:none; border-bottom:2px solid transparent; border-radius:0;
  color:var(--ps-ink-2); font-size:.92rem; font-weight:500;
  padding:.6rem .9rem; background:none;
}
.ps-tabs .nav-link:hover{ color:var(--ps-ink); border-bottom-color:var(--ps-border); }
.ps-tabs .nav-link.active{ color:var(--ps-mid); border-bottom-color:var(--ps-mid); background:none; }
.ps-tab-content{ margin-top:1rem; }
/* Dentro de uma aba, o cabeçalho da seção já vem logo abaixo da barra de abas:
   a margem de topo dele sobra e cria um vão grande. Zeramos só nesse caso. */
.ps-tab-content .tab-pane > .ps-section-h:first-child{ margin-top:0; }
/* Mesma ideia quando o cabeçalho é o primeiro item DENTRO de um box: o padding
   do próprio box já dá o respiro do topo, então a margem de 1.5rem sobrava e
   deixava essas abas (Espaço, Categorias, Contas) com um vão maior que as
   demais. */
.ps-form-card > .ps-section-h:first-child{ margin-top:0; }
.ps-h2-inline{ font-size:1rem; margin:0 0 .8rem; }

/* ------------------------------------------------- status clicável (R2.3) */
.ps-status-btn{
  border:none; background:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.2rem;
}
.ps-status-caret{ color:var(--ps-ink-2); font-size:.7rem; line-height:1; }
.ps-status-btn:hover .ps-status-caret{ color:var(--ps-ink); }
.ps-status-menu{ min-width:auto; }
.ps-status-menu .dropdown-item{ font-size:.88rem; display:flex; align-items:center; gap:.4rem; }
.ps-status-menu .dropdown-item svg{ width:1em; height:1em; }

/* ------------------------------------------------- ações da linha (R2.3) */
.ps-row-actions{ display:inline-flex; gap:.25rem; justify-content:flex-end; }
.ps-row-actions .ps-chip-btn{ padding:.3rem; }
.ps-row-actions svg{ width:1.05em; height:1.05em; }

/* R2.9: botão em ação AJAX — mostra que está trabalhando sem trocar a página. */
[data-ps-loading] { position:relative; color:transparent !important; pointer-events:none; }
[data-ps-loading]::after {
  content:""; position:absolute; inset:0; margin:auto; width:1em; height:1em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  color:var(--ps-mid); animation:ps-spin .6s linear infinite;
}
@keyframes ps-spin { to { transform:rotate(360deg); } }

/* ------------------------------------------------- véu de carregando (R2.9)
   A área que está atualizando fica esmaecida e com um pulso, para o usuário
   ver que algo está acontecendo sem a página piscar inteira. */
[data-ps-carregando] { position:relative; opacity:.55; pointer-events:none; transition:opacity .15s; }
[data-ps-carregando]::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(72,54,236,.06), transparent);
  background-size:200% 100%; animation:ps-shimmer 1s linear infinite;
}
@keyframes ps-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* Modal de status (itens 7/3): quadro centralizado com as opções de situação. */
.ps-status-dialog .ps-modal-box{ min-width:min(320px, 90vw); }
.ps-modal-title{ font-size:1.05rem; font-weight:600; margin:0 0 .9rem; }
.ps-status-opts{ display:flex; flex-direction:column; }
.ps-status-opts .btn{ justify-content:center; }

/* Item 1: tag de período ativa na visão geral. */
.ps-ov-periodo .ps-chip.is-active,
.ps-chip.is-active{ background:var(--ps-grad); color:#fff; border-color:transparent; }

/* ---- Resumo de IA (item R3.10) ---------------------------------------- */
.ps-ai-cta{
  background:var(--ps-grad-soft);
  border:1px solid var(--ps-border-strong);
  border-radius:var(--ps-r-lg);
}
.ps-ai-cta-title{
  font-family:var(--ps-font-display);
  font-weight:700; font-size:1.05rem; color:var(--ps-ink);
  margin:0 0 .15rem;
}
.ps-ai-note{
  display:flex; align-items:center; gap:.5rem;
  background:var(--ps-grad-soft);
  border:1px solid var(--ps-border-strong);
  border-radius:var(--ps-r);
  padding:.7rem .9rem; margin:0 0 1rem;
  font-size:.82rem; color:var(--ps-ink-2);
}
.ps-ai-note svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ps-violet); }
.ps-ai-body{ line-height:1.65; }
.ps-ai-body p{ margin:0 0 .9rem; max-width:64ch; }
.ps-ai-body p:last-child{ margin-bottom:0; }

/* ---- R4.1: informativo de período na visão geral --------------------- */
.ps-ov-range{ font-size:.8rem; color:var(--ps-ink-3); font-variant-numeric:tabular-nums; }
.ps-ov-range-big{ font-size:1.05rem; font-weight:600; color:var(--ps-ink);
  font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.ps-list-range{ font-size:1.02rem; font-weight:600; color:var(--ps-ink);
  font-variant-numeric:tabular-nums; }

/* ---- R4.9: "+" do cabeçalho só com ícone (sem texto) ----------------- */
.ps-add-inline.ps-add-icon{ padding:0; gap:0; width:34px; height:34px; justify-content:center; }
.ps-add-inline.ps-add-icon svg{ width:18px; height:18px; margin:0; flex:none; }

/* ---- R4.8: dados sensíveis em cards (nome-label + valor embaixo) ------ */
.ps-secret-list{ display:flex; flex-direction:column; gap:.6rem; }
.ps-secret-card{
  border:1px solid var(--ps-border); border-radius:var(--ps-r);
  background:var(--ps-surface); padding:.7rem .85rem;
}
.ps-secret-head{ display:flex; align-items:center; gap:.5rem; }
.ps-secret-name{
  font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ps-ink-3);
}
.ps-secret-tag{ display:inline-flex; align-items:center; font-size:.72rem; color:var(--ps-ink-3); }
.ps-secret-tag svg{ width:14px; height:14px; }
.ps-secret-del{ margin-left:auto; }
.ps-secret-body{ margin-top:.45rem; }
.ps-secret-body .ps-segredo{ margin:0; }

/* ---- R4.10: card do plano atual em destaque -------------------------- */
.ps-plan-current{ border-color:var(--ps-violet); background:var(--ps-grad-soft); }

/* ==========================================================================
   R7 item 6 — navegação estilo app na base (só no mobile, < 992px)
   ========================================================================== */
.ps-bottomnav{ display:none; }
@media (max-width:991.98px){
  .ps-bottomnav{
    display:flex; align-items:stretch;
    position:fixed; left:0; right:0; bottom:0; z-index:1030;
    background:var(--ps-surface); border-top:1px solid var(--ps-border);
    padding:.2rem .2rem calc(.2rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 14px rgba(0,0,0,.14);
  }
  .ps-bottomnav > .ps-bn-item,
  .ps-bottomnav > .ps-bn-drop{ flex:1 1 0; min-width:0; }
  .ps-bn-drop{ position:relative; }
  .ps-bn-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    width:100%; padding:.35rem .1rem; border:0; background:transparent; cursor:pointer;
    color:var(--ps-ink-3); text-decoration:none; font-size:.6rem; font-weight:600;
    line-height:1.1; border-radius:var(--ps-r-sm);
  }
  .ps-bn-item svg{ width:22px; height:22px; flex:none; }
  .ps-bn-item span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ps-bn-item.is-active{ color:var(--ps-violet); }
  [data-bs-theme="dark"] .ps-bn-item.is-active{ color:var(--ps-cyan); }
  .ps-bn-avatar{ width:22px; height:22px; font-size:.72rem; }
  .ps-bottomnav .dropdown-menu{ z-index:1031; min-width:12rem; max-height:60vh; overflow:auto; }
  .ps-bottomnav .ps-cat-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.5rem; }

  /* o rail off-canvas e o burger somem: a base cuida da navegação */
  .ps-rail{ display:none !important; }
  .ps-burger{ display:none !important; }
  .ps-rail-veil{ display:none !important; }
  /* espaço para o conteúdo não ficar embaixo da barra */
  .ps-content{ padding-bottom:5.5rem !important; }
}

/* ==========================================================================
   R10 — nav do site público sem depender de JS (elemento <details> nativo)
   ========================================================================== */
.ps-nav-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.ps-nav-brand{ display:inline-flex; align-items:center; }
.ps-nav-brand img{ height:30px; width:auto; display:block; }

.ps-nav-burger{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--ps-border); border-radius:var(--ps-r-sm);
  background:var(--ps-surface); color:var(--ps-ink-2); }
.ps-nav-burger::-webkit-details-marker{ display:none; }
.ps-nav-burger svg{ width:20px; height:20px; }

.ps-nav-links{ list-style:none; display:flex; gap:.3rem; margin:0; padding:0; }
.ps-nav-links a{ display:block; padding:.5rem .85rem; color:var(--ps-ink-2); text-decoration:none;
  border-radius:var(--ps-r-sm); font-weight:500; font-size:.9rem; transition:all .2s var(--ps-ease); }
.ps-nav-links a:hover{ color:var(--ps-ink); background:var(--ps-bg-2); }
.ps-nav-actions{ display:flex; align-items:center; gap:.5rem; }

.ps-lang{ position:relative; }
.ps-lang > summary{ list-style:none; }
.ps-lang > summary::-webkit-details-marker{ display:none; }
.ps-lang-menu{ position:absolute; right:0; top:calc(100% + .35rem); z-index:60; min-width:9.5rem;
  margin:0; padding:.35rem; list-style:none; background:var(--ps-surface);
  border:1px solid var(--ps-border); border-radius:var(--ps-r-sm); box-shadow:var(--ps-shadow-lg); }
.ps-lang-menu a{ display:block; padding:.45rem .6rem; color:var(--ps-ink-2); text-decoration:none;
  border-radius:var(--ps-r-sm); font-size:.88rem; }
.ps-lang-menu a:hover{ background:var(--ps-bg-2); color:var(--ps-ink); }
.ps-lang-menu a.is-active{ color:var(--ps-violet); font-weight:600; }

/* botão de tema quadrado — ícone (sol/lua) centrado de verdade */
.ps-chip.ps-theme{ width:38px; padding:0; }

.ps-nav-check{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
@media (min-width:992px){
  .ps-nav-burger{ display:none; }
  .ps-nav-panel{ display:flex !important; flex:1; align-items:center; gap:1.5rem; justify-content:space-between; margin-left:1.5rem; }
}
@media (max-width:991.98px){
  .ps-nav-panel{ display:none; position:absolute; left:0; right:0; top:100%; z-index:50;
    flex-direction:column; align-items:stretch; gap:1rem; padding:1.1rem 1.25rem 1.6rem;
    background:var(--ps-surface); border-bottom:1px solid var(--ps-border); box-shadow:var(--ps-shadow-lg); }
  .ps-nav-check:checked ~ .ps-nav-panel{ display:flex; }
  .ps-nav-links{ flex-direction:column; gap:.15rem; }
  .ps-nav-actions{ flex-wrap:wrap; gap:.6rem; }
}

/* ---- R13: aceite de termos no cadastro ---- */
.ps-accept{ display:flex; gap:.55rem; align-items:flex-start; margin:.35rem 0 .2rem; cursor:pointer; font-size:.85rem; color:var(--ps-ink-2); line-height:1.4; }
.ps-accept input{ margin-top:.15rem; width:1.05rem; height:1.05rem; flex:none; accent-color:var(--ps-violet); }
.ps-accept a{ color:var(--ps-link); text-decoration:underline; }
.ps-accept.is-error input{ outline:2px solid var(--ps-danger, #d92d20); outline-offset:2px; border-radius:3px; }
.ps-accept-err{ color:var(--ps-danger, #d92d20); font-size:.8rem; margin:.15rem 0 0; }

/* ---- R13: página de afiliados ---- */
.ps-h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:600; letter-spacing:-.02em; }
.ps-feature{ background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); padding:1.4rem; }
.ps-step-num{ display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--ps-grad); color:#fff; font-weight:700; font-size:1rem; }
.ps-list-check{ list-style:none; margin:0; padding:0; }
.ps-list-check li{ position:relative; padding-left:1.6rem; margin-bottom:.4rem; font-size:.92rem; color:var(--ps-ink-2); }
.ps-list-check li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--ps-link); font-weight:700; }
.ps-social{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--ps-border); color:var(--ps-ink-2); transition:all .2s var(--ps-ease); }
.ps-social:hover{ color:#fff; background:var(--ps-grad); border-color:transparent; }
/* R13: ícone do botão de tema centrado (SVG inline criava folga embaixo) */
.ps-chip.ps-theme{ display:inline-flex; align-items:center; justify-content:center; }
.ps-chip .ps-i-sun, .ps-chip .ps-i-moon{ line-height:0; }
.ps-chip .ps-i-sun svg, .ps-chip .ps-i-moon svg{ display:block; }

/* ---- aviso de cookies (informativo) ---- */
.ps-cookie{ position:fixed; left:50%; transform:translateX(-50%); bottom:1rem; z-index:1050;
  width:min(92%, 40rem); display:flex; align-items:center; gap:1rem;
  padding:.8rem 1rem; background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r-lg); box-shadow:var(--ps-shadow-lg); }
.ps-cookie-txt{ font-size:.82rem; color:var(--ps-ink-2); line-height:1.5; }
.ps-cookie a{ color:var(--ps-violet); text-decoration:underline; }
@media (max-width:520px){ .ps-cookie{ flex-direction:column; align-items:stretch; text-align:center; } }

/* Isca do antispam do formulário de contato: precisa ficar FORA DA TELA (não
   display:none — parte dos robôs ignora campo escondido assim). Humano não vê,
   não tabula e não preenche; robô de varredura preenche e se entrega. */
.ps-isca{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
/* Marca discreta de "você veio por indicação" no cadastro */
.ps-ref-tag{ display:inline-flex; align-items:center; gap:.4rem; margin:-.2rem 0 .9rem; padding:.25rem .6rem;
  font-size:.75rem; color:var(--ps-ink-3); background:var(--ps-surface-2); border:1px solid var(--ps-border); border-radius:999px; }
.ps-ref-tag code{ color:var(--ps-link); font-weight:600; font-size:.75rem; }

/* ---- Ícone dentro de botão ----
   Panel::icon() devolve <svg> sem width/height. Havia regra para .ps-chip,
   .ps-rail-item e afins, mas não para botão: o + de "adicionar categoria"
   virava um quadrado azul vazio. */
.btn svg, .btn-ps svg, .btn-ps-ghost svg, .btn-ps-danger svg{
  width:18px; height:18px; display:block;
}

/* ---- Área segura do TOPO (app instalado na tela de início) ----
   O viewport é "viewport-fit=cover", então em modo standalone o conteúdo sobe
   para baixo do relógio/bateria. O rodapé já respeitava a área segura; o topo
   não — o título e o botão + ficavam embaixo da barra de status e o + não dava
   para clicar. */
.ps-topbar{ padding-top:calc(.85rem + env(safe-area-inset-top, 0px)); }
@media (display-mode:standalone){
  .ps-rail{ padding-top:env(safe-area-inset-top, 0px); }
}
/* O tooltip do gráfico do painel era renderizado com [hidden]: display:none
   vence a classe .is-on e o balão nunca aparecia. Aqui a classe manda. */
.ps-flow-tip[hidden]{ display:block; }
.ps-flow-tip:not(.is-on){ opacity:0; }

/* Aviso de recurso fora do plano: informa em vez de esconder a aba. */
.ps-upsell{ text-align:center; }
.ps-upsell-t{ font-size:1rem; font-weight:600; margin:0 0 .5rem; }
.ps-upsell-d{ font-size:.9rem; color:var(--ps-ink-2); line-height:1.6; margin:0 auto 1rem; max-width:34rem; }
.ps-upsell-p{ font-size:.85rem; color:var(--ps-ink-2); margin:0 0 1rem; }
.ps-upsell-p b{ color:var(--ps-link); }

/* ---- Gráfico de ganhos do afiliado (barras simples) ---- */
.ps-af-chart{ display:flex; align-items:flex-end; gap:2px; height:120px;
  padding:.4rem; background:var(--ps-surface-2); border:1px solid var(--ps-border); border-radius:var(--ps-r); }
.ps-af-bar{ flex:1 1 0; min-width:3px; background:var(--ps-grad); border-radius:2px 2px 0 0; transition:opacity .15s; }
.ps-af-bar:hover{ opacity:.75; }
.ps-pager{ display:flex; gap:.35rem; flex-wrap:wrap; }

/* ---- Barra do espaço (celular) ----
   Fixa logo abaixo do cabeçalho: mostra em que espaço a pessoa está sem que ela
   precise abrir menu nenhum. No desktop não aparece — lá o menu lateral já diz. */
.ps-spacebar{ display:none; }
@media (max-width: 991.98px){
  /* Dentro de um espaço, no celular, o cabeçalho comum some: a barra do espaço
     abaixo já traz ícone, nome, ações e o título numa segunda linha. */
  .ps-inspace .ps-topbar{ display:none; }

  .ps-spacebar{
    display:block; position:sticky; top:0; z-index:1020;
    background:var(--ps-surface); border-bottom:1px solid var(--ps-border);
  }
  /* No app instalado (iPhone), a barra ficava sob a hora/bateria/notch.
     Empurra o conteúdo para baixo da área segura do topo. */
  .ps-spacebar-row{ display:flex; align-items:center; gap:.5rem;
    padding:.5rem .9rem; padding-top:calc(.5rem + env(safe-area-inset-top, 0px)); }
  .ps-spacebar-logo{ flex:0 0 auto; display:inline-flex; }
  .ps-spacebar-logo img{ display:block; }
  .ps-spacebar-name{ flex:1 1 auto; min-width:0; font-weight:700; font-size:.9rem; color:var(--ps-ink); }
  .ps-spacebar-acts{ flex:0 0 auto; display:flex; align-items:center; gap:.35rem; }
  .ps-spacebar-cog{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.1rem; height:2.1rem; border-radius:9px; text-decoration:none;
    color:var(--ps-ink-2); border:1px solid var(--ps-border); background:var(--ps-surface);
  }
  .ps-spacebar-cog:hover{ color:var(--ps-ink); background:var(--ps-surface-2); }
  .ps-spacebar-cog svg{ width:17px; height:17px; }
  /* o "+" da barra do espaço acompanha o tamanho dos ícones vizinhos */
  .ps-spacebar-acts .ps-add-icon{ width:2.1rem; height:2.1rem; padding:0; }
  .ps-spacebar-title{ font-size:1.02rem; font-weight:700; margin:0;
    padding:.5rem .9rem .55rem; color:var(--ps-ink);
    border-top:1px solid var(--ps-border); }
}

/* Bolinha com a cor do espaço, ao lado do nome. */
.ps-space-cdot{ width:.85rem; height:.85rem; border-radius:50%; flex:none; display:inline-block; }

/* Topo do rail: ícone da Pagsim + nome do espaço na MESMA linha. */
.ps-rail-brand{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.ps-rail-brand .ps-rail-logo{ flex:0 0 auto; display:inline-flex; }
.ps-rail-brand .ps-space-name{ flex:1 1 auto; min-width:0; font-weight:700; font-size:.95rem; color:var(--ps-ink); }
.ps-rail-brand-label{ flex:1 1 auto; min-width:0; font-weight:700; font-size:.95rem; color:var(--ps-ink); }

/* Linha de ações do espaço: botões do tamanho natural, alinhados à esquerda
   (sem esticar para 100% da largura). */
.ps-space-fixed-acts{ display:flex; align-items:center; gap:.4rem; }
.ps-space-act{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:2.3rem; height:2.2rem; border-radius:9px; text-decoration:none;
  background:var(--ps-surface-2); border:1px solid var(--ps-border); color:var(--ps-ink-2);
}
.ps-space-act:hover{ border-color:var(--ps-border-strong); color:var(--ps-ink); }
.ps-space-act svg{ width:16px; height:16px; }
/* o "+" acompanha o tamanho dos outros botões */
.ps-space-fixed-acts .ps-add-wrap{ flex:0 0 auto; display:inline-flex; }
.ps-space-fixed-acts .ps-add-icon{ width:2.3rem; height:2.2rem; }
/* no rail (menu à esquerda) o "+" abre para a DIREITA; na barra do celular o
   "+" fica à direita, então o menu abre para a ESQUERDA (right:0, o padrão). */
.ps-space-fixed-acts .ps-fab-menu.is-inline{ left:0; right:auto; }
.ps-spacebar-acts .ps-fab-menu.is-inline{ right:0; left:auto; }

/* Balão do gráfico virado para CIMA: usado quando o ponto está baixo demais e o
   balão não caberia abaixo dele sem ser cortado pela borda do quadro. */
.ps-flow-tip.is-up{ transform: translate(-50%, calc(-100% - 4px)) scale(.96); }
.ps-flow-tip.is-up.is-on{ transform: translate(-50%, calc(-100% - 12px)) scale(1); }

/* ---- Campo de data no celular ----
   O input[type=date] do iOS tem uma largura mínima PRÓPRIA, maior que a coluna
   onde ele está. Resultado: os campos De/Até se sobrepunham e vazavam para fora
   da tela. Duas peças resolvem: o campo pode encolher (min-width:0) e a coluna
   deixa de reservar o tamanho intrínseco do filho (também min-width:0, que o
   flex não aplica sozinho). */
.ps-input{ min-width: 0; max-width: 100%; }
.ps-input[type="date"]{
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; width: 100%;
}
.row > [class*="col-"]{ min-width: 0; }

/* ==========================================================================
   R14 — Menu do usuário (rail do desktop + barra de baixo do celular)
   O mesmo bloco nos dois lugares: um item novo entra uma vez e aparece nos dois.
   ========================================================================== */
.ps-user-menu.ps-user-menu{
  min-width:15.5rem; padding:.4rem; border-radius:16px;
  border:1px solid var(--ps-border); background:var(--ps-surface);
  box-shadow:var(--ps-shadow-lg); overflow:hidden;
}
.ps-user-menu .dropdown-item{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .6rem; border-radius:10px;
  font-size:.88rem; font-weight:500; color:var(--ps-ink-2);
  white-space:nowrap; transition:background .15s, color .15s;
}
.ps-user-menu .dropdown-item svg{ width:17px; height:17px; flex:none; opacity:.68; }
.ps-user-menu .dropdown-item > span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.ps-user-menu .dropdown-item:hover,
.ps-user-menu .dropdown-item:focus-visible{ background:var(--ps-surface-2); color:var(--ps-ink); }
.ps-user-menu .dropdown-item:hover svg,
.ps-user-menu .dropdown-item:focus-visible svg{ opacity:1; color:var(--ps-mid); }
.ps-user-menu .dropdown-item:active{ background:var(--ps-grad-soft); color:var(--ps-ink); }

/* Sair em vermelho: é a única ação do menu que interrompe o trabalho. */
.ps-user-menu .dropdown-item.is-danger{ color:var(--ps-out); }
.ps-user-menu .dropdown-item.is-danger:hover,
.ps-user-menu .dropdown-item.is-danger:focus-visible{ background:rgba(245,71,107,.1); color:var(--ps-out); }
.ps-user-menu .dropdown-item.is-danger:hover svg{ color:var(--ps-out); opacity:1; }

.ps-user-menu hr.dropdown-divider{ margin:.35rem .35rem; border-top:1px solid var(--ps-border); opacity:1; }

/* Cabeçalho: quem está logado. Em conta com dois e-mails, é o que diz em qual você está. */
.ps-menu-head{ display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem .3rem; min-width:0; }
.ps-menu-head .ps-avatar{ width:34px; height:34px; font-size:.9rem; }
.ps-menu-id{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ps-menu-name{ font-size:.88rem; font-weight:600; color:var(--ps-ink); }
.ps-menu-mail{ font-size:.72rem; color:var(--ps-ink-3); }

/* Trocador de tema: mostra o DESTINO, não o estado atual. */
.ps-user-menu .ps-i-sun, .ps-user-menu .ps-i-moon{ display:none; line-height:0; flex:none; }
.ps-user-menu .ps-i-sun svg, .ps-user-menu .ps-i-moon svg{ display:block; }
[data-bs-theme="light"] .ps-user-menu .ps-i-moon{ display:block; }
[data-bs-theme="dark"]  .ps-user-menu .ps-i-sun { display:block; }

/* ==========================================================================
   R14 — Rede de indicados (afiliados: nível 1 → nível 2)
   ========================================================================== */
.ps-avatar-sm{ width:22px; height:22px; font-size:.62rem; }

.ps-net-link{
  display:inline-flex; align-items:center; gap:.5rem; min-width:0; max-width:100%;
  color:var(--ps-ink); text-decoration:none; font-weight:500;
}
a.ps-net-link:hover{ color:var(--ps-link); }
a.ps-net-link:hover .text-truncate{ text-decoration:underline; }
.ps-net-link.is-plain{ cursor:default; }

/* O contador de indiretos é o próprio botão de abrir a rede: o número e o
   caminho para ele são a mesma coisa, então são o mesmo alvo de clique. */
.ps-net-count{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.2rem .45rem; border-radius:999px;
  border:1px solid var(--ps-border); background:var(--ps-surface-2);
  color:var(--ps-ink-3); font-size:.8rem; font-weight:600;
  text-decoration:none; transition:all .15s var(--ps-ease);
}
.ps-net-count svg{ width:13px; height:13px; opacity:.6; }
.ps-net-count:hover{ border-color:var(--ps-border-strong); color:var(--ps-ink); }
.ps-net-count.is-on{ color:var(--ps-mid); border-color:rgba(72,54,236,.28); background:var(--ps-grad-soft); }
.ps-net-count.is-on:hover{ color:var(--ps-violet); }

@media (max-width:767px){
  /* Três colunas em vez de duas: pessoa · quanto rendeu · quantos indiretos.
     Com o grid padrão (1fr auto) o terceiro dado caía sozinho numa linha nova. */
  .ps-table-net tr{ grid-template-columns:1fr auto auto; align-items:center; gap:.25rem .5rem; }
}

/* ==========================================================================
   R17 — Aba Comentários em formato de chat
   ========================================================================== */
.ps-chat-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
/* O cabeçalho (título + Ajuda) dentro do chat-card precisa de recuo lateral:
   sem ele, o "Comentários" cola na borda esquerda e o botão Ajuda na direita,
   desalinhados do resto. Também tira a margem de cima que empurrava. */
.ps-chat-card > .ps-section-h{ margin:0; padding:1rem 1rem .2rem; }

/* A conversa: área que rola sozinha. O teto evita que uma conta com meses de
   histórico empurre o botão de salvar para fora da tela. */
.ps-chat-scroll{
  display:flex; flex-direction:column; gap:.5rem;
  padding:1rem; max-height:52vh; min-height:8rem; overflow-y:auto;
  background:var(--ps-surface-2);
}

.ps-chat-empty{
  margin:auto; text-align:center; color:var(--ps-ink-3); padding:2rem 1rem;
}
.ps-chat-empty svg{ width:32px; height:32px; opacity:.4; }
.ps-chat-empty p{ margin:.5rem 0 0; font-size:.86rem; }

/* Régua de dia. */
.ps-chat-day{ text-align:center; margin:.25rem 0; }
.ps-chat-day span{
  display:inline-block; padding:.15rem .6rem; border-radius:99px;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  font-size:.68rem; color:var(--ps-ink-3); font-weight:600;
}

/* Uma linha = avatar + bolha. As minhas vão para a direita. */
.ps-chat-row{ display:flex; gap:.5rem; align-items:flex-end; max-width:82%; }
.ps-chat-row.is-me{ margin-left:auto; flex-direction:row-reverse; }

.ps-chat-bubble{
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:14px; border-bottom-left-radius:4px;
  padding:.5rem .7rem; min-width:0;
}
.ps-chat-row.is-me .ps-chat-bubble{
  background:var(--ps-grad-soft); border-color:rgba(72,54,236,.22);
  border-radius:14px; border-bottom-right-radius:4px; border-bottom-left-radius:14px;
}
.ps-chat-autor{ font-size:.7rem; font-weight:700; color:var(--ps-mid); margin-bottom:.15rem; }
.ps-chat-body{ font-size:.9rem; color:var(--ps-ink); word-break:break-word; line-height:1.4; }
.ps-chat-time{
  display:flex; align-items:center; gap:.25rem; justify-content:flex-end;
  font-size:.64rem; color:var(--ps-ink-3); margin-top:.2rem;
}
.ps-chat-serie{ display:inline-flex; }
.ps-chat-serie svg{ width:11px; height:11px; }

/* O campo de escrever, ancorado embaixo. */
.ps-chat-compose{ border-top:1px solid var(--ps-border); padding:.6rem .7rem; background:var(--ps-surface); }
.ps-chat-scope{ display:flex; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.ps-chat-input{ display:flex; gap:.5rem; align-items:flex-end; }
.ps-chat-input textarea{
  flex:1; resize:none; border:1px solid var(--ps-border); border-radius:12px;
  padding:.55rem .75rem; font:inherit; font-size:.9rem; line-height:1.4;
  background:var(--ps-surface-2); color:var(--ps-ink); max-height:160px; overflow-y:auto;
}
.ps-chat-input textarea:focus{ outline:none; border-color:var(--ps-mid); background:var(--ps-surface); }
.ps-chat-send{
  flex:none; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--ps-grad); color:#fff; display:grid; place-items:center;
  cursor:pointer; transition:transform .12s var(--ps-ease), opacity .12s;
}
.ps-chat-send svg{ width:18px; height:18px; margin-left:-2px; }
.ps-chat-send:hover{ transform:scale(1.06); }
.ps-chat-send:active{ transform:scale(.96); }
.ps-chat-nolock{ padding:.75rem 1rem; margin:0; border-top:1px solid var(--ps-border); }

@media (max-width:767px){
  .ps-chat-row{ max-width:92%; }
  .ps-chat-scroll{ max-height:60vh; }
}

/* ============================ Dashboard de relatórios ============================ */
.ps-card-h2{ font-size:1rem; font-weight:600; margin:0 0 1rem; letter-spacing:-.01em; }

/* filtro de período */
.ps-filtro{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between; }
.ps-filtro-datas{ display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
.ps-filtro-datas .ps-field{ margin:0; }
.ps-filtro-datas .btn{ white-space:nowrap; }
.ps-filtro-atalhos{ display:flex; gap:.4rem; flex-wrap:wrap; }
@media (max-width:600px){
  .ps-filtro-datas{ width:100%; }
  .ps-filtro-datas .ps-field{ flex:1 1 42%; }
  .ps-filtro-datas .btn{ flex:1 1 100%; width:100%; justify-content:center; }
}

/* blocos de KPI: previsto e realizado */
.ps-kpi-group{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin-bottom:1.2rem; }
.ps-kpi-block{ background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r-lg); padding:1.1rem 1.2rem; }
.ps-kpi-head{ display:flex; align-items:center; gap:.4rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ps-ink-3); font-weight:700; margin-bottom:.9rem; }
/* No relatório o botão Ajuda vai para a direita do título, como nas abas. */
.ps-kpi-head .ps-help-aba{ margin-left:auto; }
.ps-kpi-hint{ display:inline-flex; color:var(--ps-ink-3); cursor:help; }
.ps-kpi-hint svg{ width:14px; height:14px; }
.ps-kpi-row{ display:grid; gap:.8rem; grid-template-columns:repeat(3,1fr); }
.ps-kpi-k{ font-size:.74rem; color:var(--ps-ink-3); font-weight:600; }
.ps-kpi-v{ font-size:1.32rem; font-weight:700; letter-spacing:-.02em; margin:.3rem 0 0; font-variant-numeric:tabular-nums; }
.ps-kpi-v.is-in{ color:var(--ps-in); }
.ps-kpi-v.is-out{ color:var(--ps-out); }
.ps-kpi-v.is-neg{ color:var(--ps-out); }
.ps-kpi-n{ font-size:.7rem; color:var(--ps-ink-3); display:block; margin-top:.15rem; }
.ps-kpi-venc{ display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; color:var(--ps-late); font-weight:600; margin-top:.3rem; }
.ps-kpi-venc svg{ width:12px; height:12px; }

/* barra de categoria */
.ps-catbar{ margin-bottom:.75rem; }
.ps-catbar:last-child{ margin-bottom:0; }
.ps-catbar-top{ display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:.28rem; }
.ps-catbar-name{ color:var(--ps-ink-2); }
.ps-catbar-n{ color:var(--ps-ink-3); }
.ps-catbar-val{ font-variant-numeric:tabular-nums; color:var(--ps-ink); font-weight:500; }

/* lista de meses anteriores */
.ps-meses{ display:grid; gap:.6rem; }
.ps-mes{ display:flex; align-items:center; gap:1rem; background:var(--ps-surface); border:1px solid var(--ps-border); border-radius:var(--ps-r); padding:.85rem 1.1rem; flex-wrap:wrap; }
.ps-mes.is-vazio{ background:var(--ps-surface-2); border-style:dashed; }
.ps-mes-info{ display:flex; align-items:center; gap:.6rem; min-width:180px; flex:1; }
.ps-mes-nome{ font-weight:600; text-transform:capitalize; }
.ps-mes-tag{ display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ps-ink-3); background:var(--ps-surface-2); border:1px solid var(--ps-border); border-radius:99px; padding:.15rem .5rem; }
.ps-mes-tag.is-mov{ color:var(--ps-in); border-color:transparent; background:rgba(0,176,131,.1); }
.ps-mes-tag svg{ width:12px; height:12px; }
.ps-mes-nums{ display:flex; gap:1rem; font-variant-numeric:tabular-nums; font-size:.85rem; }
.ps-mes-nums .is-in{ color:var(--ps-in); }
.ps-mes-nums .is-out{ color:var(--ps-out); }
.ps-mes-saldo{ font-weight:700; }
.ps-mes-saldo.is-neg{ color:var(--ps-out); }
.ps-mes-nada{ color:var(--ps-ink-3); font-size:.82rem; font-style:italic; margin-left:auto; }

/* paginação */
.ps-pager{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
.ps-pager-info{ font-size:.82rem; color:var(--ps-ink-3); }

@media (max-width:900px){
  .ps-kpi-group{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .ps-kpi-row{ grid-template-columns:1fr; gap:.5rem; }
  .ps-mes{ align-items:flex-start; }
  .ps-mes-nums{ width:100%; justify-content:space-between; }
  .ps-mes-nada{ margin-left:0; }
}

/* ações do relatório (baixar PDF / enviar e-mail) */
.ps-rel-acoes{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:stretch; }
.ps-rel-acoes .d-inline{ display:inline; }
.ps-rel-acoes .ps-chip-btn{ white-space:nowrap; justify-content:center; }
@media (max-width:600px){
  .ps-rel-acoes{ width:100%; }
  .ps-rel-acoes > *{ flex:1; }              /* botão, form e travado com a MESMA largura */
  .ps-rel-acoes .ps-chip-btn{ width:100%; }  /* o botão dentro do form também estica */
}

/* "já paga/recebida" e outros checkboxes em linha nos formulários */
.ps-check-inline{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; color:var(--ps-ink-2); cursor:pointer;
}
.ps-check-inline input[type=checkbox]{ width:1rem; height:1rem; flex:none; cursor:pointer; }
.ps-check-inline .ps-help{ margin-left:.1rem; }

/* etiqueta de direção (a pagar / a receber) nas linhas de atrasados */
.ps-dir-tag{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:.1rem .45rem; border-radius:99px; margin-left:.4rem;
  vertical-align:middle;
}
.ps-dir-tag.is-in{ color:var(--ps-in); background:rgba(0,176,131,.12); }
.ps-dir-tag.is-out{ color:var(--ps-out); background:rgba(245,71,107,.12); }

/* resumo dos atrasados separados por direção */
.ps-late-split{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.ps-late-card{
  flex:1 1 160px; border:1px solid var(--ps-border); border-radius:var(--ps-r);
  padding:.7rem .9rem; display:flex; flex-direction:column; gap:.15rem;
  border-left-width:3px;
}
.ps-late-card.is-out{ border-left-color:var(--ps-out); }
.ps-late-card.is-in{ border-left-color:var(--ps-in); }
.ps-late-k{ font-size:.72rem; color:var(--ps-ink-3); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.ps-late-v{ font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; }
.ps-late-card.is-out .ps-late-v{ color:var(--ps-out); }
.ps-late-card.is-in .ps-late-v{ color:var(--ps-in); }

/* Cartão de recurso bloqueado pelo plano (esmaecido, com cadeado) */
.ps-locked{
  position:relative; text-align:center;
  border:1px solid var(--ps-border); border-radius:var(--ps-r-lg);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(120,128,170,.03) 10px, rgba(120,128,170,.03) 20px),
    var(--ps-surface-2);
  padding:2rem 1.4rem 1.6rem;
}
.ps-locked-badge{
  width:3rem; height:3rem; margin:0 auto .9rem;
  display:grid; place-items:center; border-radius:50%;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  color:var(--ps-ink-3);
}
.ps-locked-badge svg{ width:1.5rem; height:1.5rem; }
.ps-locked-t{ font-size:1.05rem; font-weight:700; margin:0 0 .5rem; color:var(--ps-ink); }
.ps-locked-d{ font-size:.9rem; color:var(--ps-ink-2); line-height:1.6; margin:0 auto 1rem; max-width:34rem; }
.ps-locked-ex{
  text-align:left; max-width:24rem; margin:0 auto 1rem;
  background:var(--ps-surface); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); padding:.7rem .9rem;
}
.ps-locked-ex-h{
  display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ps-ink-3); margin-bottom:.4rem;
}
.ps-locked-ex ul{ margin:0; padding-left:1.1rem; }
.ps-locked-ex li{ font-size:.85rem; line-height:1.5; color:var(--ps-ink-2); margin-bottom:.2rem; }
.ps-locked-p{ font-size:.85rem; color:var(--ps-ink-2); margin:0 0 1rem; }
.ps-locked-p b{ color:var(--ps-link); }

/* lista temporária de dados sensíveis ao criar a conta */
.ps-secret-pending{ display:flex; flex-direction:column; gap:.4rem; }
.ps-secret-chip{
  display:flex; align-items:center; gap:.5rem;
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); padding:.45rem .7rem;
}
.ps-secret-chip-nome{ flex:1; font-size:.88rem; color:var(--ps-ink); }
.ps-secret-chip-nome em{ color:var(--ps-ink-3); font-style:normal; font-size:.8rem; }
.ps-secret-chip-x{
  border:none; background:transparent; color:var(--ps-ink-3);
  font-size:1.2rem; line-height:1; cursor:pointer; padding:0 .2rem;
}
.ps-secret-chip-x:hover{ color:var(--ps-out); }

/* Comentários pendentes (ao criar uma conta, antes de salvar). */
.ps-note-pending{ display:flex; flex-direction:column; gap:.5rem; }
.ps-note-chip{
  display:flex; align-items:flex-start; gap:.5rem;
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  border-radius:var(--ps-r); padding:.5rem .7rem;
}
.ps-note-chip-txt{ flex:1; font-size:.9rem; color:var(--ps-ink); white-space:pre-wrap; word-break:break-word; }
.ps-note-chip-x{
  border:none; background:transparent; color:var(--ps-ink-3);
  font-size:1.2rem; line-height:1; cursor:pointer; padding:0 .2rem; flex:none;
}
.ps-note-chip-x:hover{ color:var(--ps-out); }

/* grupo do título + botão de ajuda à esquerda do cabeçalho de seção */
.ps-section-h-l{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* botões de documento (recibo/nota) no histórico de pagamentos */
.ps-doc-acts{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ps-doc-acts .ps-chip-btn{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.ps-doc-acts .ps-chip-btn svg{ width:14px; height:14px; }
.ps-chip-btn.is-accent{ border-color:var(--ps-mid); color:var(--ps-mid); }
.ps-chip-btn.is-accent:hover{ background:var(--ps-mid); color:#fff; }
.ps-doc-acts form.d-inline{ margin:0; }

/* admin: lista de notas fiscais */
.ps-nota-search{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.ps-nota-search .ps-input{ flex:1; min-width:200px; }
.ps-nota-search .ps-select{ width:auto; min-width:150px; }
.ps-nota-err{ color:var(--ps-danger,#c0392b); font-size:.78rem; display:block; margin-top:.2rem; }
.ps-nota-edit{ background:var(--ps-surface-2); border:1px solid var(--ps-border); border-radius:10px; padding:.9rem; }
.ps-pager{ display:flex; gap:.3rem; flex-wrap:wrap; }
.ps-page{ display:inline-flex; min-width:32px; height:32px; align-items:center; justify-content:center;
  border:1px solid var(--ps-border); border-radius:8px; text-decoration:none; color:var(--ps-ink); font-size:.85rem; }
.ps-page.is-on{ background:var(--ps-mid); color:#fff; border-color:var(--ps-mid); }

/* admin: verificar código de validação de recibo */
.ps-recv-ok{ border:1px solid #b6e6cf; background:#eefaf3; border-radius:10px; padding:.8rem 1rem; }
.ps-recv-badge{ display:inline-flex; align-items:center; gap:.4rem; color:#00875a; font-weight:600; font-size:.9rem; }
.ps-recv-badge svg{ width:1rem; height:1rem; }
.ps-recv-ok table{ font-size:.9rem; }
.ps-recv-k{ color:#6b7280; padding:2px 12px 2px 0; white-space:nowrap; vertical-align:top; }
.ps-recv-bad{ display:flex; align-items:center; gap:.4rem; color:#c0392b; font-weight:600; font-size:.9rem;
  border:1px solid #f0c8c2; background:#fdf1ef; border-radius:10px; padding:.7rem 1rem; }
.ps-recv-bad svg{ width:1rem; height:1rem; flex-shrink:0; }

/* dashboards do admin */
.ps-dash-chart{ width:100%; max-width:560px; height:auto; display:block; }
/* gráfico do afiliado: ocupa toda a largura do card (no notebook não fica pela metade) */
.ps-af-chart-svg{ width:100%; height:auto; display:block; }
.ps-dash-xlabel{ font-size:10px; fill:var(--ps-ink-3,#9ca3af); font-family:var(--ps-font-body); }
.ps-dash-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* admin: início com botões grandes agrupados */
.ps-adm-group{ margin-bottom:1.6rem; }
.ps-adm-group-h{ display:flex; align-items:center; gap:.5rem; margin:0 0 .8rem; }
.ps-adm-group-ic{ display:inline-flex; color:var(--ps-mid); }
.ps-adm-group-ic svg{ width:1.15rem; height:1.15rem; }
.ps-adm-group-t{ font-size:.95rem; font-weight:600; margin:0; color:var(--ps-ink); }
.ps-adm-grid{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.ps-adm-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  padding:1.1rem 1.1rem; border-radius:14px; text-decoration:none;
  background:var(--ps-surface-2); border:1px solid var(--ps-border);
  color:var(--ps-ink); transition:border-color .15s, transform .05s, box-shadow .15s;
}
.ps-adm-btn:hover{ border-color:var(--ps-mid); box-shadow:0 4px 16px rgba(79,14,230,.08); }
.ps-adm-btn:active{ transform:translateY(1px); }
.ps-adm-btn-ic{ display:inline-flex; padding:.5rem; border-radius:10px;
  background:var(--ps-grad-soft); color:var(--ps-mid); }
.ps-adm-btn-ic svg{ width:1.3rem; height:1.3rem; }
.ps-adm-btn-t{ font-weight:600; font-size:.95rem; }
.ps-adm-grouphead{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.ps-adm-grouptitle{ font-size:1.15rem; font-weight:700; margin:0; }
.ps-adm-back{ display:inline-flex; align-items:center; gap:.35rem; text-decoration:none;
  color:var(--ps-mid); font-weight:600; font-size:.85rem; padding:.4rem .8rem;
  border:1px solid var(--ps-border); border-radius:99px; }
.ps-adm-back:hover{ border-color:var(--ps-mid); }
.ps-adm-back svg{ width:.9rem; height:.9rem; transform:rotate(-90deg); }
.ps-adm-online{ display:flex; align-items:center; gap:.5rem; font-size:.9rem;
  padding:.6rem 1rem; background:var(--ps-surface-2); border:1px solid var(--ps-border); border-radius:10px; }
.ps-adm-online-dot{ width:.55rem; height:.55rem; border-radius:50%; background:#00a06a;
  box-shadow:0 0 0 3px rgba(0,160,106,.18); }

/* afiliados: frases prontas de marketing */
.ps-frase-card{ display:flex; align-items:flex-start; gap:.8rem; padding:.9rem 1rem;
  border:1px solid var(--ps-border); border-radius:12px; margin-bottom:.7rem; background:var(--ps-surface-2); }
.ps-frase-txt{ margin:0; font-size:.9rem; line-height:1.5; flex-grow:1; }

/* afiliados: abas por moeda */
.ps-af-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; border-bottom:1px solid var(--ps-border); padding-bottom:.6rem; margin-bottom:.2rem; }
.ps-af-tab{ border:1px solid var(--ps-border); background:var(--ps-surface-2); color:var(--ps-ink-2);
  padding:.35rem .9rem; border-radius:99px; font-weight:600; font-size:.85rem; cursor:pointer; transition:all .15s; }
.ps-af-tab:hover{ border-color:var(--ps-mid); }
.ps-af-tab.is-active{ background:var(--ps-grad); color:#fff; border-color:transparent; }
.ps-af-pane{ display:none; }
.ps-af-pane.is-active{ display:block; }
.ps-af-perido, .ps-af-vis{ cursor:pointer; border:1px solid var(--ps-border); background:var(--ps-surface-2); }

/* afiliados: recibos anuais de comissão (IR) */
.ps-recibo-linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--ps-border); flex-wrap:wrap; }
.ps-recibo-linha:last-of-type{ border-bottom:none; }
.ps-recibo-ano{ font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.ps-recibo-acoes{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* lista de recursos do plano no painel (assinatura) */
.ps-plan-feats{ list-style:none; margin:0 0 .8rem; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.ps-plan-feats li{ display:flex; align-items:flex-start; gap:.4rem; font-size:.82rem; color:var(--ps-ink-2); line-height:1.3; }
.ps-plan-feats li svg{ width:14px; height:14px; flex:none; color:var(--ps-in); margin-top:.1rem; }

/* botão de recurso bloqueado pelo plano: visível, mas claramente "trancado" */
.ps-chip-btn.is-locked{ opacity:.62; cursor:pointer; }
.ps-chip-btn.is-locked:hover{ opacity:.85; border-color:var(--ps-mid); }
.ps-chip-btn.is-locked svg{ color:var(--ps-ink-3); }

/* modal de gate (upgrade): ilustração + planos que têm o recurso */
.ps-gate-modal .ps-modal-box{ text-align:center; max-width:24rem; }
.ps-gate-art{ margin:0 auto .4rem; width:104px; height:104px; }
.ps-gate-art svg{ width:100%; height:100%; display:block; }
.ps-gate-modal .ps-modal-title{ margin-bottom:.4rem; }
.ps-gate-modal .ps-modal-text{ color:var(--ps-ink-2); }
.ps-gate-plans{ margin:.9rem 0 .2rem; }
.ps-gate-plans-h{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ps-ink-3); margin-bottom:.4rem; }
.ps-gate-chips{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.ps-gate-chip{ font-size:.8rem; font-weight:600; padding:.28rem .7rem; border-radius:999px;
  color:var(--ps-mid); background:color-mix(in srgb, var(--ps-mid) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--ps-mid) 30%, transparent); }
.ps-gate-modal .ps-modal-acts.is-column{ margin-top:1rem; }
.ps-gate-modal .ps-modal-acts .btn{ width:100%; }

/* ajustes do espaço: aba Avisos (por pessoa) */
.ps-aviso-linha{ display:flex; gap:1.2rem; justify-content:space-between; flex-wrap:wrap;
  padding:1rem 0; border-bottom:1px solid var(--ps-border); }
.ps-aviso-linha:last-of-type{ border-bottom:none; }
.ps-aviso-quem{ min-width:12rem; flex:1; }
.ps-aviso-email{ display:block; font-size:.82rem; color:var(--ps-ink-3); margin-top:.1rem; }
.ps-aviso-perms{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
.ps-aviso-perm-tag{ font-size:.7rem; padding:.15rem .5rem; border-radius:999px;
  background:color-mix(in srgb, var(--ps-mid) 10%, transparent); color:var(--ps-mid); font-weight:600; }
.ps-aviso-perm-tag.is-none{ background:var(--ps-surface-2); color:var(--ps-ink-3); }
.ps-aviso-cfg{ min-width:13rem; }
.ps-aviso-dias{ margin:.4rem 0 .2rem; }
.ps-aviso-dias .ps-select{ max-width:12rem; }

/* página pública de pagamento (link + token) */
.ps-pay-amount{ text-align:center; padding:1.2rem; margin:1rem 0; border-radius:var(--ps-r);
  background:var(--ps-surface-2); border:1px solid var(--ps-border); }
.ps-pay-amount-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ps-ink-3); margin-bottom:.2rem; }
.ps-pay-amount-value{ display:block; font-size:2rem; font-weight:700; letter-spacing:-.03em; color:var(--ps-ink); }
.ps-pay-due{ display:block; font-size:.8rem; color:var(--ps-ink-3); margin-top:.3rem; }
.ps-pay-done{ text-align:center; padding:1rem 0; }
.ps-pay-done svg{ width:3rem; height:3rem; color:var(--ps-in); margin-bottom:.4rem; }
.ps-pay-done p{ font-weight:600; color:var(--ps-ink); margin:0; }

/* Contador da ocorrência recorrente na lista ("3 de 10"), junto do ícone. */
.ps-rec-n{ display:inline-flex; align-items:center; gap:.2rem; white-space:nowrap; }

/* =====================================================================
   Lista de transações — visual "linha-cartão" (a pagar / a receber e as
   listas da visão geral). Categoria e recorrência viram tags abaixo da
   descrição; o valor e o status ficam empilhados à direita. Bom no desktop
   e no celular.
   ===================================================================== */
.ps-tx-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }
.ps-tag{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:600; line-height:1.35; white-space:nowrap;
  padding:.16rem .52rem; border-radius:999px;
  background:var(--ps-surface-2); color:var(--ps-ink-2);
  border:1px solid var(--ps-border);
}
.ps-tag svg{ width:12px; height:12px; }
.ps-tag .ps-cat-dot{ margin:0; width:8px; height:8px; }
/* Tag da recorrência ("3 de 10") — com um leve destaque. */
.ps-tag-rec{ background:rgba(72,54,236,.08); border-color:rgba(72,54,236,.22); color:var(--ps-mid); }
[data-bs-theme="dark"] .ps-tag-rec{ color:#a99cff; }

/* Valor + status empilhados à direita. */
.ps-amount-cell{ display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.ps-amount{ font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.ps-amount.is-in{ color:var(--ps-in); }
.ps-amount.is-out{ color:var(--ps-out); }
.ps-amount-status{ display:flex; }
.ps-amount-status .ps-status-btn{ padding:0; }

/* Um respiro a mais entre as linhas e realce no hover. */
.ps-table-tx td{ padding-top:.85rem; padding-bottom:.85rem; }
.ps-table-tx tbody tr{ transition:background var(--ps-t); }

/* --------- Celular: cada linha vira um cartão de 2 colunas --------- */
@media (max-width: 767.98px){
  .ps-table-tx thead{ display:none; }
  .ps-table-tx tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"desc amount" "desc actions";
    align-items:start; gap:.3rem .7rem;
    padding:.85rem .9rem; border-bottom:1px solid var(--ps-border);
  }
  .ps-table-tx tr:last-child{ border-bottom:0; }
  .ps-table-tx td{ border:0; padding:0; }
  .ps-table-tx td[data-mob="hide"]{ display:none; }
  .ps-c-desc{ grid-area:desc; min-width:0; }
  /* Coluna direita: valor, status e botões, TODOS encostados na mesma borda
     direita. Cada célula é ancorada à direita da coluna (justify-self:end) e o
     conteúdo é alinhado por text-align:right — os elementos internos são
     inline (o valor, o botão de status e a barra de ações), então respeitam o
     alinhamento e terminam exatamente na mesma linha vertical. */
  .ps-c-amount{ grid-area:amount; justify-self:end; text-align:right; }
  .ps-c-act{ grid-area:actions; justify-self:end; align-self:end; text-align:right; }
  .ps-table-tx .ps-amount-cell{ display:block; text-align:right; }
  .ps-table-tx .ps-amount{ display:block; }
  .ps-table-tx .ps-amount-status{ display:block; margin-top:.4rem; }
  .ps-table-tx .ps-amount-status .ps-status-btn{ display:inline-flex; }
  .ps-table-tx .ps-c-act .ps-row-actions{ display:inline-flex; }
  /* O valor encosta na borda direita. Fazemos o "pill" do status e o último
     ícone de ação encostarem na MESMA borda: o caret do status e o padding do
     botão são folga à direita, então tiramos essa folga do fluxo — o pill vira
     o elemento alinhado e o caret fica solto logo depois, dentro do respiro do
     cartão; o ícone perde o padding da direita e encosta igual ao valor. */
  .ps-table-tx .ps-amount-status .ps-status-btn{ position:relative; }
  .ps-table-tx .ps-amount-status .ps-status-caret{
    position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:.12rem;
  }
  .ps-table-tx .ps-c-act .ps-row-actions .ps-chip-btn:last-child{ padding-right:0; }
}

/* Tag de categoria clicável (troca rápida pela lista). */
button.ps-tag-cat{ cursor:pointer; font:inherit; }
button.ps-tag-cat:hover{ border-color:var(--ps-border-strong); background:var(--ps-surface); }
.ps-tag-cat-add{ color:var(--ps-ink-3); font-weight:600; }
/* Modal de trocar categoria: o combo mostra a lista EM FLUXO (não flutuando),
   para o modal crescer junto e nada ficar cortado. */
.ps-cat-modal .ps-modal-box{ min-width:min(360px,92vw); overflow:visible; }
.ps-cat-modal [data-role=campo]{ margin:.4rem 0 .2rem; }
.ps-cat-modal .ps-combo-list{
  position:static; box-shadow:none; margin-top:.5rem;
  left:auto; right:auto; top:auto; max-height:15rem;
}
.ps-cat-modal .ps-combo-input{ width:100%; }

/* psPrompt — modal simples com um campo de texto (ex.: criar categoria/conta). */
.ps-prompt-modal .ps-modal-box{ min-width:min(360px,92vw); }
.ps-prompt-modal .ps-input{ width:100%; margin:.3rem 0 0; }

/* Modal de excluir categoria em uso: opções empilhadas. */
.ps-catdel-opts{ display:flex; flex-direction:column; gap:.6rem; margin:.2rem 0 .2rem; }
.ps-catdel-opts .ps-radio{ display:flex; align-items:center; gap:.5rem; font-size:.92rem; cursor:pointer; }
.ps-catdel-opts .ps-select{ margin:-.2rem 0 .3rem 1.6rem; max-width:calc(100% - 1.6rem); }
.ps-catdel-opts .ps-select:disabled{ opacity:.5; }

/* Aviso de "repete todo dia X" na aba de recorrência. */
.ps-rep-anchor{ margin:.5rem 0 0; font-size:.85rem; font-weight:600; color:var(--ps-mid); }
.ps-rep-anchor:empty{ display:none; }
[data-bs-theme="dark"] .ps-rep-anchor{ color:#a99cff; }

/* Seletor de cor: botão com a cor escolhida (abre o modal da paleta). */
.ps-colorpick-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .7rem; border:1px solid var(--ps-border); border-radius:var(--ps-r-md);
  background:var(--ps-surface); color:var(--ps-ink); cursor:pointer; font:inherit;
}
.ps-colorpick-btn:hover{ border-color:var(--ps-border-strong); }
.ps-colorpick-dot{
  width:1.5rem; height:1.5rem; border-radius:8px; flex:none;
  background:var(--c, var(--ps-mid)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.ps-colorpick-label{ font-size:.9rem; }
.ps-colorpick-caret{ color:var(--ps-ink-3); font-size:.7rem; }
/* Modal da paleta. */
.ps-colorpick-modal .ps-modal-box{ min-width:min(340px,92vw); }
.ps-color-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:.6rem; margin-top:.6rem; }
.ps-color-cell{
  aspect-ratio:1; border-radius:10px; cursor:pointer; padding:0;
  background:var(--c); border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.ps-color-cell:hover{ transform:scale(1.06); }
.ps-color-cell.is-on{ box-shadow:0 0 0 2px var(--ps-surface), 0 0 0 4px var(--c); }
@media (min-width:480px){ .ps-color-grid{ grid-template-columns:repeat(10, 1fr); } }

/* Itens editáveis (categorias/contas em Ajustes): expandem para editar. */
.ps-edit-item{ border-bottom:1px solid var(--ps-border); }
.ps-edit-sum{
  display:flex; align-items:center; gap:.5rem; padding:.55rem 0; cursor:pointer;
  list-style:none; user-select:none;
}
.ps-edit-sum::-webkit-details-marker{ display:none; }
.ps-edit-name{ font-weight:600; }
.ps-edit-dim{ opacity:.6; font-size:.88rem; }
.ps-edit-ic{ margin-left:auto; color:var(--ps-ink-3); display:inline-flex; }
.ps-edit-ic svg{ width:16px; height:16px; }
.ps-edit-item[open] .ps-edit-ic{ color:var(--ps-mid); }
.ps-edit-sum:hover .ps-edit-ic{ color:var(--ps-ink); }
.ps-edit-body{ padding:.4rem 0 .9rem; }

/* Permissões da equipe: toggle segmentado (Nada/Ver/Gerenciar) e Não/Sim. */
.ps-perm-grid{ display:grid; grid-template-columns:1fr; gap:.7rem; }
@media (min-width:560px){ .ps-perm-grid{ grid-template-columns:1fr 1fr; gap:.7rem 1.2rem; } }
.ps-perm{ display:flex; flex-direction:column; gap:.35rem; }
.ps-perm-label{ font-size:.82rem; font-weight:600; color:var(--ps-ink-2); display:flex; align-items:center; gap:.3rem; }
.ps-seg{ display:grid; gap:0; border:1px solid var(--ps-border); border-radius:10px; overflow:hidden; background:var(--ps-surface-2); }
.ps-seg-3{ grid-template-columns:repeat(3,1fr); }
.ps-seg-2{ grid-template-columns:repeat(2,1fr); }
.ps-seg input{ position:absolute; opacity:0; pointer-events:none; }
.ps-seg label{
  text-align:center; padding:.5rem .3rem; font-size:.82rem; font-weight:600;
  color:var(--ps-ink-3); cursor:pointer; user-select:none; border-left:1px solid var(--ps-border);
  transition:background .12s, color .12s;
}
.ps-seg label:first-of-type{ border-left:0; }
.ps-seg label:hover{ color:var(--ps-ink); }
.ps-seg input:checked + label{ background:var(--ps-grad); color:#fff; }
.ps-seg input:focus-visible + label{ box-shadow:inset 0 0 0 2px var(--ps-link); }

/* Campo de foto (usuário/espaço) + modal de recorte. */
.ps-avatar-field{ display:flex; align-items:center; gap:1rem; }
.ps-av-preview{
  width:72px; height:72px; border-radius:16px; flex:none;
  background-color:var(--ps-mid); background-size:cover; background-position:center;
  border:2px solid var(--ps-border); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.6rem; overflow:hidden;
}
.ps-av-preview.has-photo .ps-av-ini{ display:none; }
.ps-av-acts{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ps-crop-modal .ps-modal-box{ min-width:min(340px,92vw); }
.ps-crop-stage{
  position:relative; width:300px; max-width:100%; aspect-ratio:1/1; margin:.4rem auto .2rem;
  border-radius:14px; overflow:hidden; background:#111; touch-action:none; cursor:grab;
}
.ps-crop-stage:active{ cursor:grabbing; }
.ps-crop-stage canvas{ display:block; width:100%; height:100%; }
.ps-crop-ring{ position:absolute; inset:0; box-shadow:0 0 0 100vmax rgba(0,0,0,.35) inset; border-radius:14px; pointer-events:none; }
.ps-crop-zoom{ display:block; width:100%; margin:.5rem 0 .2rem; accent-color:var(--ps-link); }

/* Foto do espaço no hub (quadrado com borda na cor do espaço). */
.ps-hub-dot.has-photo{ background-size:cover; background-position:center; border:2px solid; color:transparent; }

/* Quadradinho do espaço (rail e barra): inicial ou foto com borda na cor. */
.ps-space-sq{
  width:1.75rem; height:1.75rem; border-radius:8px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.85rem; line-height:1;
  background-size:cover; background-position:center; overflow:hidden;
}
.ps-space-sq.has-photo{ border:2px solid; color:transparent; }

/* Avatar do usuário com foto. */
.ps-avatar.has-photo{ background-size:cover; background-position:center; color:transparent; text-indent:-9999px; }

/* Cartão "Perfil" no hub: foto do usuário ou inicial na cor do ícone. */
.ps-hub-ic.has-photo{ background-size:cover; background-position:center; color:transparent; }
.ps-hub-ic:not(:has(svg)){ font-weight:700; }

/* Seletor de plano ao criar o 2º espaço: cards clicáveis (radio escondido). */
.ps-plan-radio{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.ps-plan-pick{ display:block; cursor:pointer; border:2px solid var(--ps-border); border-radius:14px; transition:border-color .12s, box-shadow .12s; }
.ps-plan-pick:hover{ border-color:var(--ps-link); }
.ps-plan-radio:checked + .ps-plan-pick{ border-color:var(--ps-link); box-shadow:0 0 0 1px var(--ps-link) inset; }
.ps-plan-radio:focus-visible + .ps-plan-pick{ box-shadow:0 0 0 2px var(--ps-link); }