/* My Help — Área do cliente (v2). Mobile-first, claro/escuro, sem dependências além do Bootstrap. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans/pjs-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans/pjs-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

:root {
  --p-accent: #2f6bff; --p-accent-2: #7c5cff; --p-accent-soft: #eaf0ff; --p-sky: #38bdf8;
  --p-bg: #f5f7fb; --p-card: #ffffff; --p-card-2: #f8fafc; --p-ink: #101828; --p-muted: #5c6578; --p-line: #e7eaf1;
  --p-good: #12b76a; --p-good-soft: #e7f8ef; --p-warn: #f79009; --p-warn-soft: #fff4e5; --p-bad: #e5484d; --p-bad-soft: #fdecec;
  --p-gold: #f5b300; --p-gold-soft: #fff7d6;
  --p-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .10);
  --p-shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 48px -16px rgba(16, 24, 40, .18);
  --p-r: 1.1rem; --p-r-sm: .7rem;
  --p-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-accent: #5b8cff; --p-accent-soft: rgba(91, 140, 255, .14); --p-bg: #0b1220; --p-card: #111a2e; --p-card-2: #0f1729;
    --p-ink: #e8edf7; --p-muted: #98a2b8; --p-line: #1f2a44; --p-good-soft: rgba(18, 183, 106, .15); --p-warn-soft: rgba(247, 144, 9, .15);
    --p-bad-soft: rgba(229, 72, 77, .16); --p-gold-soft: rgba(245, 179, 0, .14);
    --p-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5); --p-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --p-accent: #5b8cff; --p-accent-soft: rgba(91, 140, 255, .14); --p-bg: #0b1220; --p-card: #111a2e; --p-card-2: #0f1729;
  --p-ink: #e8edf7; --p-muted: #98a2b8; --p-line: #1f2a44; --p-good-soft: rgba(18, 183, 106, .15); --p-warn-soft: rgba(247, 144, 9, .15);
  --p-bad-soft: rgba(229, 72, 77, .16); --p-gold-soft: rgba(245, 179, 0, .14);
  --p-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .5); --p-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

body.p-app, body.p-auth { font-family: var(--p-font); background: var(--p-bg); color: var(--p-ink); -webkit-font-smoothing: antialiased; min-height: 100vh; }
.p-muted { color: var(--p-muted) !important; }
a { color: var(--p-accent); }
.p-link-sm { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--p-accent); }
.p-link-sm:hover { text-decoration: underline; }
.p-skip { position: absolute; left: 1rem; top: 1rem; z-index: 2000; background: var(--p-card); padding: .5rem 1rem; border-radius: .5rem; }

/* Bootstrap no tema do portal */
.btn { border-radius: .8rem; font-weight: 600; transition: transform .15s var(--p-ease), box-shadow .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { --bs-btn-bg: var(--p-accent); --bs-btn-border-color: var(--p-accent); --bs-btn-hover-bg: #1f57e6; --bs-btn-hover-border-color: #1f57e6; --bs-btn-active-bg: #1a4bd0; }
.btn-lg { padding: .8rem 1.2rem; font-size: 1rem; }
.p-btn-glow { box-shadow: 0 8px 20px -6px rgba(47, 107, 255, .55); }
.form-control { background: var(--p-card); color: var(--p-ink); border-color: var(--p-line); border-radius: .8rem; }
.dropdown-menu.p-menu, .p-app .dropdown-menu { background: var(--p-card); border: 1px solid var(--p-line); border-radius: .9rem; box-shadow: var(--p-shadow-lg); padding: .4rem; color: var(--p-ink); }
.p-app .dropdown-item { border-radius: .55rem; color: var(--p-ink); }
.p-app .dropdown-item:hover { background: var(--p-accent-soft); }
.p-app .dropdown-item.active { background: var(--p-accent); color: #fff; }
.p-app .dropdown-divider { border-color: var(--p-line); }
.alert { border-radius: var(--p-r-sm); }
.list-group-item { background: var(--p-card); color: var(--p-ink); border-color: var(--p-line); }

/* ---------------------------------------------------------------- shell */
.p-side { display: none; }
.p-shell { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.p-top { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem;
  background: color-mix(in srgb, var(--p-bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--p-line) 70%, transparent); }
.p-top-logo { display: block; line-height: 0; }
.p-logo-d { display: none; }
:root[data-theme="dark"] .p-logo-l { display: none; } :root[data-theme="dark"] .p-logo-d { display: inline-block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-logo-l { display: none; } :root:not([data-theme="light"]) .p-logo-d { display: inline-block; } }
.p-proj { min-width: 0; }
.p-proj-btn { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; border: 1px solid var(--p-line); background: var(--p-card);
  color: var(--p-ink); border-radius: 999px; padding: .38rem .8rem; font-weight: 700; font-size: .9rem; box-shadow: var(--p-shadow); }
.p-proj-btn.is-static { box-shadow: none; }
.p-proj-btn i { font-size: .7rem; color: var(--p-muted); }
.p-proj-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--p-good); box-shadow: 0 0 0 3px var(--p-good-soft); flex: none; }
.p-icon-btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--p-line); background: var(--p-card); color: var(--p-ink);
  display: inline-grid; place-items: center; transition: transform .2s var(--p-ease); }
.p-icon-btn:hover { transform: rotate(-12deg); }
.p-ico-light { display: none; }
:root[data-theme="dark"] .p-ico-light { display: inline; } :root[data-theme="dark"] .p-ico-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-ico-light { display: inline; } :root:not([data-theme="light"]) .p-ico-dark { display: none; } }
.p-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; color: #fff; font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2)); box-shadow: 0 4px 12px -4px rgba(47, 107, 255, .6); }
.p-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.1rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.p-foot { text-align: center; font-size: .78rem; color: var(--p-muted); padding: 0 1rem 1.25rem; }

.p-tabbar { position: fixed; z-index: 1030; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--p-card) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--p-line); border-radius: 1.2rem; box-shadow: var(--p-shadow-lg); padding: .35rem; }
.p-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .25rem; border-radius: .9rem;
  color: var(--p-muted); text-decoration: none; font-size: .7rem; font-weight: 700; transition: background .2s, color .2s; }
.p-tabbar a i { font-size: 1.1rem; }
.p-tabbar a.active { color: var(--p-accent); background: var(--p-accent-soft); }

@media (min-width: 992px) {
  .p-shell { margin-left: 248px; padding-bottom: 0; }
  .p-tabbar { display: none; }
  .p-top { padding: .8rem 2rem; }
  .p-main { padding: 1.75rem 2rem 2rem; gap: 1.25rem; }
  .p-side { display: flex; flex-direction: column; gap: 1.5rem; position: fixed; inset: 0 auto 0 0; width: 248px; padding: 1.25rem 1rem;
    background: var(--p-card); border-right: 1px solid var(--p-line); z-index: 1030; }
  .p-brand { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; padding: .25rem .5rem; }
  .p-brand small { display: block; font-weight: 700; font-size: .7rem; color: var(--p-muted); text-transform: uppercase; letter-spacing: .08em; }
  .p-side-nav { display: flex; flex-direction: column; gap: .2rem; }
  .p-nav-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: .8rem; color: var(--p-muted); text-decoration: none; font-weight: 600;
    transition: background .2s, color .2s, transform .2s var(--p-ease); }
  .p-nav-item i { width: 1.1rem; text-align: center; }
  .p-nav-item:hover { background: var(--p-card-2); color: var(--p-ink); transform: translateX(2px); }
  .p-nav-item.active { background: var(--p-accent-soft); color: var(--p-accent); }
  .p-side-help { margin-top: auto; display: flex; gap: .75rem; align-items: center; padding: .9rem; border-radius: 1rem; text-decoration: none; color: var(--p-ink);
    background: linear-gradient(135deg, var(--p-good-soft), var(--p-accent-soft)); font-size: .8rem; }
  .p-side-help i { font-size: 1.5rem; color: #25d366; }
  .p-side-help strong { display: block; font-size: .875rem; }
}

/* ---------------------------------------------------------------- blocos */
.p-hello h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: .1rem 0 .3rem; }
.p-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; color: var(--p-accent); margin: 0; }
@media (min-width: 768px) { .p-hello h1 { font-size: 1.9rem; } }

.p-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .p-grid { gap: 1.25rem; }
  .p-grid-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .p-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.p-stack { display: flex; flex-direction: column; gap: 1rem; }
.p-card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-r); box-shadow: var(--p-shadow); padding: 1.1rem; min-width: 0; }
@media (min-width: 768px) { .p-card { padding: 1.4rem; } }
.p-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.p-card-head h2 { font-size: 1rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .55rem; }
.p-card-head h2 i { color: var(--p-accent); width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: var(--p-accent-soft); display: inline-grid; place-items: center; font-size: .85rem; }
.p-chip { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: var(--p-card-2); border: 1px solid var(--p-line); color: var(--p-muted); }

/* Saúde do site */
.p-health { position: relative; overflow: hidden; }
.p-health::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 107, 255, .18), transparent); pointer-events: none; }
.p-level { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 800; padding: .32rem .7rem; border-radius: 999px;
  color: #fff; background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2)); box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .6); }
.p-health-body { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
@media (min-width: 576px) { .p-health-body { flex-direction: row; align-items: center; } }
.p-ring { position: relative; width: var(--size); height: var(--size); flex: none; }
.p-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.p-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.p-ring-bg { stroke: var(--p-card-2); stroke: color-mix(in srgb, var(--p-line) 80%, transparent); }
.p-ring-fg { stroke: var(--p-accent); stroke-dashoffset: var(--off); animation: p-ring 1.4s var(--p-ease) both; filter: drop-shadow(0 4px 8px rgba(47, 107, 255, .35)); }
@keyframes p-ring { from { stroke-dashoffset: var(--len); } }
.p-ring-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.p-ring-txt strong { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.p-ring-txt span { font-size: .75rem; color: var(--p-muted); font-weight: 600; }
.p-signals { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: .8rem; font-size: .875rem; }
.p-bar { height: .45rem; border-radius: 999px; background: var(--p-card-2); background: color-mix(in srgb, var(--p-line) 70%, transparent); overflow: hidden; margin-top: .35rem; }
.p-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--p-accent); animation: p-grow 1.1s var(--p-ease) both; }
.p-bar.is-good span { background: var(--p-good); } .p-bar.is-mid span { background: var(--p-warn); } .p-bar.is-low span { background: var(--p-bad); }
.p-bar.is-accent span { background: linear-gradient(90deg, var(--p-accent), var(--p-sky)); }
@keyframes p-grow { from { width: 0; } }
.p-levels { display: flex; gap: .4rem; margin-top: 1.1rem; }
.p-levels span { flex: 1; height: 2rem; border-radius: .6rem; display: grid; place-items: center; font-size: .8rem; background: var(--p-card-2); color: var(--p-muted); border: 1px solid var(--p-line); }
.p-levels span.on { background: var(--p-accent-soft); color: var(--p-accent); border-color: transparent; }

/* KPIs */
.p-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .p-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.p-kpis-stack { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) and (max-width: 991.98px) { .p-kpis-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .p-kpis-stack { grid-template-columns: minmax(0, 1fr); } }
.p-kpi { position: relative; display: flex; flex-direction: column; gap: .2rem; background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-r);
  box-shadow: var(--p-shadow); padding: 1rem; text-decoration: none; color: inherit; overflow: hidden; min-height: 118px;
  transition: transform .25s var(--p-ease), box-shadow .25s; }
a.p-kpi:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); color: inherit; }
.p-kpi:has(.p-spark) { padding-bottom: 2.9rem; }
.p-kpi.is-gold { background: linear-gradient(160deg, var(--p-gold-soft), var(--p-card) 70%); }
.p-kpi-label { font-size: .78rem; font-weight: 700; color: var(--p-muted); display: flex; align-items: center; gap: .4rem; }
.p-kpi-num { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p-kpi-num small { font-size: .9rem; font-weight: 700; color: var(--p-muted); }
@media (min-width: 768px) { .p-kpi-num { font-size: 2.1rem; } }
.p-kpi-hint { font-size: .78rem; color: var(--p-muted); }
.p-kpi-wait { font-size: .85rem; color: var(--p-muted); font-weight: 600; margin-top: .3rem; }
.p-kpis-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.p-kpis-inline > div { display: flex; flex-direction: column; gap: .15rem; }
.p-delta { align-self: flex-start; display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; }
.p-delta i { font-size: .62rem; }
.p-delta.is-up { color: var(--p-good); background: var(--p-good-soft); } .p-delta.is-down { color: var(--p-bad); background: var(--p-bad-soft); }
.p-delta.is-flat { color: var(--p-muted); background: var(--p-card-2); }
.p-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38px; color: var(--p-accent); opacity: .9; }
.p-spark-line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: p-draw 1.4s .2s var(--p-ease) forwards; }
.p-spark-area { fill: currentColor; opacity: .08; }
@keyframes p-draw { to { stroke-dashoffset: 0; } }

/* Meta + sequências */
.p-goal-nums { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.p-goal-bar { height: .9rem; border-radius: 999px; background: var(--p-card-2); border: 1px solid var(--p-line); overflow: hidden; margin-bottom: .6rem; }
.p-goal-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; animation: p-grow 1.3s var(--p-ease) both;
  background: linear-gradient(90deg, var(--p-accent), var(--p-accent-2)); background-size: 200% 100%; position: relative; }
.p-goal-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-100%); animation: p-shine 2.6s 1.2s ease-in-out infinite; }
.p-goal-bar.is-done span { background: linear-gradient(90deg, var(--p-good), #5be3a5); }
@keyframes p-shine { 60%, 100% { transform: translateX(100%); } }
.p-streaks { display: grid; gap: .6rem; margin-top: 1.1rem; }
.p-streak { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: .9rem; background: var(--p-card-2); border: 1px solid var(--p-line); }
.p-streak strong { display: block; font-size: .9rem; } .p-streak small { color: var(--p-muted); font-size: .76rem; }
.p-streak-ico { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; flex: none; font-size: 1.05rem; }
.p-streak-ico.is-fire { color: #ff6b2c; background: rgba(255, 107, 44, .14); }
.p-streak-ico.is-fire:not(.is-off) i { animation: p-flame 1.6s ease-in-out infinite; }
.p-streak-ico.is-shield { color: var(--p-good); background: var(--p-good-soft); }
.p-streak-ico.is-off { filter: grayscale(1); opacity: .55; }
@keyframes p-flame { 50% { transform: scale(1.15) rotate(-6deg); } }
.p-months { display: flex; align-items: flex-end; gap: .5rem; height: 110px; margin-top: 1.1rem; }
.p-months > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; justify-content: flex-end; }
.p-months span { width: 100%; max-width: 44px; height: var(--h); border-radius: .5rem .5rem .25rem .25rem; background: var(--p-accent-soft); animation: p-rise 1s var(--p-ease) both; }
.p-months .is-cur span { background: linear-gradient(180deg, var(--p-accent-2), var(--p-accent)); }
.p-months small { font-size: .7rem; color: var(--p-muted); font-weight: 700; text-transform: capitalize; }
@keyframes p-rise { from { height: 0; } }

/* Conquistas */
.p-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
@media (min-width: 576px) { .p-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-badge { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: .9rem .6rem;
  border-radius: 1rem; border: 1px solid var(--p-line); background: var(--p-card-2); transition: transform .25s var(--p-ease); outline: 0; }
.p-badge:hover, .p-badge:focus-visible { transform: translateY(-3px); }
.p-badge strong { font-size: .8rem; line-height: 1.2; }
.p-badge small { font-size: .7rem; color: var(--p-muted); line-height: 1.25; }
.p-badge-ico { position: relative; width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: .2rem; }
.p-badge.is-on .p-badge-ico { color: #fff; background: conic-gradient(from 200deg, var(--p-gold), #ff9f43, var(--p-accent-2), var(--p-accent), var(--p-gold));
  box-shadow: 0 8px 18px -6px rgba(245, 179, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .35); }
.p-badge.is-on { background: linear-gradient(180deg, var(--p-gold-soft), var(--p-card-2)); border-color: color-mix(in srgb, var(--p-gold) 35%, var(--p-line)); }
.p-badge.is-off .p-badge-ico { color: var(--p-muted); background: var(--p-card); border: 2px dashed var(--p-line); }
.p-badge.is-off strong { color: var(--p-muted); }
.p-badge-lock { position: absolute; right: -4px; bottom: -4px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--p-card); border: 1px solid var(--p-line);
  display: grid; place-items: center; font-size: .55rem; color: var(--p-muted); }
.p-badge-new { position: absolute; top: .45rem; right: .45rem; font-size: .6rem; font-weight: 800; color: #fff; background: var(--p-bad); padding: .1rem .4rem; border-radius: 999px; animation: p-pulse 1.6s infinite; }
.p-badge.is-new .p-badge-ico { animation: p-pop .9s var(--p-ease) both, p-glow 2.4s 1s ease-in-out infinite; }
@keyframes p-pop { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.18) rotate(8deg); opacity: 1; } 100% { transform: none; } }
@keyframes p-glow { 50% { box-shadow: 0 0 0 8px rgba(245, 179, 0, .18), 0 8px 18px -6px rgba(245, 179, 0, .55); } }
@keyframes p-pulse { 50% { transform: scale(1.1); } }

.p-celebra { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1.5rem; background: rgba(11, 18, 32, .55); backdrop-filter: blur(6px); animation: p-fade .3s both; }
.p-celebra[hidden] { display: none; }
.p-celebra-box { position: relative; width: min(380px, 100%); text-align: center; background: var(--p-card); color: var(--p-ink); border-radius: 1.5rem; padding: 2rem 1.5rem 1.5rem; box-shadow: var(--p-shadow-lg); animation: p-up .5s var(--p-ease) both; }
.p-celebra-ico { width: 5.5rem; height: 5.5rem; margin: -4.25rem auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #fff;
  background: conic-gradient(from 200deg, var(--p-gold), #ff9f43, var(--p-accent-2), var(--p-accent), var(--p-gold)); box-shadow: 0 0 0 8px var(--p-card), 0 18px 40px -10px rgba(245, 179, 0, .7);
  animation: p-pop 1s .15s var(--p-ease) both; }
.p-celebra-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--p-gold); margin: 0 0 .25rem; }
.p-celebra h2 { font-size: 1.4rem; font-weight: 800; }
.p-confete { position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px; z-index: 3001; pointer-events: none; animation: p-fall var(--d, 2.6s) var(--p-ease) forwards; }
@keyframes p-fall { to { transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 540deg)); opacity: .9; } }
@keyframes p-fade { from { opacity: 0; } }
@keyframes p-up { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* Financeiro */
.p-next { border-radius: 1.1rem; padding: 1.25rem; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, #7c5cff 0%, transparent 55%), linear-gradient(135deg, #2f6bff, #1b3fa8 70%, #101828); box-shadow: 0 18px 40px -18px rgba(47, 107, 255, .8); }
.p-next.is-late { background: radial-gradient(120% 120% at 100% 0%, #ff9f43 0%, transparent 55%), linear-gradient(135deg, #e5484d, #9b1c31 75%, #3b0a14); box-shadow: 0 18px 40px -18px rgba(229, 72, 77, .8); }
.p-next::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -110px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .07); }
.p-next-hero { height: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
.p-next-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.p-next-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; opacity: .85; display: flex; gap: .45rem; align-items: center; }
.p-next-valor { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; margin: .6rem 0 .1rem; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .p-next-valor { font-size: 2.9rem; } }
.p-next-desc { opacity: .85; font-size: .9rem; margin-bottom: 1.1rem; }
.p-next-acts { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 1; }
.p-next .p-next-acts .btn { flex: 1 1 auto; min-height: 46px; }
.p-btn-pix { background: #fff; color: #101828; border: 0; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
.p-btn-pix:hover { background: #f1f5ff; color: #101828; }
.p-next .p-btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.p-next .p-btn-ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.p-btn-ghost { background: var(--p-card-2); color: var(--p-ink); border: 1px solid var(--p-line); }
.p-btn-ghost:hover { background: var(--p-accent-soft); color: var(--p-accent); }
.p-boleto .p-btn-pix { background: var(--p-good); color: #fff; }
.p-btn-pix.is-ok, .p-btn-ghost.is-ok { background: var(--p-good) !important; color: #fff !important; }
.p-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.p-pill.is-paid { color: var(--p-good); background: var(--p-good-soft); }
.p-pill.is-open { color: var(--p-accent); background: var(--p-accent-soft); }
.p-pill.is-late { color: var(--p-bad); background: var(--p-bad-soft); }
.p-next .p-pill { background: rgba(255, 255, 255, .18); color: #fff; }
.p-boleto { padding: .9rem 0; border-top: 1px solid var(--p-line); } .p-boleto:first-of-type { border-top: 0; padding-top: 0; }
.p-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.p-timeline::before { content: ""; position: absolute; left: .95rem; top: 1.8rem; bottom: .5rem; width: 2px; background: var(--p-line); }
.p-tl-mes { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--p-muted); padding: .9rem 0 .4rem 2.75rem; }
.p-tl-mes:first-child { padding-top: 0; }
.p-tl-item { position: relative; display: flex; gap: .85rem; padding: .35rem 0 .7rem; }
.p-tl-dot { position: relative; z-index: 1; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .72rem; border: 3px solid var(--p-card); }
.p-tl-item.is-paid .p-tl-dot { background: var(--p-good); color: #fff; }
.p-tl-item.is-open .p-tl-dot { background: var(--p-accent-soft); color: var(--p-accent); }
.p-tl-item.is-late .p-tl-dot { background: var(--p-bad); color: #fff; }
.p-tl-body { flex: 1; min-width: 0; padding: .65rem .8rem; border-radius: .85rem; background: var(--p-card-2); border: 1px solid var(--p-line); }
.p-tl-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.p-tl-row strong { font-size: .9rem; }
.p-tl-valor { font-variant-numeric: tabular-nums; }
.p-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.p-list li { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: .85rem; background: var(--p-card-2); border: 1px solid var(--p-line); }
.p-list li strong { font-size: .9rem; } .p-list li small { display: block; font-size: .76rem; }
.p-list-ico { width: 2.2rem; height: 2.2rem; border-radius: .7rem; display: grid; place-items: center; flex: none; background: var(--p-accent-soft); color: var(--p-accent); }
.p-list-ico.is-accent { background: var(--p-gold-soft); color: #c98a00; }

/* Desempenho */
.p-chart { position: relative; color: var(--p-accent); }
.p-chart svg { width: 100%; height: 190px; display: block; overflow: visible; }
.p-chart .p-gridline { stroke: var(--p-line); stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.p-line { fill: none; stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: p-draw 1.6s var(--p-ease) forwards; }
.p-area { animation: p-fade 1.2s .4s both; }
.p-chart-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--p-muted); margin-top: .35rem; font-weight: 600; }
.p-chart-tip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; background: var(--p-ink); color: var(--p-bg); font-size: .75rem; font-weight: 700;
  padding: .3rem .55rem; border-radius: .5rem; white-space: nowrap; box-shadow: var(--p-shadow-lg); }
.p-chart-cursor { position: absolute; top: 0; bottom: 1.4rem; width: 2px; background: currentColor; opacity: .25; pointer-events: none; }
.p-queries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.p-queries li { display: flex; gap: .75rem; align-items: flex-start; }
.p-q-rank { width: 1.7rem; height: 1.7rem; border-radius: .55rem; flex: none; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--p-card-2); color: var(--p-muted); border: 1px solid var(--p-line); }
.p-queries li:nth-child(-n+3) .p-q-rank { background: var(--p-gold-soft); color: #b07a00; border-color: transparent; }
.p-q-body { flex: 1; min-width: 0; } .p-q-term { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* Estados vazios */
.p-empty { text-align: center; padding: 1.5rem .75rem; }
.p-empty-ico { width: 4rem; height: 4rem; margin: 0 auto .9rem; border-radius: 1.2rem; display: grid; place-items: center; font-size: 1.5rem; color: var(--p-accent);
  background: linear-gradient(135deg, var(--p-accent-soft), color-mix(in srgb, var(--p-accent-2) 14%, transparent)); animation: p-float 4s ease-in-out infinite; }
.p-empty h3 { font-size: 1rem; font-weight: 800; margin-bottom: .35rem; }
.p-empty p { font-size: .875rem; color: var(--p-muted); max-width: 34rem; margin: 0 auto; }
@keyframes p-float { 50% { transform: translateY(-5px); } }

/* Toast */
.p-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3100; background: var(--p-ink); color: var(--p-bg);
  padding: .65rem 1rem; border-radius: 999px; font-weight: 700; font-size: .875rem; box-shadow: var(--p-shadow-lg); animation: p-up .3s var(--p-ease) both; }
@media (min-width: 992px) { .p-toast { bottom: 2rem; } }

/* Entrada suave */
.p-reveal { animation: p-up .55s var(--p-ease) both; }
.p-main > .p-reveal:nth-child(2), .p-grid > :nth-child(2) { animation-delay: .06s; }
.p-main > :nth-child(3) { animation-delay: .1s; } .p-main > :nth-child(4) { animation-delay: .14s; } .p-main > :nth-child(5) { animation-delay: .18s; }

/* ---------------------------------------------------------------- login / senha */
.p-auth-grid { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.p-auth-hero { display: none; }
@media (min-width: 992px) {
  .p-auth-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .p-auth-hero { display: block; position: relative; overflow: hidden; color: #fff; padding: 3.5rem;
    background: radial-gradient(90% 70% at 85% 10%, rgba(124, 92, 255, .55), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(56, 189, 248, .35), transparent 60%), linear-gradient(160deg, #101828, #0b1220); }
  .p-auth-hero-in { position: relative; z-index: 1; max-width: 30rem; display: flex; flex-direction: column; height: 100%; justify-content: center; }
  .p-auth-hero h2 { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 2rem; }
  .p-auth-hero h2 span { background: linear-gradient(90deg, #7dd3fc, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .p-auth-hero ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
  .p-auth-hero li { display: flex; gap: .8rem; align-items: center; font-weight: 600; color: rgba(255, 255, 255, .88); }
  .p-auth-hero li i { width: 2.3rem; height: 2.3rem; border-radius: .75rem; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
  .p-auth-orb { position: absolute; width: 420px; height: 420px; right: -160px; bottom: -160px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .04); animation: p-float 8s ease-in-out infinite; }
}
.p-auth-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4.5rem 1.25rem 2rem; }
.p-auth-tema { position: absolute; top: 1rem; right: 1rem; }
.p-auth-card { width: 100%; max-width: 410px; animation: p-up .5s var(--p-ease) both; }

.p-auth-card h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .4rem; }
.p-auth-note { margin: 1.4rem 0 0; font-size: .8rem; color: var(--p-muted); display: flex; gap: .5rem; align-items: center; padding: .75rem .9rem; border-radius: .8rem; background: var(--p-card); border: 1px solid var(--p-line); }
.p-auth-note i { color: var(--p-good); }
.p-auth-foot { margin-top: 2rem; font-size: .75rem; color: var(--p-muted); }
.p-form { display: flex; flex-direction: column; gap: 1.1rem; }
.p-field label { font-size: .85rem; font-weight: 700; margin-bottom: .4rem; display: inline-block; }
.p-input { position: relative; display: flex; align-items: center; }
.p-input > i { position: absolute; left: .95rem; color: var(--p-muted); font-size: .9rem; pointer-events: none; }
.p-input input { width: 100%; height: 3.1rem; padding: 0 2.9rem 0 2.6rem; border-radius: .85rem; border: 1.5px solid var(--p-line); background: var(--p-card); color: var(--p-ink);
  font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.p-input input::placeholder { color: color-mix(in srgb, var(--p-muted) 75%, transparent); }
.p-input input:focus { outline: 0; border-color: var(--p-accent); box-shadow: 0 0 0 4px var(--p-accent-soft); }
.p-input-eye { position: absolute; right: .45rem; width: 2.3rem; height: 2.3rem; border: 0; background: transparent; color: var(--p-muted); border-radius: .6rem; }
.p-input-eye:hover { background: var(--p-card-2); }
.p-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: .85rem; font-size: .875rem; font-weight: 600; margin-bottom: 1rem; }
.p-alert.is-danger { background: var(--p-bad-soft); color: var(--p-bad); }
.p-strength { display: flex; gap: .3rem; margin: .6rem 0 .35rem; }
.p-strength span { flex: 1; height: .3rem; border-radius: 999px; background: var(--p-line); transition: background .3s; }
.p-strength[data-n="1"] span:nth-child(-n+1) { background: var(--p-bad); }
.p-strength[data-n="2"] span:nth-child(-n+2) { background: var(--p-warn); }
.p-strength[data-n="3"] span:nth-child(-n+3) { background: #84cc16; }
.p-strength[data-n="4"] span { background: var(--p-good); }
.p-match { color: var(--p-good); font-weight: 700; display: block; margin-top: .4rem; }
.p-steps { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.4rem; font-size: .78rem; font-weight: 700; color: var(--p-muted); }
.p-steps li { flex: 1; display: flex; align-items: center; gap: .4rem; }
.p-steps li span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--p-card); border: 1.5px solid var(--p-line); font-size: .7rem; }
.p-steps li.done span { background: var(--p-good); border-color: var(--p-good); color: #fff; }
.p-steps li.current { color: var(--p-ink); } .p-steps li.current span { border-color: var(--p-accent); color: var(--p-accent); box-shadow: 0 0 0 4px var(--p-accent-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .p-line, .p-spark-line { stroke-dashoffset: 0; }
}