body {
  top: 0px !important;
  position: static !important;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  background: var(--background-colour);
  color: var(--background-font-colour);
  word-break: break-word;
  margin: 0 auto;
}

textarea {
  padding: 1rem;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

html,
body {
  max-width: 100vw;
}

a {
  color: var(--primary-button);
}

nav {
  background: var(--primary-background);
  box-shadow: none;
}

/* ── Material Icons: degrade to nothing, never to raw words ───────────────
   Material Icons is a LIGATURE font — <span class="material-icons">lock</span>
   is the literal text "lock" until the font paints it as one glyph. Only a few
   of the html shells load that font, so on every other skin the icon spans
   showed up as words: "supervisor_account", "location_on", "verified_user".

   TWO layers, because each covers what the other cannot:

   1. A zero-sized fallback family. When 'Material Icons' is missing the browser
      falls through to this face, whose glyphs render at 0 — so nothing is drawn
      even before any script runs, and there is no flash of raw words on load.
      Needs size-adjust (Chrome/Firefox 92+, Safari 17+).
   2. index.js measures the font once and sets .no-material-icons on <html>;
      this hides the spans outright, which also reclaims their layout space and
      covers browsers without size-adjust.

   Both are inert when the font IS present: layer 1 never reaches the fallback
   family, and layer 2's class is never set. The .no-material-icons selector is
   specific enough to beat the Google stylesheet's own `.material-icons` rule,
   which every shell loads BEFORE this file. */

@font-face {
  font-family: 'Material Icons Blank';
  /* any face that resolves will do — it is scaled to nothing anyway. Several
     are listed so this lands on Windows, macOS, Linux and Android alike; if
     none resolve the family is simply unusable and layer 2 takes over. */
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'),
    local('DejaVu Sans'), local('Segoe UI'), local('Roboto');
  size-adjust: 0%;
}

.material-icons {
  font-family: 'Material Icons', 'Material Icons Blank' !important;
}

html.no-material-icons .material-icons {
  display: none !important;
}

nav ul a {
  color: var(--nav-primary-font-colour);
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 10px;
  margin-right: 10px;
}

textarea,
textarea:focus {
  border-color: var(--border-colour);
  color: var(--background-font-colour);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--background-heading-colour);
}

input::placeholder {
  color: grey;
  font-weight: 100;
}

ol li {
  padding-left: 2rem;
  padding-bottom: 1rem;
}

select:focus {
  outline: none;
}

select {
  color: var(--background-font-colour);
  border-color: var(--primary-border-colour);
  background-color: transparent;
  height: 3rem;
  padding-top: 0;
  padding-bottom: 0;
}

input {
  color: var(--primary-font-colour);
  font-size: 14px;
}

nav ul li {
  margin-left: 10px;
}

p {
  margin-top: 7px;
  padding-left: 0;
}

li {
  list-style: none;
}

label {
  text-transform: capitalize;
}

section {
  margin: -1px;
}

h2 {
  margin-top: 0;
  font-size: 34px;
}

img {
  margin: 0;
}

h1 {
  margin: 0;
  margin-top: 6px;
  font-size: 44px;
  margin-bottom: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
}

h3 {
  margin: 0;
  padding: 0;
  font-size: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
}

h4 {
  font-size: 17px;
  margin-bottom: 1rem;
}

h5 {
  font-size: 20px;
  margin-bottom: 7px;
}

h6 {
  font-size: 16px;
  font-weight: bold;
  line-height: 150%;
}

#root footer {
  position: sticky;
  top: 100vh;
}

.btn-full {
  width: 100%;
}

.container {
  width: 90%;
}

.app-py-1-5 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.app-px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.app-py-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.app-trading-month {
  margin: 0;
  padding: 0 0.2rem;
  font-weight: 500;
}

.app-trading-day {
  font-size: 2.1rem;
}

.app-mobile-center {
  text-align: center;
}

.bg.bg-secondary a {
  color: var(--secondary-link-colour);
}

.bg.bg-secondary a.btn {
  color: white;
}

.collapsible-header,
.sidenav .collapsible-header {
  border-radius: 0;
  background: var(--primary-background);
}

.sidenav .collapsible-body,
.sidenav.fixed .collapsible-body {
  background: var(--background-colour);
}

.btn.btn-secondary {
  color: var(--primary-button);
  background: transparent !important;
  border: 1px solid var(--primary-button);
}

.bg.bg-secondary a.btn.btn-secondary {
  color: white;
  background: transparent;
  border: 1px solid white;
}

nav a,
nav .brand-logo {
  color: var(--primary-font-colour);
}

.sidenav li > a.active {
  color: white;
  background: var(--primary-button);
}

.collapsible-header {
  margin-bottom: 1rem;
  border-radius: 15px;
  border-bottom: 0;
  font-size: 1.2rem;
}

.bg.bg-secondary .collapsible-header,
.bg.bg-secondary .card {
  color: var(--secondary-font-colour);
  background-color: var(--secondary-background);
  border: 1.5px solid rgba(255, 255, 255, 0.0509803922);
}

.tabs .indicator {
  background-color: var(--primary-button);
}

.btn {
  background: var(--primary-button);
}

.btn:hover {
  background: var(--primary-button);
}

.btn.btn-secondary:hover {
  background: transparent;
}

.collection .collection-item .app-trader-border {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(20, 24, 57, 0.08);
  border-left: 1px solid rgba(20, 24, 57, 0.08);
  border-right: 1px solid rgba(20, 24, 57, 0.08);
}

.collection .collection-item .app-trader-border-name {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(20, 24, 57, 0.08);
  border-right: 1px solid rgba(20, 24, 57, 0.08);
}

.collection .collection-item .app-trader-border-image {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(20, 24, 57, 0.08);
  border-left: 1px solid rgba(20, 24, 57, 0.08);
}

a.inactive {
  color: var(--primary-font-colour);
}

.card-pane input[type='text']:not(.browser-default),
.card-pane input[type='email']:not(.browser-default),
.card-pane input[type='password']:not(.browser-default) {
  color: #dbdcdf;
  border: 1px solid #dbdcdf;
}

.btn.btn-white-trans {
  color: white;
  background: transparent;
  border: 1px solid white;
}

ul.tabs .material-icons {
  font-size: 30px;
}

.bgc,
.card.bgc {
  background-color: var(--background-colour);
}

a.btn {
  margin-bottom: 10px;
}

.btn-floating,
.btn-no-hover {
  padding: 10px;
  background: var(--primary-button);
}

.btn-floating:hover {
  background: var(--primary-button);
}

.dropdown-content li > a {
  color: black !important;
}

.card,
.card-panel {
  color: var(--primary-font-colour);
  background: var(--primary-background);
}

.bg .card-panel {
  color: var(--background-font-colour);
}

.bg.bg-secondary h5 {
  color: white;
}

.background {
  background: var(--background-colour);
}

.btn,
.btn-no-hover {
  box-shadow: none;
  text-transform: none;
}

.btn.btn-large {
  font-weight: 500;
  margin-bottom: 2px;
  padding: 12.5px 40px;
  height: auto;
  line-height: 25px;
}

.btn-large:hover,
.btn-small:hover {
  background: var(--primary-button);
}

.btn.btn-alt:hover {
  color: var(--button-font-colour) !important;
}

.btn.btn-alt-secondary:hover {
  background-color: var(--secondary-button);
  color: var(--button-font-colour) !important;
}

.btn-bg.card {
  color: #a5bdd9;
  background-color: #1b396a;
}

.btn-bg.card h3 {
  color: #fff;
}

.collection {
  border: none;
  background: transparent;
  margin-top: 0;
}

.collection .collection-item,
.collection .collection-item:last-child {
  border-bottom: 1px solid var(--background-colour);
}

.collection .collection-item {
  padding: 13px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: var(--primary-background);
}

.btn.btn-wide {
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn.btn-alt {
  background: var(--primary-background);
  color: var(--secondary-background) !important;
}

.bg.bg-secondary h1,
.bg.bg-secondary h2,
.bg.bg-secondary h3,
.bg.bg-secondary h4,
.bg.bg-secondary h5,
.bg.bg-secondary h6 {
  color: var(--secondary-heading-colour);
}

.input-field > label {
  color: #5b728c;
  font-size: 0.75rem;
  transform: translateY(7px);
}

.collection a.collection-item span {
  color: var(--primary-font-colour);
}

.collection a.collection-item:not(.active):hover,
.collection .collection-item:hover {
  background-color: var(--hover);
}

.tabs {
  color: white;
  overflow: hidden;
  background: transparent;
}

.app-trade-menu:hover,
.app-trade-menu.active {
  color: var(--primary-font-colour);
  background: var(--hover);
}

.btn.btn-alt-secondary {
  background: transparent;
  border: 1px solid var(--secondary-button);
  color: #ffffff !important;
}

.btn.btn-trans-primary {
  background: transparent;
  color: var(--primary-button) !important;
  border: 1px solid var(--primary-button);
}

.btn.btn-trans-secondary {
  background: transparent;
  color: var(--secondary-button) !important;
  border: 1px solid var(--secondary-button);
}

.btn.bordered {
  background: transparent;
  color: var(--primary-button) !important;
}

input[type='number']:not(.browser-default),
input[type='number']:not(.browser-default):focus:not([readonly]) {
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--background-font-colour);
  border: 1px solid var(--primary-border-colour);
}

textarea.materialize-textarea {
  color: var(--background-font-colour);
  min-height: 100px;
  padding: 1rem;
  font-size: 16px;
  background: transparent;
  border-radius: 7px;
  border: 1px solid var(--primary-border-colour);
}

.input-field .prefix.active {
  color: var(--background-font-colour);
}

input[type='tel']:not(.browser-default),
input[type='date']:not(.browser-default),
input[type='text']:not(.browser-default),
input[type='email']:not(.browser-default),
input[type='password']:not(.browser-default),
input[type='number']:not(.browser-default),
input[type='number']:not(.browser-default):focus:not([readonly]) {
  border-radius: 7px;
  box-sizing: border-box;
  color: var(--background-font-colour);
  background-color: transparent;
  border: 1px solid var(--primary-border-colour);
}

input:not([type]):focus:not([readonly]),
input[type='text']:not(.browser-default):focus:not([readonly]),
input[type='password']:not(.browser-default):focus:not([readonly]),
input[type='email']:not(.browser-default):focus:not([readonly]),
input[type='url']:not(.browser-default):focus:not([readonly]),
input[type='time']:not(.browser-default):focus:not([readonly]),
input[type='date']:not(.browser-default):focus:not([readonly]),
input[type='datetime']:not(.browser-default):focus:not([readonly]),
input[type='datetime-local']:not(.browser-default):focus:not([readonly]),
input[type='tel']:not(.browser-default):focus:not([readonly]),
input[type='number']:not(.browser-default):focus:not([readonly]),
input[type='search']:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border: 1px solid rgb(225, 225, 225);
  box-shadow: none;
  box-sizing: border-box;
}

.input-field label {
  padding-left: 1rem;
}

.tabs .tab a,
.tabs .tab a:hover {
  color: #898181;
}

.tabs .tab a.active {
  font-weight: bold;
  color: var(--primary-link-colour);
}

.tab a {
  color: var(--background-font-colour);
}

.tab a.active {
  font-weight: bold;
  color: var(--primary-button);
}

.collapsible {
  border: 0;
}

.card-content p {
  color: var(--primary-font-colour);
}

table.striped > tbody > tr:nth-child(odd) {
  background-color: var(--background-colour);
}

.carousel .indicators .indicator-item.active {
  border: 1px solid grey;
  background-color: #fff;
}

.carousel .indicators .indicator-item {
  background-color: grey;
  border-radius: 5px;
}

.tap-target {
  background: var(--primary-button);
  color: var(--button-font-colour);
}

a.hover:hover {
  color: var(--primary-button);
}

nav .brand-logo {
  font-size: 1.7rem;
}

.row .col {
  padding: 0 0.75rem;
}

nav .sidenav-trigger {
  margin: 0;
}

.card .card-image img {
  height: 250px;
  object-fit: cover;
}

select.translator {
  width: 145px;
  font-size: 12px;
  margin-top: 15px;
  margin-right: 5px;
  padding-bottom: 0;
  height: 2rem;
}

nav ul a.btn,
nav ul a.btn-large,
nav ul a.btn-small,
nav ul a.btn-large,
nav ul a.btn-flat,
nav ul a.btn-floating {
  margin: 0;
  margin-top: -5px;
}

.input-field > label:not(.label-icon).active {
  transform: translateY(-22px) scale(1);
}

select.trading {
  max-width: 33vw;
}

.card {
  cursor: pointer;
}

input[type='text']:not(.browser-default),
input[type='email']:not(.browser-default),
input[type='number']:not(.browser-default),
input[type='password']:not(.browser-default) {
  padding-left: 10px;
}

.input-field {
  margin-bottom: 2rem;
}

.input-field .prefix {
  width: 4rem;
  padding-left: 7px;
  top: 0.82rem;
  font-size: 14px;
}

.input-field .prefix.material-icons {
  top: 14px;
  padding-left: 2px;
}

.input-field .prefix ~ label {
  margin-left: 3rem;
}

.input-field .prefix ~ input {
  width: 100%;
  margin-left: 0;
  padding-left: 3.5rem;
}

.collection,
.row {
  margin-bottom: 0;
}

input:not([type]),
input[type='text']:not(.browser-default),
input[type='password']:not(.browser-default),
input[type='email']:not(.browser-default),
input[type='url']:not(.browser-default),
input[type='time']:not(.browser-default),
input[type='date']:not(.browser-default),
input[type='datetime']:not(.browser-default),
input[type='datetime-local']:not(.browser-default),
input[type='tel']:not(.browser-default),
input[type='number']:not(.browser-default),
input[type='search']:not(.browser-default),
textarea.materialize-textarea {
  margin: 0;
}

[type='checkbox'] + span:not(.lever) {
  font-size: 13px;
  line-height: 1.45;
}

.tabs .tab {
  text-transform: none;
}

.material-icons {
  position: relative;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  top: -2px;
  font-size: 28px;
}

.card.medium {
  height: 350px;
}

.card.medium .card-image {
  max-height: 80%;
  overflow: hidden;
}

.card-panel {
  margin: 0;
}

.file-field .btn {
  line-height: 1.5rem;
}

.fixed-action-btn {
  right: 10px;
  bottom: 110px;
}

.btn-floating.btn-large i {
  line-height: 64px;
}

.card-content {
  font-weight: bold;
}

.fsm.open {
  clip-path: circle(75%);
}

.sidenav {
  overflow-y: scroll;
  background: var(--background-colour);
}

.sidenav .collapsible-body,
.sidenav.fixed .collapsible-body,
.sidenav li > a {
  color: var(--primary-font-colour);
}

.sidenav .collapsible-body a {
  color: var(--primary-font-colour);
}

nav .input-field input:focus,
nav .input-field input[type='text']:valid,
nav .input-field input[type='password']:valid,
nav .input-field input[type='email']:valid,
nav .input-field input[type='url']:valid,
nav .input-field input[type='date']:valid {
  border: 2px solid var(--border-colour);
}

.sidenav .user-view {
  height: 170px;
  margin-bottom: 0;
}

.sidenav li > a > i.material-icons,
.sidenav li > a > i,
.sidenav li > a > [class^='mdi-'],
.sidenav li > a li > a > [class*='mdi-'] {
  color: var(--secondary-font-colour);
}

.carousel.carousel-slider .carousel-item p {
  font-size: 18px;
}

.carousel.carousel-slider .carousel-item h2 {
  font-size: 32px;
  font-weight: bold;
}

@keyframes AppFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animate-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1100px);
  }
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 25px;
  }
  h3 {
    font-size: 20px;
  }
  .container {
    width: 99%;
  }
}

@media (min-width: 319px) and (max-width: 490px) {
  .container {
    width: 95%;
  }
  .btn.btn-large {
    margin-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
  }
  .menu a {
    display: block;
    text-align: center;
  }
  .chip .close {
    top: -9px;
    line-height: 20px;
  }
  ul.stepper .step .step-content {
    margin-left: 1.5rem;
    margin-right: 0;
  }
}

@media (min-width: 571px) {
  .container {
    width: 90%;
  }

  .pl-2 {
    padding-left: 2rem !important;
  }
}

@media (min-width: 826px) {
  .btn.btn-large {
    margin-bottom: 15px;
  }
}


/* ─── Base rules recovered from client/src/old.css ────────────────────────
   These 52 rules back 52 class names that are used
   throughout the app but had no definition anywhere in the loaded CSS: the
   reset layer was split into this static file and old.css, and old.css is
   imported by nothing. Descendant rules like `.bg.bg-secondary .card` were
   migrated here already, but the BASE rules they build on were left behind —
   so `.bg` had children styled and no background of its own, and every
   .app-py-N and .app-px-N spacing utility resolved to nothing.

   Lifted verbatim, top-level rules only. Media-query variants were already
   migrated and are not duplicated here. */

.bg {
  color: var(--primary-font-colour);
  background-color: var(--primary-background);
}

.app-py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.app-px {
  padding-left: 1rem;
  padding-right: 1rem;
}

.app-py-2 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.border {
  padding: 1rem;
  border-radius: 7px;
  border: 1px solid var(--border-colour);
}

.btn-color {
  color: var(--primary-button) !important;
}

.app-px-1 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.app-relative {
  position: relative;
}

.app-trade-icon {
  width: 45px;
  border-radius: 10px;
}

.box {
  width: 98%;
  padding: 1rem;
  display: block;
  text-align: center;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--primary-button);
}

.app-list-link {
  color: var(--background-font-colour);
}

.alt-color {
  color: var(--alt-colour);
}

.app-mb-2 {
  margin-bottom: 2rem !important;
}

.container-50 {
  max-width: 50%;
}

.train {
  width: 290px;
  height: 160px;
  border-radius: 10px;
  background: red;
}

.f-24 {
  font-size: 24px;
  /* color: #a5bdd9; */
}

.app-text-justify {
  text-align: justify;
}

.btn-trans {
  background: transparent !important;
}

.app-trade-icon-container {
  position: relative;
  left: -20px;
}

.app-my-2 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.app-pt-3 {
  padding-top: 3rem;
}

.app-my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.app-pb-3 {
  padding-bottom: 3rem;
}

.app-px-3 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.app-pt-2 {
  padding-top: 2rem !important;
}

.border-top {
  padding: 1rem;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border: 1px solid var(--border-colour);
}

.trans-card {
  padding: 2rem;
  padding-top: 2.8rem;
  border-radius: 25px;
  background-color: #2e8cec;
}

.container-95 {
  width: 96%;
  margin: auto;
}

.container-40 {
  width: 45%;
  margin: auto;
}

.border-background {
  background: var(--border-colour);
}

.app-pb-1 {
  padding-bottom: 1rem;
}

.tr-video-container {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: rgba(1, 1, 33, 0.5);
}

.pagination-text {
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 5px;
  padding: 1rem;
  margin: 2px;
  display: inline-block;
}

.light-text {
  color: #a5bdd9;
}

.app-vh {
  min-height: 680px;
  position: relative;
}

.app-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.app-mx-1 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.app-mb-1 {
  margin-bottom: 1rem;
}

.app-f2 {
  font-size: 14px;
}

.container-80 {
  margin: auto;
  max-width: 80%;
}

.container-35 {
  width: 35%;
  margin: auto;
}

.border-mid {
  padding: 1rem;
  border: 1px solid var(--border-colour);
}

.app-title {
  font-size: 1.1rem;
}

.app-font-normal {
  font-size: 12px;
  line-height: 10px;
}

.w-700 {
  font-weight: 700;
}

.table-title {
  font-size: 10px;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.blurred-background {
  background-color: rgba(var(--background-colour), 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  color: #fff;
}

.app-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.app-mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.bg.bg-secondary {
  color: var(--secondary-font-colour);
  background-color: var(--secondary-background);
}

.bg.bg-back {
  background-color: var(--background-colour);
}

/* An always-light band. The tr1/tr2/tr3 Toro sections and fp's liquidity
   section carry .white-bg on their <section>, but the class had never been
   DEFINED anywhere — so the band simply showed the page background and went
   black in dark mode, over artwork drawn on white.

   The surface is deliberately theme-INVARIANT, which is the one case where a
   literal beats a theme var: the whole point is that it does not follow the
   theme. What it must not do is leave dark-mode TEXT on that white, so rather
   than recolouring each element the theme tokens are re-pointed at their light
   values for the subtree — every descendant (headings, body copy, links,
   Materialize widgets) then resolves correctly with no further rules. The
   values are the LIGHT branch of the Toro skins' skin.js, except
   --background-colour, which is white here rather than their pale blue. */

.white-bg {
  background: #ffffff;

  --background-colour: #ffffff;
  --background-font-colour: #4a4a4a;
  --background-heading-colour: #0d141e;
  --primary-background: #ffffff;
  --primary-font-colour: #000000;
  --primary-heading-colour: #000000;
  --border-colour: #f2f2f2;

  color: var(--background-font-colour);
}

.white-bg h1,
.white-bg h2,
.white-bg h3,
.white-bg h4,
.white-bg h5,
.white-bg h6 {
  color: var(--background-heading-colour);
}

/* .btn carries only a background here; its white text is Materialize's own, and
   .btn-trans clears the background while keeping that white — which on this
   band would be white on white. The solid .btn is fine: it keeps its
   --primary-button fill, so white text still reads against it. */
.white-bg .btn-trans {
  color: var(--background-heading-colour);
}

/* These were only ever defined INSIDE a media query in old.css, so they
   have no base rule — .icon, for one, has its padding only above 571px. */

@media (min-width: 319px) and (max-width: 490px) {
  .pc-container {
    width: 98%;
  }

  .container-60 {
    max-width: 90%;
  }

  .f-42 {
    font-size: 30px;
  }

  .f-22 {
    font-size: 18px;
  }

  .f-26 {
    font-size: 20px;
  }

  .prime-video {
    width: 100%;
    height: 100%;
  }

  .app-mobile-justify {
    text-align: justify;
  }
}

@media (min-width: 571px) {
  .pc-pl-1 {
    padding-left: 1.5rem;
  }

  .icon {
    padding-right: 1rem;
  }
}

@media (min-width: 826px) {
  .container-60 {
    max-width: 60%;
    margin: auto;
  }

  .container-65 {
    max-width: 65%;
    margin: auto;
  }

  .container-75 {
    max-width: 75%;
    margin: auto;
  }
}

@media (min-width: 850px) {
  .pc-container {
    width: 90%;
    margin-right: auto;
  }
}

/* CSSTransition classes. These are added to the DOM at runtime by
   react-transition-group, never written in a className literal — which is why
   the first recovery pass missed them: it only lifted rules whose class it
   could find in the JSX. Without them <FadeComponent> mounted and unmounted
   with no visible transition at all, which read as "the fade was removed". */

.fade-appear {
  opacity: 0;
}

.fade-appear-active {
  opacity: 1;
  /* 300ms to match CSSTransition's timeout={300}. At the original 1000ms the
     component dropped the -active class at 300ms, three-tenths of the way
     through, so the fade visibly snapped instead of finishing. */
  transition: opacity 300ms linear;
}

.app-fade {
  animation: AppFadeIn 5s;
}

/* ─── list loading state ──────────────────────────────────────────────────
   Pinned to the VIEWPORT, not dropped into the flow. A page of the assets
   list is 700 rows and the request behind it takes 20s+, so an indicator at
   the top of the list told a reader who had scrolled to the pager and clicked
   it nothing at all. This rides along wherever they are.

   It lives here rather than in each skin's stylesheet because every skin's
   assets list wants the same behaviour, and one definition cannot drift.
   Colours are the theme variables, so it follows whichever skin is mounted. */
.app-loading {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  padding: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.app-loading .spinner-layer {
  border-color: var(--primary-button);
}

/* ListComponent puts a progress bar at the top of its own output whenever it
   is handed `fetching`. On a list this long that bar is almost never on
   screen, and when it is there are two spinners going. The prop still has to
   reach the component — it is also what stops its "No Data Found" line
   flashing mid-request — so the bar is hidden rather than withheld. */
.app-loading-host > .progress {
  display: none;
}