/* ─── PRICING MODAL ──────────────────────────────────────────────────────────── */

/* Same fade-in/out as #auth-modal (and the site's page transitions in
   js/transitions.js) — opacity + visibility instead of display:none, so
   opening doesn't just pop. */
#pricing-modal {
  display: flex; position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 999;
  align-items: center; justify-content: center;
  /* Extra top padding — the card grid grew a row taller (old-price line
     above the current price), which was tall enough to poke up under the
     fixed #nav (105.6px, z-index above this modal) at typical viewport
     heights. Nudges the whole centered box down; capped by .pm-box's own
     max-height/overflow-y below for anything still too tall to fit. */
  padding: 44px 20px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s 200ms;
}
#pricing-modal.open {
  opacity: 1; visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  #pricing-modal { transition: none; }
}

.pm-box {
  background: #fff; border-radius: 0;
  width: 100%; max-width: 1080px;
  max-height: calc(100vh - 64px); overflow-x: hidden; overflow-y: auto;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.2);
}

.pm-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px;
  background: none; border: none;
  cursor: pointer; display: block;
  z-index: 2;
}
.pm-close span {
  position: absolute; top: 50%; left: 50%;
  width: 28px; height: 8px; background: #0A0A0A; border-radius: 0;
}
.pm-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.pm-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Extra top/bottom padding throughout (header, plans, footer) — makes the
   whole panel noticeably taller, not just the header. */
.pm-header {
  padding: 40px 36px 0;
  text-align: center;
}
.pm-title {
  font-family: 'Fixel Display', sans-serif; font-size: 28px;
  font-weight: 700; letter-spacing: -.02em; margin-bottom: 28px; color: #0A0A0A;
}

.pm-plans {
  /* minmax(0,1fr), not bare 1fr — a bare 1fr track still won't shrink
     below its content's min-content width, and "Залишитись безкоштовно"
     (nowrap, from .btn) was wider than the other two buttons, forcing
     that one column wider than its siblings despite the equal-fr grid. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; padding: 0 24px;
}

.pm-plan {
  border: 1.5px solid #E8E8E8; border-radius: 0;
  padding: 30px 20px; display: flex; flex-direction: column;
  transition: box-shadow 200ms, transform 200ms; cursor: default;
  position: relative;
}
.pm-plan:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
/* Same "elite" orange as the token counter (#ff6b3a) for both paid plans —
   Про (the top plan) gets it full-strength, Плюс a paler tint of the same
   color, so the two paid tiers read as one family, ranked by intensity. */
.pm-featured { background: #ff6b3a; border-color: #ff6b3a; color: #0A0A0A; }
.pm-featured:hover { box-shadow: 0 6px 24px rgba(255,107,58,.35); }
/* Solid pastel of the same #ff6b3a, not a translucent overlay — the low-
   opacity rgba version read as a washed-out pink/error tint rather than
   "pale orange", and blended into a border color that didn't match. No
   border at all now (transparent, keeps the same 1.5px box size). */
.pm-plus { background: #FFE1D6; border-color: #ff6b3a; }
.pm-plus:hover { box-shadow: 0 6px 24px rgba(255,107,58,.18); }
/* Pricing-psychology nudge — the middle tier is the one most people should
   land on, so it gets the one piece of social-proof messaging on the
   panel. Ribbon sits half on/half off the card's own top border (same
   #ff6b3a as the rest of the paid-plan branding), not a full banner —
   .pm-plans has no row above it to clip into, just the header's own
   28px title margin, so it has room to float there. */
.pm-popular-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #ff6b3a; color: #fff;
  font-family: 'Fixel Display', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 0; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
/* Current plan is marked by this border alone now — no checkmark badge,
   no button ("Поточний план" never led anywhere, since it was always
   disabled). .pm-plan.pm-active (not just .pm-active) so it outranks
   .pm-plus/.pm-featured's own single-class border-color rules. */
.pm-plan.pm-active { border: 2px solid #0A0A0A; }

.pm-plan-top { margin-bottom: 16px; }
.pm-plan-name {
  font-family: 'Fixel Display', sans-serif; font-size: 17px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; margin-bottom: 8px;
}
.pm-plan-price {
  font-family: 'Fixel Display', sans-serif; font-size: 40px;
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.pm-plan-price span { font-size: 16px; font-weight: 400; }
/* Struck-through old price — Pro only, sits right above the current
   price. */
.pm-plan-price-old {
  font-family: 'Fixel Display', sans-serif; font-size: 18px; font-weight: 700;
  text-decoration: line-through; opacity: .5; margin-bottom: 2px;
}
/* Tokens are the actual product being sold (price/features are secondary
   to it), so this is a solid badge, not plain text under the price —
   same #ff6b3a used for the token counter/Plus-Pro color everywhere else.
   Pro's card is already that orange, so its badge flips to black on
   orange instead of orange-on-orange. */
.pm-plan-tokens {
  display: inline-block;
  font-size: 15px; font-weight: 700; margin-top: 10px;
  padding: 5px 12px; border-radius: 0;
  background: #ff6b3a; color: #fff;
  font-family: 'Fixel Display', sans-serif;
}
.pm-featured .pm-plan-tokens { background: #0A0A0A; color: #fff; }
.pm-next-payment { font-size: 13px; font-weight: 700; margin-top: 10px; font-family: 'Fixel Display', sans-serif; }

.pm-features {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  flex: 1; margin-bottom: 22px;
}
.pm-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-family: 'Fixel Display', sans-serif; line-height: 1.3;
}
.pm-features li svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; }
/* Unavailable features are grayed out (stroke: currentColor picks up the
   same fade on the X icon) so absence reads at a glance, not just via the
   X-vs-checkmark shape. */
.pm-features li.off { color: rgba(10,10,10,.32); }

/* Site button standard (buttons.css .btn) — every parameter (height,
   padding, radius, shadow, backdrop-filter) copied exactly off baza.html's
   small tool-card buttons, not reinvented. font-size is the one control.
   min-width:0 (not .btn's own 10.4em floor) + max-width:100% — same fix
   as the auth-modal buttons: a floor leaves dead space next to short
   labels like "Про", а card width caps how wide it can grow instead. */
/* Wraps the main action button + the (maybe-hidden) cancel-subscription
   button below it. Only THIS wrapper gets margin-top:auto (pushing the
   whole block to the card's bottom) — every card's wrapper reserves the
   same cancel-row space (visibility:hidden, not display:none, when not
   applicable), so the main button lands on the same line in every card
   regardless of whether ITS cancel row happens to be shown. */
.pm-plan-actions { margin-top: auto; display: flex; flex-direction: column; align-items: center; }

/* New site-wide button standard (.page-hero-btn recipe) — shadow only on
   hover/active, no backdrop blur, fixed 1.48rem / calc(3.4em + 2px) height
   (same fixed-height fix as every other page: without it, buttons with no
   icon come out shorter than icon-having ones at the same font-size — see
   [[feedback_page_hero_btn_new_standard]]). Not sharing the actual
   .page-hero-btn class: these live inside a fixed modal dialog, so drag-
   to-move would be broken/nonsensical here — visual recipe only, no drag,
   no tooltip. */
.pm-btn {
  font-size: 1.48rem;
  min-width: 0; max-width: 100%;
  justify-content: center;
  /* Longer labels ("Залишитись безкоштовно") need to wrap now that the
     grid column can't grow past its equal 1fr share to fit them. */
  white-space: normal; text-align: center; line-height: 1.2;
  height: calc(3.4em + 2px); padding: 0 1.2em;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  transition: box-shadow 220ms;
  font-family: 'Fixel Display', sans-serif;
}
.pm-btn:hover:not(:disabled), .pm-btn:active:not(:disabled) {
  box-shadow: 0 4px 8px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.26);
}
.pm-btn:disabled { opacity: 1; }
.pm-btn-ghost { background: none; border-color: #E8E8E8; color: #0A0A0A; }
.pm-btn-ghost:hover:not(:disabled) { border-color: #0A0A0A; background: none; }
.pm-btn-white { background: #fff; border-color: #fff; color: #0A0A0A; }
.pm-btn-white:hover:not(:disabled), .pm-btn-white:active:not(:disabled) { background: #fff; border-color: #fff; }

.pm-cancel {
  margin-top: 8px;
  height: auto; min-height: 0; box-shadow: none; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: none; border-color: transparent; color: #E5484D;
}
.pm-cancel:hover { border-color: #E5484D; }
.pm-featured .pm-cancel { color: #FF8080; }
.pm-featured .pm-cancel:hover { border-color: #FF8080; }

/* Bumped up from a small gray footer line to a full-width callout strip —
   this is the one line most relevant to the site's actual audience
   (military members), so it shouldn't read as fine print. */
.pm-footer {
  text-align: center; padding: 28px 24px 36px;
  font-size: 17px; font-weight: 700; color: #0A0A0A; font-family: 'Fixel Display', sans-serif;
}
.pm-footer a { color: #ff6b3a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* .pm-close is position:absolute relative to .pm-box, so once .pm-box
   scrolls internally (overflow-y:auto, right below) it scrolls the close
   button away with the rest of the content — fine on desktop where the
   whole box fits without scrolling, a dead-end on mobile once a user
   scrolls down to the Pro card. Pin it to the viewport instead so it's
   reachable at any scroll position. */
@media(max-width:720px) {
  .pm-plans { grid-template-columns: 1fr; }
  .pm-plan:hover { transform: none; }
  .pm-box { max-height: 90vh; overflow-y: auto; }
  .pm-close { position: fixed; top: 36px; right: 36px; z-index: 3; }
  .pm-header { padding: 32px 24px 0; }
  .pm-title { font-size: 23px; margin-bottom: 22px; }
  .pm-footer { font-size: 15px; padding: 24px 20px 30px; }

  /* Same overflow bug as emblems.html's dl-confirm-footer used to have:
     buttons.css's .btn min-width:10.4em never fights the desktop modal's
     520px width, but two of them side-by-side overflow a 92vw-wide mobile
     one badly (confirmed via getBoundingClientRect — the confirm button
     spilled ~155px past the viewport edge). Stack them full-width instead. */
  .pm-cancel-confirm-modal { width: calc(100vw - 48px); padding: 28px 24px; }
  .pm-cancel-confirm-title { font-size: 21px; }
  .pm-cancel-confirm-sub { font-size: 16px; margin-bottom: 24px; }
  .pm-cancel-confirm-footer { flex-direction: column-reverse; gap: 10px; }
  .pm-cancel-confirm-footer .btn { width: 100%; min-width: 0; }
}

/* Same pattern as emblems.html's download-confirm popup (dl-confirm-*):
   sharp-corner white box, title, sub, Назад + confirm — copied exactly,
   not reinvented, just under the pm- prefix since it lives here. */
.pm-cancel-confirm-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 100000;
  align-items: center; justify-content: center;
}
.pm-cancel-confirm-backdrop.open { display: flex; }
.pm-cancel-confirm-modal {
  background: #fff; border-radius: 0;
  width: 520px; max-width: 92vw;
  padding: 44px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  display: flex; flex-direction: column; gap: 10px;
}
.pm-cancel-confirm-title {
  font-family: 'Fixel Display', sans-serif; font-size: 28px;
  font-weight: 700; letter-spacing: .02em; color: #0A0A0A; margin: 0 0 6px;
}
.pm-cancel-confirm-sub {
  font-family: 'Fixel Display', sans-serif; font-size: 17px; line-height: 1.5;
  color: #0A0A0A; margin: 0 0 32px;
}
.pm-cancel-confirm-sub strong { font-weight: 700; }
.pm-cancel-confirm-footer { display: flex; gap: 14px; flex: 1; }
.pm-cancel-confirm-footer .btn {
  flex: 1;
  justify-content: center;
  font-family: 'Fixel Display', sans-serif;
  font-size: 1.48rem; height: calc(3.4em + 2px);
  /* Same fix as .pm-btn — .btn's own 1.0em/1.4em split is for icon+text,
     these have no icon so it just pushed the text left of center. */
  padding: 0 1.2em;
}
/* New site-wide button standard applied to the plain "Назад" (cancel-the-
   dialog) button — solid color (was translucent default-.btn glass),
   shadow only on hover, no blur. Excludes .pm-cancel-confirm-danger below,
   which keeps its own deliberate ghost/red "danger" look. */
.pm-cancel-confirm-footer .btn:not(.pm-cancel-confirm-danger) {
  background: #B7BDCB; border-color: #929AA2; color: #0A0A0A;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  transition: box-shadow 220ms;
}
.pm-cancel-confirm-footer .btn:not(.pm-cancel-confirm-danger):hover,
.pm-cancel-confirm-footer .btn:not(.pm-cancel-confirm-danger):active {
  background: #B7BDCB; border-color: #929AA2;
  box-shadow: 0 4px 8px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.26);
}
/* Exact same look as the plan cards' own .pm-cancel — plain red text,
   no fill/border/shadow, not a solid glass button. Height now matches its
   sibling "Назад" button (calc(3.4em + 2px), set above) so the two stay
   aligned side by side despite one having no fill/padding-driven height. */
.pm-cancel-confirm-danger {
  min-height: 0; box-shadow: none; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: none; border-color: transparent; color: #E5484D;
}
.pm-cancel-confirm-danger:hover { border-color: #E5484D; background: none; }

/* ─── AUTH MODAL ─────────────────────────────────────────────────────────────── */

/* Same fade-in/out feel as the site's page transitions (js/transitions.js:
   body opacity 0→1 on load, fades to 0 before navigating) — opacity +
   visibility instead of display:none, so it can actually transition
   instead of popping instantly. */
#auth-modal {
  display: flex; position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s 200ms;
}
#auth-modal.open {
  opacity: 1; visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  #auth-modal { transition: none; }
}

.auth-box {
  background: #fff;
  border-radius: 0;
  width: 100%; max-width: 460px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.22);
  overflow: hidden;
}

/* Expanded (was a thin 3px line) — a real header, not a stripe. Same
   black #nav background (css/nav-dark.css, site-wide) with the same nav
   logo + bird artwork, not a text logo. */
.auth-top-bar {
  background: #0A0A0A;
  padding: 36px 32px 30px;
  text-align: center;
}
.auth-logo-group { display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-logo-img { display: block; height: 28px; width: auto; }
.auth-bird-img { display: block; height: 40px; width: auto; }

.auth-box-inner {
  padding: 24px 32px 28px;
  /* Buttons below are .btn (inline-flex, fit-content) now, not stretched
     full-width bars — centers them instead of leaving them flush-left. */
  text-align: center;
  /* Brief fade when switching between the choice buttons and a form —
     switchAuthTab() toggles this class before swapping content, so the
     change doesn't just pop (same spirit as the page-fade transitions). */
  opacity: 1;
  transition: opacity 150ms ease;
}
.auth-box-inner.auth-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .auth-box-inner { transition: none; }
}

.auth-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px;
  background: none; border: none;
  cursor: pointer;
  display: block;
  z-index: 2;
}
/* Same X as the hamburger-open state — two straight, thick, sharp-edged
   bars, same thickness:length ratio (16:54 there). White (no background
   box) since it sits directly on the black top bar. */
.auth-close span {
  position: absolute; top: 50%; left: 50%;
  width: 28px; height: 8px; background: #FFFFFF; border-radius: 0;
}
.auth-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.auth-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Bigger, bolder, darker — was 11px light-gray and easy to miss. */
.auth-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 24px;
  font-family: 'Fixel Display', sans-serif; font-size: 13px; font-weight: 700;
  color: #0A0A0A; letter-spacing: .02em;
}
.auth-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: #D4D4D4; flex-shrink: 0; }

/* Site button standard (.page-hero-btn recipe from index.html's
   "Написати"/"Безкоштовна база") — shadow only on hover/active (not
   always-on), no backdrop blur, fixed 1.48rem. Google's own button stays
   white/bordered on purpose (brand convention for "Sign in with Google" —
   not part of our color palette, deliberately not recolored). */
.auth-google-btn {
  font-size: 1.48rem; height: calc(3.4em + 2px);
  min-width: 0; max-width: 100%;
  justify-content: center;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  border: 1.5px solid #E8E8E8; border-radius: 50em;
  background: #FAFAFA;
  font-family: 'Fixel Display', sans-serif; font-weight: 700;
  cursor: pointer; color: #0A0A0A;
  transition: box-shadow 220ms, border-color 200ms;
}
.auth-google-btn:hover, .auth-google-btn:active {
  background: #FAFAFA; border-color: #C4C4C4;
  box-shadow: 0 4px 8px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.26);
}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px;
  font-family: 'Fixel Display', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; color: #C4C4C4;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: #F0F0F0;
}

/* Two stacked full-width buttons, not side-by-side underline tabs — Вхід
   (black, matches the top bar) then Реєстрація (colorful) right under it.
   Still functions as the tab-switcher (data-tab + switchAuthTab), just
   restyled as prominent buttons instead of subtle tabs. */
.auth-tabs {
  /* align-items:center (not the flex default "stretch") — the buttons
     are .btn now (fit-content), not stretched to the column's width. */
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
/* Site button standard — shadow only on hover/active, no backdrop blur,
   fixed 1.48rem (was individually calibrated per-button to width-match;
   dropped now that both run the same font-size like every other pair of
   .page-hero-btn-style buttons on the site — natural width difference
   between "Увійти"/"Реєстрація" reads fine, doesn't need forcing equal). */
.auth-tab {
  font-size: 1.48rem; height: calc(3.4em + 2px);
  min-width: 0; max-width: 100%;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  border-radius: 50em; border: 1px solid transparent;
  font-family: 'Fixel Display', sans-serif; font-weight: 700;
  cursor: pointer; transition: box-shadow 220ms;
}
.auth-tab:hover, .auth-tab:active {
  box-shadow: 0 4px 8px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.26);
}
/* Solid pastel fills (not the old translucent rgba-over-blur) — same
   color style as the rest of the site's buttons, just picked fresh: login
   reuses the established "positive/enter" green from "Безкоштовна база",
   signup gets a new soft blue in the same family. */
.auth-tab[data-tab="login"] { background: #9EDDB6; border-color: #7EB192; color: #0A0A0A; }
.auth-tab[data-tab="login"]:hover, .auth-tab[data-tab="login"]:active { background: #9EDDB6; border-color: #7EB192; }
.auth-tab[data-tab="signup"] { background: #A8C8F0; border-color: #86A0C0; color: #0A0A0A; }
.auth-tab[data-tab="signup"]:hover, .auth-tab[data-tab="signup"]:active { background: #A8C8F0; border-color: #86A0C0; }

.auth-error {
  font-family: 'Fixel Display', sans-serif; font-size: 13px;
  color: #333; text-align: center;
  margin-bottom: 10px; min-height: 18px;
  background: #F5F5F5; border-radius: 6px;
  padding: 8px 12px; display: none;
}
.auth-error:not(:empty) { display: block; }

.auth-form { display: none; flex-direction: column; gap: 13px; }
.auth-form.active { display: flex; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
  font-family: 'Fixel Display', sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #666;
}
.auth-field input {
  padding: 12px 14px;
  border: 1.5px solid #E8E8E8; border-radius: 8px;
  /* 16px, not 15 — iOS Safari auto-zooms the whole page in on focus for
     any text input under 16px. This is the login/signup form injected
     on every single page, so that 1px was a zoom-jump on every login,
     everywhere. */
  font-family: 'Fixel Display', sans-serif; font-size: 16px;
  outline: none; transition: border-color 180ms, box-shadow 180ms;
  color: #0A0A0A; background: #fff;
}
.auth-field input:focus {
  border-color: #0A0A0A;
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}
.auth-field input::placeholder { color: #C4C4C4; }

.auth-submit {
  font-size: 1.48rem; height: calc(3.4em + 2px);
  /* align-self:center (not width:100%) — the inputs above stay full
     width (.auth-form is still align-items:stretch by default), only
     this button itself becomes fit-content and centers, matching the
     site's actual button-proportion standard instead of a stretched bar. */
  align-self: center;
  min-width: 0; max-width: 100%;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  margin-top: 4px;
  border: 1px solid transparent; border-radius: 50em;
  font-family: 'Fixel Display', sans-serif; font-weight: 700;
  cursor: pointer; transition: box-shadow 220ms;
}
.auth-submit:hover, .auth-submit:active {
  box-shadow: 0 4px 8px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.26);
}
/* Same solid colors as their matching tab above (green / blue). */
#login-btn { background: #9EDDB6; border-color: #7EB192; color: #0A0A0A; }
#login-btn:hover, #login-btn:active { background: #9EDDB6; border-color: #7EB192; }
#signup-btn { background: #A8C8F0; border-color: #86A0C0; color: #0A0A0A; }
#signup-btn:hover, #signup-btn:active { background: #A8C8F0; border-color: #86A0C0; }
.auth-submit:disabled { opacity: .5; cursor: default; }

/* ─── NAV AUTH BUTTON ────────────────────────────────────────────────────────── */

#nav-auth-btn {
  font-family: 'Fixel Display', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 7px 16px; border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,.14);
  background: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all 200ms; color: inherit;
  min-height: 38px; white-space: nowrap;
}
#nav-auth-btn:hover { background: #0A0A0A; color: #fff; border-color: #0A0A0A; }

.nav-token-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #F5F5F5; border: 1px solid #E8E8E8;
  border-radius: 20px; padding: 3px 9px;
  font-size: 12px; font-weight: 700;
  color: #0A0A0A; font-family: 'Fixel Display', sans-serif;
  letter-spacing: .01em;
}
.nav-token-pill svg { opacity: .5; }

.nav-user-sep {
  width: 1px; height: 16px; background: rgba(0,0,0,.14); flex-shrink: 0;
}

.nav-user-name {
  max-width: 110px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600;
}

.nav-user-icon { flex-shrink: 0; opacity: .7; }

.nav-chevron { opacity: 1; transition: opacity 150ms; }