/* ============================================================================
   PRIMEROXY · DESIGN SYSTEM DO PAINEL
   ----------------------------------------------------------------------------
   Derivado do site primeroxy.com («Orbit»):
     · paleta teal (#0F4C5C) sobre papel branco, névoa #EEF1F4, noite #0B1019
     · Bricolage Grotesque (títulos) · Plus Jakarta Sans (texto) · DM Mono (números)
     · nenhum canto vivo: pílulas, cards com raio 24–28px, inputs com 18px
     · o símbolo «órbita» (anel + ponto) marca eyebrows, abas ativas e CTAs

   Este arquivo tem duas partes:
     A) TOKENS + BASE          — variáveis e tipografia (único lugar com HEX)
     B) SKIN DO BOOTSTRAP 5    — card, btn, form, table, nav-tabs, modal, alert…
        + COMPONENTES DO PAINEL (prefixo .pa-)
   ========================================================================== */

/* ==========================================================================
   A · TOKENS
   ====================================================================== */
:root {
  /* paleta crua */
  --paper:        #FFFFFF;
  --mist:         #EEF1F4;
  --tint:         #D9ECF0;
  --teal:         #0F4C5C;
  --teal-deep:    #0A3A47;
  --teal-bright:  #2F97AD;
  --teal-glow:    #79D0DD;
  --night:        #0B1019;
  --ink:          #1F2937;
  --slate:        #5B6675;
  --line-raw:     #E5E7EB;
  --line-strong:  #7F8DA3;
  --muted-ink:    #64718A;
  --faint-ink:    #55616F;
  --paper-tint:   #F5F7FA;
  --mist-deep:    #E5E7EB;
  --up:           #1F9D5B;
  --down:         #D14343;
  --up-ink:       #14703F;
  --down-ink:     #B93A3A;
  --warn:         #B7791F;
  --warn-soft:    #FBF1DC;
  --deep-surface: #121A26;
  --deep-line:    #243140;
  --tint-soft:    #AEB9C9;
  --up-glow:      #2DD477;
  --down-glow:    #F2555A;
  --shadow-ink:   rgba(31, 41, 55, .06);
  --shadow-ink-2: rgba(31, 41, 55, .10);
  --shadow-ink-3: rgba(31, 41, 55, .14);

  /* semânticos (contexto claro) */
  --bg:            var(--paper-tint);
  --surface:       var(--paper);
  --surface-2:     var(--mist);
  --surface-tint:  var(--tint);
  --fg:            var(--ink);
  --fg-muted:      var(--slate);
  --fg-faint:      var(--faint-ink);
  --accent:        var(--teal);
  --accent-2:      var(--teal-bright);
  --accent-strong: var(--teal-deep);
  --accent-fill:   var(--teal);
  --accent-fill-hover: var(--teal-deep);
  --on-accent:     var(--paper);
  --line:          var(--line-raw);
  --line-2:        var(--line-strong);
  --sig-up:        var(--up);
  --sig-down:      var(--down);
  --sig-up-text:   var(--up-ink);
  --sig-down-text: var(--down-ink);
  --focus:         var(--teal);
  --zebra:         var(--paper-tint);

  /* compat com o código legado do painel */
  --primary-color:   var(--teal);
  --secondary-color: var(--teal-bright);
  --chart-color1: #0F4C5C;
  --chart-color2: #2F97AD;
  --chart-color3: #79D0DD;
  --chart-color4: #7F8DA3;
  --chart-color5: #1F2937;

  /* tipografia */
  --ff-display: 'Bricolage Grotesque', 'Trebuchet MS', 'Helvetica Neue', system-ui, sans-serif;
  --ff-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1:   clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-h2:   clamp(1.35rem, 1.9vw, 1.75rem);
  --fs-h3:   1.125rem;
  --fs-body: .9375rem;
  --fs-sm:   .875rem;
  --fs-xs:   .8125rem;
  --fs-meta: .72rem;
  --tr-meta: .12em;

  /* espaçamento e forma */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
  --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem; --s-9: 3rem; --s-10: 4rem;

  --radius-sm:   10px;
  --radius:      18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  --shadow-1: 0 2px 8px var(--shadow-ink);
  --shadow-2: 0 6px 18px var(--shadow-ink);
  --shadow-3: 0 12px 32px var(--shadow-ink-2);
  --shadow-4: 0 24px 60px var(--shadow-ink-3);

  --ease-soft: cubic-bezier(.22, .9, .3, 1);
  --dur-fast: 180ms; --dur: 280ms; --dur-slow: 400ms;
  --spin: 12s;

  --header-h: 64px;
  --wrap: 1360px;
}

/* Contexto escuro — bloco «night» (usado no card de saldo e no painel de auth) */
.tone-deep {
  --bg: var(--night);
  --surface: var(--deep-surface);
  --surface-2: var(--deep-surface);
  --surface-tint: var(--deep-surface);
  --fg: var(--paper);
  --fg-muted: var(--tint-soft);
  --fg-faint: var(--tint-soft);
  --accent: var(--teal-bright);
  --accent-2: var(--teal-bright);
  --accent-strong: var(--teal-glow);
  --accent-fill: var(--paper);
  --accent-fill-hover: var(--tint);
  --on-accent: var(--teal);
  --line: var(--deep-line);
  --line-2: var(--tint-soft);
  --sig-up-text: var(--up-glow);
  --sig-down-text: var(--down-glow);
  --focus: var(--teal-glow);
  --zebra: var(--deep-surface);
  background-color: var(--night);
  color: var(--paper);
}

/* ==========================================================================
   A · BASE
   ====================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--fg);
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: var(--fs-h3); }
h6, .h6 { font-size: 1rem; font-family: var(--ff-body); font-weight: 700; letter-spacing: -.005em; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease-soft); }
a:hover { color: var(--accent-strong); }

small, .small { font-size: var(--fs-xs); }
.text-muted { color: var(--fg-muted) !important; }
.text-success, .color-price-up { color: var(--sig-up-text) !important; }
.text-danger,  .color-price-down { color: var(--sig-down-text) !important; }
.text-primary { color: var(--accent) !important; }
.text-warning { color: var(--warn) !important; }
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
strong, b { font-weight: 700; }
img, svg { max-width: 100%; }
hr { border-color: var(--line); opacity: 1; }

/* números sempre em mono tabular */
.pa-num, .num {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Eyebrow — rótulo em mono caixa alta com órbita */
.pa-eyebrow, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pa-eyebrow--accent { color: var(--accent); }

/* ==========================================================================
   ÓRBITA — o símbolo
   ====================================================================== */
.orbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  color: inherit;
  line-height: 0;
}
.orbit svg { width: 100%; height: 100%; overflow: visible; fill: none; display: block; }
.orbit__ring { stroke: currentColor; stroke-width: 2; fill: none; opacity: .85; }
.orbit__dot {
  fill: currentColor;
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.orbit--sm { width: 1em; height: 1em; }
.orbit--md { width: 1.75rem; height: 1.75rem; }
.orbit--lg { width: 2.75rem; height: 2.75rem; }
.orbit--accent { color: var(--accent); }
.orbit--seal {
  background-color: var(--surface-tint);
  border-radius: var(--radius-pill);
  padding: .45em;
  width: 3rem; height: 3rem;
  color: var(--accent);
}
@keyframes orbit-lap { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.orbit--spin .orbit__dot { animation: orbit-lap var(--spin) linear infinite; transition: none; }
:is(.btn, .card, .pa-nav__link, .chip, .nav-link, .list-group-item, .orbit-host):hover .orbit:not(.orbit--spin) .orbit__dot,
:is(.btn, .card, .pa-nav__link, .chip, .nav-link, .list-group-item, .orbit-host):focus-visible .orbit:not(.orbit--spin) .orbit__dot {
  transform: rotate(180deg);
}

/* ==========================================================================
   SHELL — header em cápsula flutuante + área principal
   ====================================================================== */
.pa-shell { min-height: 100vh; display: flex; flex-direction: column; }

.pa-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 10px var(--s-4) 0;
  pointer-events: none;
}
.pa-capsule {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  min-height: var(--header-h);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background-color: var(--paper);
  border: 1px solid var(--line-raw);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.pa-header.is-stuck .pa-capsule { box-shadow: var(--shadow-3); border-color: var(--tint); }
.pa-capsule__spacer { flex: 1 1 auto; }

.pa-logo { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); }
.pa-logo img { height: 32px; width: auto; display: block; }

.pa-nav { display: flex; align-items: center; }
.pa-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pa-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  color: var(--slate);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
.pa-nav__link .orbit {
  width: 0; opacity: 0;
  margin-inline-end: calc(var(--s-2) * -1);
  transition: width var(--dur) var(--ease-soft), opacity var(--dur) var(--ease-soft), margin-inline-end var(--dur) var(--ease-soft);
}
.pa-nav__link:hover { background-color: var(--tint); color: var(--teal-deep); }
.pa-nav__link:hover .orbit, .pa-nav__link.is-current .orbit { width: 1em; opacity: 1; margin-inline-end: 0; }
.pa-nav__link.is-current { background-color: var(--tint); color: var(--teal-deep); font-weight: 700; }
.pa-nav__link.is-current .orbit { color: var(--teal); }
.pa-nav__link .badge { margin-inline-start: var(--s-1); }

.pa-actions { display: flex; align-items: center; gap: var(--s-2); }

/* avatar + dropdown do usuário */
.pa-user { display: flex; align-items: center; }
.pa-user__btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 4px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: border-color var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft);
}
.pa-user__btn:hover, .pa-user__btn[aria-expanded="true"] { border-color: var(--line); background-color: var(--mist); }
.pa-user__btn::after { display: none; }
.avatar { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-pill); }
.avatar.sm { width: 28px; height: 28px; }
.avatar.xl { width: 128px; height: 128px; }
.avatar.no-thumbnail {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--tint); color: var(--teal-deep);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.1rem;
}
.img-thumbnail { padding: 0; border: 0; background: transparent; }

/* hambúrguer inscrito no anel */
.pa-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 2px solid var(--teal);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--teal);
  cursor: pointer;
}
.pa-toggle__bars { display: flex; flex-direction: column; gap: 4px; }
.pa-toggle__bars i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease-soft), opacity var(--dur) var(--ease-soft); }
.pa-shell.nav-open .pa-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pa-shell.nav-open .pa-toggle__bars i:nth-child(2) { opacity: 0; }
.pa-shell.nav-open .pa-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.pa-scrim {
  position: fixed; inset: 0; z-index: 1025;
  background: rgba(11, 16, 25, .52);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-soft), visibility var(--dur);
}
.pa-shell.nav-open .pa-scrim { opacity: 1; visibility: visible; }

@media (max-width: 1099.98px) {
  .pa-toggle { display: inline-flex; }
  .pa-nav {
    position: fixed;
    inset-inline: var(--s-3);
    inset-block-start: calc(var(--header-h) + 18px);
    z-index: 1029;
    display: block;
    padding: var(--s-5);
    background-color: var(--paper);
    border: 1px solid var(--line-raw);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-4);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft), visibility var(--dur);
  }
  .pa-shell.nav-open .pa-nav { opacity: 1; visibility: visible; transform: none; }
  .pa-nav__list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .pa-nav__link { min-height: 48px; font-family: var(--ff-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
  .pa-nav__link .orbit { width: 1.1em; opacity: .35; margin-inline-end: 0; }
  .pa-nav__link.is-current .orbit, .pa-nav__link:hover .orbit { opacity: 1; }
  .pa-actions .btn { display: none; }
}
@media (max-width: 575.98px) {
  .pa-header { padding-inline: var(--s-2); }
  .pa-capsule { padding-inline-start: var(--s-4); }
  .pa-logo img { height: 26px; }
}

.pa-main { flex: 1 1 auto; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: var(--s-7) var(--s-4) var(--s-10); }
@media (min-width: 992px) { .pa-main { padding-inline: var(--s-6); } }

.pa-footer {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: var(--s-5) var(--s-4) var(--s-8);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--fg-faint);
}

/* Cabeçalho de página */
.pa-page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-7);
}
.pa-page-head__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.pa-page-head__title { margin: 0; font-size: var(--fs-h1); letter-spacing: -.03em; }
.pa-page-head__lead { margin: 0; color: var(--fg-muted); max-width: 46rem; }
.pa-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ==========================================================================
   B · CARD
   ====================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  color: var(--fg);
  transition: box-shadow var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--tint); }
.card--feature { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-3); }
.card--tint { background-color: var(--surface-tint); border-color: transparent; box-shadow: none; }
.card--flat, .card.no-bg { background-color: var(--surface-2); border-color: transparent; box-shadow: none; }
.card.no-bg { background-color: var(--surface); }
.card-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-5) var(--s-6) 0;
  background: transparent !important;
  border: 0 !important;
}
.card-header h6, .card-header .card-title { margin: 0; font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.012em; }
.card-body { padding: var(--s-6); }
.card-header + .card-body { padding-top: var(--s-5); }
.card-footer { padding: var(--s-4) var(--s-6); background: transparent; border-top: 1px solid var(--line); }
.card-title { font-family: var(--ff-display); font-size: var(--fs-h3); }
.tone-deep.card, .tone-deep .card { background-color: var(--deep-surface); border-color: var(--deep-line); box-shadow: none; }
.card.tone-deep { background-color: var(--night); }
@media (max-width: 575.98px) {
  .card-header { padding: var(--s-4) var(--s-4) 0; }
  .card-body { padding: var(--s-4); }
}

/* ==========================================================================
   B · BOTÕES — pílulas
   ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-dark, .btn-light-success, .btn-success {
  background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent);
  box-shadow: var(--shadow-2);
}
.btn-primary:hover, .btn-dark:hover, .btn-light-success:hover, .btn-success:hover,
.btn-primary:focus, .btn-dark:focus, .btn-light-success:focus, .btn-success:focus,
.btn-primary:active, .btn-dark:active {
  background-color: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--on-accent);
  box-shadow: var(--shadow-3);
}
.btn-outline-primary, .btn-outline-secondary, .btn-white, .btn-ghost, .btn-light {
  background-color: transparent; border-color: var(--accent); color: var(--accent);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-white:hover, .btn-ghost:hover, .btn-light:hover {
  background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent);
}
.btn-secondary, .btn-quiet, .btn-light-warning, .btn-light-info {
  background-color: var(--surface-tint); border-color: transparent; color: var(--teal-deep);
}
.btn-secondary:hover, .btn-quiet:hover, .btn-light-warning:hover, .btn-light-info:hover {
  background-color: var(--accent-fill); border-color: transparent; color: var(--on-accent);
}
.btn-danger, .btn-light-danger { background-color: transparent; border-color: var(--down-ink); color: var(--down-ink); }
.btn-danger:hover, .btn-light-danger:hover { background-color: var(--down-ink); border-color: var(--down-ink); color: var(--paper); }
.btn-link { min-height: 0; padding: var(--s-1) var(--s-2); border-color: transparent; background: none; color: var(--accent); text-decoration: none; }
.btn-link:hover { color: var(--accent-strong); }

.btn-sm { min-height: 36px; padding: var(--s-1) var(--s-4); font-size: var(--fs-xs); }
.btn-lg { min-height: 56px; padding: var(--s-3) var(--s-8); font-size: var(--fs-body); }
.btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; }
.btn .fa, .btn [class^="icofont-"] { font-size: 1em; }
.btn-check:checked + .btn { background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn-close { border-radius: var(--radius-pill); }

/* ==========================================================================
   B · FORMULÁRIOS
   ====================================================================== */
.form-label { font-size: var(--fs-sm); font-weight: 700; color: var(--fg); margin-bottom: var(--s-2); }
.form-text, .form-hint { font-size: var(--fs-xs); color: var(--fg-faint); }

.form-control, .form-select {
  min-height: 50px;
  padding: var(--s-2) var(--s-5);
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.form-control::placeholder { color: var(--muted-ink); }
.form-control:hover, .form-select:hover { border-color: var(--teal); }
.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, .18);
  outline: none;
  background-color: var(--paper);
  color: var(--ink);
}
.form-control[readonly] { background-color: var(--paper); cursor: pointer; }
.form-control:disabled { background-color: var(--mist); }
textarea.form-control { min-height: 8rem; line-height: 1.55; padding-block: var(--s-3); resize: vertical; }
.form-control-sm, .form-select-sm { min-height: 40px; padding: var(--s-1) var(--s-4); font-size: var(--fs-sm); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235B6675' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: right var(--s-5) center;
}
input[type="file"].form-control { padding: var(--s-2) var(--s-3); line-height: 2.1; }
input[type="file"].form-control::file-selector-button {
  margin-inline-end: var(--s-3);
  padding: var(--s-1) var(--s-4);
  border: 0; border-radius: var(--radius-pill);
  background-color: var(--surface-tint); color: var(--teal-deep);
  font-weight: 700; font-size: var(--fs-xs);
  cursor: pointer;
}
.input-group { border-radius: var(--radius); }
.input-group > .form-control, .input-group > .form-select { border-radius: var(--radius); }
.input-group-text {
  min-height: 50px;
  padding: var(--s-2) var(--s-4);
  background-color: var(--mist);
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}
.input-group > :first-child { border-start-start-radius: var(--radius) !important; border-end-start-radius: var(--radius) !important; }
.input-group > :last-child { border-start-end-radius: var(--radius) !important; border-end-end-radius: var(--radius) !important; }
.input-group > .input-group-text:empty { display: none; }
.form-check-input { width: 20px; height: 20px; margin-top: .15em; border: 1.5px solid var(--line-strong); }
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(15, 76, 92, .18); border-color: var(--teal); }
.form-check-label { color: var(--fg); }
.form-range::-webkit-slider-thumb { background: var(--teal); box-shadow: 0 0 0 4px rgba(15, 76, 92, .15); }
.form-range::-moz-range-thumb { background: var(--teal); }
.form-range::-webkit-slider-runnable-track { background: var(--mist-deep); border-radius: var(--radius-pill); }
.form-range::-moz-range-track { background: var(--mist-deep); border-radius: var(--radius-pill); }
.invalid-feedback { color: var(--down-ink); }

/* ==========================================================================
   B · ABAS — trilho em pílula
   ====================================================================== */
.nav-tabs, .tab-body-header {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background-color: var(--surface-2);
  border: 0;
  border-radius: var(--radius-pill) !important;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 38px;
  padding: var(--s-1) var(--s-5);
  border: 0 !important;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft);
}
.nav-tabs .nav-link:hover { color: var(--fg); }
.nav-tabs .nav-link.active { background-color: var(--accent-fill); color: var(--on-accent); font-weight: 700; }

/* ==========================================================================
   B · TABELAS
   ====================================================================== */
.table-responsive, .pa-table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background-color: var(--surface);
}
.table-responsive > .table, .pa-table-scroll > .table { margin: 0; }
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--zebra);
  --bs-table-hover-bg: var(--surface-tint);
  --bs-table-hover-color: var(--fg);
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.table > :not(caption) > * > * { border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; }
.table.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.table thead th {
  padding: var(--s-3) var(--s-5);
  background-color: var(--surface-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  vertical-align: middle;
}
.table tbody td, .table tbody th { padding: var(--s-3) var(--s-5); vertical-align: middle; color: var(--fg-muted); }
.table tbody th { color: var(--fg); font-family: var(--ff-mono); font-weight: 500; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:nth-child(even) > * { background-color: var(--zebra); }
.table-hover tbody tr:hover > * { background-color: var(--surface-tint); color: var(--fg); }
.table .btn-sm { min-height: 32px; padding-inline: var(--s-3); }
.nowrap { white-space: nowrap; }

/* tabela nua dentro de container gerado por JS (orders, bonds) */
#openOrdersContainer, #finalizedOrdersContainer, #pendingOrdersContainer, #bondsForm, #bondOptionsContainer {
  overflow-x: auto;
}
#openOrdersContainer > .table, #finalizedOrdersContainer > .table, #pendingOrdersContainer > .table,
#bondsForm .table, #bondOptionsContainer .table {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}

/* ==========================================================================
   B · BADGES, CHIPS, ALERTAS, NOTAS
   ====================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  background-color: var(--surface-tint);
  color: var(--teal-deep);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.3;
}
.badge.bg-success, .badge.badge--up { background-color: rgba(31, 157, 91, .14) !important; color: var(--up-ink) !important; }
.badge.bg-danger, .badge.badge--down { background-color: rgba(209, 67, 67, .12) !important; color: var(--down-ink) !important; }
.badge.bg-warning, .badge.badge--warn { background-color: var(--warn-soft) !important; color: var(--warn) !important; }
.badge.bg-primary, .badge.badge--accent { background-color: var(--teal) !important; color: var(--paper) !important; }
.badge.bg-careys-pink, .badge.bg-secondary, .badge.badge--quiet { background-color: var(--surface-2) !important; color: var(--fg-muted) !important; }
.badge.bg-info { background-color: var(--tint) !important; color: var(--teal-deep) !important; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 38px;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.chip .orbit { color: var(--accent); }
.chip strong { font-family: var(--ff-mono); font-weight: 500; }
.tone-deep .chip { background-color: var(--deep-surface); border-color: var(--deep-line); color: var(--paper); }

.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.alert .orbit { flex: 0 0 auto; margin-top: .2em; }
.alert-info    { background-color: var(--tint); color: var(--teal-deep); }
.alert-success { background-color: rgba(31, 157, 91, .12); color: var(--up-ink); }
.alert-danger  { background-color: rgba(209, 67, 67, .10); color: var(--down-ink); }
.alert-warning { background-color: var(--warn-soft); color: var(--warn); }
.alert .btn { margin-inline-start: auto; }
.alert .btn-close { margin-inline-start: auto; }

.note {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background-color: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.note .orbit { color: var(--accent); margin-top: .15em; }
.note--accent { background-color: var(--surface-tint); color: var(--teal-deep); }

.status-dot {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--fg-muted);
}
.status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background-color: var(--sig-up); }
.status-dot--down::before { background-color: var(--sig-down); }
.status-dot--warn::before { background-color: var(--warn); }
.dot-green, .dot-red { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.dot-green { background-color: var(--sig-up); }
.dot-red { background-color: var(--sig-down); }

/* ==========================================================================
   B · DROPDOWN, LIST-GROUP, MODAL
   ====================================================================== */
.dropdown-menu {
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  background-color: var(--paper);
}
.dropdown-item, .list-group-item {
  border-radius: var(--radius-sm);
  color: var(--fg);
  background: transparent;
  border: 0;
}
.dropdown-item:hover, .list-group-item-action:hover { background-color: var(--surface-tint); color: var(--teal-deep); }
.list-group-item { padding: var(--s-3) var(--s-4); }
.list-group { border-radius: var(--radius); }
.dropdown-divider { border-color: var(--line); }
.w380 { width: 380px; max-width: calc(100vw - 2rem); }
.w220 { width: 220px; }

.modal-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4);
  background-color: var(--paper);
}
.modal-header { padding: var(--s-5) var(--s-6) 0; border: 0; }
.modal-title { font-family: var(--ff-display); font-size: var(--fs-h2); letter-spacing: -.022em; }
.modal-body { padding: var(--s-5) var(--s-6); }
.modal-footer { padding: 0 var(--s-6) var(--s-6); border: 0; gap: var(--s-2); }
.modal-backdrop.show { background-color: var(--night); opacity: .52; }

/* Sweetalert2 */
.swal2-popup { border-radius: var(--radius-lg) !important; font-family: var(--ff-body) !important; padding: var(--s-6) !important; }
.swal2-title { font-family: var(--ff-display) !important; letter-spacing: -.022em; color: var(--ink) !important; }
.swal2-html-container { color: var(--fg-muted) !important; text-align: center !important; }
/* Conteúdo tabular (ex.: detalhes da ordem) lê melhor alinhado à esquerda; mensagens simples ficam centralizadas como ícone/título/botões. */
.swal2-html-container:has(table, .table-responsive, form, ul, ol) { text-align: left !important; }
.swal2-html-container h5 { text-align: left; }
.swal2-styled.swal2-confirm { background-color: var(--teal) !important; border-radius: var(--radius-pill) !important; font-weight: 700 !important; padding: var(--s-2) var(--s-6) !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background-color: transparent !important; color: var(--down-ink) !important; border: 2px solid var(--down-ink) !important; border-radius: var(--radius-pill) !important; font-weight: 700 !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(15, 76, 92, .18) !important; }
.swal2-html-container .table { font-size: var(--fs-xs); }
/* Toast (notificações): mais compacto que o modal, texto no corpo do design system */
.swal2-popup.swal2-toast { padding: var(--s-3) var(--s-4) !important; box-shadow: 0 12px 32px rgba(11, 16, 25, .16) !important; }
.swal2-popup.swal2-toast .swal2-title { font-family: var(--ff-body) !important; font-size: var(--fs-sm, .9rem) !important; font-weight: 600; letter-spacing: 0; margin: 0 var(--s-2) !important; align-self: center; grid-row: 1 / 99; }
.swal2-popup.swal2-toast .swal2-icon { margin: 0 !important; }
.swal2-popup.swal2-toast .swal2-close { color: var(--fg-muted) !important; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--teal) !important; opacity: .35; }

/* ==========================================================================
   COMPONENTES DO PAINEL (.pa-*)
   ====================================================================== */

/* Métrica (stat) */
.pa-stat {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  min-width: 0;
  height: 100%;
}
.pa-stat__label {
  font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.pa-stat__value {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--fg);
  word-break: break-word;
}
.pa-stat__value .unit { color: var(--accent); font-size: .55em; margin-inline-start: .2em; }
.pa-stat__note { font-size: var(--fs-xs); color: var(--fg-muted); }
.pa-stat--up .pa-stat__value { color: var(--sig-up-text); }
.pa-stat--down .pa-stat__value { color: var(--sig-down-text); }

/* Lista de definição (chave → valor) */
.pa-kv { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.pa-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-bottom: 1px solid var(--line); }
.pa-kv__row:last-child { border-bottom: 0; }
.pa-kv__k { font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--fg-muted); }
.pa-kv__v { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-body); font-weight: 500; color: var(--fg); text-align: right; }

/* Card de saldo em bloco escuro */
.pa-balance { position: relative; overflow: hidden; isolation: isolate; }
.pa-balance__value { font-family: var(--ff-mono); font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--paper); white-space: nowrap; }
.pa-balance__value .unit { color: var(--teal-bright); font-size: .45em; margin-inline-start: .3em; }
.pa-balance .pa-kv__row { border-color: var(--deep-line); }
.pa-balance .pa-kv__k { color: var(--tint-soft); }
.pa-balance .pa-kv__v { color: var(--paper); }
.pa-timbre {
  position: absolute; z-index: -1;
  inset-block-start: -35%; inset-inline-end: -18%;
  width: min(34rem, 90%); aspect-ratio: 1;
  color: var(--tint); opacity: .10;
  pointer-events: none;
}
.pa-timbre svg { width: 100%; height: 100%; fill: none; }

/* Linha de identidade do usuário */
.pa-identity { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.pa-identity__name { margin: 0; font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.012em; }
.pa-identity__meta { font-size: var(--fs-xs); color: var(--fg-muted); word-break: break-all; }
.pa-meta-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }

/* Segurança (dashboard) */
.pa-security { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
.pa-security__item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background-color: var(--surface-2); }
.pa-security__item .dot-green, .pa-security__item .dot-red { margin-top: .5em; }
.pa-security__k { font-size: var(--fs-xs); color: var(--fg-muted); }
.pa-security__v { font-weight: 500; word-break: break-all; }

/* Tabela de símbolo (modal do trading-bot) */
.symbol-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) !important;
  margin-bottom: var(--s-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  font-family: var(--ff-mono); font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-soft), background-color var(--dur) var(--ease-soft);
}
.symbol-item:hover { border-color: var(--teal) !important; background-color: var(--tint) !important; }
#symbol-list { max-height: 320px; overflow-y: auto; padding-right: var(--s-1); }
#category-selection { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#category-selection .btn { min-height: 36px; padding-inline: var(--s-4); font-size: var(--fs-xs); }

/* TradingView container */
.tradingview-widget-container { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }

/* Alavancagem */
.pa-range { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--surface-2); }
.pa-range__scale { display: flex; justify-content: space-between; font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); color: var(--fg-muted); margin-bottom: var(--s-2); }

/* Avatares selecionáveis (perfil) */
.pa-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (min-width: 576px) { .pa-avatars { grid-template-columns: repeat(8, 1fr); gap: var(--s-2); } }
.pa-avatars img { width: 100%; height: auto; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft); }
.pa-avatars img:hover { transform: translateY(-2px); }
.pa-avatars img.is-selected { border-color: var(--teal) !important; }
.profile-user { position: relative; }
.pa-avatar-edit { position: absolute; right: -6px; bottom: 6px; width: 40px; height: 40px; min-height: 40px; padding: 0; }

/* Chat */
.pa-chat { display: flex; height: calc(100vh - var(--header-h) - 120px); min-height: 520px; gap: var(--s-4); }
.pa-chat__list { flex: 0 0 340px; display: flex; flex-direction: column; overflow: hidden; }
.pa-chat__list ul { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: var(--s-2); list-style: none; }
.pa-chat__list .list-group-item { padding: 0; margin-bottom: var(--s-1); }
.pa-chat__list .list-group-item a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); color: var(--fg); }
.pa-chat__list .list-group-item a:hover { background-color: var(--surface-tint); }
.pa-chat__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.pa-chat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.chat-history { flex: 1 1 auto; overflow-y: auto; padding: var(--s-5); margin: 0; list-style: none; }
.chat-history .max-width-70 { max-width: 70%; }
.chat-history .card { padding: var(--s-3) var(--s-4) !important; border-radius: var(--radius) !important; box-shadow: none; }
.chat-history .card.bg-primary { background-color: var(--teal) !important; color: var(--paper) !important; border-color: var(--teal); }
.chat-history .user-info { font-size: var(--fs-meta); font-family: var(--ff-mono); }
.pa-chat__compose { display: flex; gap: var(--s-2); align-items: flex-end; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
.pa-chat__compose textarea { min-height: 50px; max-height: 160px; flex: 1 1 auto; }
@media (max-width: 991.98px) {
  .pa-chat { position: relative; }
  .pa-chat__list { position: absolute; inset: 0; z-index: 5; flex-basis: auto; width: 100%; transform: translateX(-104%); transition: transform var(--dur) var(--ease-soft); background: var(--paper); }
  .pa-chat__list.open { transform: none; }
}

/* Auth */
.pa-auth { display: flex; min-height: 100vh; width: 100%; }
.pa-auth__form { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--s-9) var(--s-5); background-color: var(--paper); }
.pa-auth__wrap { width: 100%; max-width: 420px; display: flex; flex-direction: column; }
.pa-auth__logo { margin-bottom: var(--s-8); }
.pa-auth__logo img { height: 40px; width: auto; }
.pa-auth__title { font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -.03em; margin-bottom: var(--s-2); }
.pa-auth__subtitle { color: var(--fg-muted); margin-bottom: var(--s-7); }
.pa-auth__links { display: flex; justify-content: flex-end; margin-top: var(--s-4); font-size: var(--fs-sm); }
.pa-auth__switch { text-align: center; margin-top: var(--s-7); font-size: var(--fs-sm); color: var(--fg-muted); }
.pa-auth__switch a, .pa-auth__links a { font-weight: 700; }
.pa-auth__art {
  flex: 1 1 50%; position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4.5rem);
}
.pa-auth__art .pa-timbre { inset-block-start: -10%; inset-inline-end: -22%; width: min(52rem, 110%); opacity: .12; }
.pa-auth__art-eyebrow { color: var(--teal-bright); margin-bottom: var(--s-4); }
.pa-auth__art-title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); letter-spacing: -.03em; line-height: .98; color: var(--paper); max-width: 14ch; margin-bottom: var(--s-5); }
.pa-auth__art-lead { color: var(--tint-soft); max-width: 40ch; font-size: 1.05rem; margin-bottom: var(--s-7); }
.pa-auth__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pa-auth__art-foot { margin-top: var(--s-9); font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--tint-soft); }
@media (max-width: 900px) { .pa-auth__art { display: none; } .pa-auth__form { flex-basis: 100%; } }

/* Página de erro */
.pa-error { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-6); text-align: center; }
.pa-error__code { font-family: var(--ff-mono); font-size: clamp(4rem, 12vw, 9rem); line-height: 1; letter-spacing: -.04em; color: var(--tint); }

/* Utilidades */
.pa-grid { display: grid; gap: var(--s-4); }
.pa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .pa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .pa-grid--2 { grid-template-columns: 1fr; } }
.pa-grid > * { min-width: 0; }
.pa-divider { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
.pa-empty { padding: var(--s-7); text-align: center; color: var(--fg-muted); font-size: var(--fs-sm); }
.lift:hover { transform: translateY(-2px); }

/* ==========================================================================
   AO VIVO — sino de atividade, toasts e realce de dados atualizados
   (assets/js/live.js · usado pelo cliente e pelo admin)
   ====================================================================== */
.pa-bell__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--teal);
  transition: background-color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.pa-bell__btn:hover, .pa-bell__btn[aria-expanded="true"] { background: var(--tint); border-color: var(--tint); }
.pa-bell__btn::after { display: none; }
.pa-bell__dot {
  position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--down); box-shadow: 0 0 0 2px var(--paper);
}
.pa-feed { width: 380px; max-width: calc(100vw - 2rem); padding: 0 !important; overflow: hidden; margin-top: 10px !important; }
.pa-feed__head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.pa-feed__list { list-style: none; margin: 0; padding: var(--s-2); max-height: 420px; overflow-y: auto; }
.pa-feed__item a, .pa-feed__item > div {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); padding: var(--s-3);
  border-radius: var(--radius-sm); color: var(--fg); font-size: var(--fs-sm);
}
.pa-feed__item a:hover { background: var(--surface-tint); }
.pa-feed__item .orbit { grid-row: span 2; color: var(--accent); margin-top: .2em; }
.pa-feed__item small { color: var(--fg-faint); font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: .04em; }
.pa-feed__item.is-new a { background: var(--surface-2); }
.pa-feed__empty { padding: var(--s-6); text-align: center; color: var(--fg-muted); font-size: var(--fs-sm); }

/* Toasts */
.pa-toasts {
  position: fixed; z-index: 1090; right: var(--s-4); bottom: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2); width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.pa-toast {
  pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: start;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--night); color: var(--paper);
  border-radius: var(--radius); box-shadow: var(--shadow-4);
  font-size: var(--fs-sm);
  animation: pa-toast-in var(--dur-slow) var(--ease-soft);
}
.pa-toast .orbit { color: var(--teal-glow); margin-top: .15em; }
.pa-toast strong { display: block; font-family: var(--ff-display); font-size: .95rem; }
.pa-toast a { color: var(--teal-glow); font-weight: 700; }
.pa-toast__close { background: none; border: 0; color: var(--tint-soft); font-size: 1.2rem; line-height: 1; padding: 0 2px; cursor: pointer; }
.pa-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all var(--dur) var(--ease-soft); }
@keyframes pa-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Região que foi atualizada ao vivo */
[data-live-region].is-refreshed { animation: pa-flash-region 1.4s var(--ease-soft); }
@keyframes pa-flash-region { 0% { box-shadow: 0 0 0 3px var(--teal-glow); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pa-live-new > * { background-color: var(--surface-tint) !important; transition: background-color 3s var(--ease-soft); }

.status-dot--off::before { background-color: var(--fg-faint); }

[data-live-balance].is-refreshed { animation: pa-flash-text 1.6s var(--ease-soft); border-radius: 6px; }
@keyframes pa-flash-text { 0% { background-color: var(--teal-glow); } 100% { background-color: transparent; } }

/* Botões: estados que o Bootstrap pintaria de azul */
.btn:disabled, .btn.disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn-outline-danger { background-color: transparent; border-color: var(--down-ink); color: var(--down-ink); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--down-ink); border-color: var(--down-ink); color: var(--paper); }
.btn-outline-success { background-color: transparent; border-color: var(--up-ink); color: var(--up-ink); }
.btn-outline-success:hover { background-color: var(--up-ink); border-color: var(--up-ink); color: var(--paper); }

/* Trilho de abas: nunca quebra linha (rola na horizontal no celular) */
.nav-tabs { flex-wrap: nowrap; }

/* Seletor de idioma EN / PT / ES (partials/lang_switcher.php) */
.pa-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--mist, #EEF2F4); }
.pa-lang__btn { font-family: var(--ff-mono, monospace); font-size: .72rem; font-weight: 500; letter-spacing: .06em; line-height: 1; padding: 6px 9px; border-radius: var(--radius-pill); color: var(--fg-muted); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.pa-lang__btn:hover { color: var(--ink); }
.pa-lang__btn.is-active { background: var(--teal); color: #fff; }
.pa-lang__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pa-auth__form { position: relative; }
.pa-auth__form > .pa-lang { position: absolute; top: var(--s-5); right: var(--s-5); z-index: 2; }