@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap);
/* 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: 'Inter Tight';
}

/* 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;
}

/* Fluid rather than a fixed size with a mobile override. The media block below
   sets a bare `h1 { font-size: 40px }` for phones, but `.ap h1` is (0,1,1) and
   that is (0,0,1) — the override never won, so the hero stayed 72px at 375px
   and "Revolutionizing" broke mid-word. clamp() removes the specificity fight
   entirely: 8vw is ~30px on a 375px screen and reaches the full 72px by ~900px. */
.ap h1 {
  font-size: clamp(30px, 8vw, 72px);
  font-weight: 600;
  line-height: 1.12;
}

.ap h2 {
  font-size: clamp(24px, 5vw, 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: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  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 wall ─────────────────────────────────────────────────────────
   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 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  height: 49rem;
  max-height: 150vh;
  overflow: hidden;
  padding: 0 1rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 601px) {
  .ap-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 993px) {
  .ap-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Columns beyond the first only exist at the widths that can hold them. */
.ap-reviews-col:nth-child(2),
.ap-reviews-col:nth-child(3) {
  display: none;
}

@media (min-width: 601px) {
  .ap-reviews-col:nth-child(2) {
    display: block;
  }
}

@media (min-width: 993px) {
  .ap-reviews-col:nth-child(3) {
    display: block;
  }
}

.ap-reviews-col {
  animation-name: ap-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Different speeds keep the columns from marching in step. */
.ap-reviews-slow {
  animation-duration: 62s;
}
.ap-reviews-mid {
  animation-duration: 48s;
}
.ap-reviews-fast {
  animation-duration: 74s;
}

@keyframes ap-marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.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 .material-icons {
  font-size: 20px;
  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;
}

/* The window's edges dissolve rather than being cut off. This is a MASK on the
   wall itself, not two gradient overlays painted in --background-colour, which
   is what it used to be: those assumed the wall always sat on the page colour,
   so anywhere it sat on a different surface — inside `.bg` (white), or in a
   skin whose page colour differs — the gradients showed as a tint over it.
   A mask fades the cards themselves and therefore needs no colour at all. */
.ap-reviews {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
}

/* Motion is decoration here — the cards are all still readable standing still. */
@media (prefers-reduced-motion: reduce) {
  .ap-reviews-col {
    animation: none;
  }
}

/* ============================================================
   (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;
  }
}

/* ============================================================
   DASHBOARD 8 (DB8)
   Desktop-first styles. Uses only theme CSS variables set by
   the per-design themeReducers. Single @media block at bottom.
   ============================================================ */

.db8-shell {
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
}

/* ---------- Sidebar ---------- */
.db8-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 262px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 14px;
  background: var(--primary-background);
  border-right: 1px solid var(--border-colour);
  transition: transform 0.25s ease;
}

.db8-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
  font-size: 18px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.db8-brand .material-icons {
  font-size: 28px;
  color: var(--primary-button);
}

.db8-brand img {
  height: 34px;
  width: 34px;
  border-radius: 8px;
  object-fit: contain;
}

.db8-side-desktop {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* mobile tile-grid menu (shown under 992px) */
.db8-side-mobile {
  display: none;
}

.db8-side-mhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 22px;
}

.db8-side-mhead-name {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  line-height: 1.25;
}

.db8-side-mhead-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.db8-tile {
  display: block;
  margin-bottom: 14px;
  padding: 26px 4px;
  text-align: center;
  border-radius: 12px;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
}

.db8-tile .material-icons {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
}

.db8-tile-label {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db8-side-nav {
  flex: 1;
}

.db8-side-nav,
.db8-side-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.db8-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.db8-side-link .material-icons {
  font-size: 20px;
}

.db8-side-link:hover {
  background: var(--hover);
  color: var(--background-font-colour);
}

.db8-side-link.active {
  background: var(--hover);
  color: var(--background-heading-colour);
}

.db8-side-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 12px 4px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--secondary-font-colour);
  cursor: pointer;
}

.db8-side-group-label .material-icons {
  font-size: 18px;
}

.db8-side-group ul .db8-side-link {
  padding-left: 18px;
}

.db8-side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 12px;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
}

.db8-side-user a {
  font-size: 12.5px;
  color: var(--primary-link-colour);
}

/* ---------- Avatar ---------- */
.db8-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  min-width: 38px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  background: var(--hover);
  color: var(--background-heading-colour);
  overflow: hidden;
}

.db8-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------- Main / topbar ---------- */
.db8-main {
  margin-left: 262px;
  padding: 0 22px 60px;
}

/* The trading tab bar is .fixed-footer (left: 0; width: 100%), so on desktop
   its first 262px sit underneath the fixed sidebar and the leftmost tabs are
   hidden. Start it where the content column starts. Reset under 992px, where
   the sidebar is off-canvas and the content is full width. */
.db8-trading-tabs {
  left: 262px;
  width: calc(100% - 262px);
}

.db8-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  margin: 0 -22px 8px;
  /* Same surface as the sidebar, so the two read as one piece of chrome around
     the content. Desktop only — under 992px the sidebar is off-canvas and the
     topbar sits on the page background (reset in the media block below). */
  background: var(--primary-background);
  border-bottom: 1px solid var(--border-colour);
}

.db8-topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--background-font-colour);
}

.db8-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db8-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border-colour);
  background: var(--primary-background);
  color: var(--background-font-colour);
  cursor: pointer;
}

/* Chromeless variant for the topbar's theme toggle and notification bell:
   the icon alone, no box. Keeps the 38px hit area and the badge anchor. The
   hamburger (.db8-menu-btn) and the balance card's button keep their box. */
.db8-icon-btn.db8-icon-plain {
  border-color: transparent;
  background: transparent;
}

.db8-icon-btn.db8-icon-plain:hover {
  background: var(--hover);
}

.db8-icon-btn.db8-icon-plain:focus-visible {
  outline: 2px solid var(--primary-button);
  outline-offset: 2px;
}

.db8-icon-btn .material-icons {
  font-size: 20px;
}

.db8-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

.db8-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
}

.db8-menu-btn {
  display: none;
}

/* ---------- Dropdowns ---------- */
.db8-dropdown-wrap {
  position: relative;
}

.db8-click-catcher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1004;
}

.db8-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  border-radius: 12px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  z-index: 1005;
}

.db8-dropdown a,
.db8-dropdown .db8-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.db8-dropdown a:hover {
  background: var(--hover);
}

.db8-dropdown .material-icons {
  font-size: 18px;
}

/* ---------- Cards ---------- */
.db8-card {
  padding: 18px 20px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
}

.db8-card-title {
  font-size: 14px;
  color: var(--primary-font-colour);
}

.db8-muted {
  color: var(--primary-font-colour);
}

.db8-heading {
  color: var(--background-heading-colour);
}

.db8-link {
  color: var(--primary-link-colour);
  cursor: pointer;
}

.db8-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---------- Balance card ---------- */
/* Materialize grid: three centred s3 columns for the figures + a fourth for
   the mask toggle. Each amount stays on one line (no mid-number breaks), so
   the type scales with the viewport to fit its quarter of the card. */
.db8-balance-stats {
  margin-bottom: 0;
}

.db8-balance-stat .db8-card-title {
  display: block;
  white-space: nowrap;
}


.db8-balance-amount {
  display: block;
  margin: 4px 0 0;
  /* One size for Total, Deposit and Profit: 25px from ~735px wide (tablet and
     up), scaling down on narrower phones. A hard 25px cannot fit three
     6-figure amounts across a 390px screen — each column is only ~80px of
     content — so the figures ran into each other and past the card edge. */
  font-size: clamp(13px, 3.4vw, 25px);
  white-space: nowrap;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.db8-eye-toggle {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
  vertical-align: middle;
}

.db8-eye-toggle .material-icons {
  font-size: 18px;
}

.db8-move-money {
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
}

/* quick actions — shown at every width */
.db8-quick-actions {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 18px 0 4px;
}

.db8-quick-action {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--primary-link-colour);
}

.db8-quick-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 54px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  color: var(--background-font-colour);
}

.db8-asset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
}

.db8-asset-row:hover {
  background: var(--hover);
}

.db8-asset-row img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
}

.db8-asset-name {
  flex: 1;
  min-width: 0;
}

.db8-asset-right {
  text-align: right;
}

/* ---------- Progress / signal ---------- */
.db8-progress {
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--secondary-background);
}

.db8-progress-fill {
  height: 100%;
  border-radius: 6px;
}

.db8-segments {
  display: flex;
  gap: 4px;
}

.db8-segment {
  flex: 1;
  height: 12px;
  border-radius: 3px;
}

.db8-segment.dim {
  opacity: 0.3;
}

/* ---------- Chart card ---------- */
.db8-chart-holder {
  height: 480px;
}

.db8-chart-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.db8-chart-head img {
  height: 28px;
  width: 28px;
  border-radius: 50%;
}

.db8-chart-head .db8-chart-search {
  flex: 1;
}

.db8-chart-search .input-field {
  margin: 0;
}

.db8-chart-search input {
  margin-bottom: 0 !important;
}

.db8-symbol-chip {
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  white-space: nowrap;
}

/* ---------- Trade panel ---------- */
.db8-trade-tabs {
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
}

.db8-trade-tab {
  flex: 1;
  height: 38px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--primary-font-colour);
  font-size: 14px;
  cursor: pointer;
}

.db8-field-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--primary-font-colour);
}

.db8-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.db8-select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 14.5px;
  outline: none;
}

.db8-input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  overflow: hidden;
}

.db8-input-group .db8-input {
  flex: 1;
  border: none;
  background: transparent;
}

.db8-input-group .db8-select {
  width: auto;
  min-width: 110px;
  border: none;
  border-left: 1px solid var(--border-colour);
  border-radius: 0;
  background: transparent;
}

.db8-dotted {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
  font-size: 13.5px;
  color: var(--primary-font-colour);
}

.db8-dots {
  flex: 1;
  border-bottom: 1px dotted var(--border-colour);
}

.db8-lev-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.db8-lev-row .range-field {
  flex: 1;
  margin: 0;
}

input[type='range'].db8-range {
  border: none;
  margin: 0;
  accent-color: var(--primary-button);
}

input[type='range'].db8-range::-webkit-slider-thumb {
  background-color: var(--primary-button);
}

input[type='range'].db8-range::-moz-range-thumb {
  background-color: var(--primary-button);
}

.db8-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: var(--secondary-font-colour);
}

.db8-lev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 44px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  color: var(--background-heading-colour);
  font-weight: 600;
}

.db8-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.db8-submit {
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- My trades ---------- */
.db8-trades-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 4px;
}

.db8-accordion {
  margin-top: 14px;
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  background: var(--primary-background);
  overflow: hidden;
}

.db8-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--background-font-colour);
}

.db8-accordion-head .db8-accordion-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db8-accordion-head .material-icons {
  font-size: 20px;
  color: var(--primary-font-colour);
}

.db8-accordion-body {
  padding: 4px 18px 16px;
  border-top: 1px solid var(--border-colour);
}

/* ---------- Login page ---------- */
.db8-login {
  min-height: 100vh;
  padding: 18px 26px;
  background: var(--background-colour);
  color: var(--background-font-colour);
}

.db8-login-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db8-login-top img {
  height: 52px;
}

.db8-login-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.db8-login-box {
  max-width: 470px;
  margin: 70px auto 0;
  padding-bottom: 60px;
}

.db8-login-box h1 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.db8-login-field {
  position: relative;
  margin-bottom: 16px;
}

.db8-login-field .db8-input {
  height: 48px;
  padding-right: 44px;
}

.db8-login-eye {
  position: absolute;
  top: 0;
  right: 6px;
  height: 48px;
  width: 38px;
  border: none;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.db8-login-submit {
  width: 100%;
  height: 48px;
  margin-top: 26px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-button);
  cursor: pointer;
}

/* keep inline pills/buttons on one line */
.db8-topbar-title,
.db8-balance-pill,
.db8-move-money {
  white-space: nowrap;
}

/* ---------- Overlay (mobile sidebar) ---------- */
.db8-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

/* ============================================================
   Mobile / tablet overrides
   ============================================================ */
@media only screen and (max-width: 992px) {
  .db8-sidebar {
    transform: translateX(-105%);
    width: min(420px, 92vw);
    padding: 16px 18px;
  }

  .db8-sidebar.open {
    transform: translateX(0);
  }

  .db8-side-desktop {
    display: none;
  }

  .db8-side-mobile {
    display: block;
  }

  .db8-overlay {
    display: block;
  }

  /* The trade rows sit inside three nested paddings — the accordion body, the
     Materialize .collection-item, and the column gutter — which on a phone ate
     roughly 40px a side before any content. Trim the outer two here; the
     collection is scoped so other lists keep their spacing. */
  .db8-accordion-body {
    padding: 4px 6px 12px;
  }

  .db8-accordion-body .collection .collection-item,
  .db8-accordion-body .collection-item {
    padding-left: 8px;
    padding-right: 8px;
  }

  .db8-topbar {
    padding: 14px 2px;
    margin: 0 0 8px;
    background: transparent;
    border-bottom: 0;
  }

  .db8-trading-tabs {
    left: 0;
    width: 100%;
  }

  .db8-main {
    margin-left: 0;
    padding: 0 12px 60px;
  }

  .db8-menu-btn {
    display: inline-flex;
  }

  .db8-topbar {
    padding: 12px 0;
  }

  .db8-chart-holder {
    height: 380px;
  }

  .db8-chart-head {
    flex-wrap: wrap;
  }

  .db8-chart-search {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .db8-topbar-right {
    gap: 8px;
  }

  .db8-balance-pill {
    padding: 0 10px;
    font-size: 13px;
  }

  .db8-card .db8-row-between {
    flex-wrap: wrap;
  }

  /* the clamp on .db8-balance-amount handles sizing; tighten the gap instead
     so three 7-figure amounts still fit a narrow phone on one line */


  .db8-login {
    padding: 14px 16px;
  }

  .db8-login-top img {
    height: 42px;
  }

  .db8-login-box {
    margin-top: 44px;
  }
}

/* Dashboard typography. pr's own rules are all scoped under .pr, which only
   the guest chrome renders — so the /user area needs this to pick the face up.
   Safe to target the shared .db8-* classes here: this stylesheet is only
   bundled when pr is the active skin. The font itself is linked from
   skins/pr/(user)/user.twig. */
.db8-shell,
.db8-shell input,
.db8-shell select,
.db8-shell textarea,
.db8-shell button {
  font-family: 'Signika Negative', system-ui, sans-serif;
}

/* PR (Proline-style) design — scoped styles
 * Rules: only theme-system CSS vars (set in prThemeReducer.js),
 *        no design-specific vars, single @media block at the bottom.
 *
 * Typography matches Proline source:
 *   - Display/headings: "Sora" (geometric, free Google Fonts substitute for Mori),
 *     semibold 600, with -0.02em tracking
 *   - Body / UI / numerics: "Inter" 400/500/600
 */

/* ===== Proline animations ===== */
@keyframes pr-rotate-border-line {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 14px; }
}

@keyframes pr-rotate-pill-border {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 4px; }
}

@keyframes pr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pr-shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes pr-shimmer-reverse {
  0% { left: 200%; }
  100% { left: -100%; }
}

@keyframes pr-letter-slide-in {
  0% { opacity: 0; filter: blur(2px); transform: translateY(3px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes pr-orb-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pr-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== Rotating dashed border (SVG) wrapper =====
 * Drop <PRBorder /> inside any position: relative element.
 * The SVG fills the bounding box and animates stroke-dashoffset
 * for the "marching ants" effect Proline uses on every card/pill.
 */
.pr .pr-rotating-border {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  overflow: visible;
  z-index: 0;
}

.pr .pr-rotating-border svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pr .pr-rotating-border rect {
  fill: none;
  stroke: var(--border-colour);
  stroke-width: 1px;
  stroke-dasharray: 6 8;
  animation: 3s linear infinite pr-rotate-border-line;
  vector-effect: non-scaling-stroke;
}

.pr .pr-rotating-border-tight rect {
  stroke-dasharray: 2 2;
  animation: 3s linear infinite pr-rotate-pill-border;
}

/* ===== Shimmer hover overlay ===== */
.pr .pr-shimmer-wrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.pr .pr-shimmer-overlay,
.pr .pr-shimmer-overlay-reverse {
  position: absolute;
  top: 0;
  height: 100%;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(190, 167, 255, 0.10) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
}

.pr .pr-shimmer-overlay { left: -100%; }
.pr .pr-shimmer-overlay-reverse { left: 200%; }

.pr .pr-feature-card:hover .pr-shimmer-overlay {
  animation: 0.8s ease-in-out forwards pr-shimmer;
}

.pr .pr-feature-card:hover .pr-shimmer-overlay-reverse {
  animation: 0.8s ease-in-out forwards pr-shimmer-reverse;
}

/* ===== Float ===== */
.pr .pr-float {
  animation: 5s ease-in-out infinite pr-float;
}

/* ===== Section backlight ===== */
.pr .pr-backlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(113, 50, 245, 0.06) 0%, transparent 40%);
  opacity: 0.6;
  transition: opacity 0.3s;
}

/* Make sure all real card content sits above border/shimmer/backlight.
 * Don't set overflow:hidden on cards — that would clip the rotating
 * stroke. Clipping happens inside .pr-shimmer-wrap instead. */
.pr .pr-feature-card,
.pr .pr-review-card,
.pr .pr-pill,
.pr .pr-stats-card {
  position: relative;
}

.pr .pr-feature-card > *:not(.pr-rotating-border):not(.pr-shimmer-wrap),
.pr .pr-review-card > *:not(.pr-rotating-border):not(.pr-shimmer-wrap),
.pr .pr-pill > *:not(.pr-rotating-border) {
  position: relative;
  z-index: 2;
}

/* Pill gradient text + arrow chip — Proline pillText style */
.pr .pr-pill-text {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-button) 70%, white) 0%,
    color-mix(in srgb, var(--primary-button) 80%, white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pr .pr-pill-arrow {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.pr .pr-pill-arrow svg {
  display: block;
}

/* Section "in view" reveal — base state set in JSX with .pr-reveal,
 * elements animate on intersection (added via .pr-revealed class) */
.pr .pr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.pr .pr-reveal.pr-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveals when multiple items appear in the same viewport */
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(1) .pr-reveal { transition-delay: 0ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(2) .pr-reveal { transition-delay: 80ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(3) .pr-reveal { transition-delay: 160ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(4) .pr-reveal { transition-delay: 240ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(5) .pr-reveal { transition-delay: 320ms; }
.pr .row.pr-reveal-stagger > [class*="col"]:nth-child(6) .pr-reveal { transition-delay: 400ms; }

.pr {
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Signika Negative', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
  overflow-x: hidden;
}

.pr h1,
.pr h2,
.pr h3,
.pr h4,
.pr h5,
.pr h6 {
  color: var(--background-heading-colour);
  font-family: 'Signika Negative', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 16px;
}

/* Hero "lockup" title — Proline: 60px / 66px line-height */
.pr h1 {
  font-size: 60px;
  line-height: 66px;
  font-weight: 600;
}

/* Section title — Proline: 40px / 48px */
.pr h2 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

/* Sub-card title — Proline: 18px / 24px (mobile section title) */
.pr h5 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

/* Feature block title — Proline: 16px / 16px */
.pr h6 {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
}

.pr p {
  color: var(--background-font-colour);
  font-family: 'Signika Negative', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 12px;
}

.pr .container {
  max-width: 1180px;
  width: 92%;
  margin: 0 auto;
}

/* Pill — Proline pillContainer style: faint outline bg with rotating border,
 * gradient text, optional arrow chip on the right. 14px / 18px Inter. */
.pr .pr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(190, 167, 255, 0.06);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 18px;
  position: relative;
}

.pr .pr-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-button);
  box-shadow: 0 0 8px var(--primary-button);
}

/* Buttons — Proline buttonText: 14px / 20px Inter 500 */
.pr .pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.pr .pr-btn-arrow {
  transition: transform 0.18s ease-out;
}

.pr .pr-btn:hover .pr-btn-arrow {
  transform: translateX(3px);
}

.pr .pr-btn-text {
  display: inline-block;
}

.pr .pr-btn-primary {
  background: var(--primary-button);
  color: #ffffff;
}

.pr .pr-btn-primary:hover {
  filter: brightness(1.1);
  color: #ffffff;
}

.pr .pr-btn-ghost {
  background: var(--primary-background);
  color: var(--background-heading-colour);
  border: 1px solid var(--border-colour);
}

.pr .pr-btn-lg {
  padding: 12px 24px;
  font-size: 14px;
  line-height: 20px;
}

.pr .pr-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  line-height: 16px;
}

/* Header — Proline keeps it fully transparent across all breakpoints */
.pr .pr-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 18px 0;
  background: transparent;
}

.pr .pr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pr .pr-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pr .pr-logo-mark {
  display: inline-flex;
  align-items: center;
}

/* Wordmark next to the logo — default visible (used by the footer) */
.pr .pr-logo-text {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--background-heading-colour);
  letter-spacing: -0.01em;
}

/* Proline header uses only the lightning-bolt glyph — wordmark hidden in
 * the header context. (Footer keeps its own brand text.) */
.pr .pr-header .pr-logo-text {
  display: none;
}

.pr .pr-nav ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr .pr-nav a {
  color: var(--nav-primary-font-colour);
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pr .pr-nav a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-caret {
  margin-left: 4px;
  opacity: 0.6;
  vertical-align: -1px;
}

.pr .pr-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr .pr-mobile-trigger {
  color: var(--background-heading-colour);
}

/* Hero — Proline hero: padding 160px 0, lockup max-width 650px */
.pr .pr-hero {
  position: relative;
  padding: 120px 0 80px;
  text-align: center;
  overflow: hidden;
}

.pr .pr-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.pr .pr-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Veil the (dark) bg video with the page colour so it reads as a subtle
   * texture in BOTH themes — on the light theme an unveiled dark video
   * turns the whole hero muddy grey. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--background-colour) 45%, transparent) 0%,
    var(--background-colour) 90%
  );
  z-index: 1;
  pointer-events: none;
}

.pr .pr-hero-bignum {
  position: absolute;
  top: 60px;
  left: -40px;
  font-size: 260px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--background-font-colour) 14%, transparent);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.pr .pr-hero-inner {
  position: relative;
  z-index: 2;
}

/* Hero lockup title — Proline lockupTitle: 60px / 66px, Mori/Sora 600 */
.pr .pr-hero-title {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 60px;
  line-height: 66px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 12px 0 20px;
}

/* Hero subtext — Proline lockupSubtext: 18px / 26px Inter */
.pr .pr-hero-sub {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: var(--background-font-colour);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* Hero screenshot — real dashboard PNG */
.pr .pr-hero-screenshot {
  margin: 60px auto 0;
  max-width: 1080px;
  position: relative;
}

.pr .pr-hero-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  /* The dashboard PNGs have transparent panels — back them with the dark
   * secondary surface or they ghost out on the light theme's white page. */
  background: var(--secondary-background);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(113, 50, 245, 0.18);
  border: 1px solid var(--border-colour);
}

/* Dashboard mock card (legacy JSX — kept for reference, replaced by screenshot above) */
.pr .pr-dashboard-card {
  margin-top: 60px;
  display: flex;
  gap: 1px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.pr .pr-dashboard-side {
  width: 200px;
  flex: 0 0 200px;
  background: var(--secondary-background);
  padding: 20px 0;
}

.pr .pr-dashboard-side-logo {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: 10px;
}

.pr .pr-dashboard-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-dashboard-side li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--secondary-font-colour);
  cursor: pointer;
}

.pr .pr-dashboard-side li.active {
  color: var(--background-heading-colour);
  background: rgba(190, 167, 255, 0.06);
  border-left: 2px solid var(--primary-button);
  padding-left: 18px;
}

.pr .pr-dashboard-side li .material-icons {
  font-size: 18px;
  opacity: 0.75;
}

.pr .pr-dashboard-main {
  flex: 1 1 auto;
  padding: 20px 24px;
  background: var(--primary-background);
  min-width: 0;
}

.pr .pr-dashboard-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

.pr .pr-dashboard-label {
  font-size: 11px;
  color: var(--secondary-font-colour);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pr .pr-dashboard-balance {
  font-size: 24px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0;
}

.pr .pr-dashboard-actions-mini {
  display: flex;
  gap: 6px;
}

.pr .pr-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  background: transparent;
  color: var(--background-heading-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pr .pr-mini-icon .material-icons {
  font-size: 16px;
}

.pr .pr-dashboard-holdings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-dashboard-holdings li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
  font-size: 13px;
}

.pr .pr-dashboard-holdings li .pr-holdings-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pr .pr-dashboard-holdings li:last-child {
  border-bottom: 0;
}

.pr .pr-holdings-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-holdings-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.pr .pr-holdings-name {
  color: var(--background-heading-colour);
  font-weight: 500;
}

.pr .pr-holdings-name em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--primary-font-colour);
}

.pr .pr-holdings-amount {
  color: var(--secondary-font-colour);
  font-weight: 500;
}

.pr .pr-holdings-change {
  font-weight: 600;
  font-size: 12px;
}

.pr .pr-holdings-change.positive,
.pr .positive {
  color: #01B28B;
}

.pr .pr-holdings-change.negative,
.pr .negative {
  color: #FF3344;
}

.pr .pr-dashboard-chart {
  margin-top: 12px;
  height: 60px;
}

.pr .pr-dashboard-chart svg {
  width: 100%;
  height: 100%;
}

.pr .pr-dashboard-stats {
  width: 260px;
  flex: 0 0 260px;
  padding: 20px;
  background: var(--secondary-background);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pr .pr-stats-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 14px;
}

.pr .pr-donut {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 6px auto 10px;
}

.pr .pr-donut svg {
  width: 100%;
  height: 100%;
}

.pr .pr-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-size: 18px;
}

.pr .pr-stats-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-stats-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--secondary-font-colour);
  padding: 4px 0;
}

.pr .pr-stats-legend li span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.pr .pr-stats-legend li em {
  margin-left: auto;
  font-style: normal;
  color: var(--background-heading-colour);
  font-weight: 600;
}

.pr .pr-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pr .pr-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(190, 167, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.pr .pr-progress-bar i {
  display: block;
  height: 100%;
  background: var(--primary-button);
}

.pr .pr-progress-row em {
  font-style: normal;
  font-weight: 600;
  color: var(--background-heading-colour);
  font-size: 12px;
}

.pr .pr-bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
}

.pr .pr-bars-mini i {
  flex: 1;
  border-radius: 2px;
}

/* Why */
.pr .pr-why {
  padding: 40px 0 80px;
}

.pr .pr-why-item {
  padding: 24px 16px;
  text-align: left;
}

/* Proline why-item icon — no circular wrapper, just an accent-purple glyph */
.pr .pr-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-button);
  margin-bottom: 12px;
}

/* subFeatureBlockTitle — Mori/Sora 600 14px/18px */
.pr .pr-why-item h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0 0 8px;
}

/* subFeatureBlockDescription — Inter 14px/22px text-extra */
.pr .pr-why-item p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

/* Section heading — Proline lockup: centered column, max-width 650px */
.pr .pr-section-head {
  text-align: center;
  margin: 60px auto 40px;
  max-width: 650px;
}

.pr .pr-section-head .pr-pill {
  margin-bottom: 16px;
}

.pr .pr-section-head h2 {
  margin: 0 0 14px;
}

.pr .pr-section-head p {
  margin: 0;
}

/* Section head paragraph — Proline contentRightText: 16px / 24px Inter */
.pr .pr-section-head p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--background-font-colour);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

/* Features */
.pr .pr-features {
  padding: 60px 0;
}

/* Proline featureBlockWrapper: 44px padding for big cards, smaller for compact */
.pr .pr-feature-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 16px;
  padding: 32px;
  height: 100%;
}

.pr .pr-feature-card-lg {
  padding: 44px;
  min-height: 380px;
}

.pr .pr-feature-card-head {
  margin-bottom: 18px;
}

/* mainFeatureBlockTitle — Mori/Sora 600 16px */
.pr .pr-feature-card-head h5 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}

/* mainFeatureBlockDesc — Inter 16px/24px text-tertiary */
.pr .pr-feature-card-head p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--primary-font-colour);
  margin: 0;
}

.pr .pr-markets-table {
  font-size: 13px;
}

.pr .pr-markets-th,
.pr .pr-markets-tr {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
}

.pr .pr-markets-th > span,
.pr .pr-markets-tr > span {
  flex: 1 1 0;
}

.pr .pr-markets-name {
  flex: 1.5 1 0 !important;
}

.pr .pr-markets-th {
  font-size: 11px;
  color: var(--primary-font-colour);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-markets-tr {
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-markets-tr:last-child {
  border-bottom: 0;
}

.pr .pr-markets-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--background-heading-colour);
  font-weight: 500;
}

.pr .pr-markets-name i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-markets-name i img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Always-dark product surfaces (they keep the dark secondary background in
 * BOTH themes): pin their hairlines to a translucent lavender, because
 * --border-colour flips to a pale tint in light mode and would glare
 * against these dark panels. */
.pr .pr-hero-screenshot img,
.pr .pr-copy-card,
.pr .pr-speed-card,
.pr .pr-leverage-card,
.pr .pr-cardmock-inner {
  --border-colour: rgba(190, 167, 255, 0.16);
}

.pr .pr-copy-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
}

.pr .pr-copy-trader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-copy-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050024;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  background: #FFB266;
}

.pr .pr-copy-avatar-img {
  background: transparent;
}

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

.pr .pr-copy-trader > div {
  flex: 1;
}

/* traderName — 14px/20px */
.pr .pr-copy-trader strong {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-heading-colour);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: block;
}

/* traderUsername — 12px/12px text-extra */
.pr .pr-copy-trader em {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-font-colour);
  font-style: normal;
  font-size: 12px;
  line-height: 12px;
}

.pr .pr-copy-stats {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-copy-stats > div {
  flex: 1 1 0;
}

.pr .pr-copy-stats:last-child {
  border-bottom: 0;
}

/* copyTradingInfoRow value — 12px/12px */
.pr .pr-copy-stats > div strong {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-heading-colour);
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}

.pr .pr-copy-stats > div span {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--secondary-font-colour);
  font-size: 12px;
  line-height: 12px;
  margin-top: 4px;
}

/* Small features row */
.pr .pr-small-features {
  margin-top: 36px;
}

/* Small feature block — icon now lives inside the h6 so it sits inline
 * with the title naturally. The p body sits underneath. Desktop is
 * left-aligned, mobile flips to centered (rule in @media at the bottom). */
.pr .pr-small-feature {
  padding: 18px 12px;
}

.pr .pr-small-feature h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--background-heading-colour);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr .pr-small-feature p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

.pr .pr-small-feature-vert {
  flex-direction: column;
  text-align: left;
}

/* Small-feature icon — accent-purple glyph, no circle */
.pr .pr-small-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-button);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Card section */
.pr .pr-card-section {
  padding: 80px 0;
  text-align: center;
}

/* Crypto card section feature blocks — Proline subFeatureBlock pattern:
 * horizontal icon-left-of-title, body underneath, dashed vertical divider
 * between each column. */
.pr .pr-card-features {
  margin-top: 24px !important;
}

.pr .pr-card-feature-col {
  position: relative;
}

.pr .pr-card-feature-col.pr-card-feature-divider::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 0;
  border-left: 1px dashed var(--border-colour);
}

.pr .pr-card-feature {
  padding: 16px 22px;
  text-align: left;
}

.pr .pr-card-feature-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pr .pr-card-feature-icon {
  font-size: 18px !important;
  color: var(--primary-button);
  flex-shrink: 0;
}

.pr .pr-card-feature h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--background-heading-colour);
  margin: 0;
}

.pr .pr-card-feature p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--primary-font-colour);
  margin: 0;
}

/* Slim Proline-style card mock — Proline mobile dimensions ~320×170 */
.pr .pr-cardmock {
  margin: 0 auto 40px;
  width: 320px;
  max-width: 90%;
}

.pr .pr-cardmock-inner {
  /* Opaque dark gradient (was translucent) — over the light theme's white
   * page the see-through version turned murky grey. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary-background) 70%, var(--background-colour)) 0%,
    var(--secondary-background) 100%
  );
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  position: relative;
  height: 180px;
}

.pr .pr-cardmock-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pr .pr-cardmock-visa {
  color: var(--secondary-heading-colour);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.06em;
  font-size: 18px;
}

.pr .pr-cardmock-chip {
  display: none;
}

.pr .pr-cardmock-num {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: var(--secondary-font-colour);
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 15px;
}

/* Tools */
.pr .pr-tools {
  padding: 80px 0;
  position: relative;
}

/* Subtle gradient hairline divider between major sections — Proline pattern */
.pr .pr-tools::before,
.pr .pr-card-section::before,
.pr .pr-features::before,
.pr .pr-reviews::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1080px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-colour) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Tools brand orbs — 5 round chips, center one highlighted with purple glow ring */
.pr .pr-tools-orbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.pr .pr-tools-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
}

.pr .pr-tools-orb img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.pr .pr-tools-orb.active {
  width: 44px;
  height: 44px;
  opacity: 1;
  border-color: var(--primary-button);
  box-shadow: 0 0 0 6px rgba(113, 50, 245, 0.12), 0 0 24px rgba(113, 50, 245, 0.45);
  transform: scale(1);
  position: relative;
}

/* Proline orbShadow SVG behind the active orb */
.pr .pr-tools-orb-shadow {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.6;
  filter: blur(8px);
  pointer-events: none;
}

/* "Built for speed" card — Proline digital/dot-matrix style display */
.pr .pr-speed-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  position: relative;
}

.pr .pr-speed-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 70px;
}

.pr .pr-speed-bars i {
  flex: 1;
  border-radius: 1px;
  opacity: 0.85;
}

.pr .pr-speed-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-family: 'Signika Negative', monospace;
  color: var(--secondary-font-colour);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-colour);
}

.pr .pr-speed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 10px;
  border-bottom: 1px dashed var(--border-colour);
  margin-bottom: 10px;
}

.pr .pr-speed-digital {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #46DFA5;
  font-family: 'Courier New', monospace;
  font-feature-settings: 'tnum';
  text-shadow: 0 0 12px rgba(70, 223, 165, 0.4);
}

.pr .pr-speed-digital strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pr .pr-speed-digital em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
}

.pr .pr-speed-stats {
  display: inline-flex;
  gap: 24px;
}

.pr .pr-speed-stats > span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.pr .pr-speed-stats em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary-font-colour);
}

.pr .pr-speed-stats strong {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: var(--secondary-heading-colour);
  font-weight: 700;
}

.pr .pr-speed-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--secondary-font-colour);
  text-transform: uppercase;
}

.pr .pr-speed-bottom em {
  color: #46DFA5;
  font-style: normal;
  font-weight: 700;
  margin-right: 4px;
}

.pr .pr-speed-strength {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

.pr .pr-speed-strength i {
  width: 10px;
  height: 8px;
  border: 1px solid var(--border-colour);
  border-radius: 1px;
  display: inline-block;
}

.pr .pr-speed-strength i.on {
  background: #46DFA5;
  border-color: #46DFA5;
}

.pr .pr-leverage-card {
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
}

.pr .pr-leverage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--secondary-font-colour);
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-colour);
  margin-bottom: 12px;
}

.pr .pr-leverage-head em {
  color: var(--secondary-heading-colour);
  font-style: normal;
  font-weight: 600;
}

.pr .pr-leverage-amount {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.pr .pr-leverage-stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-leverage-stats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
}

.pr .pr-leverage-stats li span {
  color: var(--secondary-font-colour);
}

.pr .pr-leverage-stats li em {
  color: var(--secondary-heading-colour);
  font-style: normal;
  font-weight: 500;
  font-family: 'Signika Negative', monospace;
}

.pr .pr-leverage-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px dashed var(--border-colour);
  font-size: 12px;
  color: var(--secondary-font-colour);
}

.pr .pr-toggle {
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--primary-button);
  position: relative;
  flex-shrink: 0;
}

.pr .pr-toggle i {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}

.pr .pr-leverage-symbol {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
  margin-bottom: 14px;
  color: var(--secondary-heading-colour);
  font-weight: 500;
}

.pr .pr-leverage-symbol em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
}

.pr .pr-leverage-slider {
  position: relative;
  height: 6px;
  background: rgba(190, 167, 255, 0.12);
  border-radius: 999px;
  margin: 18px 0 18px;
}

.pr .pr-leverage-slider i {
  display: block;
  height: 100%;
  background: var(--primary-button);
  border-radius: 999px;
}

.pr .pr-leverage-slider b {
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  background: var(--primary-button);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

.pr .pr-leverage-marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--secondary-font-colour);
}

.pr .pr-leverage-marks .active {
  color: var(--secondary-heading-colour);
  font-weight: 600;
}

/* Reviews */
.pr .pr-reviews {
  padding: 60px 0 100px;
}

.pr .pr-review-card {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  padding: 22px;
  height: 100%;
}

.pr .pr-review-text {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--primary-font-colour);
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 22px;
}

.pr .pr-review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr .pr-review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050024;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.pr .pr-review-avatar-img {
  background: transparent;
}

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

.pr .pr-review-author strong {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--background-heading-colour);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.pr .pr-review-author em {
  display: block;
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--primary-font-colour);
  font-style: normal;
  font-size: 12px;
  line-height: 16px;
}

/* Footer */
.pr .pr-footer {
  padding: 60px 0 30px;
  border-top: 1px solid var(--border-colour);
  background: var(--background-colour);
}

.pr .pr-footer-main {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-footer-brand {
  padding-right: 24px;
}

/* footerLinkHeader — Inter 500 13px/20px */
.pr .pr-footer-col h6 {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--background-heading-colour);
  margin-bottom: 12px;
}

.pr .pr-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr .pr-footer-col li {
  margin-bottom: 8px;
}

/* footerLinksItem — Inter 13px/20px */
.pr .pr-footer-col a {
  font-family: 'Signika Negative', system-ui, sans-serif;
  color: var(--background-font-colour);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

.pr .pr-footer-col a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-footer-bottom {
  padding: 24px 0;
  align-items: center;
  font-size: 12px;
  color: var(--primary-font-colour);
}

.pr .pr-footer-socials {
  display: flex;
  gap: 14px;
}

.pr .pr-footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--background-font-colour);
  text-decoration: none;
}

.pr .pr-footer-socials a:hover {
  color: var(--background-heading-colour);
}

.pr .pr-footer-socials .material-icons {
  font-size: 16px;
}

.pr .pr-footer-legal-links a {
  color: var(--background-font-colour);
  text-decoration: none;
  margin-left: 14px;
}

.pr .pr-footer-disclaimer {
  padding-top: 16px;
}

/* disclaimerText — 13px/20px text-tertiary */
.pr .pr-footer-disclaimer p {
  font-family: 'Signika Negative', system-ui, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--primary-font-colour);
}

/* Mobile / tablet — single block. Proline mobile sizes:
 *  - lockupTitle: 32px / 40px
 *  - section titles: 28px / 40px
 *  - lockupSubtext: 16px / 24px
 *  - feature desc: 14px / 24px
 */
@media (max-width: 992px) {
  .pr h1 {
    font-size: 32px;
    line-height: 40px;
  }
  .pr h2 {
    font-size: 28px;
    line-height: 40px;
  }
  .pr .pr-hero {
    padding: 40px 0;
  }
  .pr .pr-hero-title {
    font-size: 32px;
    line-height: 40px;
  }
  .pr .pr-hero-sub {
    font-size: 16px;
    line-height: 24px;
  }
  .pr .pr-hero-bignum {
    font-size: 140px;
    top: 80px;
    left: -20px;
  }
  .pr .pr-hero-screenshot {
    margin-top: 36px;
  }
  .pr .pr-feature-card-head p {
    font-size: 14px;
    line-height: 24px;
  }
  .pr .pr-dashboard-card {
    flex-direction: column;
  }
  .pr .pr-dashboard-side,
  .pr .pr-dashboard-stats {
    width: 100%;
    flex: none;
  }
  .pr .pr-dashboard-side ul {
    display: flex;
    overflow-x: auto;
  }
  .pr .pr-dashboard-side li {
    white-space: nowrap;
  }
  .pr .pr-dashboard-side li.active {
    border-left: 0;
    border-bottom: 2px solid var(--primary-button);
    padding-left: 20px;
  }
  .pr .pr-section-head {
    margin: 48px auto 28px;
  }
  /* More generous vertical breathing room on mobile so sections don't run
   * into each other (Proline mobile uses ~80px section padding). */
  .pr .pr-card-section,
  .pr .pr-tools,
  .pr .pr-features,
  .pr .pr-reviews {
    padding: 64px 0;
  }
  /* Big feature cards on mobile — Proline lets the heading + description
   * sit directly on the page background (no card chrome). Only the inner
   * table / copy-card retains its own contained styling. */
  .pr .pr-feature-card,
  .pr .pr-feature-card-lg {
    background: transparent;
    border: 0;
    padding: 8px 0;
    min-height: auto;
  }
  /* Kill the rotating dashed SVG border on mobile too — Proline shows none */
  .pr .pr-feature-card .pr-rotating-border,
  .pr .pr-feature-card-lg .pr-rotating-border {
    display: none;
  }
  /* Inner markets/copy/leverage panels: keep their own dark container on
   * mobile so they read as contained widgets sitting under each
   * description (Proline pattern). */
  .pr .pr-markets-table,
  .pr .pr-copy-card,
  .pr .pr-speed-card,
  .pr .pr-leverage-card {
    margin-top: 18px;
    background: var(--secondary-background);
    border: 1px solid var(--border-colour);
    border-radius: 12px;
    padding: 14px 16px;
  }
  /* The markets-table already had its own internal styling; just keep its
   * row dividers inside the new wrapper */
  .pr .pr-markets-table .pr-markets-th {
    padding-top: 4px;
  }
  /* On mobile the markets table moves onto the dark secondary surface in
   * BOTH themes — switch its text and hairlines to the secondary tokens. */
  .pr .pr-markets-table {
    --border-colour: rgba(190, 167, 255, 0.16);
  }
  .pr .pr-markets-table .pr-markets-th,
  .pr .pr-markets-table .pr-markets-tr {
    color: var(--secondary-font-colour);
  }
  .pr .pr-markets-table .pr-markets-name {
    color: var(--secondary-heading-colour);
  }
  /* Small features (Multi-account, Global market access, Fast deposits) —
   * Proline mobile: no card / background, centered, icon inline with the
   * title on a single row, description centered below. Dashed horizontal
   * divider between blocks. */
  .pr .pr-small-features {
    margin-top: 12px;
  }
  .pr .pr-small-features .col {
    margin-bottom: 0;
  }
  .pr .pr-small-feature {
    padding: 22px 0;
    border-bottom: 1px dashed var(--border-colour);
    text-align: center;
  }
  .pr .pr-small-features .col:last-child .pr-small-feature {
    border-bottom: 0;
  }
  .pr .pr-small-feature h6 {
    justify-content: center;
  }
  .pr .pr-small-feature p {
    max-width: 320px;
    margin: 0 auto;
  }
  /* Tools orbs — make them larger on mobile so the row reads clearly */
  .pr .pr-tools-orb {
    width: 38px;
    height: 38px;
  }
  .pr .pr-tools-orb.active {
    width: 56px;
    height: 56px;
  }
  .pr .pr-tools-orbs {
    gap: 16px;
    margin-bottom: 32px;
  }
  /* Crypto-card features: vertical divider becomes a horizontal one
   * between stacked cards on mobile. Centered icon-title-text block. */
  .pr .pr-card-feature-col.pr-card-feature-divider::before {
    top: 0;
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    height: 0;
    border-left: 0;
    border-top: 1px dashed var(--border-colour);
  }
  .pr .pr-card-feature {
    text-align: center;
    padding: 22px 18px;
  }
  .pr .pr-card-feature-head {
    justify-content: center;
  }
  .pr .pr-card-feature p {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .pr .pr-footer-bottom {
    text-align: left;
  }
  .pr .pr-footer-legal-links {
    margin-top: 12px;
    text-align: left !important;
  }
  .pr .pr-footer-legal-links a {
    margin-left: 0;
    margin-right: 14px;
  }

  /* Mobile header — slightly tighter vertical padding. Already transparent
   * via the global rule. Wordmark hidden globally. */
  .pr .pr-header {
    padding: 14px 0;
  }

  /* Mobile hero screenshot — Proline uses a tall portrait image edge-to-edge
   * with no card border or shadow, gently blended into the page bg */
  .pr .pr-hero-screenshot {
    max-width: 100%;
    margin-top: 28px;
  }
  .pr .pr-hero-screenshot img {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .pr .pr-hero-screenshot-mobile {
    max-width: 360px;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }

  /* Mobile-only "All the features you need for profits" lockup, sits above
   * the stacked feature list. Centered, generous bottom margin. */
  .pr .pr-why-mobile-headline {
    text-align: center;
    margin: 24px auto 32px;
    max-width: 420px;
    font-family: 'Signika Negative', system-ui, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--background-heading-colour);
  }

  /* Centered, divider-separated feature items (Proline mobile layout).
   * Title sits inline with its icon, body underneath. */
  .pr .pr-why-item {
    padding: 24px 0;
    border-bottom: 1px dashed var(--border-colour);
    text-align: center;
  }

  .pr .pr-why-item:last-child {
    border-bottom: 0;
  }

  .pr .pr-why-item h6 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }

  .pr .pr-why-icon {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .pr .pr-why-item p {
    margin: 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   DASHBOARD (user area) — the DB8 shell
   Moved here from _components/db8.css: a skin has ONE stylesheet
   (see ai-rules.md). Colours come from db8ThemeVars() in skin.js,
   applied as inline css vars on .db8-shell.
   ============================================================ */

/* ============================================================
   DASHBOARD 8 (DB8)
   Desktop-first styles. Uses only theme CSS variables set by
   the per-design themeReducers. Single @media block at bottom.
   ============================================================ */

/* The shell is built on an 8px gutter: the sidebar is a floating inset panel
   rather than a full-bleed column, and the page background shows as a thin
   channel between every panel. That channel is what makes the surfaces read
   as stacked cards instead of as regions divided by borders — which is why
   nothing in this shell uses a border to separate chrome from content. */
.pr-shell.db8-shell{
  min-height: 100vh;
  background: var(--background-colour);
  color: var(--background-font-colour);
  font-family: 'Open Sans', 'Signika Negative', sans-serif;
}

/* ---------- Sidebar ---------- */
.pr-shell .db8-sidebar{
  position: fixed;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: 280px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 32px 16px;
  border-radius: 12px;
  background: var(--primary-background);
  transition: transform 0.25s ease;
}

/* NODE_NAME can be long — "CapitalGreenExchange" wrapped mid-word and broke the
   sidebar head at 18px. Smaller type with a tighter leading keeps a long name on
   one or two clean lines instead. */
.pr-shell .db8-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--background-heading-colour);
}

.pr-shell .db8-brand .material-icons{
  font-size: 28px;
  color: var(--primary-button);
}

.pr-shell .db8-brand img{
  height: 34px;
  width: 34px;
  border-radius: 8px;
  object-fit: contain;
}

.pr-shell .db8-side-col{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pr-shell .db8-side-nav{
  flex: 1;
}

.pr-shell .db8-side-nav,
.pr-shell .db8-side-nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-shell .db8-side-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.pr-shell .db8-side-link .material-icons,
.pr-shell .db8-side-link .material-icons-outlined{
  font-size: 18px;
}

/* Lucide icons are real SVG, so they need the flex reset a font glyph never
   did — without flex:none a long label squeezes the icon narrower. */
.pr-shell .db8-icon{
  flex: none;
}

.pr-shell .db8-side-link:hover{
  background: var(--hover);
  color: var(--background-font-colour);
}

/* The active row is the one lit surface in the shell — a step brighter than
   any card, which is how the reference marks position without an accent bar. */
.pr-shell .db8-side-link.active{
  background: var(--db8-active);
  color: var(--background-heading-colour);
}

.pr-shell .db8-side-user{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: var(--secondary-background);
}

.pr-shell .db8-side-user a,
.pr-shell .db8-side-user small{
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--primary-font-colour);
}

/* Close control for the off-canvas drawer. Hidden at desktop widths, where
   the sidebar is always on screen and has nothing to close. */
/* ---------- Page head / summary strip / pools ---------- */
.pr-shell .db8-page-head{
  margin: 20px 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr-shell .db8-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
}

.pr-shell .db8-summary-stats{
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.pr-shell .db8-summary-stats span{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-shell .db8-summary-stats b{
  font-size: 18px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.pr-shell .db8-btn-block{
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

/* Two columns of pool cards, matching the reference's 556px pair. */
.pr-shell .db8-pool-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pr-shell .db8-pool{
  margin-bottom: 0;
  padding: 24px;
}

.pr-shell .db8-pool-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
}

.pr-shell .db8-pool-head img{
  height: 28px;
  width: 28px;
  border-radius: 50%;
  object-fit: contain;
}

/* Verified tick rides with the name, in the accent rather than a colour of
   its own — it is a qualifier on the name, not a separate signal. */
.pr-shell .db8-verified{
  display: inline;
  vertical-align: -2px;
  color: var(--primary-link-colour);
}

.pr-shell .db8-pool-head b{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr-shell .db8-pool-head small{
  font-size: 14px;
  font-weight: 600;
}

/* Label left, value right, hairline between — the rule is what makes a stack
   of figures read as a table rather than as loose text. */
.pr-shell .db8-pool-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pr-shell .db8-pool-row.last{
  border-bottom: 0;
}

/* Materialize's .container is a centred 70%-width column. pr's content area is
   already the column — the sidebar and the 8px gutters do that job — so an
   inner .container only adds dead space either side of a shared page. The
   panel body resets it separately, further down. */
.pr-shell .db8-main .container{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Deposit modal ---------- */
.pr-shell .pr-dep-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1004;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--background-colour);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

.pr-shell .pr-dep-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-colour);
  font-size: 16px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr-shell .pr-dep-body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.pr-shell .pr-dep-intro{
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--primary-font-colour);
}

.pr-shell .pr-dep-field{
  margin-bottom: 16px;
}

.pr-shell .pr-dep-label{
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-heading-colour);
}

.pr-shell .pr-dep-input,
.pr-shell .pr-dep-static{
  box-sizing: border-box;
  display: block;
  height: 44px;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
}

.pr-shell .pr-dep-input:focus{
  border: 0;
  box-shadow: none;
  outline: 1px solid var(--primary-button);
}

.pr-shell .pr-dep-amount{
  position: relative;
}

.pr-shell .pr-dep-amount .pr-dep-input{
  padding-right: 82px;
}

.pr-shell .pr-dep-chip{
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--db8-active);
  font-size: 13px;
  font-weight: 600;
}

/* Address only ever renders in phase 2 — see the component: it is not in the
   DOM until the bwc check passes, so this styling never applies before then. */
.pr-shell .pr-dep-address{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  border-radius: 8px;
  background: var(--secondary-background);
}

.pr-shell .pr-dep-address input{
  flex: 1;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--background-font-colour);
  font-size: 13px;
  font-weight: 600;
}

.pr-shell .pr-dep-address input:focus{
  border: 0;
  box-shadow: none;
}

.pr-shell .pr-dep-summary{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 18px;
  font-size: 13px;
}

.pr-shell .pr-dep-summary span{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-shell .pr-dep-summary b{
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr-shell .pr-dep-crypto{
  color: var(--db8-up);
}

.pr-shell .pr-dep-error{
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: rgba(246, 70, 93, 0.16);
  color: var(--db8-sell);
}

.pr-shell .pr-dep-proof{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px 12px;
  border-radius: 8px;
  background: var(--secondary-background);
  color: var(--primary-link-colour);
  font-size: 14px;
  font-weight: 600;
}

.pr-shell .pr-dep-submit{
  margin-top: 4px;
}

/* ---------- Slide-in panel ---------- */
/* Profile sub-views open as a right-hand panel over the account page, matching
   the reference. The page underneath stays mounted, so you keep your place. */
.pr-shell .db8-panel-scrim{
  position: fixed;
  inset: 0;
  z-index: 1003;
  background: rgba(0, 0, 0, 0.5);
}

.pr-shell .db8-panel{
  position: fixed;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1004;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 16px));
  border-radius: 12px;
  background: var(--background-colour);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  animation: db8-panel-in 0.22s ease;
}

@keyframes db8-panel-in{
  from{ transform: translateX(16px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .pr-shell .db8-panel{ animation: none; }
}

.pr-shell .db8-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-colour);
}

.pr-shell .db8-panel-body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* ---------- Panel rows (settings) ---------- */
/* Icon, then a title over a one-line description of what is behind the row.
   The description is what separates this from the default's icon tiles — it
   says what "Security" contains rather than only naming it. */
.pr-shell .db8-panel-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 5px;
  color: var(--background-font-colour);
  background: var(--primary-background);
  cursor: pointer;
}

.pr-shell .db8-panel-row + .db8-panel-row{
  margin-top: 2px;
}

.pr-shell .db8-panel-row:hover{
  background: var(--secondary-background);
}

.pr-shell .db8-panel-row > span{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pr-shell .db8-panel-row b{
  font-size: 14px;
  font-weight: 500;
  color: var(--background-heading-colour);
}

.pr-shell .db8-panel-row small{
  font-size: 12px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-panel-row .db8-icon{
  color: var(--primary-font-colour);
}

.pr-shell .db8-panel-me{
  cursor: default;
  margin-bottom: 16px;
}

.pr-shell .db8-panel-me:hover{
  background: var(--primary-background);
}

/* A small muted label, not a heading — it groups the rows under it without
   competing with their titles. */
.pr-shell .db8-panel-label{
  display: block;
  padding: 16px 2px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-font-colour);
}

/* ---------- Referrals panel ---------- */
.pr-shell .db8-ref-intro{
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--background-font-colour);
}

.pr-shell .db8-ref-field{
  margin-bottom: 16px;
}

/* Field and action sit side by side as one control: the value is read-only, so
   the button is the only thing to do with it. */
.pr-shell .db8-ref-control{
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}

.pr-shell .db8-ref-control input{
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 13px;
  font-weight: 600;
}

.pr-shell .db8-ref-control input:focus{
  border: 0;
  box-shadow: none;
  outline: 1px solid var(--primary-button);
}

.pr-shell .db8-ref-action{
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--primary-button);
  color: #ffffff;
}

.pr-shell .db8-ref-action:hover{
  filter: brightness(1.08);
}

.pr-shell .db8-ref-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 4px;
}

.pr-shell .db8-ref-stats span{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-shell .db8-ref-stats b{
  font-size: 22px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.pr-shell .db8-ref-search{
  width: 100%;
  height: 40px;
}

.pr-shell .db8-ref-list{
  padding-top: 8px;
}

.pr-shell .db8-ref-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-colour);
}

.pr-shell .db8-ref-row:last-child{
  border-bottom: 0;
}

.pr-shell .db8-ref-row > span:last-child{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pr-shell .db8-ref-row b{
  font-size: 14px;
  font-weight: 500;
  color: var(--background-heading-colour);
}

.pr-shell .db8-ref-row small{
  font-size: 12px;
}

/* Empty state: an icon over the message, centred, so the panel does not end on
   a bare line of text. */
.pr-shell .db8-ref-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  font-size: 13px;
  color: var(--primary-font-colour);
}

/* ---------- Watchlist (materialize grid) ---------- */
.pr-shell .db8-wl-head{
  margin-bottom: 4px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-font-colour);
}

.pr-shell .db8-wl-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--primary-background);
}

.pr-shell .db8-wl-row .col{
  padding: 0 4px;
}

.pr-shell .db8-wl-asset{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* On a phone the head is hidden, so each change figure carries its own tag. */
.pr-shell .db8-wl-label{
  margin-right: 6px;
  font-size: 11px;
  color: var(--primary-font-colour);
}

@media only screen and (max-width: 992px){
  .pr-shell .db8-wl-row{
    row-gap: 6px;
  }
}

/* ---------- Live balance ---------- */
/* Above the tabs and set large: it is the number a trader watches while a
   position is open, so it should not be a caption beside a control. */
.pr-shell .db8-live-balance{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
}

.pr-shell .db8-live-balance b{
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--background-heading-colour);
}

.pr-shell .db8-toast{
  border-radius: 8px;
  background: var(--db8-buy);
  color: #ffffff;
  font-weight: 600;
}

/* The shared profile components are built for a full-width page, so their
   Materialize containers and columns have to give up their own width here. */
.pr-shell .db8-panel-body .container,
.pr-shell .db8-panel-body .row,
.pr-shell .db8-panel-body [class*='col ']{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Mobile drawer ---------- */
/* Desktop shows the nav list; the phone shows a tile grid. Both live in the
   markup at all times and swap here — the reference does the same, and a tile
   is a far better touch target than a 34px row. */
.pr-shell .db8-side-mobile{
  display: none;
}

.pr-shell .db8-side-mhead{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 20px;
}

.pr-shell .db8-side-mhead-name{
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.pr-shell .db8-side-mhead-name b{
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.pr-shell .db8-side-mhead-name small{
  font-size: 12px;
}

.pr-shell .db8-side-mhead-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 34px;
  width: 34px;
  border-radius: 6px;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.pr-shell .db8-side-mhead-btn:hover{
  background: var(--hover);
  color: var(--background-heading-colour);
}

.pr-shell .db8-tiles{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pr-shell .db8-tiles::-webkit-scrollbar{
  display: none;
}

/* Each page is exactly one screen wide and holds its own 3x4 grid, so tiles
   read across the row and the swipe lands on a page boundary. */
.pr-shell .db8-tile-page{
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 10px;
  scroll-snap-align: start;
}

.pr-shell .db8-tile-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 16px;
}

.pr-shell .db8-tile-dots span{
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: var(--primary-font-colour);
  opacity: 0.4;
}

.pr-shell .db8-tile-dots span:first-child{
  opacity: 1;
}

.pr-shell .db8-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 6px;
  border-radius: 8px;
  background: var(--primary-background);
  color: var(--primary-font-colour);
}

.pr-shell .db8-tile:active{
  background: var(--db8-active);
}

.pr-shell .db8-tile-label{
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: var(--primary-heading-colour);
}

/* ---------- Avatar ---------- */
/* Rounded square, not a circle — the reference uses the same 6px radius for
   the avatar as for its nav rows, so the chrome shares one corner language. */
.pr-shell .db8-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  min-width: 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  background: var(--hover);
  color: var(--primary-link-colour);
  overflow: hidden;
}

.pr-shell .db8-avatar img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* ---------- Main / topbar ---------- */
.pr-shell .db8-main{
  margin-left: 288px;
  /* 8px top so the topbar's top edge lines up with the sidebar's. */
  padding: 8px 8px 60px;
}

/* The trading tab bar is .fixed-footer (left: 0; width: 100%), so on desktop
   its first 288px sit underneath the fixed sidebar and the leftmost tabs are
   hidden. Start it where the content column starts. Reset under 992px, where
   the sidebar is off-canvas and the content is full width. */
.pr-shell .db8-trading-tabs{
  left: 288px;
  width: calc(100% - 288px);
}

/* The topbar is a card like everything else — same surface, same 12px radius,
   separated from the grid below by the same 8px gutter. Nothing in this shell
   is full-bleed. */
/* Sticky, not fixed: sticky keeps the bar in normal flow, so it holds the
   content column's width and gutters automatically. A fixed bar would have to
   re-derive `left: 288px; width: calc(100% - 296px)` and re-derive it again at
   every breakpoint. It sits above the cards but below the sidebar (1002) and
   the slide-over panel (1004). */
.pr-shell .db8-topbar{
  position: sticky;
  top: 8px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 16px;
  /* Explicit all-sides margin, not just the bottom: the old (userold) rule
     still in the bundle sets `margin: 0 -22px 8px` to bleed the topbar past
     the content gutter, and anything left undeclared here inherits it. */
  margin: 0 0 8px;
  border-radius: 12px;
  background: var(--primary-background);
}

.pr-shell .db8-topbar-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--background-font-colour);
}

.pr-shell .db8-topbar-title .material-icons,
.pr-shell .db8-topbar-title .material-icons-outlined{
  font-size: 18px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-topbar-page{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr-shell .db8-topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr-shell .db8-icon-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border-colour);
  background: var(--primary-background);
  color: var(--background-font-colour);
  cursor: pointer;
}

/* Chromeless variant for the topbar's theme toggle and notification bell:
   the icon alone, no box. Keeps the 38px hit area and the badge anchor. The
   hamburger (.db8-menu-btn) and the balance card's button keep their box. */
.pr-shell .db8-icon-btn.db8-icon-plain{
  border-color: transparent;
  background: transparent;
}

.pr-shell .db8-icon-btn.db8-icon-plain:hover{
  background: var(--hover);
}

.pr-shell .db8-icon-btn.db8-icon-plain:focus-visible{
  outline: 2px solid var(--primary-button);
  outline-offset: 2px;
}

.pr-shell .db8-icon-btn .material-icons{
  font-size: 20px;
}

.pr-shell .db8-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

.pr-shell .db8-balance-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
}

.pr-shell .db8-menu-btn{
  display: none;
}

/* ---------- Dropdowns ---------- */
.pr-shell .db8-dropdown-wrap{
  position: relative;
}

.pr-shell .db8-click-catcher{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1004;
}

.pr-shell .db8-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  border-radius: 12px;
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  z-index: 1005;
}

.pr-shell .db8-dropdown a,
.pr-shell .db8-dropdown .db8-dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.pr-shell .db8-dropdown a:hover{
  background: var(--hover);
}

.pr-shell .db8-dropdown .material-icons{
  font-size: 18px;
}

/* ---------- Cards ---------- */
/* No border and no shadow anywhere: a card is defined purely by sitting one
   alpha step lighter than the page, with the 8px gutter doing the separating. */
.pr-shell .db8-card{
  padding: 16px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--primary-background);
  border: 0;
}

.pr-shell .db8-balance-head{
  padding-bottom: 8px;
}

.pr-shell .db8-card-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-font-colour);
}

/* ---------- Dashboard grid ---------- */
/* Two columns: a fluid main column and a fixed-ish 470px rail. The rail width
   is what makes the trade panel and the Categories panel line up down the
   page — they are the same component width at two different heights. */
.pr-shell .db8-grid-2,
.pr-shell .db8-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  align-items: start;
}

/* The hero's rail must run the full height of the card, otherwise its lighter
   surface stops mid-row and reads as a floating box rather than a column. */
.pr-shell .db8-hero{
  align-items: stretch;
}

.pr-shell .db8-grid-2{
  gap: 8px;
  margin-bottom: 8px;
}

.pr-shell .db8-grid-2 > .db8-card{
  height: 100%;
  margin-bottom: 0;
}

/* The hero row is ONE card holding both columns, so the rail's own surface
   layers over it — 0.024 on 0.024 — and reads a step brighter than the
   balance side without a divider line. That layering is the whole effect;
   giving the rail a border instead would flatten it. */
.pr-shell .db8-hero{
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.pr-shell .db8-hero-main{
  min-width: 0;
  padding: 24px;
}

.pr-shell .db8-hero-side > .db8-card{
  height: 100%;
  margin-bottom: 0;
  padding: 24px;
}

/* Two equal columns — the Assets page's Total Balance / Recent Activity pair. */
.pr-shell .db8-grid-half{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.pr-shell .db8-grid-half > .db8-card{
  height: 100%;
  margin-bottom: 0;
}

/* ---------- Data table ---------- */
/* Rows are free-standing pills, not ruled lines: each row carries the card
   surface and the gap between them does the separating, same logic as the
   panels. border-spacing is what buys the gap, so the table has to stay
   border-separate and the radius has to go on the end cells (a <tr> will not
   take one). */
.pr-shell .db8-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.pr-shell .db8-table th{
  padding: 0 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: var(--primary-font-colour);
  border: 0;
}

.pr-shell .db8-table td{
  padding: 12px 8px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--background-font-colour);
  background: var(--primary-background);
  border: 0;
}

.pr-shell .db8-table tbody tr td:first-child{
  border-radius: 8px 0 0 8px;
}

.pr-shell .db8-table tbody tr td:last-child{
  border-radius: 0 8px 8px 0;
  text-align: right;
}

.pr-shell .db8-table tbody tr:hover td{
  background: var(--secondary-background);
}

/* The whole row is a link, so the name must NOT wear link colour — in the
   reference it reads as plain table text and the row is discoverable by hover. */
/* The trades tables centre every column, header and cell alike — the figures
   are short and read as a block that way, which is the reference's choice. */
.pr-shell .db8-table-center th,
.pr-shell .db8-table-center td{
  text-align: center;
}

.pr-shell .db8-table-center td:last-child{
  text-align: center;
}

.pr-shell .db8-table-center .db8-asset-cell{
  justify-content: center;
}

/* Direction and profit/loss use the mode-invariant market colours from
   skin.js: up is green and down is red in either theme, because that pairing
   is a market convention rather than a theme decision. */
.pr-shell .db8-dir{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.pr-shell .db8-dir.up{
  background: rgba(1, 178, 139, 0.16);
  color: var(--db8-buy);
}

.pr-shell .db8-dir.down{
  background: rgba(246, 70, 93, 0.16);
  color: var(--db8-sell);
}

.pr-shell .db8-pl.up{
  color: var(--db8-up);
}

.pr-shell .db8-pl.down{
  color: var(--db8-down);
}

.pr-shell .db8-asset-cell{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--background-font-colour);
}

.pr-shell .db8-asset-cell img{
  height: 24px;
  width: 24px;
  border-radius: 50%;
  object-fit: contain;
}

.pr-shell .db8-mini-btn{
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-left: 6px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 12px;
  background: var(--secondary-background);
  color: var(--primary-heading-colour);
  cursor: pointer;
}

.pr-shell .db8-mini-btn:hover{
  background: var(--db8-active);
  color: var(--background-heading-colour);
}

.pr-shell .db8-mini-btn[disabled]{
  opacity: 0.4;
  cursor: default;
}

.pr-shell .db8-clickable{
  cursor: pointer;
}

/* ---------- Trade tab ---------- */
/* The reference's trade screen uses a NARROWER rail than the dashboard —
   720/400 rather than 650/470 — because the order form is a single column of
   short fields while the dashboard rail carries a whole panel. */
.pr-shell .db8-grid-trade{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}

.pr-shell .db8-grid-trade > .db8-card{
  margin-bottom: 0;
  padding: 24px;
}

.pr-shell .db8-chart-card .db8-chart-holder{
  height: 520px;
}

/* ---------- Order form ---------- */
/* Restyles the SHARED components/TradesCreateForm in place. Everything here is
   scoped to .pr-shell .db8-order-form, so the same component keeps its stock
   Materialize look in every other skin. Nothing below changes behaviour —
   which fields exist, and when, is still the form's own decision. */
/* The shared form wraps its fields in `.row.center`, which centres every label
   over its input. The reference left-aligns them, and a left edge is what lets
   the eye run down a column of fields. */
.pr-shell .db8-order-form,
.pr-shell .db8-order-form .row.center{
  text-align: left;
}

.pr-shell .db8-order-form .row{
  margin-bottom: 0;
}

.pr-shell .db8-order-form .col{
  padding: 0;
}

.pr-shell .db8-order-form label{
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-heading-colour);
}

/* Materialize styles bare inputs with a bottom border and a focus box-shadow,
   and fixes their height. All three have to go for a boxed field. */
.pr-shell .db8-order-form input[type='number'],
.pr-shell .db8-order-form input[type='text'],
.pr-shell .db8-order-form select{
  box-sizing: border-box;
  height: 38px;
  margin: 0 0 14px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 14px !important;
  font-weight: 600;
}

.pr-shell .db8-order-form input:focus,
.pr-shell .db8-order-form select:focus{
  border: 0;
  box-shadow: none;
  outline: 1px solid var(--primary-button);
}

.pr-shell .db8-order-form select option{
  background: var(--background-colour);
  color: var(--background-font-colour);
}

/* Buy / sell. Materialize's .btn is a fixed 36px with a matching line-height
   and uppercase text; the reference's is a 42px sentence-case block, so all of
   that is overridden rather than worked around. The green/red are the
   mode-invariant market colours from skin.js, not theme surfaces. */
.pr-shell .db8-order-form .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.pr-shell .db8-order-form .btn.green{
  background: var(--db8-buy) !important;
}

.pr-shell .db8-order-form .btn.red{
  background: var(--db8-sell) !important;
}

.pr-shell .db8-order-form .btn:hover{
  filter: brightness(1.08);
  box-shadow: none;
}

/* ---------- Tab pills ---------- */
/* Open / Closed on the trades card. Active is the solid accent, idle is the
   card surface — the reference's own contrast, and it reads at a glance
   without a rule under the row. */
.pr-shell .db8-tabs{
  display: inline-flex;
  gap: 6px;
}

.pr-shell .db8-tab{
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary-background);
  color: var(--primary-font-colour);
}

.pr-shell .db8-tab.active{
  background: var(--primary-button);
  color: #ffffff;
}

/* ---------- Watchlist star ---------- */
.pr-shell .db8-star{
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.pr-shell .db8-star:hover{
  color: var(--background-heading-colour);
}

/* Starred is the one place an amber literal earns its keep: a filled star has
   to read as "on" in both themes, and the accent cyan is already the link
   colour everywhere else in this table. */
.pr-shell .db8-star.active{
  color: #f5b301;
}

.pr-shell .db8-pager{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  font-size: 12px;
}

/* ---------- Buttons ---------- */
/* Materialize's .btn is 36px with a fixed line-height and uppercase text, so
   this is a standalone class rather than a modifier — fighting those three
   properties costs more than not opting into them. Black label on the cyan is
   the reference's own choice and it is what keeps the fill readable. */
.pr-shell .db8-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  background: var(--primary-button);
  color: #000000;
}

.pr-shell .db8-btn:hover{
  filter: brightness(1.08);
}

.pr-shell .db8-btn-ghost{
  background: var(--secondary-background);
  color: var(--primary-heading-colour);
}

/* ---------- Status pill ---------- */
/* Tinted rather than solid so a table of them stays quiet — the row is the
   subject, the status is an annotation on it. */
.pr-shell .db8-status{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--secondary-background);
  color: var(--primary-heading-colour);
}

.pr-shell .db8-status-approved{
  background: rgba(1, 178, 139, 0.16);
  color: var(--db8-buy);
}

.pr-shell .db8-status-pending{
  background: rgba(255, 176, 32, 0.16);
  color: #ffb020;
}

.pr-shell .db8-status-failed{
  background: rgba(246, 70, 93, 0.16);
  color: var(--db8-sell);
}

/* ---------- Section head (title + controls) ---------- */
.pr-shell .db8-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pr-shell .db8-section-title{
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-heading-colour);
}

/* Materialize gives bare inputs a bottom border, a fixed height and a focus
   box-shadow; all three have to go for a field to sit inside a pill. */
.pr-shell .db8-field{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--secondary-background);
}

.pr-shell .db8-field .material-icons,
.pr-shell .db8-field .material-icons-outlined{
  font-size: 18px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-field input,
.pr-shell .db8-field select{
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--background-font-colour);
  font-size: 14px;
  font-weight: 600;
}

.pr-shell .db8-field input:focus,
.pr-shell .db8-field select:focus{
  border: 0;
  box-shadow: none;
  outline: none;
}

/* A global rule capitalises every placeholder in the app, which turns
   "Search for assets" into "Search For Assets". Sentence case here. */
.pr-shell .db8-field input::placeholder{
  text-transform: none;
  color: var(--primary-font-colour);
}

.pr-shell .db8-field select option{
  background: var(--background-colour);
  color: var(--background-font-colour);
}

/* ---------- Activity feed ---------- */
.pr-shell .db8-activity-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-colour);
}

.pr-shell .db8-activity-row:last-child{
  border-bottom: 0;
}

.pr-shell .db8-activity-row time{
  flex: none;
  font-size: 12px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-empty{
  padding: 24px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-heading-colour);
}

/* Renders a component's contents without its own card chrome, for when it is
   dropped inside a shared card (the hero row). */
.pr-shell .db8-flush{
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

.pr-shell .db8-muted{
  color: var(--primary-font-colour);
}

.pr-shell .db8-heading{
  color: var(--background-heading-colour);
}

.pr-shell .db8-link{
  color: var(--primary-link-colour);
  cursor: pointer;
}

.pr-shell .db8-row-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---------- Balance card ---------- */
/* Materialize grid: three centred s3 columns for the figures + a fourth for
   the mask toggle. Each amount stays on one line (no mid-number breaks), so
   the type scales with the viewport to fit its quarter of the card. */
.pr-shell .db8-balance-stats{
  margin-bottom: 0;
}

.pr-shell .db8-balance-stat .db8-card-title{
  display: block;
  white-space: nowrap;
}


.pr-shell .db8-balance-amount{
  display: block;
  margin: 4px 0 0;
  /* One size for Total, Deposit and Profit: 25px from ~735px wide (tablet and
     up), scaling down on narrower phones. A hard 25px cannot fit three
     6-figure amounts across a 390px screen — each column is only ~80px of
     content — so the figures ran into each other and past the card edge. */
  font-size: clamp(13px, 3.4vw, 25px);
  white-space: nowrap;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.pr-shell .db8-eye-toggle{
  border: none;
  padding: 0;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
  vertical-align: middle;
}

.pr-shell .db8-eye-toggle .material-icons{
  font-size: 18px;
}

.pr-shell .db8-move-money{
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
}

/* quick actions — shown at every width */
.pr-shell .db8-quick-actions{
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 18px 0 4px;
}

.pr-shell .db8-quick-action{
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--primary-link-colour);
}

.pr-shell .db8-quick-circle{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 54px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  color: var(--background-font-colour);
}

.pr-shell .db8-asset-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
}

.pr-shell .db8-asset-row:hover{
  background: var(--hover);
}

.pr-shell .db8-asset-row img{
  height: 38px;
  width: 38px;
  border-radius: 50%;
}

.pr-shell .db8-asset-name{
  flex: 1;
  min-width: 0;
}

.pr-shell .db8-asset-right{
  text-align: right;
}

/* ---------- Progress / signal ---------- */
.pr-shell .db8-progress{
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--secondary-background);
}

.pr-shell .db8-progress-fill{
  height: 100%;
  border-radius: 6px;
}

.pr-shell .db8-segments{
  display: flex;
  gap: 4px;
}

.pr-shell .db8-segment{
  flex: 1;
  height: 12px;
  border-radius: 3px;
}

.pr-shell .db8-segment.dim{
  opacity: 0.3;
}

/* ---------- Chart card ---------- */
.pr-shell .db8-chart-holder{
  height: 480px;
}

.pr-shell .db8-chart-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pr-shell .db8-chart-head img{
  height: 28px;
  width: 28px;
  border-radius: 50%;
}

.pr-shell .db8-chart-head .db8-chart-search{
  flex: 1;
}

.pr-shell .db8-chart-search .input-field{
  margin: 0;
}

.pr-shell .db8-chart-search input{
  margin-bottom: 0 !important;
}

.pr-shell .db8-symbol-chip{
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
  color: var(--primary-font-colour);
  white-space: nowrap;
}

/* ---------- Trade panel ---------- */
.pr-shell .db8-trade-tabs{
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--secondary-background);
  border: 1px solid var(--border-colour);
}

.pr-shell .db8-trade-tab{
  flex: 1;
  height: 38px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--primary-font-colour);
  font-size: 14px;
  cursor: pointer;
}

.pr-shell .db8-field-label{
  display: block;
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-input{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.pr-shell .db8-select{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 14.5px;
  outline: none;
}

.pr-shell .db8-input-group{
  display: flex;
  align-items: center;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  overflow: hidden;
}

.pr-shell .db8-input-group .db8-input{
  flex: 1;
  border: none;
  background: transparent;
}

.pr-shell .db8-input-group .db8-select{
  width: auto;
  min-width: 110px;
  border: none;
  border-left: 1px solid var(--border-colour);
  border-radius: 0;
  background: transparent;
}

.pr-shell .db8-dotted{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
  font-size: 13.5px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-dots{
  flex: 1;
  border-bottom: 1px dotted var(--border-colour);
}

.pr-shell .db8-lev-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.pr-shell .db8-lev-row .range-field{
  flex: 1;
  margin: 0;
}

.pr-shell input[type='range'].db8-range{
  border: none;
  margin: 0;
  accent-color: var(--primary-button);
}

.pr-shell input[type='range'].db8-range::-webkit-slider-thumb{
  background-color: var(--primary-button);
}

.pr-shell input[type='range'].db8-range::-moz-range-thumb{
  background-color: var(--primary-button);
}

.pr-shell .db8-scale{
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: var(--secondary-font-colour);
}

.pr-shell .db8-lev-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 44px;
  border: 1px solid var(--border-colour);
  border-radius: 10px;
  background: var(--secondary-background);
  color: var(--background-heading-colour);
  font-weight: 600;
}

.pr-shell .db8-checkbox-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.pr-shell .db8-submit{
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- My trades ---------- */
.pr-shell .db8-trades-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 4px;
}

.pr-shell .db8-accordion{
  margin-top: 14px;
  border: 1px solid var(--border-colour);
  border-radius: 12px;
  background: var(--primary-background);
  overflow: hidden;
}

.pr-shell .db8-accordion-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--background-font-colour);
}

.pr-shell .db8-accordion-head .db8-accordion-label{
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr-shell .db8-accordion-head .material-icons{
  font-size: 20px;
  color: var(--primary-font-colour);
}

.pr-shell .db8-accordion-body{
  padding: 4px 18px 16px;
  border-top: 1px solid var(--border-colour);
}

/* ---------- Login page ---------- */
.pr-shell .db8-login{
  min-height: 100vh;
  padding: 18px 26px;
  background: var(--background-colour);
  color: var(--background-font-colour);
}

.pr-shell .db8-login-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pr-shell .db8-login-top img{
  height: 52px;
}

.pr-shell .db8-login-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.pr-shell .db8-login-box{
  max-width: 470px;
  margin: 70px auto 0;
  padding-bottom: 60px;
}

.pr-shell .db8-login-box h1{
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  color: var(--background-heading-colour);
}

.pr-shell .db8-login-field{
  position: relative;
  margin-bottom: 16px;
}

.pr-shell .db8-login-field .db8-input{
  height: 48px;
  padding-right: 44px;
}

.pr-shell .db8-login-eye{
  position: absolute;
  top: 0;
  right: 6px;
  height: 48px;
  width: 38px;
  border: none;
  background: transparent;
  color: var(--primary-font-colour);
  cursor: pointer;
}

.pr-shell .db8-login-submit{
  width: 100%;
  height: 48px;
  margin-top: 26px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-button);
  cursor: pointer;
}

/* keep inline pills/buttons on one line */
.pr-shell .db8-topbar-title,
.pr-shell .db8-balance-pill,
.pr-shell .db8-move-money{
  white-space: nowrap;
}

/* ---------- Overlay (mobile sidebar) ---------- */
.pr-shell .db8-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

/* ============================================================
   Mobile / tablet overrides
   ============================================================ */
@media only screen and (max-width: 992px) {
  /* Off-canvas, the sidebar sits OVER page content rather than over the page
     background, so the translucent surface it wears on desktop lets the page
     show through it. It needs a solid fill here — and a shadow, since there is
     no 8px gutter separating it from what it covers. */
  .pr-shell .db8-sidebar{
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 0;
    transform: translateX(-105%);
    width: 100%;
    max-width: none;
    padding: 24px 16px 16px;
    background: var(--background-colour);
  }

    /* The list is a desktop affordance; the phone gets the tile grid instead. */
  .pr-shell .db8-side-col{
    display: none;
  }

  .pr-shell .db8-side-mobile{
    display: block;
  }

  /* Both dashboard grids fall to a single column. The hero card gets its own
     padding back, since the inner .db8-hero-main padding was carrying it while
     the two columns sat side by side. */
  /* db8-grid-trade MUST be here too. Its rail is minmax(300px, 400px), which on
     a 375px screen claims everything and leaves the fluid chart column at 0px —
     the chart was rendering all along, just zero pixels wide. */
.pr-shell .db8-grid-2,
.pr-shell .db8-hero,
.pr-shell .db8-grid-trade{
    grid-template-columns: minmax(0, 1fr);
  }

  .pr-shell .db8-hero{
    padding: 16px;
  }

  .pr-shell .db8-hero-main{
    padding: 0 0 8px;
  }

  .pr-shell .db8-hero-side > .db8-card{
    padding: 16px;
  }

  .pr-shell .db8-sidebar.open{
    transform: translateX(0);
  }

  .pr-shell .db8-overlay{
    display: block;
  }

  /* The trade rows sit inside three nested paddings — the accordion body, the
     Materialize .collection-item, and the column gutter — which on a phone ate
     roughly 40px a side before any content. Trim the outer two here; the
     collection is scoped so other lists keep their spacing. */
  .pr-shell .db8-accordion-body{
    padding: 4px 6px 12px;
  }

  .pr-shell .db8-accordion-body .collection .collection-item,
.pr-shell .db8-accordion-body .collection-item{
    padding-left: 8px;
    padding-right: 8px;
  }

  /* On a phone the topbar drops its surface and its fixed height — it is just
     a menu button and a title row over the page background. */
  .pr-shell .db8-topbar{
    height: auto;
    padding: 12px 8px;
    margin: 0 -8px 8px;
    top: 0;
    border-radius: 0;
    /* It keeps a background here BECAUSE it is stuck: transparent was fine
       when the bar scrolled away with the page, but content would now run
       under it. */
    background: var(--background-colour);
  }

  .pr-shell .db8-trading-tabs{
    left: 0;
    width: 100%;
  }

  .pr-shell .db8-main{
    margin-left: 0;
    padding: 0 12px 60px;
  }

  .pr-shell .db8-menu-btn{
    display: inline-flex;
  }

  .pr-shell .db8-chart-holder{
    height: 380px;
  }

  .pr-shell .db8-chart-head{
    flex-wrap: wrap;
  }

  .pr-shell .db8-chart-search{
    flex: 1 1 100%;
    min-width: 100%;
  }

  /* The brand + four controls were 383px of content in a 375px viewport, which
     scrolled the whole page sideways. The controls are fixed-size, so the
     brand is what has to yield: it truncates instead of pushing. */
  .pr-shell .db8-topbar{
    gap: 8px;
    overflow: hidden;
  }

  .pr-shell .db8-topbar-title{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .pr-shell .db8-topbar-title > a{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pr-shell .db8-topbar-right{
    flex: none;
    gap: 2px;
  }

  .pr-shell .db8-icon-btn{
    height: 34px;
    width: 34px;
  }

  /* Nothing in the dashboard may widen the page. Tables keep their own
     horizontal scroller (.db8-table sits inside an overflow-x:auto wrapper);
     this stops that scroller from being pushed wider than the viewport. */
  .pr-shell,
  .pr-shell .db8-main,
  .pr-shell .db8-card{
    max-width: 100%;
  }

  /* ---------- Tables become cards ----------
     A seven-column table cannot be read on a 375px screen. The reference makes
     you scroll it sideways, which means a row is never visible at once — you
     read a date, swipe, read an amount, swipe back. That is the one thing from
     the reference NOT worth copying.

     So on a phone each ROW becomes a card and each CELL becomes a labelled
     line, with the label coming from the td's data-label. The whole item is
     legible at a glance and nothing scrolls horizontally. */
  .pr-shell .db8-table{
    min-width: 0;
    border-spacing: 0;
  }

  .pr-shell .db8-table thead{
    /* Column headers are meaningless once each cell carries its own label —
       hidden accessibly rather than removed, so screen readers keep them. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pr-shell .db8-table tbody tr{
    display: block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--primary-background);
  }

  .pr-shell .db8-table tbody tr:hover td{
    background: transparent;
  }

  .pr-shell .db8-table td,
  .pr-shell .db8-table-center td,
  .pr-shell .db8-table-center td:last-child{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: auto;
    padding: 8px 0;
    text-align: right;
    white-space: normal;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--border-colour);
  }

  .pr-shell .db8-table tbody tr td:last-child{
    border-bottom: 0;
  }

  /* The label is the column head, printed inline before the value. */
  .pr-shell .db8-table td[data-label]::before{
    content: attr(data-label);
    flex: none;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: var(--primary-font-colour);
  }

  /* The asset/trade cell leads the card, so it gets no label and sits left. */
  .pr-shell .db8-table td:has(.db8-asset-cell)::before,
  .pr-shell .db8-table td:has(.db8-star)::before{
    content: none;
  }

  .pr-shell .db8-table td:has(.db8-asset-cell),
  .pr-shell .db8-table td:has(.db8-star){
    justify-content: flex-start;
  }

  .pr-shell .db8-table-center .db8-asset-cell{
    justify-content: flex-start;
  }

  /* Action buttons get the full width of the card rather than a cramped
     right-hand column. */
  .pr-shell .db8-table td .db8-mini-btn{
    margin-left: 6px;
  }

  .pr-shell .db8-card{
    padding: 16px !important;
  }

  /* On a phone the panel is a full-screen sheet — a 440px drawer over a
     375px viewport is just a page with a sliver of scrim behind it. */
  .pr-shell .db8-panel{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
  }

  .pr-shell .db8-pool-grid{
    grid-template-columns: minmax(0, 1fr);
  }

  .pr-shell .db8-summary{
    align-items: stretch;
    flex-direction: column;
  }

  .pr-shell .db8-summary-stats{
    gap: 20px;
    justify-content: space-between;
  }

  .pr-shell .db8-section-head{
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .pr-shell .db8-section-head > div{
    flex-wrap: wrap;
  }

  .pr-shell .db8-field{
    flex: 1 1 auto;
    min-width: 0;
  }

  .pr-shell .db8-field input,
  .pr-shell .db8-field select{
    min-width: 0;
    width: 100%;
  }

  .pr-shell .db8-balance-pill{
    padding: 0 10px;
    font-size: 13px;
  }

  .pr-shell .db8-card .db8-row-between{
    flex-wrap: wrap;
  }

  /* the clamp on .db8-balance-amount handles sizing; tighten the gap instead
     so three 7-figure amounts still fit a narrow phone on one line */


  .pr-shell .db8-login{
    padding: 14px 16px;
  }

  .pr-shell .db8-login-top img{
    height: 42px;
  }

  .pr-shell .db8-login-box{
    margin-top: 44px;
  }
}


/* ============================================================
   PLANS (guest) — pr's pricing cards
   Scoped under .pr, the guest shell's root class, so these never
   reach the dashboard. Dormant while NODE_GUEST=ap.
   ============================================================ */

.pr .pr-plans{
  padding-top: 24px;
  padding-bottom: 48px;
}

.pr .pr-plans-head{
  margin: 32px 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.pr .pr-plan-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pr .pr-plan{
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 12px;
  background: var(--primary-background);
}

.pr .pr-plan-title{
  padding-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--primary-link-colour);
}

/* Label left, value right, hairline between. The last row drops its rule so
   the stack ends on the action rather than on a line. */
.pr .pr-plan-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-colour);
}

.pr .pr-plan-row.last{
  border-bottom: 0;
}

.pr .pr-plan-label{
  color: var(--primary-font-colour);
}

/* ROI is the number people compare plans on, so it is the one figure that
   carries the profit colour rather than body text. */
.pr .pr-plan-accent{
  font-weight: 600;
  color: var(--db8-buy, #01b28b);
}

.pr .pr-plan-field{
  display: block;
  padding: 12px 0;
}

.pr .pr-plan-field select{
  display: block;
  height: 38px;
  width: 100%;
  margin-top: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--secondary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  font-weight: 600;
}

/* Standalone, not Materialize's .btn — that is a fixed 36px uppercase pill and
   this needs to be a full-width 42px block in sentence case. */
.pr .pr-plan-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 100%;
  margin-top: auto;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  background: var(--primary-button);
  color: #ffffff;
}

.pr .pr-plan-btn:hover{
  filter: brightness(1.08);
}

@media only screen and (max-width: 992px){
  .pr .pr-plan-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   TOUCH DEVICES — no hover states
   ============================================================ */
/* A tap on a touch screen leaves :hover latched on the element until you tap
   something else, so a nav row stays lit (and, with Materialize's own
   transitions in play, visibly shifted) long after you have moved on. There is
   no pointer to hover with here, so every hover effect is switched off rather
   than tuned. `hover: none` matches the device, not the width — a narrow
   desktop window keeps its hovers. */
@media (hover: none) {
  .pr-shell .db8-side-link:hover,
  .pr-shell .db8-tile:hover,
  .pr-shell .db8-side-mhead-btn:hover,
  .pr-shell .db8-side-user:hover,
  .pr-shell .db8-mini-btn:hover,
  .pr-shell .db8-star:hover,
  .pr-shell .db8-icon-btn:hover,
  .pr-shell .db8-table tbody tr:hover td {
    background: inherit;
    color: inherit;
    transform: none;
    filter: none;
  }

  /* The active row must still read as active — `inherit` above would flatten
     it along with the rest. */
  .pr-shell .db8-side-link.active,
  .pr-shell .db8-side-link.active:hover {
    background: var(--db8-active);
    color: var(--background-heading-colour);
  }

  .pr-shell .db8-tile:hover {
    background: var(--primary-background);
  }

  /* Nothing in the shell may move on tap — feedback is the :active flash. */
  .pr-shell .db8-side-link,
  .pr-shell .db8-tile,
  .pr-shell .db8-mini-btn,
  .pr-shell .db8-btn {
    transform: none !important;
    transition: background 0.12s ease;
  }
}

@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 {
  --primary-button: #766fb2;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;
}

/* ─── TradingView embeds never capture the page scroll ─────────────────────
   An embed is a cross-origin iframe, so any wheel or touch gesture that crosses
   it is handed to the iframe instead of the page: the scroll "catches" mid-fling
   wherever a widget sits. Every TradingView widget the app renders — ticker
   tape, timeline/news, symbol overview, technical analysis, mini symbol —
   loads from /embed-widget/, so one selector covers them all.

   This is the DEFAULT for the whole client app and every skin, not something a
   page opts into: app.css is imported by skin.js, which every build loads.

   NOT affected: the native chart (components/charts/LiveChartComponent) draws
   with lightweight-charts onto a canvas, not an iframe, so the chart users
   actually trade from keeps full pan/zoom. The trade is that the embed widgets
   become visual only — e.g. the range tabs on a symbol-overview stop
   responding. That is the same trade the he skin already made. */
iframe[src*='embed-widget'] {
  pointer-events: none;
}

#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;
}

.dashboard-trading {
  background: url(/assets/images/site/DashboardTrading.png);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.dashboard-mining {
  background: url(/assets/images/site/DashboardMining.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}