@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap);
/* ─── be ───────────────────────────────────────────────────────────────────
   Poppins for everything, Playfair Display for the display headings only —
   the serif is scoped to the .be-* title classes rather than to h1-h6, so the
   dashboard pages that fall back to app/(user) keep their own type.

   Every colour comes from a variable skin.js writes on :root, so the whole
   sheet follows the light/dark toggle without a second ruleset.
   ──────────────────────────────────────────────────────────────────────── */

body {
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: var(--background-font-colour);
  background: var(--background-colour);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  color: var(--background-heading-colour);
  font-weight: 600;
}

p {
  color: var(--background-font-colour);
  line-height: 1.7;
}

/* react-transition-group is wired up in the layout with classNames="fade",
   but nothing in the app has ever defined the classes it writes, so the
   transition did nothing. Defined here so the page body eases in. */
.fade-appear,
.fade-enter {
  opacity: 0;
}

.fade-appear-active,
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease;
}

.be-shell .container {
  width: 92%;
  max-width: 1240px;
}

/* ─── Shared pieces ─────────────────────────────────────────────────────── */

.be-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.be-btn-gold {
  color: var(--be-ink-deep);
  background: var(--be-gold);
}

.be-btn-gold:hover {
  color: var(--be-ink-deep);
  background: var(--be-gold-hover);
}

.be-btn-ink {
  color: var(--be-gold);
  background: var(--be-ink);
}

.be-btn-ink:hover {
  color: var(--be-ink);
  background: var(--be-gold);
}

.be-btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
}

.be-btn-ghost:hover {
  color: var(--be-ink-deep);
  background: #ffffff;
}

.be-section-title {
  margin: 0 0 14px;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--background-heading-colour);
}

.be-section-text {
  max-width: 640px;
  margin: 0 auto 44px;
  font-size: 16px;
  text-align: center;
}

.be-section-title.be-left,
.be-section-text.be-left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.be-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--be-gold-deep);
  background: var(--be-gold-tint);
}

.be-link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--be-gold-deep);
}

.be-link-more .fas {
  font-size: 12px;
}

/* The two alternating landing bands. --be-band is the plain one and
   --secondary-background the lavender one; neither is --background-colour,
   because that token is the PAGE colour and has to stay a shade off the
   surfaces drawn on it (see skin.js) — the landing bands want to be flat
   white, the page behind a card does not. */
.be-band {
  background: var(--be-band);
}

.be-band-alt {
  background: var(--secondary-background);
}

.be-card {
  height: 100%;
  padding: 28px;
  border: 1px solid var(--be-line);
  border-radius: 10px;
  background: var(--be-card);
  box-shadow: 0 2px 10px var(--be-card-shadow);
}

.be-card-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.be-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* ─── Nav ───────────────────────────────────────────────────────────────── */

.be-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
  background: var(--be-ink);
  transition: background 250ms ease, box-shadow 250ms ease;
}

/* Rides over the hero until the page scrolls past it. */
.be-nav-over {
  background: transparent;
}

.be-nav-solid {
  background: var(--be-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.be-nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
}

.be-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  color: #ffffff;
}

/* The site's own logo — the icon the production build generates from the png
   staged at the repo root, so it follows whatever logo the site is built with
   rather than being a glyph chosen here. */
.be-nav-mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: contain;
}

.be-nav-links {
  display: flex;
  gap: 26px;
  margin: 0 auto 0 14px;
}

.be-nav-links a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}

.be-nav-links a:hover {
  color: var(--be-gold);
}

.be-nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.be-nav-theme,
.be-nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
}

.be-nav-theme:hover,
.be-nav-burger:hover {
  color: var(--be-gold);
  background: rgba(255, 255, 255, 0.07);
}

.be-nav-signin {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}

.be-nav-signin:hover {
  color: var(--be-gold);
}

.be-nav .be-btn {
  padding: 11px 22px;
}

/* ─── Drawer ────────────────────────────────────────────────────────────── */

.be-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  visibility: hidden;
}

.be-drawer-open {
  visibility: visible;
}

.be-drawer-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(12, 11, 22, 0.6);
  transition: opacity 250ms ease;
}

.be-drawer-open .be-drawer-overlay {
  opacity: 1;
}

.be-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 86%;
  padding: 26px 24px;
  background: var(--be-ink);
  transform: translateX(100%);
  transition: transform 250ms ease;
}

.be-drawer-open .be-drawer-panel {
  transform: translateX(0);
}

.be-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.be-drawer-brand {
  font-size: 18px;
  color: #ffffff;
}

.be-drawer-close {
  font-size: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
}

.be-drawer-links {
  flex: 1;
  margin: 32px 0 0;
}

.be-drawer-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.be-drawer-links a {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
}

.be-drawer-links a:hover {
  color: var(--be-gold);
}

.be-drawer-cta {
  justify-content: center;
  margin-top: 24px;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.be-hero {
  padding: 190px 0 90px;
  /* The photo sits under one flat veil. The veil is near-black navy, not the
     band's charcoal: a mid-tone wash at this opacity lifts the blacks in the
     shot and the whole thing goes milky, while a deep one holds the monitors
     and the faces. --be-ink stays as the colour behind it, so the band is
     already right before the image arrives. */
  background-color: var(--be-ink);
  background-image: linear-gradient(180deg, var(--be-hero-veil-top), var(--be-hero-veil-bottom)),
    url(/assets/images/be-lea.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* The slides stack, so the band keeps one height and nothing jumps as they
   cross-fade. The first child holds the box open; the rest are taken out of
   flow on top of it. */
.be-hero-stage {
  position: relative;
}

.be-hero-slide {
  opacity: 0;
  transition: opacity 300ms ease;
}

.be-hero-slide:not(:first-child) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.be-hero-slide.is-on {
  opacity: 1;
  transition: opacity 300ms ease 300ms;
}

.be-hero-title {
  margin: 0 0 18px;
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.12;
  color: #ffffff;
  /* The band is a photograph, so the type carries its own separation on top
     of the veil — the shot has bright patches the veil alone cannot flatten. */
  text-shadow: 0 2px 18px rgba(12, 11, 22, 0.55);
}

.be-hero-text {
  max-width: 620px;
  margin: 0 auto;
  font-size: 17px;
  color: #e9e8f0;
  text-shadow: 0 1px 12px rgba(12, 11, 22, 0.6);
}

.be-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.be-hero-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

.be-hero-more:hover {
  color: var(--be-gold);
}

.be-hero-more .fas {
  font-size: 12px;
}

.be-hero-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 70px;
}

.be-hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  transition: width 250ms ease, background 250ms ease;
}

.be-hero-dots button.is-on {
  width: 30px;
  background: var(--be-gold);
}

/* ─── Gold claims band ──────────────────────────────────────────────────── */

.be-clarity {
  padding: 46px 0;
  background: var(--be-gold);
}

.be-clarity-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-clarity-title {
  margin: 0 0 8px;
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
}

.be-clarity-text {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.be-claims {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-claim {
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.be-claim-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.be-claim-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* ─── Why ───────────────────────────────────────────────────────────────── */

.be-why {
  padding: 86px 0;
}

.be-why-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* Materialize's .col carries `margin-left: auto`, which is inert under the
   float grid it was written for but absorbs the whole free space once the row
   is a flex container — a lone card on the last line was being shoved to the
   right edge. The grid classes still do the sizing; only that margin is
   dropped, and it needs !important because the rule it overrides lives in the
   CDN stylesheet at the same specificity. */
.be-why-row > .col,
.be-markets-row > .col,
.be-steps-row > .col,
.be-plans-row > .col,
.be-reviews-row > .col,
.be-news-row > .col,
.be-staff-row > .col,
.be-payouts-row > .col,
.be-buildings-row > .col {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


.be-why-row .col {
  margin-bottom: 24px;
}

.be-why-mark {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
}

/* ─── Market overview ───────────────────────────────────────────────────── */

.be-market {
  padding: 86px 0;
  background: var(--be-band);
}

.be-market-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-market-card {
  padding: 18px;
}

.be-market-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--be-line);
}

.be-market-head b {
  font-size: 17px;
  color: var(--background-heading-colour);
}

.be-market-head span {
  font-size: 14px;
}

/* ─── Available markets ─────────────────────────────────────────────────── */

.be-markets {
  padding: 86px 0;
}

.be-markets-lead {
  max-width: 700px;
}

.be-markets-lead a {
  color: var(--be-gold-deep);
}

.be-markets-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-markets-row .col {
  margin-bottom: 24px;
}

.be-tile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.be-tile-head .be-card-title {
  margin: 0;
}

.be-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--be-gold-deep);
  background: var(--be-gold-tint);
}

/* ─── Steps ─────────────────────────────────────────────────────────────── */

.be-steps {
  padding: 86px 0;
  background: var(--be-band);
}

.be-steps-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-step {
  margin-bottom: 30px;
}

.be-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 600;
  color: var(--be-ink-deep);
  background: var(--be-gold);
}

.be-step-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.be-step-text {
  max-width: 330px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.65;
}

/* ─── FAQs ──────────────────────────────────────────────────────────────── */

.be-faqs {
  padding: 86px 0;
  background: var(--be-band);
}

.be-faqs-row {
  margin-bottom: 0;
}

.be-faq-item {
  border-bottom: 1px solid var(--be-line);
}

.be-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--background-heading-colour);
  background: transparent;
}

.be-faq-chevron {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--background-font-colour);
  transition: transform 200ms ease;
}

.be-faq-item.is-open .be-faq-chevron {
  transform: rotate(180deg);
}

.be-faq-a {
  padding: 0 40px 22px 0;
  font-size: 15px;
  line-height: 1.7;
}

.be-faq-a p {
  margin: 0 0 10px;
}

/* ─── Admin-switched sections ───────────────────────────────────────────── */
/* Plans, reviews, news, team, activity and property. Each one renders only
   when its settings.homepage switch is on, so they share a grid and a card
   shape and differ only in what goes inside. */

.be-plans,
.be-reviews,
.be-news,
.be-staff,
.be-payouts,
.be-buildings {
  padding: 86px 0;
}

.be-plans-row,
.be-reviews-row,
.be-news-row,
.be-staff-row,
.be-payouts-row,
.be-buildings-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-plans-row > .col,
.be-reviews-row > .col,
.be-news-row > .col,
.be-staff-row > .col,
.be-payouts-row > .col,
.be-buildings-row > .col {
  margin-bottom: 24px;
}

/* Plans */

.be-plan-card {
  display: flex;
  flex-direction: column;
}

.be-plan-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.be-plan-sub {
  margin: 6px 0 0;
  font-size: 14px;
}

.be-plan-price {
  display: block;
  margin: 16px 0 4px;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.be-plan-features {
  flex: 1;
  margin: 14px 0 20px;
}

.be-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 14px;
}

.be-plan-features .fas {
  margin-top: 4px;
  font-size: 11px;
  color: var(--be-gold-deep);
}

.be-plan-cta {
  justify-content: center;
  padding: 12px 20px;
}

/* Reviews */

.be-review-stars {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--be-line);
}

.be-review-stars .is-lit {
  color: var(--be-gold);
}

.be-review-text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
}

.be-review-who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.be-review-who img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.be-review-who b {
  display: block;
  font-size: 15px;
  color: var(--background-heading-colour);
}

.be-review-who small {
  font-size: 13px;
}

/* News */

.be-news-card {
  display: block;
  padding: 0;
  overflow: hidden;
}

.be-news-image {
  display: block;
  height: 180px;
}

.be-news-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-news-date {
  display: block;
  padding: 20px 24px 0;
  font-size: 13px;
  color: var(--be-gold-deep);
}

.be-news-card .be-card-title {
  padding: 8px 24px 0;
}

.be-news-card .be-link-more {
  padding: 12px 24px 24px;
}

/* Team */

.be-staff-photo {
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.be-staff-role {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--be-gold-deep);
}

/* Recent activity */

.be-payout-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.be-payout-head .fas {
  font-size: 13px;
  color: var(--be-gold-deep);
}

.be-payout-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--be-line);
}

.be-payout-list li:last-child {
  border-bottom: 0;
}

.be-payout-who b {
  display: block;
  font-size: 15px;
  color: var(--background-heading-colour);
}

.be-payout-who small {
  font-size: 13px;
}

.be-payout-amount {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--background-heading-colour);
}

/* Property */

.be-building-card {
  display: block;
  padding: 0;
  overflow: hidden;
}

.be-building-image {
  display: block;
  height: 190px;
}

.be-building-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-building-card .be-card-title {
  padding: 22px 24px 0;
}

.be-building-card .be-card-text {
  padding: 0 24px;
}

.be-building-price {
  display: block;
  padding: 14px 24px 24px;
  font-size: 18px;
  color: var(--be-gold-deep);
}

/* ─── Closing call to action ────────────────────────────────────────────── */

.be-ready {
  padding: 80px 0;
  background: var(--be-gold);
}

.be-ready-title {
  margin: 0 0 14px;
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 600;
  color: #ffffff;
}

.be-ready-text {
  margin: 0 0 32px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.be-footer {
  padding: 72px 0 24px;
  background: var(--be-ink-deep);
}

.be-footer-top {
  margin-bottom: 0;
}

.be-footer-col {
  margin-bottom: 34px;
}

.be-footer-head {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #ffffff;
}

.be-footer-col a {
  display: block;
  margin-bottom: 13px;
  font-size: 15px;
  color: var(--be-ink-font);
}

.be-footer-col a:hover {
  color: var(--be-gold);
}

.be-footer-socials {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.be-footer-socials a {
  margin-bottom: 0;
  font-size: 20px;
  color: #ffffff;
}

.be-footer-seal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.be-footer-seal .fas {
  font-size: 22px;
  color: var(--be-gold);
}

.be-footer-seal b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.8px;
  color: #ffffff;
}

.be-footer-seal small {
  font-size: 12px;
  color: var(--be-ink-font);
}

.be-footer-warning {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--be-ink-font);
}

.be-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: var(--be-ink-font);
}

.be-footer-legal {
  display: flex;
  gap: 24px;
}

.be-footer-legal a {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--be-ink-font);
}

.be-footer-legal a:hover {
  color: var(--be-gold);
}

/* ─── Language pill ─────────────────────────────────────────────────────── */

.be-lang {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 800;
}

.be-lang-backdrop {
  position: fixed;
  inset: 0;
}

.be-lang-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--be-line);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--primary-font-colour);
  background: var(--be-card);
  box-shadow: 0 4px 14px var(--be-card-shadow);
}

.be-lang-trigger .fas {
  font-size: 11px;
}

.be-lang-list {
  position: relative;
  max-height: 320px;
  margin: 0 0 10px;
  padding: 6px 0;
  overflow-y: auto;
  border: 1px solid var(--be-line);
  border-radius: 10px;
  background: var(--be-card);
  box-shadow: 0 10px 30px var(--be-card-shadow);
}

.be-lang-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--primary-font-colour);
}

.be-lang-list a:hover {
  background: var(--hover);
}

.be-lang-current {
  color: var(--be-gold-deep) !important;
}

/* ─── Back to top ───────────────────────────────────────────────────────── */

.be-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  color: var(--be-ink-deep);
  background: var(--be-gold);
  box-shadow: 0 6px 18px var(--be-card-shadow);
  transition: opacity 250ms ease;
}

.be-top-on {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Deposit notice ────────────────────────────────────────────────────── */

.be-toast {
  position: fixed;
  /* Clear of the fixed nav rather than under it — the nav is 76px tall and
     sits on a higher layer, so a toast at the top of the viewport lost its
     label behind it. */
  top: 96px;
  left: 18px;
  z-index: 850;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 330px;
  max-width: calc(100% - 36px);
  padding: 14px 16px;
  border: 1px solid var(--be-line);
  border-radius: 10px;
  background: var(--be-card);
  box-shadow: 0 10px 30px var(--be-card-shadow);
  opacity: 0;
  transform: translateX(-120%);
  transition: transform 400ms ease, opacity 400ms ease;
}

.be-toast-on {
  opacity: 1;
  transform: translateX(0);
}

.be-toast-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2fbf71;
}

.be-toast-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--be-ink-deep);
  background: var(--be-gold);
}

.be-toast-body {
  flex: 1;
  min-width: 0;
}

.be-toast-label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--be-gold-deep);
}

.be-toast-text {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--primary-font-colour);
}

.be-toast-time {
  font-size: 12px;
}

.be-toast-close {
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--background-font-colour);
  background: transparent;
}

/* ─── Narrow screens ────────────────────────────────────────────────────── */

@media only screen and (max-width: 992px) {
  .be-hero {
    padding: 150px 0 70px;
  }

  .be-hero-title {
    font-size: 36px;
  }

  .be-hero-dots {
    margin-top: 48px;
  }

  .be-section-title,
  .be-ready-title {
    font-size: 30px;
  }

  .be-clarity-title {
    font-size: 26px;
  }

  .be-clarity-text {
    margin-bottom: 28px;
  }

  .be-claim {
    margin-bottom: 20px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 16px;
  }

  .be-why,
  .be-market,
  .be-markets,
  .be-steps,
  .be-faqs {
    padding: 56px 0;
  }

  .be-nav-links {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .be-hero-title {
    font-size: 30px;
  }

  .be-hero-actions {
    gap: 18px;
  }

  .be-footer-bottom {
    justify-content: flex-start;
  }

  .be-footer-legal {
    gap: 18px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Dashboard — the (user) half of the skin
   ════════════════════════════════════════════════════════════════════════
   Ported from the ar skin's user area and re-tinted onto the Beacon palette
   (gold on ink). The guest half above owns the plain .be-* names it already
   used — .be-btn, .be-card, .be-top — so the dashboard's own versions of
   those four families carry a .be-db- prefix instead. Every other class kept
   its name.

   Colours still come from skin.js: the --be-* dashboard tokens are set for
   both themes there, same as the guest ones.
   ════════════════════════════════════════════════════════════════════════ */

.be-app button,
.be-app input,
.be-auth button,
.be-auth input {
  font-family: inherit;
}

.be-app {
  /* Inter on the dashboard half. The landing page keeps Playfair + Poppins —
     the two halves answer to different reference designs. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--be-bg);
  color: var(--be-text);
}

.be-app h1,
.be-app h2,
.be-app h3,
.be-app h4,
.be-app h5,
.be-app h6,
.be-app button,
.be-app input,
.be-app select,
.be-app textarea,
.be-auth,
.be-auth button,
.be-auth input {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ─── Atoms ──────────────────────────────────────────────── */
.be-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--be-accent-ink);
}

.be-logo-mark {
  display: block;
  width: auto;
  height: 34px;
  flex: none;
}

.be-logo-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--be-heading);
  white-space: nowrap;
}

.be-db-btn,
.be-db-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--be-accent);
  color: var(--be-accent-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.be-db-btn:hover {
  background: var(--be-accent-hover);
  color: var(--be-accent-text);
}

.be-db-btn:active {
  transform: translateY(1px);
}

.be-db-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.be-db-btn .ti {
  font-size: 18px;
}

.be-db-btn-sm,
.be-db-btn-sm:focus {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
}

.be-db-btn-lg,
.be-db-btn-lg:focus {
  height: 52px;
  padding: 0 30px;
  font-size: 16px;
}

.be-db-btn-block,
.be-db-btn-block:focus {
  display: flex;
  width: 100%;
}

.be-db-btn-ghost,
.be-db-btn-ghost:focus {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-db-btn-ghost:hover {
  background: var(--be-surface-3);
  color: var(--be-heading);
}

.be-db-btn-soft,
.be-db-btn-soft:focus {
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
}

.be-db-btn-soft:hover {
  background: var(--be-accent);
  color: var(--be-accent-text);
}

.be-db-btn-glow {
  box-shadow: var(--be-shadow-accent);
}

.be-icon-btn,
.be-icon-btn:focus {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  background: var(--be-surface);
  color: var(--be-heading);
  font-size: 19px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.be-icon-btn:hover {
  background: var(--be-surface-2);
}

.be-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--be-accent-ink);
  font-size: 14px;
  font-weight: 600;
}

.be-link:hover {
  text-decoration: underline;
}

/* The support card's "New ticket" opens the chat widget, so it is a button
   rather than a link — without this it keeps Materialize's button chrome and
   draws a pale box inside the card header. */
button.be-link {
  padding: 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
}

.be-up {
  color: var(--be-up);
}

.be-down {
  color: var(--be-down);
}

.be-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.be-tag .ti {
  font-size: 14px;
}

.be-tag-up {
  background: var(--be-up-soft);
  color: var(--be-up);
}

.be-tag-down {
  background: var(--be-down-soft);
  color: var(--be-down);
}

.be-tag-warn {
  background: var(--be-warn-soft);
  color: var(--be-warn);
}

.be-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--be-accent-bright);
  box-shadow: 0 0 0 0 var(--be-accent-ring);
  animation: be-pulse 2s ease-out infinite;
}

@keyframes be-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--be-accent-ring);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.be-tone-green {
 background: var(--be-green-soft); color: var(--be-green);
}

.be-tone-blue {
 background: var(--be-blue-soft); color: var(--be-blue);
}

.be-tone-purple {
 background: var(--be-purple-soft); color: var(--be-purple);
}

.be-tone-amber {
 background: var(--be-amber-soft); color: var(--be-amber);
}

.be-tone-pink {
 background: var(--be-pink-soft); color: var(--be-pink);
}

.be-tone-teal {
 background: var(--be-teal-soft); color: var(--be-teal);
}

.be-tone-indigo {
 background: var(--be-indigo-soft); color: var(--be-indigo);
}

.be-solid-green {
 background: var(--be-green); color: var(--be-on-color);
}

.be-solid-blue {
 background: var(--be-blue); color: var(--be-on-color);
}

.be-solid-purple {
 background: var(--be-purple); color: var(--be-on-color);
}

.be-solid-amber {
 background: var(--be-amber); color: var(--be-on-color);
}

.be-solid-pink {
 background: var(--be-pink); color: var(--be-on-color);
}

.be-solid-teal {
 background: var(--be-teal); color: var(--be-on-color);
}

.be-bg-green {
 background: var(--be-green);
}

.be-bg-blue {
 background: var(--be-blue);
}

.be-bg-purple {
 background: var(--be-purple);
}

.be-bg-amber {
 background: var(--be-amber);
}

.be-bg-pink {
 background: var(--be-pink);
}

.be-bg-teal {
 background: var(--be-teal);
}

.be-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.be-toggle button,
.be-toggle button:focus {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--be-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.be-toggle button:hover {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-toggle button.active,
.be-toggle button.active:focus {
  background: var(--be-accent);
  color: var(--be-accent-text);
}

.be-toggle-sm button,
.be-toggle-sm button:focus,
.be-toggle-sm button.active:focus {
  padding: 8px 14px;
  font-size: 14px;
}

.be-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--be-accent-text) 35%, transparent);
  border-top-color: var(--be-accent-text);
  border-radius: 50%;
  animation: be-spin 0.7s linear infinite;
}

@keyframes be-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .be-live-dot {
      animation: none;
  }

  .be-spinner {
      animation-duration: 2.4s;
  }
}

.be-brand {
  display: inline-flex;
  align-items: center;
}

.be-lang-toggle,
.be-lang-toggle:focus {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  background: var(--be-surface-2);
  color: var(--be-heading);
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.be-lang-toggle .ti {
  font-size: 20px;
  color: var(--be-accent-ink);
}

.be-lang-toggle .ti:last-child {
  margin-left: auto;
  font-size: 16px;
  color: var(--be-muted);
}

.be-lang-items {
  max-height: 240px;
  margin: 6px 0 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  background: var(--be-surface);
}

.be-lang-items a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--be-text);
  font-size: 14.5px;
  cursor: pointer;
}

.be-lang-items a:hover,
.be-lang-items a.active {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-field input::placeholder {
  color: var(--be-faint);
  font-weight: 400;
  text-transform: none;
}

/* ─── Sign in ────────────────────────────────────────────── */
.be-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 16px;
  background: var(--be-bg-alt);
}

.row.be-auth-card {
  display: flex;
  width: 100%;
  max-width: 1040px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow-lg);
}

.row.be-auth-card > .col {
  padding: 0;
}

.row.be-auth-card > .be-auth-panel {
  padding: 56px 36px;
  background: radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--be-on-color) 12%, transparent), transparent 70%),
    linear-gradient(160deg, var(--be-panel-from), var(--be-panel-to));
  color: var(--be-on-color);
}

.be-auth-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--be-on-color) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--be-on-color) 12%, transparent);
  font-size: 13px;
  font-weight: 600;
}

.be-auth-panel h2 {
  margin: 22px 0 14px;
  color: var(--be-on-color);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.be-auth-panel p {
  max-width: 340px;
  margin: 0;
  color: color-mix(in srgb, var(--be-on-color) 86%, transparent);
  font-size: 16px;
  line-height: 1.6;
}

.be-auth-art {
  max-width: 330px;
  margin-top: 28px;
  padding: 10px;
  border-radius: 14px;
  background: var(--be-logo-bg);
}

.be-auth-art img {
  display: block;
  width: 100%;
}

.row.be-auth-card > .be-auth-form {
  padding: 40px 36px 32px;
}

.be-auth-logo {
  display: flex;
  justify-content: center;
}

.be-auth-form h1 {
  margin: 18px 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  text-align: center;
}

.be-auth-sub {
  margin: 0 0 22px;
  color: var(--be-muted);
  font-size: 15px;
  text-align: center;
}

.be-label {
  display: block;
  margin: 16px 0 7px;
  color: var(--be-heading);
  font-size: 14px;
  font-weight: 600;
}

.be-req {
  color: var(--be-down);
}

.be-field {
  position: relative;
}

.be-field-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--be-muted);
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.be-field input[type]:not(.browser-default) {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 46px 0 44px;
  border: 1px solid var(--be-border-strong);
  border-radius: 10px;
  background: var(--be-input-bg);
  box-shadow: none;
  color: var(--be-heading);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-field input[type]:not(.browser-default):focus:not([readonly]) {
  border: 1px solid var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-field-eye,
.be-field-eye:focus {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--be-muted);
  font-size: 18px;
  transform: translateY(-50%);
  cursor: pointer;
}

.be-field-eye:hover {
  color: var(--be-heading);
}

.be-auth-row {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 22px;
}

.be-auth-switch {
  margin: 22px 0 0;
  color: var(--be-muted);
  font-size: 14.5px;
  text-align: center;
}

.be-auth-copy {
  margin: 26px 0 0;
  color: var(--be-faint);
  font-size: 12.5px;
  text-align: center;
}

.be-alert {
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--be-down) 35%, transparent);
  border-radius: 10px;
  background: var(--be-down-soft);
}

.be-alert p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--be-down);
  font-size: 14px;
}

/* ─── Dashboard shell ────────────────────────────────────── */
.be-app {
  min-height: 100vh;
}

.be-side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 997;
  display: flex;
  flex-direction: column;
  width: 264px;
  border-right: 1px solid var(--be-border);
  background: var(--be-sidebar-bg);
  transition: transform 0.25s ease;
}

.be-side-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--be-border);
}

.be-side-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px 14px 20px;
}

.be-profile {
  margin-bottom: 22px;
  padding: 20px 16px 14px;
  border: 1px solid var(--be-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--be-surface-2), var(--be-surface));
  text-align: center;
}

.be-profile-avatar {
  position: relative;
  display: inline-block;
}

.be-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--be-accent-bright);
  color: var(--be-on-color);
  font-size: 13px;
  font-weight: 700;
}

.be-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-avatar-lg {
  width: 62px;
  height: 62px;
  font-size: 20px;
  box-shadow: 0 0 0 4px var(--be-accent-soft);
}

.be-avatar-sm {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.be-online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--be-surface);
  border-radius: 50%;
  background: var(--be-green);
}

.be-profile-name {
  display: block;
  margin-top: 12px;
  color: var(--be-heading);
  font-size: 15.5px;
}

.be-profile-state {
  display: block;
  margin: 2px 0 10px;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-side-group {
  margin-bottom: 16px;
}

.be-side-group h6 {
  margin: 0 0 6px 12px;
  color: var(--be-faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.be-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--be-text);
  font-size: 14.5px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.be-side-link .ti {
  font-size: 19px;
}

.be-side-link:hover {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-side-link.active {
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
  font-weight: 600;
}

.be-help {
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--be-accent-ring);
  border-radius: 14px;
  background: var(--be-accent-soft);
}

.be-help-top {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.be-help-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--be-surface);
  color: var(--be-accent-ink);
  font-size: 17px;
}

.be-help b {
  display: block;
  color: var(--be-heading);
  font-size: 14.5px;
}

.be-help small {
  display: block;
  color: var(--be-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.be-help .be-db-btn-soft,
.be-help .be-db-btn-soft:focus {
  background: var(--be-surface);
}

.be-help .be-db-btn-soft:hover {
  background: var(--be-accent);
}

.be-side-overlay {
  position: fixed;
  inset: 0;
  z-index: 996;
  background: var(--be-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.be-app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: 264px;
}

.be-db-top {
  position: sticky;
  top: 0;
  z-index: 990;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--be-border);
  background: var(--be-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.be-db-top-left,
.be-db-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.be-db-top-btn,
.be-db-top-btn:focus {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  background: var(--be-surface);
  color: var(--be-heading);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.be-db-top-btn:hover {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-db-top-btn .ti {
  font-size: 17px;
}

.be-db-top-btn .ti-chevron-down {
  font-size: 14px;
  color: var(--be-muted);
}

.be-db-top-square,
.be-db-top-square:focus {
  justify-content: center;
  width: 38px;
  padding: 0;
}

.be-db-top-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--be-down);
  color: var(--be-on-color);
  font-size: 10.5px;
  font-weight: 700;
}

.be-db-top-user,
.be-db-top-user:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--be-border);
  border-radius: 999px;
  background: var(--be-surface);
  color: var(--be-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.be-db-top-user .ti {
  color: var(--be-muted);
  font-size: 14px;
}

.be-pop-wrap {
  position: relative;
}

.be-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow-lg);
}

.be-pop-right {
  right: 0;
  left: auto;
}

.be-pop-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.be-pop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--be-text);
  font-size: 14px;
  cursor: pointer;
}

.be-pop a:hover,
.be-pop a.active {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-pop a .ti {
  font-size: 17px;
}

.be-pop-head {
  margin-bottom: 4px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--be-border);
}

.be-pop-out {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--be-border);
}

.be-pop-out a,
.be-pop-out a:hover {
  color: var(--be-down);
}

.be-pop-head b {
  display: block;
  color: var(--be-heading);
  font-size: 14px;
}

.be-pop-head small {
  display: block;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-content {
  flex: 1;
  width: 100%;
  padding: 24px;
}

.be-app-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--be-border);
  background: var(--be-sidebar-bg);
  color: var(--be-muted);
  font-size: 13px;
}

.be-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.be-clock b {
  color: var(--be-heading);
  font-weight: 600;
}

.be-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 980;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--be-green);
  color: var(--be-on-color);
  font-size: 28px;
  box-shadow: var(--be-shadow-lg);
}

.be-whatsapp:hover {
  color: var(--be-on-color);
}

/* ─── Dashboard cards ────────────────────────────────────── */
.be-content > div > .row {
  margin-bottom: 20px;
}

.row.be-equal {
  display: flex;
  flex-wrap: wrap;
}

.row.be-equal > .col {
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

.row.be-equal > .col > .be-db-card {
  flex: 1;
}

.be-db-card {
  padding: 22px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
}

.be-db-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.be-db-card-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.row.be-tight-row {
  margin: 0 -6px;
}

.row.be-tight-row > .col {
  padding: 6px;
}

.be-hello {
  margin: 0;
  color: var(--be-text);
  font-size: 16px;
  font-weight: 400;
}

.be-hello b {
  color: var(--be-heading);
  font-weight: 700;
}

.be-balance {
  margin-bottom: 10px;
  padding: 22px 20px;
  border-radius: 14px;
  background: radial-gradient(360px 200px at 100% 0%, color-mix(in srgb, var(--be-on-color) 10%, transparent), transparent 70%),
    linear-gradient(135deg, var(--be-balance-from), var(--be-balance-to));
  color: var(--be-on-color);
}

.be-balance small {
  display: block;
  font-size: 13.5px;
  opacity: 0.85;
}

.be-balance > b {
  display: block;
  margin: 8px 0 0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.be-stat {
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface);
}

.be-stat small {
  display: block;
  margin-bottom: 4px;
  color: var(--be-muted);
  font-size: 12px;
  white-space: nowrap;
}

.be-stat b {
  display: block;
  color: var(--be-heading);
  font-size: 16px;
  font-weight: 700;
  word-break: normal;
}

.be-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 16px 6px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.be-action:hover {
  border-color: var(--be-accent-ring);
  transform: translateY(-2px);
}

/* One line each, so every tile in the row is the same height. */
.be-action b {
  max-width: 100%;
  overflow: hidden;
  color: var(--be-heading);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-action-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
}

.be-traders {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--be-border);
}

.be-traders .be-db-card-head {
  margin-bottom: 12px;
}

.be-traders .be-db-card-head h3 {
  font-size: 15px;
}

.be-traders .collection {
  display: flex;
  gap: 6px;
  margin: 0;
  overflow-x: auto;
}

.be-trader {
  flex: 1 0 92px;
  text-align: center;
}

.be-trader a {
  display: block;
  padding: 8px 4px;
  border-radius: 12px;
}

.be-trader a:hover {
  background: var(--be-surface-2);
}

.be-trader-photo {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.be-trader-photo img {
  display: block;
  width: 54px;
  height: 54px;
  border: 2px solid var(--be-accent-ring);
  border-radius: 50%;
  object-fit: cover;
}

.be-trader-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--be-surface);
  border-radius: 50%;
  background: var(--be-blue);
  color: var(--be-on-color);
  font-size: 10px;
}

.be-trader b {
  display: block;
  color: var(--be-heading);
  font-size: 12.5px;
  line-height: 1.3;
}

.be-trader small {
  display: block;
  margin-top: 2px;
  color: var(--be-up);
  font-size: 12px;
  font-weight: 600;
}

/* Empty state rendered by ListComponent inside a card */
.be-db-card .collection > .collection-item.app-py-2 {
  width: 100%;
  margin: 0;
  border: 1px dashed var(--be-border);
  border-radius: 12px;
  background: transparent;
  color: var(--be-muted);
}

.be-db-card .collection > .collection-item.app-py-2:hover {
  background: transparent;
}

/* Market overview */
.be-db-card .be-toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  margin-bottom: 4px;
  padding: 4px;
  overflow-x: auto;
  border-radius: 12px;
  background: var(--be-surface-2);
}

.be-db-card .be-toggle button {
  flex: none;
}

/* SearchAndLevelComponent: a Materialize row (search | chart type) restyled
   as one line. Its second column carries an inline padding-top of 10px, so
   the search field gets the same top margin and the two stay level. */
.be-chart-tools {
  position: relative;
  margin: 2px 0 12px;
}

.be-chart-tools .row {
  display: flex;
  gap: 8px;
  margin: 0;
}

.be-chart-tools .row > .col {
  width: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.be-chart-tools .row > .col:first-child {
  flex: 1;
  min-width: 0;
}

.be-chart-tools .input-field {
  margin: 10px 0 0;
}

.be-chart-tools-icon {
  position: absolute;
  top: 32px;
  left: 13px;
  z-index: 1;
  color: var(--be-muted);
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.be-chart-tools input[type]:not(.browser-default) {
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 0 12px 0 40px;
  border: 1px solid var(--be-border-strong);
  border-radius: 10px;
  background: var(--be-input-bg);
  box-shadow: none;
  color: var(--be-heading);
  font-size: 14px;
}

.be-chart-tools input[type]:not(.browser-default):focus:not([readonly]) {
  border: 1px solid var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-chart-tools input::placeholder {
  color: var(--be-faint);
  font-weight: 400;
  text-transform: none;
}

.be-chart-tools select.browser-default {
  height: 44px;
  min-width: 120px;
  padding: 0 10px;
  border: 1px solid var(--be-border-strong);
  border-radius: 10px;
  background-color: var(--be-input-bg);
  color: var(--be-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.be-chart-tools select.browser-default:focus {
  border-color: var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-chart-tools .autocomplete-content {
  margin-top: 4px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow-lg);
}

.be-chart-tools .autocomplete-content li {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
}

.be-chart-tools .autocomplete-content li:hover,
.be-chart-tools .autocomplete-content li.active {
  background: var(--be-surface-2);
}

.be-chart-tools .autocomplete-content li > span {
  padding: 10px 12px;
  color: var(--be-text);
  font-size: 14px;
  line-height: 1.3;
}

.be-chart-tools .autocomplete-content li .highlight {
  color: var(--be-heading);
  font-weight: 700;
}

.be-chart-tools .autocomplete-content li img {
  width: 28px;
  height: 28px;
  margin: 0 0 0 12px;
  border-radius: 50%;
  background: var(--be-logo-bg);
}

.be-chart-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid var(--be-border);
  border-radius: 999px;
  color: var(--be-text);
  font-size: 12.5px;
  font-weight: 600;
}

.be-chart-tag .ti {
  color: var(--be-accent-ink);
}

.be-chart {
  height: 290px;
  margin: 12px 0 12px;
  overflow: hidden;
  border-radius: 12px;
}

.be-chart > div,
.be-chart .tradingview-widget-container,
.be-chart #tradingview_ec926 {
  height: 100%;
}

/* An even two-column grid: Materialize's floated columns leave gaps when
   tiles differ in height, which they do once a name or price runs long. */
.be-tiles .collection.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.be-tiles .collection.row::after {
  display: none;
}

.be-tiles .collection.row > li.col {
  width: auto;
  margin: 0;
  padding: 0;
}

.be-tiles .collection > .collection-item.app-py-2 {
  grid-column: 1 / -1;
}

.be-tile,
.be-tile:focus {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-tile:hover {
  border-color: var(--be-border-strong);
  background: var(--be-surface-2);
}

.be-tile.active,
.be-tile.active:focus {
  border-color: var(--be-accent-bright);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-tile img {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 4px;
  border-radius: 10px;
  background: var(--be-logo-bg);
}

.be-tile-name {
  flex: 1;
  min-width: 0;
}

.be-tile-name b {
  display: block;
  overflow: hidden;
  color: var(--be-heading);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-tile-name small {
  display: block;
  overflow: hidden;
  color: var(--be-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-tile-price {
  text-align: right;
}

.be-tile-price b {
  display: block;
  color: var(--be-heading);
  font-size: 13.5px;
  white-space: nowrap;
}

.be-tile-price span {
  font-size: 12px;
  font-weight: 600;
}

/* Chart label + watch button */
.be-chart-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.be-watch-btn,
.be-watch-btn:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--be-border);
  border-radius: 999px;
  background: transparent;
  color: var(--be-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.be-watch-btn:hover {
  background: var(--be-surface-2);
  color: var(--be-heading);
}

.be-watch-btn.active,
.be-watch-btn.active:focus {
  border-color: var(--be-accent-ring);
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
}

/* Tabler's filled icons ship as a second font that takes over every .ti, so
   the star stays outlined and an amber colour marks "on the watchlist". */
.be-watch-btn.active .ti-star {
  color: var(--be-amber);
}

/* Watchlist */
.be-watch {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--be-border);
}

.be-watch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.be-watch-head h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.be-watch-head h4 small {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--be-surface-2);
  color: var(--be-muted);
  font-size: 12px;
  font-weight: 600;
}

.be-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.be-chips button,
.be-chips button:focus {
  padding: 5px 12px;
  border: 1px solid var(--be-border);
  border-radius: 999px;
  background: transparent;
  color: var(--be-text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.be-chips button:hover {
  background: var(--be-surface-2);
}

.be-chips button.active,
.be-chips button.active:focus {
  border-color: var(--be-accent);
  background: var(--be-accent);
  color: var(--be-accent-text);
}

.be-tile:focus-visible {
  outline: 2px solid var(--be-accent);
  outline-offset: 2px;
}

.be-tile-star,
.be-tile-star:focus {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  margin-left: -4px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--be-amber);
  font-size: 16px;
  cursor: pointer;
}

.be-tile-star:hover {
  background: var(--be-surface-3);
}

/* Trades */
.be-trades .collection {
  margin: 6px 0 0;
}

.be-trades .collection .collection-item:not(.app-py-2),
.be-trades .collection .collection-item:not(.app-py-2):last-child {
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border-bottom: 0;
  background: transparent;
}

.be-trades .collection .collection-item:not(.app-py-2):hover {
  background: var(--be-surface-2);
}

.be-trade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(96px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--be-text);
  font-size: 14px;
  cursor: pointer;
}

.be-trade:focus-visible {
  outline: 2px solid var(--be-accent);
  outline-offset: -2px;
  border-radius: 10px;
}

.be-trade-head {
  margin-top: 10px;
  padding-top: 6px;
  border-bottom: 1px solid var(--be-border);
  color: var(--be-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
}

.be-trade-asset {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.be-trade-asset img {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--be-logo-bg);
}

.be-trade-asset > span {
  min-width: 0;
}

.be-trade-asset b {
  display: block;
  overflow: hidden;
  color: var(--be-heading);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-trade-asset small {
  display: block;
  overflow: hidden;
  color: var(--be-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-trade-prices {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-trade-pnl {
  text-align: right;
  white-space: nowrap;
}

.be-trade-action {
  text-align: right;
}

.be-trade-date {
  color: var(--be-muted);
  font-size: 13px;
}

.be-trade-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--be-surface-2);
  color: var(--be-heading);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.be-trade-err {
  display: block;
  margin-top: 4px;
  color: var(--be-down);
  font-size: 11.5px;
  white-space: normal;
}

/* Trade screen */
.be-trade-screen > .row {
  margin-bottom: 20px;
}

.be-trade-screen .col > .be-db-card + .be-db-card {
  margin-top: 20px;
}

.be-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 16px 22px;
}

.be-pair-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--be-muted);
  font-size: 14px;
  font-weight: 600;
}

.be-pair-back:hover {
  color: var(--be-heading);
}

.be-pair-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.be-pair-name img,
.be-pair-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--be-logo-bg);
}

.be-pair-icon {
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
  font-size: 20px;
}

.be-pair-name b {
  display: block;
  color: var(--be-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.be-pair-name small {
  display: block;
  color: var(--be-muted);
  font-size: 13px;
  font-weight: 600;
}

.be-pair-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.be-pair-stat {
  min-width: 110px;
  padding: 8px 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
}

.be-pair-stat small {
  display: block;
  color: var(--be-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.be-pair-stat b {
  display: block;
  margin-top: 2px;
  color: var(--be-heading);
  font-size: 16px;
  white-space: nowrap;
}

.be-chart.be-chart-tall {
  height: 540px;
  margin-bottom: 0;
}

/* Order ticket */
.be-ticket-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}

.be-ticket-side,
.be-ticket-side:focus {
  height: 44px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
  color: var(--be-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.be-ticket-side:hover {
  color: var(--be-heading);
}

.be-ticket-side.buy.active,
.be-ticket-side.buy.active:focus {
  border-color: var(--be-buy);
  background: var(--be-up-soft);
  color: var(--be-buy);
}

.be-ticket-side.sell.active,
.be-ticket-side.sell.active:focus {
  border-color: var(--be-sell);
  background: var(--be-down-soft);
  color: var(--be-sell);
}

.be-ticket select.browser-default.be-input,
.be-ticket input[type].be-input:not(.browser-default) {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--be-border-strong);
  border-radius: 10px;
  background-color: var(--be-input-bg);
  box-shadow: none;
  color: var(--be-heading);
  font-size: 15px;
}

.be-ticket select.browser-default.be-input {
  cursor: pointer;
}

.be-ticket select.browser-default.be-input:focus,
.be-ticket input[type].be-input:not(.browser-default):focus:not([readonly]) {
  border: 1px solid var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
  outline: none;
}

.be-ticket input.be-input::placeholder {
  color: var(--be-faint);
  font-weight: 400;
  text-transform: none;
}

.be-ticket-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.be-ticket-quick button,
.be-ticket-quick button:focus {
  min-width: 52px;
  padding: 6px 12px;
  border: 1px solid var(--be-border);
  border-radius: 8px;
  background: var(--be-surface);
  color: var(--be-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.be-ticket-quick button:hover,
.be-ticket-quick button.active,
.be-ticket-quick button.active:focus {
  border-color: var(--be-accent-ring);
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
}

.be-ticket-est {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
}

.be-ticket-est span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--be-muted);
  font-size: 13.5px;
}

.be-ticket-est b {
  color: var(--be-heading);
}

.be-ticket-notice {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
}

.be-ticket-notice.up {
  background: var(--be-up-soft);
  color: var(--be-up);
}

.be-ticket-notice.down {
  background: var(--be-down-soft);
  color: var(--be-down);
}

.be-ticket-submit,
.be-ticket-submit:focus {
  margin-top: 16px;
  color: var(--be-on-color);
}

.be-ticket-submit.buy,
.be-ticket-submit.buy:focus {
  background: var(--be-buy);
}

.be-ticket-submit.buy:hover {
  background: var(--be-buy-hover);
  color: var(--be-on-color);
}

.be-ticket-submit.sell,
.be-ticket-submit.sell:focus {
  background: var(--be-sell);
}

.be-ticket-submit.sell:hover {
  background: var(--be-sell-hover);
  color: var(--be-on-color);
}

.be-ticket-off {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--be-muted);
}

/* Page heading */
/* Side padding matches a grid column's, so the heading lines up with the
   cards below it. */
.be-page-head {
  margin: 4px 0 22px;
  padding: 0 0.75rem;
}

.be-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--be-muted);
  font-size: 13.5px;
}

.be-crumbs a {
  color: var(--be-text);
}

.be-crumbs a:hover {
  color: var(--be-heading);
}

.be-crumbs .ti {
  color: var(--be-faint);
  font-size: 13px;
}

.be-page-head h1 {
  margin: 14px 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.be-page-head p {
  margin: 0;
  color: var(--be-muted);
  font-size: 15px;
}

/* Trade history */
.be-history-screen > .row {
  margin-bottom: 20px;
}

.be-db-card.be-history {
  overflow: hidden;
  padding: 0;
}

.be-history-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--be-border);
  background: var(--be-surface-2);
}

.be-history-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.be-history-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--be-border-strong);
  border-radius: 8px;
  background: var(--be-surface);
  color: var(--be-accent-ink);
  font-size: 17px;
}

.be-history-body {
  padding: 6px 18px 14px;
}

.be-hrow {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.7fr) minmax(0, 0.8fr)
    minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  color: var(--be-text);
  font-size: 14px;
  cursor: pointer;
}

.be-hrow:focus-visible {
  outline: 2px solid var(--be-accent);
  outline-offset: -2px;
  border-radius: 10px;
}

.be-hrow-head {
  padding-top: 18px;
  border-bottom: 1px solid var(--be-border);
  color: var(--be-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
}

.be-history .collection {
  margin: 4px 0 0;
}

.be-history .collection .collection-item,
.be-history .collection .collection-item:last-child {
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border-bottom: 0;
  background: transparent;
}

.be-history .collection .collection-item:hover {
  background: var(--be-surface-2);
}

.be-hrow-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.be-hrow-pair > span {
  min-width: 0;
}

.be-hrow-pair img {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--be-logo-bg);
}

.be-hrow-pair b {
  display: block;
  overflow: hidden;
  color: var(--be-heading);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-hrow-pair small {
  display: block;
  overflow: hidden;
  color: var(--be-muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-hrow-date {
  color: var(--be-muted);
  font-size: 13px;
}

.be-side-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.be-side-pill.buy {
  background: var(--be-up-soft);
  color: var(--be-buy);
}

.be-side-pill.sell {
  background: var(--be-down-soft);
  color: var(--be-sell);
}

.be-tag-neutral {
  background: var(--be-surface-3);
  color: var(--be-text);
}

.be-history-empty {
  padding: 42px 0 34px;
  color: var(--be-muted);
  text-align: center;
}

.be-history-empty .ti {
  color: var(--be-faint);
  font-size: 46px;
}

.be-history-empty p {
  margin: 8px 0 0;
  font-size: 15px;
}

.row.be-history-stats {
  margin-bottom: 0;
}

.row.be-history-stats > .col {
  margin-bottom: 14px;
}

.be-hstat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--be-border);
  border-radius: 16px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
}

.be-hstat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  font-size: 20px;
}

.be-hstat-text {
  min-width: 0;
  text-align: right;
}

.be-hstat-text small {
  display: block;
  color: var(--be-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-hstat-text b {
  display: block;
  margin-top: 4px;
  color: var(--be-heading);
  font-size: 22px;
  font-weight: 800;
}

.be-hstat-text b.be-up {
  color: var(--be-up);
}

.be-hstat-text b.be-down {
  color: var(--be-down);
}

.be-hstat-sub {
  display: block;
  margin-top: 4px;
  color: var(--be-muted);
  font-size: 12.5px;
}

/* Crypto card */
.row.be-cc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 16px 6px;
  border: 1px solid var(--be-border);
  border-radius: 14px;
  background: var(--be-surface-2);
}

.be-cc-card,
.be-cc-card:focus {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1.586;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 1000px;
  cursor: pointer;
}

.be-cc-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  background-image: radial-gradient(color-mix(in srgb, var(--be-on-color) 12%, transparent) 1px, transparent 1.4px),
    radial-gradient(260px 180px at 85% 110%, color-mix(in srgb, var(--be-on-color) 18%, transparent), transparent 70%),
    linear-gradient(135deg, var(--be-card-from), var(--be-card-to));
  background-size: 9px 9px, auto, auto;
  color: var(--be-on-color);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--be-shadow-lg);
  transition: transform 0.6s ease;
}

.be-cc-back {
  transform: rotateY(180deg);
}

.be-cc-card.flipped .be-cc-front {
  transform: rotateY(-180deg);
}

.be-cc-card.flipped .be-cc-back {
  transform: rotateY(0);
}

.be-cc-logo {
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.be-cc-chip {
  position: absolute;
  top: 42%;
  right: 28px;
  width: 42px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--be-chip), color-mix(in srgb, var(--be-chip) 70%, var(--be-card-to)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--be-card-to) 25%, transparent);
}

.be-cc-brand {
  position: absolute;
  right: 20px;
  bottom: 16px;
  text-align: right;
}

.be-cc-brand small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.be-cc-brand b {
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.be-cc-stripe {
  position: absolute;
  top: 22px;
  right: 0;
  left: 0;
  height: 40px;
  background: var(--be-cc-stripe);
}

.be-cc-sign {
  position: absolute;
  top: 80px;
  right: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.be-cc-sign span {
  flex: 1;
  height: 30px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--be-on-color) 85%, transparent);
}

.be-cc-sign b {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--be-on-color);
  color: var(--be-card-to);
  font-size: 13px;
}

.be-cc-holder {
  position: absolute;
  bottom: 34px;
  left: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-cc-note {
  position: absolute;
  bottom: 14px;
  left: 20px;
  font-size: 11px;
  opacity: 0.8;
}

.row.be-cc > .be-cc-copy {
  padding: 16px 20px;
}

.be-cc-copy h4 {
  margin: 12px 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.be-cc-copy p {
  max-width: 560px;
  margin: 0 0 12px;
  color: var(--be-text);
  font-size: 14.5px;
}

.be-cc-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--be-muted);
  font-size: 12.5px;
}

/* Recent transactions */
.be-tx {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--be-text);
  font-size: 14px;
}

.be-tx-head {
  padding-top: 6px;
  border-bottom: 1px solid var(--be-border);
  color: var(--be-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-txs .collection {
  margin: 10px 0 0;
}

.be-txs .collection .collection-item:not(.app-py-2),
.be-txs .collection .collection-item:not(.app-py-2):last-child {
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border-bottom: 0;
  background: transparent;
}

.be-txs .collection .collection-item:not(.app-py-2):hover {
  background: var(--be-surface-2);
}

.be-tx-type {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--be-heading);
  font-weight: 600;
}

.be-tx-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  font-size: 15px;
}

.be-tx-amount {
  color: var(--be-heading);
}

.be-tx-date {
  color: var(--be-muted);
}

/* Investment summary */
.row.be-invest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0;
}

.be-ring {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  margin: 6px auto 16px;
  border: 14px solid var(--be-surface-3);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--be-border), 0 0 0 1px var(--be-border);
}

.be-ring small {
  display: block;
  color: var(--be-muted);
  font-size: 12px;
}

.be-ring b {
  display: block;
  margin-top: 4px;
  color: var(--be-heading);
  font-size: 16px;
}

.be-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--be-border);
}

.be-legend:last-child {
  border-bottom: 0;
}

.be-legend-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--be-text);
  font-size: 14px;
}

.be-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
}

.be-legend-value {
  text-align: right;
}

.be-legend-value b {
  display: block;
  color: var(--be-heading);
  font-size: 14.5px;
}

.be-legend-value b.be-up {
  color: var(--be-up);
}

.be-legend-value small {
  color: var(--be-muted);
  font-size: 12px;
}

/* Stats strip */
.be-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.be-strip-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--be-border);
  border-radius: 14px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.be-strip-tile:hover {
  border-color: var(--be-accent-ring);
  transform: translateY(-2px);
}

.be-strip-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  font-size: 21px;
}

.be-strip-text {
  min-width: 0;
}

.be-strip-label {
  display: block;
  color: var(--be-muted);
  font-size: 13px;
}

.be-strip-text b {
  display: block;
  margin-top: 2px;
  color: var(--be-heading);
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Admin notices */
.be-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--be-accent-ring);
  border-radius: 12px;
  background: var(--be-accent-soft);
  color: var(--be-heading);
}

.be-notice > .ti {
  margin-top: 9px;
  color: var(--be-accent-ink);
  font-size: 19px;
}

.be-notice p {
  flex: 1;
  margin: 9px 0;
  white-space: pre-wrap;
}

.be-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.be-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--be-overlay);
}

.be-modal-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  border-radius: 16px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow-lg);
  text-align: right;
}

.be-modal-box p {
  margin: 0 0 18px;
  color: var(--be-heading);
  text-align: left;
  white-space: pre-wrap;
}

@media (max-width: 992px) {
  .be-side {
      transform: translateX(-100%);
  }

  .be-side.be-side-open {
      transform: translateX(0);
      box-shadow: var(--be-shadow-lg);
  }

  .be-side-overlay.show {
      opacity: 1;
      pointer-events: auto;
  }

  .be-app-main {
      margin-left: 0;
  }
}

@media (max-width: 600px) {
  .row.be-auth-card > .be-auth-form {
      padding: 30px 20px 26px;
  }

  .be-db-top {
      padding: 0 14px;
  }

  .be-content {
      padding: 16px;
  }

  .be-db-card {
      padding: 18px;
  }

  .be-balance > b {
      font-size: 30px;
  }

  .be-tx {
      grid-template-columns: 1.2fr 1fr 1fr;
  }

  .be-tx-date {
      display: none;
  }

  .be-trade {
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
  }

  .be-tiles .collection.row {
      grid-template-columns: minmax(0, 1fr);
  }

  .be-pair-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      margin-left: 0;
  }

  .be-pair-stat {
      min-width: 0;
  }

  .be-chart.be-chart-tall {
      height: 380px;
  }

  .be-hrow {
      grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .be-hrow-market,
  .be-hrow-side,
  .be-hrow-status,
  .be-hrow-qty,
  .be-hrow-entry {
      display: none;
  }

  .be-page-head h1 {
      font-size: 24px;
  }

  .be-trade-prices {
      display: none;
  }

  .be-trade-timer {
      padding: 3px 8px;
      font-size: 11.5px;
  }

  .be-app-foot {
      justify-content: center;
      padding: 14px 16px;
      text-align: center;
  }
}

/* Referrals (/user/profile?tab=referrals) */
.be-ref-screen .be-db-card {
  margin-bottom: 20px;
}

.be-ref-screen .be-db-card h3 {
  margin: 0;
  color: var(--be-heading);
  font-size: 18px;
  font-weight: 700;
}

.row.be-ref-stats {
  margin-bottom: 6px;
}

.row.be-ref-stats > .col {
  margin-bottom: 14px;
}

.be-ref-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  padding: 18px 20px;
  border: 1px solid var(--be-border);
  border-radius: 16px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
}

.be-ref-stat-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 10px;
  font-size: 20px;
}

.be-ref-stat-text {
  min-width: 0;
}

.be-ref-stat-text small {
  display: block;
  color: var(--be-muted);
  font-size: 13px;
}

.be-ref-stat-text b {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--be-heading);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-ref-stat-text > span {
  display: block;
  margin-top: 2px;
  color: var(--be-muted);
  font-size: 12px;
}

.be-ref-lead {
  margin: 8px 0 18px;
  color: var(--be-muted);
  font-size: 14px;
}

.be-ref-copy {
  display: flex;
  gap: 10px;
}

.be-ref-copy input.browser-default {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  outline: 0;
  background: var(--be-surface-2);
  color: var(--be-heading);
  font-size: 14px;
}

.be-ref-copy input.browser-default:focus {
  border-color: var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-ref-earned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
}

.be-ref-earned small {
  display: block;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-ref-earned b {
  display: block;
  margin-top: 6px;
  color: var(--be-accent-ink);
  font-size: 17px;
  font-weight: 700;
}

.be-ref-note {
  color: var(--be-muted);
  font-size: 13.5px;
  text-align: right;
}

.be-ref-network .collection {
  margin: 0;
  border: 0;
}

.be-ref-network .collection > .collection-item.app-py-2,
.be-ref-network .collection > .collection-item.app-py-2:hover {
  padding: 22px 0 10px;
  border: 0;
}

.be-ref-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--be-muted);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.be-ref-empty .ti {
  color: var(--be-accent-ink);
  font-size: 34px;
}

.be-ref-network .collection .collection-item.be-ref-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 8px;
  border-bottom: 1px solid var(--be-border);
  border-radius: 0;
  background: transparent;
}

.be-ref-network .collection .collection-item.be-ref-person:last-child {
  border-bottom: 0;
}

.be-ref-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
  font-size: 13px;
  font-weight: 700;
}

.be-ref-person-text {
  flex: 1;
  min-width: 0;
}

.be-ref-person-text b {
  display: block;
  overflow: hidden;
  color: var(--be-heading);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-ref-person-text small {
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-ref-joined {
  flex: none;
  color: var(--be-muted);
  font-size: 13px;
}

.be-ref-steps,
.be-ref-tips {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.be-ref-steps li,
.be-ref-tips li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  color: var(--be-text);
  font-size: 14px;
  line-height: 1.45;
}

.be-ref-steps li + li,
.be-ref-tips li + li {
  margin-top: 14px;
}

.be-ref-step-no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--be-surface-3);
  color: var(--be-heading);
  font-size: 12.5px;
  font-weight: 700;
}

.be-ref-tips .ti {
  flex: none;
  margin-top: 1px;
  color: var(--be-accent-ink);
  font-size: 19px;
}

@media (max-width: 600px) {
  .be-ref-network .be-db-card-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
  }

  .be-ref-note {
      text-align: left;
  }

  .be-ref-joined {
      display: none;
  }
}

/* Account settings (/user/profile, ?tab=password) */
.be-set-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 30px 26px;
  border: 1px solid var(--be-border);
  border-radius: 20px;
  background: linear-gradient(120deg, var(--be-surface), var(--be-surface-2));
  box-shadow: var(--be-shadow);
}

.be-set-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.be-set-blob-1 {
  top: 14px;
  left: 80px;
  width: 90px;
  height: 90px;
  background: var(--be-accent-soft);
}

.be-set-blob-2 {
  bottom: 22px;
  left: 42%;
  width: 46px;
  height: 46px;
  background: var(--be-blue-soft);
}

.be-set-blob-3 {
  top: 22px;
  right: 280px;
  width: 70px;
  height: 70px;
  background: var(--be-amber-soft);
}

.be-set-blob-4 {
  right: 120px;
  bottom: -24px;
  width: 60px;
  height: 60px;
  background: var(--be-green-soft);
}

.be-set-title,
.be-set-account {
  position: relative;
}

.be-set-title h1 {
  margin: 0 0 8px;
  color: var(--be-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.be-set-title p {
  margin: 0;
  color: var(--be-muted);
  font-size: 15px;
}

.be-set-account {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--be-border);
  border-radius: 16px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
}

.be-set-account-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--be-accent), var(--be-accent-bright));
  color: var(--be-accent-text);
  font-size: 16px;
  font-weight: 800;
}

.be-set-account > span:last-child {
  min-width: 0;
}

.be-set-account small {
  display: block;
  color: var(--be-muted);
  font-size: 12px;
}

.be-set-account b {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--be-heading);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-db-card.be-set-card {
  overflow: hidden;
  padding: 0;
}

.be-set-tabs {
  display: flex;
  border-bottom: 1px solid var(--be-border);
}

.be-set-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 130px;
  margin-bottom: -1px;
  padding: 16px 20px 14px;
  border-bottom: 2px solid transparent;
  color: var(--be-muted);
  font-size: 14.5px;
  font-weight: 600;
}

.be-set-tabs a .ti {
  font-size: 20px;
}

.be-set-tabs a:hover {
  color: var(--be-heading);
}

.be-set-tabs a.active {
  border-bottom-color: var(--be-accent);
  color: var(--be-accent-ink);
}

.be-set-body {
  padding: 24px;
}

.be-set-body .form-top-label {
  display: block;
  margin-bottom: 8px;
  color: var(--be-heading);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.be-set-body .row {
  margin-bottom: 0;
}

.be-set-body .input-field {
  margin: 0 0 18px;
}

.be-set-body .input-field input[type]:not(.browser-default),
.be-set-body .input-field select.browser-default,
.be-set-body .input-field textarea {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  outline: 0;
  background: var(--be-input-bg);
  box-shadow: none;
  color: var(--be-heading);
  font-size: 14.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-set-body .input-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.be-set-body .input-field input[type='date'],
.be-set-body .input-field select.browser-default {
  color-scheme: var(--be-scheme, light);
}

.be-set-body .input-field input[type]:not(.browser-default):focus:not([readonly]),
.be-set-body .input-field select.browser-default:focus,
.be-set-body .input-field textarea:focus {
  border: 1px solid var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-set-static {
  margin-bottom: 18px;
}

.be-set-email {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
  color: var(--be-text);
  font-size: 14.5px;
}

.be-set-email > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-set-email a {
  flex: none;
  color: var(--be-accent-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.be-set-photo {
  margin: 0 0 22px;
  padding: 0 0.75rem;
}

.be-set-photo-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.be-set-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  background: var(--be-accent);
  color: var(--be-accent-text);
  font-size: 24px;
  font-weight: 800;
}

.be-set-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.be-set-photo-pick {
  min-width: 0;
  max-width: 380px;
}

.be-set-photo-pick input[type='file'] {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
  color: var(--be-text);
  font-size: 14px;
}

.be-set-photo-pick small {
  display: block;
  margin-top: 8px;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-set-photo-pick small.be-set-error {
  margin-top: 4px;
  color: var(--be-down);
}

.be-set-body form > div > .be-db-btn {
  margin: 4px 0.75rem 0;
}

.be-set-body form > section {
  padding: 0 0.75rem;
}

.be-set-body form > section .card-panel {
  margin: 0;
  border-radius: 12px;
  box-shadow: none;
}

.be-set-narrow {
  max-width: 520px;
}

.be-set-lead {
  margin: 0 0 18px;
  padding: 0 0.75rem;
  color: var(--be-muted);
  font-size: 14px;
}

@media (max-width: 600px) {
  .be-set-head {
      padding: 22px 18px;
  }

  .be-set-title h1 {
      font-size: 24px;
  }

  .be-set-account {
      width: 100%;
  }

  .be-set-tabs a {
      flex: 1;
      min-width: 0;
  }

  .be-set-body {
      padding: 20px 8px;
  }
}

/* Copy trading (/user/trading?tab=traders) */
.be-tr-section {
  margin-bottom: 26px;
  padding: 0 0.75rem;
}

.be-tr-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--be-heading);
  font-size: 18px;
  font-weight: 700;
}

.be-tr-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
  font-size: 12px;
  font-weight: 700;
}

.be-tr-lead {
  margin: -6px 0 18px;
  color: var(--be-muted);
  font-size: 14px;
}

.be-tr-none {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  border: 1px dashed var(--be-border-strong);
  border-radius: 14px;
  background: var(--be-surface-2);
  color: var(--be-text);
  font-size: 14.5px;
}

.row.be-tr-search-row {
  margin: 0 -0.75rem 18px;
}

.be-tr-search-label {
  display: block;
  margin-bottom: 8px;
  color: var(--be-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-tr-search {
  position: relative;
}

.be-tr-search .ti {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--be-muted);
  font-size: 17px;
  transform: translateY(-50%);
  pointer-events: none;
}

.be-tr-search input.browser-default {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  outline: 0;
  background: var(--be-surface);
  color: var(--be-heading);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-tr-search input.browser-default:focus {
  border-color: var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

/* An even grid: Materialize's floated columns leave gaps when cards differ
   in height, which they do once a bio runs to two lines. */
.be-tr-grid .collection.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.be-tr-grid .collection.row > .be-tr-cell {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.be-tr {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--be-border);
  border-radius: 16px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
}

.be-tr-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.be-tr-who img {
  width: 48px;
  height: 48px;
  flex: none;
  border: 2px solid var(--be-border);
  border-radius: 50%;
  object-fit: cover;
}

.be-tr-who > span {
  min-width: 0;
}

.be-tr-who b,
.be-tr-who small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-tr-who b {
  color: var(--be-heading);
  font-size: 16px;
  font-weight: 700;
}

.be-tr-who small {
  margin-top: 2px;
  color: var(--be-muted);
  font-size: 13px;
}

.be-tr-bio {
  margin: 14px 0;
  color: var(--be-text);
  font-size: 14px;
}

.be-tr-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.be-tr-stat {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--be-surface-2);
}

.be-tr-stat small {
  display: block;
  color: var(--be-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.be-tr-stat b {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--be-heading);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-tr-stat b.be-up {
  color: var(--be-up);
}

.be-tr-stat b.be-down {
  color: var(--be-down);
}

.be-tr-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.be-tr-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--be-blue-soft);
  color: var(--be-blue);
  font-size: 12px;
  font-weight: 600;
}

.be-tr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* The copy control is the default app's shared button, so what it renders —
   a .btn, a plain link for a Bot purchase, or a progress bar while it works —
   is styled from here rather than by changing it. */
.be-tr-actions .btn,
.be-tr-actions .btn:focus,
.be-tr-actions > a:not(.be-tr-profile) {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--be-accent);
  box-shadow: none;
  color: var(--be-accent-text);
  width: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.be-tr-actions .btn:hover,
.be-tr-actions > a:not(.be-tr-profile):hover {
  background: var(--be-accent-hover);
  box-shadow: none;
  color: var(--be-accent-text);
}

/* Following (and locked) is the button's brown state; Materialize sets that
   colour with !important, so only !important replaces it. */
.be-tr-actions .btn.brown {
  background-color: var(--be-surface-3) !important;
  color: var(--be-heading) !important;
}

.be-tr-actions .progress {
  width: 90px;
  margin: 0;
}

.be-tr-profile,
.be-tr-profile:focus {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--be-border-strong);
  border-radius: 10px;
  background: var(--be-surface);
  color: var(--be-accent-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.be-tr-profile:hover {
  background: var(--be-surface-2);
  color: var(--be-accent-ink);
}

.be-tr-agreement {
  margin: 0;
  padding: 0 0.75rem 10px;
  text-align: center;
}

.be-tr-agreement a {
  color: var(--be-muted);
  font-size: 13px;
  text-decoration: underline;
}

@media (max-width: 992px) {
  .be-tr-grid .collection.row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .be-tr-grid .collection.row {
      grid-template-columns: minmax(0, 1fr);
  }
}

/* My assets (/user/holding) */
.be-hold-screen > .row {
  margin-bottom: 20px;
}

.be-hold-screen .be-db-card h3 {
  margin: 0;
  color: var(--be-heading);
  font-size: 18px;
  font-weight: 700;
}

.be-db-card.be-hold-summary {
  padding: 0;
}

.be-hold-summary .row {
  margin: 0;
}

.be-hold-summary .col {
  padding: 22px 24px;
}

.be-hold-summary-main {
  border-left: 1px solid var(--be-border);
}

.be-hold-summary small {
  display: block;
  color: var(--be-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-hold-summary b {
  display: block;
  margin: 8px 0 6px;
  color: var(--be-heading);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.be-hold-summary span {
  color: var(--be-muted);
  font-size: 13px;
}

.be-hold-summary a {
  color: var(--be-accent-ink);
  font-weight: 600;
}

.be-db-card.be-hold-wallets {
  padding: 0;
}

.be-hold-wallets-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--be-border);
}

.be-hold-grid {
  padding: 20px 22px 22px;
}

/* An even grid, as on the traders page: cards share a row height. */
.be-hold-grid .collection.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.be-hold-grid .collection.row > .be-hold-cell {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.be-hold-wallet {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--be-border);
  border-radius: 14px;
  background: var(--be-surface);
}

.be-hold-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.be-hold-who img {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--be-border);
  border-radius: 50%;
  background: var(--be-surface-2);
  object-fit: cover;
}

.be-hold-who > span {
  min-width: 0;
}

.be-hold-who b,
.be-hold-who small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-hold-who b {
  color: var(--be-heading);
  font-size: 15.5px;
  font-weight: 700;
}

.be-hold-who small {
  margin-top: 2px;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-hold-balance {
  margin: 16px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  background: var(--be-surface-2);
}

.be-hold-balance small {
  display: block;
  color: var(--be-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-hold-balance b {
  display: block;
  overflow: hidden;
  margin: 8px 0 4px;
  color: var(--be-heading);
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-hold-balance span {
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-hold-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  color: var(--be-text);
  font-size: 13px;
}

.be-hold-buy,
.be-hold-buy:focus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--be-accent-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.be-hold-buy:hover {
  background: var(--be-accent-soft);
}

.be-hold-trade,
.be-hold-guide {
  margin-bottom: 20px;
}

/* A wallet's Buy scrolls here; the margin keeps it clear of the top bar. */
.be-hold-trade {
  scroll-margin-top: 90px;
}

.be-hold-lead {
  margin: 8px 0 16px;
  color: var(--be-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.be-hold-fiat {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
}

.be-hold-fiat small {
  display: block;
  color: var(--be-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.be-hold-fiat b {
  display: block;
  margin-top: 8px;
  color: var(--be-heading);
  font-size: 22px;
  font-weight: 800;
}

.be-hold-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.be-hold-modes button,
.be-hold-modes button:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
  color: var(--be-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.be-hold-modes button.active {
  border-color: var(--be-accent);
  background: var(--be-accent);
  color: var(--be-accent-text);
}

.be-hold-modes .ti {
  font-size: 17px;
}

.be-hold-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--be-surface-2);
  color: var(--be-muted);
  font-size: 13.5px;
}

.be-hold-pay b {
  color: var(--be-heading);
  font-size: 13.5px;
  text-align: right;
}

.be-hold-trade form .row {
  margin: 0 -0.75rem;
}

.be-hold-trade .form-top-label {
  display: block;
  margin-bottom: 8px;
  color: var(--be-heading);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.be-hold-trade .input-field {
  margin: 0 0 6px;
}

.be-hold-trade .input-field input[type]:not(.browser-default),
.be-hold-trade .input-field select.browser-default {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  outline: 0;
  background: var(--be-input-bg);
  box-shadow: none;
  color: var(--be-heading);
  font-size: 14.5px;
  color-scheme: var(--be-scheme, light);
}

.be-hold-trade .input-field input[type]:not(.browser-default):focus:not([readonly]),
.be-hold-trade .input-field select.browser-default:focus {
  border: 1px solid var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

.be-hold-trade .input-field + .col,
.be-hold-trade .col > .input-field {
  margin-bottom: 12px;
}

.be-hold-hint {
  margin: -4px 0 14px;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-hold-hint a {
  color: var(--be-accent-ink);
  font-weight: 600;
}

.be-hold-receive {
  margin-bottom: 18px;
}

.be-hold-trade .be-hold-receive .form-top-label {
  text-transform: none;
}

.be-hold-receive > div {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
  color: var(--be-heading);
  font-size: 14.5px;
}

.be-hold-trade form > section {
  margin-top: 12px;
}

.be-hold-trade form > section .card-panel {
  margin: 0;
  border-radius: 12px;
  box-shadow: none;
}

.be-hold-none {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--be-border-strong);
  border-radius: 12px;
  color: var(--be-muted);
  font-size: 14px;
  text-align: center;
}

.be-hold-guide ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.be-hold-guide ul > li {
  margin-bottom: 6px;
  color: var(--be-text);
  font-size: 14px;
  line-height: 1.5;
  list-style: disc;
}

.be-hold-guide b {
  color: var(--be-heading);
}

@media (max-width: 992px) {
  .be-hold-grid .collection.row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .be-hold-summary-main {
      border-top: 1px solid var(--be-border);
      border-left: 0;
  }

  .be-hold-summary b {
      font-size: 26px;
  }

  .be-hold-grid {
      padding: 16px;
  }

  .be-hold-grid .collection.row {
      grid-template-columns: minmax(0, 1fr);
  }

  .be-hold-modes button,
  .be-hold-modes button:focus {
      padding: 0 8px;
      font-size: 13px;
      white-space: nowrap;
  }
}

@media (max-width: 992px) {
  .be-app-main {
      padding-bottom: 96px;
  }

  .be-whatsapp {
      bottom: 108px;
  }
}

.be-mnav {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 990;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  height: 68px;
  padding: 6px;
  border: 1px solid var(--be-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--be-surface) 92%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--be-heading) 14%, transparent);
  backdrop-filter: blur(10px);
}

.be-mnav-tab,
.be-mnav-tab:focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--be-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.be-mnav-tab .ti {
  font-size: 21px;
}

.be-mnav-tab.active {
  border: 1px solid var(--be-border);
  background: var(--be-accent-soft);
  color: var(--be-accent-ink);
}

.be-mnav-actions,
.be-mnav-actions:focus {
  justify-content: flex-end;
  padding-bottom: 6px;
}

.be-mnav-fab {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -34px;
  border: 4px solid var(--be-surface);
  border-radius: 50%;
  background: var(--be-accent);
  box-shadow: var(--be-shadow-accent);
  color: var(--be-accent-text);
}

.be-mnav-fab .ti {
  font-size: 22px;
}

.be-mnav-actions.open .be-mnav-fab {
  background: var(--be-accent-hover);
}

.be-act-sheet {
  position: fixed;
  inset: 0;
  z-index: 989;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 16px 150px;
}

.be-act-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--be-bg) 70%, transparent);
  backdrop-filter: blur(8px);
}

/* Three to a row, with a short last row centred. */
.be-act-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 420px;
}

.be-act-tile,
.be-act-tile:focus {
  display: flex;
  flex: 0 0 calc((100% - 32px) / 3);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid var(--be-border);
  border-radius: 18px;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
  color: var(--be-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.be-act-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--be-surface);
  font-size: 22px;
}

.be-act-green {
 background: var(--be-green-soft); border-color: color-mix(in srgb, var(--be-green) 25%, transparent);
}

.be-act-green .be-act-icon {
 background: var(--be-green);
}

.be-act-pink {
 background: var(--be-pink-soft); border-color: color-mix(in srgb, var(--be-pink) 25%, transparent);
}

.be-act-pink .be-act-icon {
 background: var(--be-pink);
}

.be-act-indigo {
 background: var(--be-indigo-soft); border-color: color-mix(in srgb, var(--be-indigo) 25%, transparent);
}

.be-act-indigo .be-act-icon {
 background: var(--be-indigo);
}

.be-act-blue {
 background: var(--be-blue-soft); border-color: color-mix(in srgb, var(--be-blue) 25%, transparent);
}

.be-act-blue .be-act-icon {
 background: var(--be-blue);
}

.be-act-amber {
 background: var(--be-amber-soft); border-color: color-mix(in srgb, var(--be-amber) 25%, transparent);
}

.be-act-amber .be-act-icon {
 background: var(--be-amber);
}

.be-act-teal {
 background: var(--be-teal-soft); border-color: color-mix(in srgb, var(--be-teal) 25%, transparent);
}

.be-act-teal .be-act-icon {
 background: var(--be-teal);
}

.be-act-purple {
 background: var(--be-purple-soft); border-color: color-mix(in srgb, var(--be-purple) 25%, transparent);
}

.be-act-purple .be-act-icon {
 background: var(--be-purple);
}

.be-act-close,
.be-act-close:focus {
  position: absolute;
  bottom: 96px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--be-border);
  border-radius: 50%;
  background: var(--be-surface);
  box-shadow: var(--be-shadow);
  color: var(--be-heading);
  font-size: 22px;
  transform: translateX(-50%);
  cursor: pointer;
}

/* Markets (/user/trading?tab=assets) */
.be-mk-screen {
  padding: 0 0.75rem 10px;
}

.be-mk-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.be-toggle.be-mk-markets {
  flex-wrap: wrap;
  margin: 0;
}

.be-mk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.be-mk-search {
  position: relative;
}

.be-mk-search .ti {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--be-muted);
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

.be-mk-search input.browser-default,
.be-mk-filters select.browser-default {
  box-sizing: border-box;
  height: 40px;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  outline: 0;
  background: var(--be-surface);
  color: var(--be-heading);
  font-size: 14px;
  color-scheme: var(--be-scheme, light);
}

.be-mk-search input.browser-default {
  width: 230px;
  padding: 0 12px 0 34px;
}

.be-mk-filters select.browser-default {
  width: auto;
  padding: 0 10px;
}

.be-mk-search input.browser-default:focus,
.be-mk-filters select.browser-default:focus {
  border-color: var(--be-accent);
  box-shadow: 0 0 0 3px var(--be-accent-ring);
}

/* An even grid, as on the traders page: cards share a row height. */
.be-mk-grid .collection.row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.be-mk-grid .collection.row > .be-mk-cell {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.be-mk,
.be-mk:focus {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--be-border);
  border-radius: 14px;
  background: var(--be-surface);
  color: var(--be-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be-mk:hover {
  border-color: var(--be-border-strong);
  box-shadow: var(--be-shadow);
}

.be-mk-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.be-mk-top img {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.be-mk-name {
  flex: 1;
  min-width: 0;
}

.be-mk-name b,
.be-mk-name small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.be-mk-name b {
  color: var(--be-heading);
  font-size: 15px;
  font-weight: 700;
}

.be-mk-name small {
  margin-top: 2px;
  color: var(--be-muted);
  font-size: 12.5px;
}

.be-mk-go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--be-accent);
  color: var(--be-accent-text);
  font-size: 16px;
}

.be-mk-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.be-mk-bottom small {
  display: block;
  margin-bottom: 6px;
  color: var(--be-muted);
  font-size: 11.5px;
}

.be-mk-bottom b {
  color: var(--be-heading);
  font-size: 15px;
  font-weight: 700;
}

.be-mk-change {
  text-align: right;
}

.be-mk-change b.be-up {
  color: var(--be-up);
}

.be-mk-change b.be-down {
  color: var(--be-down);
}

.be-mk-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
  color: var(--be-muted);
  font-size: 14px;
}

@media (max-width: 1200px) {
  .be-mk-grid .collection.row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .be-mk-grid .collection.row {
      grid-template-columns: minmax(0, 1fr);
  }

  .be-mk-filters,
  .be-mk-search,
  .be-mk-search input.browser-default {
      width: 100%;
  }

  .be-mk-filters select.browser-default {
      flex: 1;
  }
}

/* ─── Dashboard home ─────────────────────────────────────────────────────── */
/* The cards that make up (user)/index: a full-width ticker over two columns,
   the account on the left and the markets on the right. */

.be-db-top-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--be-heading);
}

.be-ticker {
  margin-bottom: 18px;
  padding: 2px 0;
  border: 1px solid var(--be-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--be-surface);
}

.be-dash-row {
  margin-bottom: 0;
}

.be-dash-row > .col {
  margin-bottom: 0;
}

.be-dash-row .be-db-card,
.be-dash-row .be-chips-row {
  margin-bottom: 18px;
}

.be-head-icon {
  margin-right: 8px;
  color: var(--be-accent-ink);
}

.be-head-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.be-tag-soft {
  color: var(--be-muted);
  background: var(--be-surface-3);
}

/* ─── Portfolio card ─────────────────────────────────────────────────────── */

.be-folio-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.be-folio-hello {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--be-text);
}

.be-folio-hello b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--be-heading);
}

.be-folio-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.be-folio-figures {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

/* The reference draws these straight on the card — no inset panel, no
   gradient — so the only thing separating the profit box is its own border. */
.be-folio-value {
  flex: 1 1 180px;
  padding: 16px 0 6px;
}

.be-folio-pnl {
  flex: 0 1 190px;
  padding: 14px 16px;
  border: 1px solid var(--be-border);
  border-radius: 12px;
  background: var(--be-surface-2);
}

.be-folio-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--be-muted);
}

.be-folio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 13px;
}

.be-folio-value > b {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--be-heading);
}

.be-folio-pnl > b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--be-heading);
}

.be-folio-pnl > small {
  font-size: 12.5px;
  color: var(--be-muted);
}

.be-folio-actions {
  display: flex;
  gap: 12px;
}

.be-folio-actions .be-db-btn {
  flex: 1;
  height: 44px;
}

/* ─── Balance tiles ──────────────────────────────────────────────────────── */

.be-tiles-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.be-tiles-row > .col {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.be-tile-stat {
  display: block;
  height: 100%;
}

.be-tile-icon-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 10px;
  font-size: 17px;
}

.be-tile-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--be-muted);
}

.be-tile-stat > b {
  font-size: 23px;
  font-weight: 700;
  color: var(--be-heading);
}

/* ─── Connect wallet banner ──────────────────────────────────────────────── */

.be-wallet-banner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.be-wallet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 19px;
  color: var(--be-accent-ink);
  background: var(--be-accent-soft);
}

.be-wallet-text {
  flex: 1;
  min-width: 0;
}

.be-wallet-text b {
  display: block;
  font-size: 15px;
  color: var(--be-heading);
}

.be-wallet-text small {
  font-size: 13px;
  color: var(--be-muted);
}

.be-wallet-state {
  flex: none;
}

.be-wallet-go {
  flex: none;
  font-size: 18px;
  color: var(--be-faint);
}

/* ─── Quick links ────────────────────────────────────────────────────────── */

.be-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button.be-chip {
  font-family: inherit;
  cursor: pointer;
}

.be-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--be-text);
  background: var(--be-surface);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.be-chip:hover {
  color: var(--be-heading);
  background: var(--be-surface-3);
}

.be-chip.primary {
  color: var(--be-accent-text);
  border-color: transparent;
  background: var(--be-accent);
}

.be-chip.primary:hover {
  color: var(--be-accent-text);
  background: var(--be-accent-hover);
}

/* ─── Support ────────────────────────────────────────────────────────────── */

.be-support-body {
  padding: 26px 0 8px;
  text-align: center;
}

.be-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  font-size: 26px;
  color: var(--be-faint);
}

.be-support-body p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--be-muted);
}

/* ─── Expert traders ─────────────────────────────────────────────────────── */

.be-expert + .be-expert {
  margin-top: 10px;
}

.be-expert > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--be-surface-2);
}

.be-expert > a:hover {
  background: var(--be-surface-3);
}

.be-expert-photo {
  position: relative;
  flex: 0 0 42px;
}

.be-expert-photo img {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.be-expert-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid var(--be-surface-2);
  border-radius: 50%;
  font-size: 9px;
  color: #ffffff;
  background: var(--be-up);
}

.be-expert-who {
  flex: 1;
  min-width: 0;
}

.be-expert-who b {
  display: block;
  font-size: 14.5px;
  color: var(--be-heading);
}

.be-expert-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.be-expert-meta small {
  font-size: 12.5px;
  color: var(--be-muted);
}

.be-expert-roi {
  flex: none;
  text-align: right;
}

.be-expert-roi b {
  display: block;
  font-size: 15px;
}

.be-expert-roi small {
  font-size: 12px;
  color: var(--be-muted);
}

.be-experts .be-db-btn-block {
  margin-top: 14px;
}

/* ─── Market overview ────────────────────────────────────────────────────── */

.be-mt-scroll {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--be-surface-3) var(--be-surface-2);
}

.be-mt-tile {
  flex: 0 0 176px;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--be-surface-3);
  transition: background 0.15s ease;
}

.be-mt-tile:hover {
  background: var(--be-border-strong);
}

.be-mt-tile.active {
  border-color: transparent;
  background: var(--be-accent);
}

.be-mt-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.be-mt-top img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.be-mt-top b {
  flex: 1;
  font-size: 13.5px;
  color: var(--be-heading);
}

.be-mt-top small {
  font-size: 11.5px;
  white-space: nowrap;
}

.be-mt-price {
  font-size: 19px;
  font-weight: 700;
  color: var(--be-heading);
}

/* The gold tile writes its own text, so the tokens that colour the rest do
   not apply inside it. */
.be-mt-tile.active .be-mt-top b,
.be-mt-tile.active .be-mt-price,
.be-mt-tile.active .be-up,
.be-mt-tile.active .be-down {
  color: var(--be-accent-text);
}

/* ─── Featured rows ──────────────────────────────────────────────────────── */

.be-ft-row {
  display: flex;
  gap: 10px;
}

.be-ft-tile {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 0;
  min-width: 0;
  padding: 11px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--be-surface-3);
}

.be-ft-tile:hover {
  background: var(--be-border-strong);
}

.be-ft-tile img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.be-ft-text {
  flex: 1;
  min-width: 0;
}

.be-ft-text b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--be-heading);
}

.be-ft-text small {
  font-size: 11.5px;
  color: var(--be-muted);
}

.be-ft-figures {
  flex: none;
  text-align: right;
}

.be-ft-figures b {
  display: block;
  font-size: 13.5px;
  color: var(--be-heading);
}

.be-ft-figures small {
  font-size: 11.5px;
}

/* ─── Recent transactions ────────────────────────────────────────────────── */

.be-txn + .be-txn {
  margin-top: 8px;
}

.be-txn > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--be-surface-2);
}

.be-txn > a:hover {
  background: var(--be-surface-3);
}

.be-txn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 15px;
}

.be-txn-text {
  flex: 1;
  min-width: 0;
}

.be-txn-text b {
  display: block;
  font-size: 14px;
  color: var(--be-heading);
}

.be-txn-text small {
  font-size: 12px;
  color: var(--be-muted);
}

.be-txn-figures {
  flex: none;
  text-align: right;
}

.be-txn-figures b {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--be-heading);
}

@media only screen and (max-width: 992px) {
  .be-folio-pnl {
    flex: 1 1 100%;
  }

  .be-folio-value > b {
    font-size: 28px;
  }
}

/* ─── Tab bar ────────────────────────────────────────────────────────────── */
/* The underline tabs that head Copy Trading. */

.be-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--be-border);
}

.be-tab {
  padding: 0 2px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--be-muted);
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.be-tab:hover {
  color: var(--be-heading);
}

.be-tab.active {
  color: var(--be-accent-ink);
  border-bottom-color: var(--be-accent);
}

/* ─── Copy trading ───────────────────────────────────────────────────────── */

.be-xp-grid ul {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.be-xp-cell {
  display: flex;
}

.be-xp {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.be-xp-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--be-border);
}

.be-xp-photo {
  position: relative;
  flex: 0 0 46px;
}

.be-xp-photo img {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.be-xp-who {
  flex: 1;
  min-width: 0;
}

.be-xp-who > b {
  display: block;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--be-heading);
}

.be-xp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.be-xp-meta small {
  font-size: 12px;
  white-space: nowrap;
  color: var(--be-muted);
}

.be-xp-roi {
  flex: none;
  text-align: right;
}

.be-xp-roi > b {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.be-xp-roi > small {
  font-size: 11px;
  color: var(--be-muted);
}

.be-xp-stats {
  display: grid;
  flex: 1;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 16px 0 18px;
}

.be-xp-stat {
  text-align: center;
}

.be-xp-stat > b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--be-heading);
}

.be-xp-stat > small {
  font-size: 11px;
  color: var(--be-muted);
}

.be-xp-agreement {
  margin-top: 22px;
  font-size: 13px;
  text-align: center;
}

.be-xp-agreement a {
  color: var(--be-accent-ink);
}

/* ─── Referral program ───────────────────────────────────────────────────── */

.be-ref-share {
  margin-bottom: 18px;
  padding: 34px 24px;
}

.be-ref-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  font-size: 24px;
  color: var(--be-accent-ink);
  background: var(--be-accent-soft);
}

.be-ref-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  color: var(--be-heading);
}

.be-ref-lead {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--be-muted);
}

.be-ref-copy {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

.be-ref-copy input.browser-default {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--be-border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--be-text);
  background: var(--be-surface-2);
}

.be-ref-copy input.browser-default:focus {
  outline: 0;
  border-color: var(--be-accent);
}

.be-ref-or {
  margin: 20px 0 6px;
  font-size: 13.5px;
  color: var(--be-muted);
}

.be-ref-id {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--be-accent-ink);
}

.be-ref-by {
  max-width: 520px;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--be-border);
}

.be-ref-by-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--be-muted);
}

.be-ref-by-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.be-ref-by-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--be-muted);
  background: var(--be-surface-3);
}

.be-ref-by-who b {
  font-size: 14.5px;
  color: var(--be-heading);
}

/* The rows and the header share one column template, so a column added to one
   has to be added to the other. */
.be-ref-head-row,
.be-ref-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.4fr 0.8fr 1.2fr 0.9fr 1.1fr;
  align-items: center;
}

.be-ref-head-row {
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--be-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--be-muted);
}

.be-ref-row {
  padding: 15px 0;
  border-bottom: 1px solid var(--be-border);
  font-size: 14px;
  color: var(--be-text);
}

.be-ref-row:last-child {
  border-bottom: 0;
}

.be-ref-row > span:first-child {
  font-weight: 600;
  color: var(--be-heading);
}

@media only screen and (max-width: 1200px) {
  .be-xp-grid ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 700px) {
  .be-xp-grid ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .be-tabs {
    gap: 18px;
  }

  /* The table becomes stacked records, each cell labelled by the heading it
     lost. */
  .be-ref-head-row {
    display: none;
  }

  .be-ref-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .be-ref-row > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .be-ref-row > span::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--be-muted);
  }
}

/* ─── Sidebar foot ───────────────────────────────────────────────────────── */
/* Sign out, where the help box used to sit. */

.be-side-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--be-border);
}

.be-side-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--be-down);
  background: transparent;
  transition: background 0.15s ease;
}

.be-side-logout:hover {
  background: var(--be-down-soft);
}

.be-side-logout .ti {
  font-size: 19px;
}

@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;

  /* The "included" tick on the plan cards. Was hardcoded inline in three
     separate copies of the plan card; defined here so it is themeable in one
     place. The value is the teal those cards already used. */
  --plan-check-colour: #30bca6;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

/* ─── Live chat, clear of a bottom bar ─────────────────────────────────────
   Smartsupp pins its launcher to the bottom-right of the viewport, which is
   where several skins put a bottom tab bar — cry's .cry-tabbar, ar's nav, the
   mobile bars in be and ut. The bubble lands on top of the last tab and eats
   the tap. Lifting the whole widget clears it, open window and all.

   The widget's own styles are inline, so this has to out-rank them. The lift
   is a token: a skin with a taller bar raises it from its own skin.css with
   `:root { --chat-lift: 110px; }` rather than repeating the selectors. */

:root {
  --chat-lift: 86px;
  --chat-size: 56px;
}

#smartsupp-widget-container > div,
#smartsupp-widget-container > iframe {
  bottom: var(--chat-lift) !important;
}

/* The WhatsApp button is in the SAME corner — `style={{ left: '10px' }}` on a
   Materialize .fixed-action-btn, in forty skins. Lifted it would land on the
   chat bubble, so it is stacked above it instead. The attribute selector is
   what separates it from the admin's own add buttons, which keep the default
   bottom-right corner and must not move. */

.fixed-action-btn[style^="left:"] {
  bottom: calc(var(--chat-lift) + var(--chat-size) + 14px);
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* Hide the Google Translate top banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* The default app's face. Set on BODY, not on .ap — that class is only on the
   guest layout, so /user and /cp were falling back to Materialize's default
   and the three areas did not match. The app stylesheet is the last one the
   shells load, so this wins on order without needing !important. */
:root {
  --ap-font: 'Signika Negative', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--ap-font);
}

/* SCOPING (CRITICAL): this stylesheet used to be a skin's own _css/ap.css, so
   it could style bare `body`/`h1`/`.btn`. It now lives in the DEFAULT tree and
   is imported by app/(guest)/_layout.js, which means it bundles for EVERY skin
   — an unscoped rule here repaints every other skin's buttons and headings.
   So the design-wide rules below are scoped to `.ap`, the wrapper the default
   guest chrome renders. A skin that ships its own (guest)/_layout.js never
   renders that wrapper, so it keeps its own typography and buttons. Everything
   else in this file is already `.ap-*` prefixed — keep it that way. */
.ap {
  font-size: 16px;
  font-family: var(--ap-font);
}

/* Materialize pins .btn to `height: 36px; line-height: 36px`, so vertical
   padding alone cannot make the button taller — with box-sizing: border-box it
   only shrinks the content box while the 36px line box still starts BELOW the
   top padding, dropping the label ~7.5px under centre. That read as too much
   padding on top. Releasing the fixed height and the 36px line-height lets the
   padding do what it was written to do and re-centres the label. */
.ap .btn {
  height: auto;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 20px;
}

.ap .btn.btn-secondary {
  border-color: #334155;
}

/* ─── Language switcher ────────────────────────────────────────────────────
   Rendered from the footer but pinned to the viewport, matching the reference.
   Bottom-LEFT on purpose: bottom-right is where support/chat buttons live. */
.ap .ap-translator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}

.ap .ap-translator-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ap .ap-translator-trigger .material-icons {
  font-size: 18px;
}

/* Catches the click that closes the panel without dimming the page. */
.ap .ap-translator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ap .ap-translator-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 2;
  width: 220px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.ap .ap-translator-list li {
  margin: 0;
}

.ap .ap-translator-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.ap .ap-translator-list a:hover {
  background: var(--hover);
}

.ap .ap-translator-current {
  font-weight: 600;
  background: var(--hover);
}

/* ─── Nav brand ────────────────────────────────────────────────────────────
   An <img> in a Materialize nav sits on the text baseline of a 64px
   line-height, which parks a 36px logo well above centre — the markup used to
   correct that with an inline `top: -8px`, which still left it 21px high and
   clipping the top of the bar. Centring it properly needs no magic number. */
.ap nav .ap-nav-brand a {
  display: flex;
  align-items: center;
  height: 64px;
  margin-left: -10px; /* optical: pulls the mark back to the container edge */
}

.ap nav .ap-nav-brand img {
  display: block;
}

/* ─── Hero background video ────────────────────────────────────────────────
   The section keeps its own dark `bg bg-secondary` surface, so a failed or
   still-buffering video degrades to exactly what was there before rather than
   to a blank band. The video is painted over that, the overlay over the video,
   and the copy over the overlay. */
.ap .ap-hero {
  position: relative;
  overflow: hidden;
}

.ap .ap-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none; /* decoration — never eats a click or a scroll */
}

/* Without this the copy would have to survive whatever frame is behind it. */
.ap .ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 33, 0.55);
}

.ap .ap-hero-inner {
  position: relative; /* lifts the copy above the video + overlay */
}

/* ─── The nav sits ON the hero video ───────────────────────────────────────
   This nav is a normal in-flow element (no Materialize .navbar-fixed), so the
   hero begins BELOW it and .ap-hero's overflow:hidden clips the video short of
   the bar. Lifting the nav out of flow lets the hero start at y=0 and paint
   its video the full height, nav included.

   :has() keeps all of this to pages that actually have a hero — every other
   guest page keeps its normal in-flow, solid bar. */
.ap:has(.ap-hero) {
  position: relative; /* containing block for the nav below */
}

.ap:has(.ap-hero) nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* over the hero's video AND its overlay */
}

/* The nav no longer occupies flow, so the hero owes its content that height. */
.ap:has(.ap-hero) .ap-hero {
  padding-top: 64px;
}

/* No scroll-toggle back to a solid bar: this nav is not sticky, so it simply
   scrolls away with the hero and never ends up over other content. */
.ap:has(.ap-hero) nav {
  background: transparent;
  box-shadow: none;
}

.ap h1 {
  font-size: 72px;
  font-weight: 600;
}

.ap h2 {
  font-size: 40px;
  font-weight: 600;
}

/* ─── ap mobile drawer menu (skin-local, no M.Sidenav) ──────────────────── */

.ap-menu-trigger {
  cursor: pointer;
}

.ap-menu-trigger .material-icons {
  font-size: 28px;
  vertical-align: middle;
}

.ap-drawer-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
}

.ap-drawer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 6, 16, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ap-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: #10152a; /* solid fallback when backdrop-filter unsupported */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 70px rgba(4, 6, 16, 0.55);
  color: #e2e8f0;
  font-family: var(--ap-font);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ap-drawer {
    background: rgba(12, 15, 25, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* hairline indigo shine across the drawer top — same motif as the ap signin card */
.ap-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.75), rgba(129, 140, 248, 0));
}

.ap-drawer-root.ap-open {
  pointer-events: auto;
}

.ap-drawer-root.ap-open .ap-drawer-overlay {
  opacity: 1;
}

.ap-drawer-root.ap-open .ap-drawer {
  transform: translateX(0);
}

.ap-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ap-drawer-brand {
  display: flex;
  align-items: center;
}

.ap-drawer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.ap-drawer-brand span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.ap-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #a5b4fc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-drawer-close:hover {
  background: rgba(79, 70, 229, 0.32);
  color: #ffffff;
}

.ap-drawer-close .material-icons {
  font-size: 21px;
}

.ap-drawer-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.8);
}

.ap-drawer-links {
  margin: 0 0 24px;
}

.ap-drawer-links li {
  list-style: none;
}

.ap-drawer-links a {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-drawer-links a .material-icons {
  font-size: 20px;
  margin-right: 12px;
  color: #818cf8;
}

.ap-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
  color: #ffffff;
}

.ap-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.4);
}

.ap-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(226, 232, 240, 0.5);
}

/* ─── ap page hero strip (contact + article pages) ──────────────────────── */

.ap-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}

.ap-page-hero::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.42) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.6), rgba(129, 140, 248, 0));
}

.ap-hero-inner {
  position: relative;
}

.ap-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a5b4fc;
}

.ap-page-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: 46px;
  color: #ffffff;
}

.ap-hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.7);
}

/* ─── ap shared frosted card ────────────────────────────────────────────── */

.ap-card {
  position: relative;
  padding: 2.2rem 2.4rem;
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.1);
}

.ap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.65), rgba(129, 140, 248, 0));
}

/* ─── ap contact page ───────────────────────────────────────────────────── */

.ap-contact {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-contact-panel {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: #0c0f19;
  background-image: linear-gradient(180deg, #0f1428 0%, #0c0f19 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.25);
}

.ap-contact-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-contact-panel h5 {
  position: relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.ap-contact-panel-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(226, 232, 240, 0.65);
}

.ap-contact-list {
  position: relative;
  margin: 0;
}

.ap-contact-list li {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ap-contact-list li:last-child {
  border-bottom: 0;
}

.ap-contact-list .material-icons {
  font-size: 19px;
  margin-right: 12px;
  padding: 6px;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
}

.ap-contact-card h5 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ap-contact-card-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .input-field input[type='text'],
.ap-contact .ap-card .input-field input[type='email'],
.ap-contact .ap-card .input-field textarea {
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--primary-border-colour);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-contact .ap-card .input-field input[type='text']:focus,
.ap-contact .ap-card .input-field input[type='email']:focus,
.ap-contact .ap-card .input-field textarea:focus {
  outline: none;
  border: 1px solid #4f46e5;
  border-bottom: 1px solid #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.ap-contact .ap-card .input-field label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .btn-full {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.35);
}

/* ─── ap article page ───────────────────────────────────────────────────── */

.ap-article {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-article-card {
  padding: 2.6rem 2.8rem;
  font-size: 17px;
  line-height: 1.85;
  color: var(--background-font-colour);
}

.ap-article-card > div {
  margin-bottom: 0.35rem;
}

.ap-article-card b {
  color: var(--background-heading-colour);
}

.ap-article-card img.responsive-img,
.ap-article-card video {
  border-radius: 14px;
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .ap-drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  .ap-page-hero {
    padding: 3rem 0 3.4rem;
  }

  .ap-page-hero h1 {
    font-size: 30px;
  }

  .ap-card {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  .ap-contact {
    padding-top: 2rem;
  }

  .ap-contact-panel {
    padding: 1.8rem 1.4rem;
    border-radius: 18px;
  }

  .ap-article {
    padding-top: 2rem;
  }

  .ap-article-card {
    padding: 1.8rem 1.3rem;
    font-size: 16px;
  }
}

/* ─── Reviews list ─────────────────────────────────────────────────────────
   DELIBERATELY NOT `.ap`-SCOPED, unlike everything above. APReviewsComponent is
   reached through TourContentComponent, which 24 skins render, and a skin with
   its own (guest)/_layout.js never emits the `.ap` wrapper — scoping these
   would blank the cards there and let the page colour show through (that was
   the blue tint in `ad`, whose --background-colour is #e6f3fd).

   Safe to leave unscoped because every selector is named `.ap-review*`, which
   only ever matches markup this one component renders. Colours come from the
   theme vars, so each skin's palette applies on its own. */

.ap-reviews {
  max-width: 48rem;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

.ap-review {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ap-reviews-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.ap-reviews-stars svg {
  display: block;
  color: #06b6d4;
}

.ap-review blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--background-font-colour);
}

.ap-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-colour);
}

.ap-review figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================
   (user) — dashboard area
   Moved here from (user)/user.css: the default skin has ONE
   stylesheet, same rule every skin follows (see ai-rules.md).
   ============================================================ */

/* Tab switches. The tab wrapper in a route file is keyed on the active tab
   (see wallets.js), so switching remounts that node and replays this
   animation — no transition library and no exit state to coordinate. Keep it
   short: this sits between the click and the content. */
.tab-fade {
  animation: tab-fade-in 220ms ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-fade {
    animation: none;
  }
}

/* ─── Asset chart (holding / mining asset tabs) ────────────────────────────
   BrokerChartsComponent fills its container, and this one had no height — so
   under two full-height buy/sell panels the chart collapsed to the widget's
   own minimum. Every wrapper down to the iframe has to be stretched, since
   the TradingView levels ask for height:100% and that resolves to nothing
   unless each ancestor has one. */

.app-asset-chart {
  height: 55vh;
  margin-top: 8px;
}

.app-asset-chart > *,
.app-asset-chart .tradingview-widget-container,
.app-asset-chart .tradingview-widget-container > div:first-child,
.app-asset-chart iframe {
  width: 100%;
  height: 100%;
}

.app-asset-chart .tradingview-widget-copyright {
  display: none;
}



/* LiveChartComponent stamps the symbol as an <h2> over the top-left of the
   plot. The page heading above already names the asset, so it is the same
   word twice — and at that size it covers the first candles. */
.app-asset-chart h2 {
  display: none;
}

/* app.css disables pointer events on every TradingView embed
   (`iframe[src*='embed-widget']`) so the DECORATIVE ones — the guest ticker
   tape, the mini sparklines — cannot swallow clicks or scroll.
   This chart is not decorative: its range switcher (1D · 1M · 3M · 1Y · 5Y ·
   All) is the whole point, and the blanket rule made those tabs dead. Give
   the interaction back here only, rather than lifting the rule globally. */
.app-asset-chart iframe[src*='embed-widget'] {
  pointer-events: auto;
}


/* ═══ /user — the dashboard ═══════════════════════════════════════════════
   Modelled on the lqo wallet layout: a glow hero carrying the headline figure
   and two pills, then two panels of rows beneath it.

   The classes are the DEFAULT skin's own (db-*), not lqo's — a skin never
   reaches into another skin's stylesheet (ai-rules #11), so the look is
   reproduced here rather than borrowed.

   Three answers and nothing else: what the account is worth, the two balances
   behind that figure, and how the closed trades have gone. */

.db-hero {
  margin: -18px -18px 20px -18px;
  padding: 30px 20px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(230, 255, 42, 0.3), transparent 62%),
    linear-gradient(180deg, #232b06 0%, #11150a 68%, #05060a 100%);
}

.db-hero small {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.db-hero h2 {
  margin: 4px 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  /* Tabular figures so the headline does not jitter as the live number ticks. */
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.db-hero-pnl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
}

.db-up {
  color: #0eba1f;
}

.db-down {
  color: #e5484d;
}

.db-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.db-pill:hover {
  transform: translateY(-1px);
}

.db-pill .material-icons {
  font-size: 17px;
}

.db-pill-volt {
  background: #e6ff2a;
  color: #030507;
}

.db-pill-white {
  background: #ffffff;
  color: #030507;
}

/* ─── Panels ────────────────────────────────────────────────────────────
   Side by side on a desktop, stacked on a phone. */

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.db-section {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  padding: 14px 16px;
}

/* Holds the panel's heading. Kept as a flex row so a control can sit beside
   the title later without the heading jumping. */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.db-section-head h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--background-heading-colour);
}

.db-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-row:hover {
  background: var(--hover);
}

.db-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--background-colour);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  flex: 0 0 auto;
}

.db-row-icon .material-icons {
  font-size: 19px;
}

.db-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.db-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-row-name small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.db-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.db-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

/* The live row gets a quiet pulse so a number that moves does not look like a
   stored one. */
.db-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eba1f;
  margin-right: 6px;
  vertical-align: middle;
  animation: db-pulse 2.4s ease-in-out infinite;
}

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .db-live-dot { animation: none; }
}

@media (max-width: 600px) {
  .db-hero h2 {
    font-size: 34px;
  }
}

/* ─── Shared lists inside a db-section ──────────────────────────────────
   The trade lists, watchlist and their kin are Materialize `collection`
   markup and stay that way: open positions carry live profit, a countdown, a
   close button and the trader-name rule, and re-drawing those rows to match
   these panels would mean re-implementing all of it.

   So the PANEL adapts instead — the collection loses its own card edge and
   sits on the panel's rhythm rather than looking like a second card dropped
   inside the first. */

.db-section .collection {
  border: 0;
  margin: 0;
  list-style: none;
  padding-left: 0;
  background: transparent;
}

.db-section .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-section .collection .collection-item:last-child {
  border-bottom: 0;
}

.db-section .collection .collection-item:hover {
  background: var(--hover);
}

/* The ticket's inputs are Materialize columns inside a panel that is already
   padded, so the row's negative gutters would push them past the edge. */
.db-section form .row {
  margin-left: 0;
  margin-right: 0;
}

/* A panel that stands on its own rather than sitting in the two-column grid —
   for rows too wide to survive half the content width. */
.db-section-stacked {
  margin-top: 18px;
}


/* ---- withdrawal view ----
   The label/value lines in the transaction summary. Materialize rows carry a
   20px bottom margin, which stacked four of them into a very tall card. */
.wv-line {
  margin-bottom: 0 !important;
}

.wv-line .col {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ─── Crypto cards (/user/cards) ─────────────────────────────────────────────
   Every rule is scoped under .cc. Colours come from the shared theme tokens
   (app/skin.js and each skin's skin.js set them), with the card artwork's own
   --cc-art-* tokens; the accent is --primary-button. */

.cc {
  /* This page renders inside every skin, and only app/skin.js sets the card
     artwork tokens — a skin that leaves them unset gets these, the values
     app/skin.js uses. */
  --cc-from: var(--cc-art-from, #1c7a4d);
  --cc-to: var(--cc-art-to, #0b3b26);
  --cc-chip: var(--cc-art-chip, #e9c46a);
  --cc-ink: var(--cc-art-ink, #ffffff);

  --cc-accent: var(--primary-button);
  --cc-accent-soft: color-mix(in srgb, var(--primary-button) 13%, transparent);
  --cc-heading: var(--background-heading-colour);
  --cc-text: var(--primary-font-colour);
  --cc-line: var(--primary-border-colour);
  --cc-surface: var(--primary-background);
  --cc-muted-surface: color-mix(in srgb, var(--primary-border-colour) 28%, var(--primary-background));

  padding: 8px 0 24px;
}

.cc h1,
.cc h2,
.cc h3,
.cc h4 {
  color: var(--cc-heading);
}

.cc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.cc-head h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}

.cc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cc-text);
  font-size: 14px;
}

.cc-crumbs a {
  color: var(--cc-text);
}

.cc-crumbs a:hover {
  color: var(--cc-accent);
}

.cc-panel {
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid var(--cc-line);
  border-radius: 18px;
  background: var(--cc-surface);
}

.cc-panel .row {
  margin-bottom: 0;
}

.cc-btn,
.cc-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--cc-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-button) 30%, transparent);
  color: var(--nav-secondary-font-colour);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.cc-btn:hover {
  background: color-mix(in srgb, var(--primary-button) 88%, var(--secondary-background));
  color: var(--nav-secondary-font-colour);
}

.cc-btn-light,
.cc-btn-light:focus {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--cc-line);
  background: var(--cc-surface);
  box-shadow: none;
  color: var(--cc-heading);
  font-size: 14px;
}

.cc-btn-light:hover {
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
}

.cc-btn-block,
.cc-btn-block:focus {
  display: flex;
  width: 100%;
}

.cc-link,
.cc-link:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cc-accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.cc-link .material-icons {
  font-size: 18px;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}

.cc-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.cc-icon .material-icons {
  font-size: 22px;
}

.cc-icon-sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.cc-icon-sm .material-icons {
  font-size: 18px;
}

/* Hero */

.cc-hero {
  overflow: hidden;
  padding: 0;
}

.cc-hero > .row {
  display: flex;
  flex-wrap: wrap;
}

.cc-hero > .row > .col {
  margin-left: 0;
}

.cc-hero > .row > .col.cc-hero-copy {
  padding: 44px 40px;
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
  font-size: 13.5px;
  font-weight: 700;
}

.cc-badge .material-icons {
  font-size: 16px;
}

.cc-hero h2 {
  margin: 22px 0 18px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.08;
}

.cc-hero p {
  max-width: 440px;
  margin: 0 0 22px;
  color: var(--cc-text);
  font-size: 16px;
  line-height: 1.65;
}

.row.cc-highlights {
  margin: 0 -6px 26px;
}

.row.cc-highlights > .col {
  padding: 6px;
}

.cc-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-heading);
  font-size: 14.5px;
  font-weight: 600;
  word-break: normal;
}

.cc-hero > .row > .col.cc-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: radial-gradient(420px 260px at 70% 30%, var(--cc-accent-soft), transparent 70%), var(--cc-muted-surface);
}

/* The card. It is a size container, so every offset and font below is in
   cqw (1% of the card's own width) and the card scales as one piece — the
   numbers match a 400px-wide card. */

.cc-art {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.586;
  overflow: hidden;
  border-radius: 4cqw;
  background: radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--cc-ink) 16%, transparent) 0 42%, transparent 42.5%),
    radial-gradient(circle at 105% 115%, color-mix(in srgb, var(--cc-ink) 14%, transparent) 0 34%, transparent 34.5%),
    linear-gradient(135deg, var(--cc-from), var(--cc-to));
  box-shadow: 0 28px 60px color-mix(in srgb, var(--cc-to) 45%, transparent);
  color: var(--cc-ink);
}

.cc-art-logo {
  position: absolute;
  top: 3.5cqw;
  left: 6.5cqw;
  font-size: 16cqw;
  font-weight: 800;
  line-height: 1;
}

.cc-art-chip {
  position: absolute;
  top: 26%;
  right: 7.5cqw;
  width: 11.5cqw;
  height: 9cqw;
  border-radius: 2cqw;
  background: linear-gradient(135deg, var(--cc-chip), color-mix(in srgb, var(--cc-chip) 65%, var(--cc-to)));
}

.cc-art-number {
  position: absolute;
  top: 58%;
  left: 6.5cqw;
  font-size: 3.75cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.cc-art-holder,
.cc-art-expiry {
  position: absolute;
  bottom: 5.5cqw;
  font-size: 3.25cqw;
  font-weight: 700;
  text-transform: uppercase;
}

.cc-art-holder {
  left: 6.5cqw;
  max-width: 48%;
}

.cc-art-holder b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cc-art-expiry {
  left: 56%;
}

.cc-art small {
  display: block;
  margin-bottom: 0.75cqw;
  font-size: 2.25cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.cc-art-brand {
  position: absolute;
  right: 6cqw;
  bottom: 4.5cqw;
  text-align: right;
}

.cc-art-brand b {
  font-size: 7.5cqw;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Why choose */

.cc-why {
  background: var(--cc-muted-surface);
  text-align: center;
}

.cc-why h3 {
  margin: 8px 0 8px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.cc-sub {
  margin: 0 0 28px;
  color: var(--cc-text);
  font-size: 16px;
}

.row.cc-reasons {
  display: flex;
  flex-wrap: wrap;
}

.row.cc-reasons > .col {
  display: flex;
  margin-left: 0;
  margin-bottom: 16px;
}

.cc-reason {
  flex: 1;
  padding: 24px 22px;
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  background: var(--cc-surface);
  text-align: left;
}

.cc-reason h4 {
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.cc-reason p {
  margin: 0;
  color: var(--cc-text);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Secure banner */

.cc-secure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  padding: 22px 28px;
}

.cc-secure-text {
  flex: 1;
  min-width: 220px;
}

.cc-secure h4 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
}

.cc-secure p {
  margin: 0;
  color: var(--cc-text);
  font-size: 14.5px;
}

/* Request form */

.cc-panel-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}

.cc-request .form-top-label {
  text-transform: capitalize;
}

.cc-request-side {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.cc-tiers {
  width: 100%;
  margin: 0;
}

.cc-tiers li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cc-line);
  color: var(--cc-text);
  font-size: 14px;
}

.cc-tiers li:last-child {
  border-bottom: 0;
}

.cc-tiers b {
  color: var(--cc-heading);
}

.cc-fine {
  margin: 0;
  color: var(--cc-text);
  font-size: 13px;
  text-align: center;
}

.cc-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cc-heading);
}

.cc-note .material-icons {
  color: var(--cc-accent);
}

/* Applications */

.cc-apps .collection .collection-item.cc-app {
  margin-bottom: 16px;
  padding: 22px 24px;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: var(--cc-surface);
}

.cc-app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cc-app-head b {
  display: block;
  color: var(--cc-heading);
  font-size: 18px;
}

.cc-app-head small {
  color: var(--cc-text);
  font-size: 13px;
}

.cc-status {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cc-status-pending,
.cc-status-active {
  background: var(--cc-accent-soft);
  color: var(--cc-accent);
}

.cc-status-done {
  background: var(--cc-accent);
  color: var(--nav-secondary-font-colour);
}

.cc-status-declined {
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
}

.cc-steps {
  display: flex;
  gap: 6px;
  margin: 20px 0 18px;
  padding: 0;
  list-style: none;
}

.cc-steps li {
  flex: 1;
  padding: 0;
  color: var(--cc-text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.cc-step-dot {
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: var(--cc-muted-surface);
}

.cc-steps li.done {
  color: var(--cc-heading);
}

.cc-steps li.done .cc-step-dot {
  background: var(--cc-accent);
}

.cc-declined {
  margin: 16px 0;
  color: var(--cc-heading);
  font-weight: 600;
}

.cc-app-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px;
  margin: 0;
}

.cc-app-details dt {
  color: var(--cc-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-app-details dd {
  margin: 4px 0 0;
  color: var(--cc-heading);
  font-size: 14.5px;
}

.cc-app-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cc-muted-surface);
  color: var(--cc-heading);
  font-size: 14px;
}

.cc-apps-cta {
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .cc-head h1 {
    font-size: 26px;
  }

  .cc-panel {
    padding: 20px;
  }

  .cc-hero > .row > .col.cc-hero-copy {
    padding: 28px 22px;
  }

  .cc-hero h2 {
    font-size: 34px;
  }

  .cc-highlight {
    gap: 8px;
    font-size: 13px;
  }

  .cc-hero > .row > .col.cc-hero-art {
    padding: 28px 20px;
  }

  .cc-why h3 {
    font-size: 24px;
  }

  .cc-steps li {
    font-size: 10.5px;
  }
}