/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@symfony/webpack-encore/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!./src/application/Core/assets/scss/main.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.breadcrumb-item a {
  text-decoration: none;
}

.toast {
  overflow: hidden;
}

.toast-progress {
  height: 3px;
  width: 100%;
  background-color: currentColor;
  opacity: 0.5;
}

.mnv-toast {
  --mnv-toast-tone: var(--mnv-accent);
  backdrop-filter: blur(var(--mnv-blur-glass));
}
.mnv-toast .toast-progress {
  background-color: var(--mnv-toast-tone);
  opacity: 1;
}

.mnv-toast-content {
  display: flex;
  align-items: center;
  gap: var(--mnv-space-4);
  padding: var(--mnv-space-5) var(--mnv-space-4) var(--mnv-space-5) var(--mnv-space-6);
}
.mnv-toast-content .toast-body {
  flex: 1 1 auto;
  padding: 0;
}
.mnv-toast-content .btn-close {
  flex: none;
}

.mnv-toast-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--mnv-radius-pill);
  background: var(--mnv-toast-tone);
  box-shadow: 0 0 0 3px var(--mnv-fill-hover);
}

.mnv-toast--success {
  --mnv-toast-tone: var(--mnv-success);
}

.mnv-toast--warning {
  --mnv-toast-tone: var(--mnv-warning);
}

.mnv-toast--danger {
  --mnv-toast-tone: var(--mnv-danger);
}

.confirm-popup {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: var(--mnv-surface-overlay);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--mnv-shadow-soft);
  z-index: 1060;
  white-space: nowrap;
}
.confirm-popup__message {
  font-size: 0.875rem;
  color: var(--bs-body-color);
}
.confirm-popup__arrow, .confirm-popup__arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}
.confirm-popup__arrow {
  visibility: hidden;
}
.confirm-popup__arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
  box-shadow: -1px -1px 3px var(--mnv-border-subtle);
}
.confirm-popup[data-popper-placement^=top] .confirm-popup__arrow {
  bottom: -4px;
}
.confirm-popup[data-popper-placement^=bottom] .confirm-popup__arrow {
  top: -4px;
}
.confirm-popup[data-popper-placement^=left] .confirm-popup__arrow {
  right: -4px;
}
.confirm-popup[data-popper-placement^=right] .confirm-popup__arrow {
  left: -4px;
}

.confirm-popup--danger {
  background: var(--mnv-danger-solid);
}
.confirm-popup--danger .confirm-popup__message {
  color: var(--mnv-on-accent);
}

.confirm-popup--primary {
  background: var(--bs-primary-bg-subtle);
}
.confirm-popup--primary .confirm-popup__message {
  color: var(--bs-primary-text-emphasis);
}

.confirm-popup--secondary {
  background: var(--bs-secondary-bg-subtle);
}
.confirm-popup--secondary .confirm-popup__message {
  color: var(--bs-secondary-text-emphasis);
}

.confirm-popup--success {
  background: var(--bs-success-bg-subtle);
}
.confirm-popup--success .confirm-popup__message {
  color: var(--bs-success-text-emphasis);
}

.confirm-popup--warning {
  background: var(--bs-warning-bg-subtle);
}
.confirm-popup--warning .confirm-popup__message {
  color: var(--bs-warning-text-emphasis);
}

.confirm-popup--info {
  background: var(--bs-info-bg-subtle);
}
.confirm-popup--info .confirm-popup__message {
  color: var(--bs-info-text-emphasis);
}

.confirm-popup--dark {
  background: var(--bs-dark-bg-subtle);
}
.confirm-popup--dark .confirm-popup__message {
  color: var(--bs-dark-text-emphasis);
}

.confirm-popup--light {
  background: var(--bs-light-bg-subtle);
}
.confirm-popup--light .confirm-popup__message {
  color: var(--bs-light-text-emphasis);
}

/**
 * Des cartes posées les unes sur les autres, en quinconce.
 *
 * La mise en page est la même que la pile soit faite d'un seul titre en
 * plusieurs exemplaires — `card_stack` — ou de cartes différentes —
 * `card_pile`. Elle ne connaît ni l'un ni l'autre : elle empile ce qu'on lui
 * donne.
 *
 * La première couche reste dans le flux : c'est elle qui donne sa taille au
 * conteneur, quelle que soit la taille de l'illustration. Les suivantes sont
 * posées par-dessus, décalées, et le padding réserve la place que leur décalage
 * demande — sans quoi la pile déborderait sur sa voisine.
 */
.card-layers {
  --card-layers-offset-x: 0.9rem;
  --card-layers-offset-y: 0.6rem;
  --card-layers-depth: 0;
  position: relative;
  display: inline-block;
  padding-right: calc(var(--card-layers-depth) * var(--card-layers-offset-x));
  padding-bottom: calc(var(--card-layers-depth) * var(--card-layers-offset-y));
}

.card-layers-item {
  --card-layers-index: 0;
  position: absolute;
  left: calc(var(--card-layers-index) * var(--card-layers-offset-x));
  top: calc(var(--card-layers-index) * var(--card-layers-offset-y));
  z-index: calc(var(--card-layers-index) + 1);
  transition: transform 0.15s ease;
}
.card-layers-item:first-child {
  position: relative;
  left: auto;
  top: auto;
}

/**
 * Désignée, une carte passe devant les autres et se soulève : on lit celle
 * qu'on montre, sans avoir à défaire la pile.
 *
 * Ce n'est pas `:hover` qui la désigne. Une carte remontée recouvre les bandes
 * des suivantes et ne lâche le curseur qu'à la sortie de la pile entière : la
 * pile ne se parcourait pas. La désignation se calcule sur la pile au repos,
 * dans `Core/assets/src/card-layers.js`, qui pose cette classe.
 */
.card-layers-item--front {
  z-index: 100;
  transform: translateY(-0.4rem);
}

/**
 * Les actions sont celles de la carte de devant.
 *
 * Le soulèvement découvre un cheveu de la carte du dessous, qui se trouve donc
 * survolée sans être devant. Ses actions seraient dessinées sous une autre
 * carte.
 */
.card-layers-item--front .card-tile-actions {
  opacity: 1;
}

.card-layers-item:not(.card-layers-item--front) .card-tile-image:hover .card-tile-actions {
  opacity: 0;
}

/**
 * La même pile, mais tombant droit et assez ouverte pour se lire.
 *
 * Rien ne dévie sur le côté, et le décalage vertical découvre la bande de titre
 * de chaque carte — son nom et son coût de mana. Une colonne se parcourt donc
 * sans rien survoler ; le survol ne sert plus qu'à voir une carte en entier.
 *
 * La hauteur d'une carte vaut 88/63 de sa largeur, et sa bande de titre environ
 * douze centièmes de cette hauteur. D'où une valeur par taille d'illustration :
 * découvrir une bande se mesure en cartes, pas en pixels. La taille pleine sert
 * de défaut, de sorte qu'un navigateur sans `:has()` ouvre trop plutôt que pas
 * assez.
 */
.card-layers-vertical {
  --card-layers-offset-x: 0rem;
  --card-layers-offset-y: 3.125rem;
}
.card-layers-vertical:has(.card-tile-image-sm) {
  --card-layers-offset-y: 1.6875rem;
}
.card-layers-vertical:has(.card-tile-image-xs) {
  --card-layers-offset-y: 1.0625rem;
}

.card-layers-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 200;
  pointer-events: none;
}

/**
 * Les pastilles de coût de mana.
 *
 * Chaque symbole est une classe, utilisable seule : `mnv-mana mnv-mana-green`,
 * `mnv-mana mnv-mana-2`. Le composant `mana_cost` les pose, mais un gabarit qui
 * a un symbole en tête et rien d'autre peut les écrire à la main.
 *
 * Deux couches, dans cet ordre :
 *
 * 1. **une pastille dessinée** — un cercle coloré portant le caractère. Elle
 *    vaut pour tout symbole, y compris ceux dont nous n'avons pas l'image ;
 * 2. **l'image officielle** par-dessus, quand elle existe, posée en
 *    `background-image` sur la même classe.
 *
 * La seconde couche recouvre la première sans la remplacer : un symbole sans
 * image reste lisible, et une image qui ne charge pas laisse une pastille juste.
 * C'est ce qui permet de n'avoir que trente-quatre fichiers pour un vocabulaire
 * qui compte aussi `{16}` et `{Y}`.
 *
 * Tout est en `em` : la taille d'une pastille suit celle du texte qui l'entoure.
 */
.mnv-mana-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  white-space: nowrap;
}
.mnv-mana-cost-sm {
  font-size: 0.75em;
}
.mnv-mana-cost-lg {
  font-size: 1.5em;
}

.mnv-mana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1.3em / var(--mnv-mana-glyph-scale, 1));
  height: calc(1.3em / var(--mnv-mana-glyph-scale, 1));
  border-radius: 50%;
  background: #ccc2c0;
  color: #0d0d0d;
  font-size: calc(0.85em * var(--mnv-mana-glyph-scale, 1));
  font-weight: 700;
  line-height: 1;
  text-align: center;
  user-select: none;
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
}

.mnv-mana-white {
  background: #fffbd5;
}

.mnv-mana-blue {
  background: #aae0fa;
}

.mnv-mana-black {
  background: #cbc2bf;
}

.mnv-mana-red {
  background: #f9aa8f;
}

.mnv-mana-green {
  background: #9bd3ae;
}

/**
 * Un hybride se paie de deux façons : la pastille est coupée en deux, la
 * première moitié en haut à gauche. Les deux lettres tiennent en plus petit.
 */
.mnv-mana-hybrid {
  --mnv-mana-glyph-scale: 0.7;
  letter-spacing: -0.05em;
}

.mnv-mana-white-blue {
  background: linear-gradient(135deg, #fffbd5 50%, #aae0fa 50%);
}

.mnv-mana-white-black {
  background: linear-gradient(135deg, #fffbd5 50%, #cbc2bf 50%);
}

.mnv-mana-white-red {
  background: linear-gradient(135deg, #fffbd5 50%, #f9aa8f 50%);
}

.mnv-mana-white-green {
  background: linear-gradient(135deg, #fffbd5 50%, #9bd3ae 50%);
}

/**
 * Un hybride générique — `{2/R}` — se paie en deux manas quelconques ou en
 * une couleur.
 */
.mnv-mana-2-white {
  background: linear-gradient(135deg, #ccc2c0 50%, #fffbd5 50%);
}

.mnv-mana-colorless-white {
  background: linear-gradient(135deg, #ccc2c0 50%, #fffbd5 50%);
}

.mnv-mana-blue-white {
  background: linear-gradient(135deg, #aae0fa 50%, #fffbd5 50%);
}

.mnv-mana-blue-black {
  background: linear-gradient(135deg, #aae0fa 50%, #cbc2bf 50%);
}

.mnv-mana-blue-red {
  background: linear-gradient(135deg, #aae0fa 50%, #f9aa8f 50%);
}

.mnv-mana-blue-green {
  background: linear-gradient(135deg, #aae0fa 50%, #9bd3ae 50%);
}

/**
 * Un hybride générique — `{2/R}` — se paie en deux manas quelconques ou en
 * une couleur.
 */
.mnv-mana-2-blue {
  background: linear-gradient(135deg, #ccc2c0 50%, #aae0fa 50%);
}

.mnv-mana-colorless-blue {
  background: linear-gradient(135deg, #ccc2c0 50%, #aae0fa 50%);
}

.mnv-mana-black-white {
  background: linear-gradient(135deg, #cbc2bf 50%, #fffbd5 50%);
}

.mnv-mana-black-blue {
  background: linear-gradient(135deg, #cbc2bf 50%, #aae0fa 50%);
}

.mnv-mana-black-red {
  background: linear-gradient(135deg, #cbc2bf 50%, #f9aa8f 50%);
}

.mnv-mana-black-green {
  background: linear-gradient(135deg, #cbc2bf 50%, #9bd3ae 50%);
}

/**
 * Un hybride générique — `{2/R}` — se paie en deux manas quelconques ou en
 * une couleur.
 */
.mnv-mana-2-black {
  background: linear-gradient(135deg, #ccc2c0 50%, #cbc2bf 50%);
}

.mnv-mana-colorless-black {
  background: linear-gradient(135deg, #ccc2c0 50%, #cbc2bf 50%);
}

.mnv-mana-red-white {
  background: linear-gradient(135deg, #f9aa8f 50%, #fffbd5 50%);
}

.mnv-mana-red-blue {
  background: linear-gradient(135deg, #f9aa8f 50%, #aae0fa 50%);
}

.mnv-mana-red-black {
  background: linear-gradient(135deg, #f9aa8f 50%, #cbc2bf 50%);
}

.mnv-mana-red-green {
  background: linear-gradient(135deg, #f9aa8f 50%, #9bd3ae 50%);
}

/**
 * Un hybride générique — `{2/R}` — se paie en deux manas quelconques ou en
 * une couleur.
 */
.mnv-mana-2-red {
  background: linear-gradient(135deg, #ccc2c0 50%, #f9aa8f 50%);
}

.mnv-mana-colorless-red {
  background: linear-gradient(135deg, #ccc2c0 50%, #f9aa8f 50%);
}

.mnv-mana-green-white {
  background: linear-gradient(135deg, #9bd3ae 50%, #fffbd5 50%);
}

.mnv-mana-green-blue {
  background: linear-gradient(135deg, #9bd3ae 50%, #aae0fa 50%);
}

.mnv-mana-green-black {
  background: linear-gradient(135deg, #9bd3ae 50%, #cbc2bf 50%);
}

.mnv-mana-green-red {
  background: linear-gradient(135deg, #9bd3ae 50%, #f9aa8f 50%);
}

/**
 * Un hybride générique — `{2/R}` — se paie en deux manas quelconques ou en
 * une couleur.
 */
.mnv-mana-2-green {
  background: linear-gradient(135deg, #ccc2c0 50%, #9bd3ae 50%);
}

.mnv-mana-colorless-green {
  background: linear-gradient(135deg, #ccc2c0 50%, #9bd3ae 50%);
}

/**
 * Le phi du mana phyrexian : la couleur est déjà posée par la classe de
 * couleur, il ne reste qu'à marquer qu'il se paie aussi en points de vie.
 */
.mnv-mana-phyrexian {
  --mnv-mana-glyph-scale: 1.12;
  font-family: serif;
}

.mnv-mana-colorless {
  background: #ccc2c0;
}

.mnv-mana-half {
  clip-path: inset(0 50% 0 0);
  margin-right: calc(-0.65em / var(--mnv-mana-glyph-scale, 1));
}

.mnv-mana-snow {
  background: #ccc2c0;
  font-family: serif;
}

.mnv-mana-variable {
  background: #ccc2c0;
  font-style: italic;
}

.mnv-mana-x {
  background: #ccc2c0;
}

.mnv-mana-y {
  background: #ccc2c0;
}

.mnv-mana-z {
  background: #ccc2c0;
}

/**
 * Une classe par valeur générique. Elles se ressemblent toutes aujourd'hui —
 * c'est le point : `mnv-mana-2` existe pour qu'un thème, ou un vectoriel, ait
 * où se poser.
 */
.mnv-mana-0 {
  background: #ccc2c0;
}

.mnv-mana-1 {
  background: #ccc2c0;
}

.mnv-mana-2 {
  background: #ccc2c0;
}

.mnv-mana-3 {
  background: #ccc2c0;
}

.mnv-mana-4 {
  background: #ccc2c0;
}

.mnv-mana-5 {
  background: #ccc2c0;
}

.mnv-mana-6 {
  background: #ccc2c0;
}

.mnv-mana-7 {
  background: #ccc2c0;
}

.mnv-mana-8 {
  background: #ccc2c0;
}

.mnv-mana-9 {
  background: #ccc2c0;
}

.mnv-mana-10 {
  background: #ccc2c0;
}

.mnv-mana-11 {
  background: #ccc2c0;
}

.mnv-mana-12 {
  background: #ccc2c0;
}

.mnv-mana-13 {
  background: #ccc2c0;
}

.mnv-mana-14 {
  background: #ccc2c0;
}

.mnv-mana-15 {
  background: #ccc2c0;
}

.mnv-mana-16 {
  background: #ccc2c0;
}

.mnv-mana-17 {
  background: #ccc2c0;
}

.mnv-mana-18 {
  background: #ccc2c0;
}

.mnv-mana-19 {
  background: #ccc2c0;
}

.mnv-mana-20 {
  background: #ccc2c0;
}

.mnv-mana-generic {
  background: #ccc2c0;
}

.mnv-mana-long {
  --mnv-mana-glyph-scale: 0.7;
  letter-spacing: -0.05em;
}

.mnv-mana-tap,
.mnv-mana-untap,
.mnv-mana-ticket,
.mnv-mana-pawprint,
.mnv-mana-chaos {
  --mnv-mana-glyph-scale: 1.12;
  background: #ccc2c0;
}

.mnv-mana-energy {
  background: #3b3b3b;
  color: #f2c94c;
}

.mnv-rule-text .mnv-mana-cost,
.mnv-rule-text > .mnv-mana {
  position: relative;
  top: -0.08em;
  vertical-align: middle;
}

/**
 * ---------------------------------------------------------------------------
 * Les images officielles, posées par-dessus les pastilles dessinées.
 *
 * Le caractère passe en transparent plutôt que d'être retiré : il reste dans le
 * HTML, donc lisible sans feuille de style et copiable, mais l'image le
 * remplace à l'œil. Le relief vient de l'image, l'ombre portée s'efface.
 * ---------------------------------------------------------------------------
 */
/**
 * Les paires sont canoniques — `WU` et non `UW`. Une liste collée peut écrire
 * l'une ou l'autre, les deux classes existent, une seule image les sert.
 */
/**
 * Les valeurs génériques dont nous avons l'image. Au-delà, la pastille dessinée
 * fait le travail — et le fait bien, puisqu'elle porte le nombre.
 */
.mnv-mana-white {
  background-image: url(/assets/images/W.cb245729.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-2-white {
  background-image: url(/assets/images/2W.e741157c.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

/**
 * Le phyrexian porte sa couleur *et* son phi : il lui faut les deux classes
 * pour être reconnu, et l'image du phi doit passer devant celle de la
 * couleur seule.
 */
.mnv-mana-phyrexian.mnv-mana-white {
  background-image: url(/assets/images/WP.0dfc5b81.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-blue {
  background-image: url(/assets/images/U.d0f5b725.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-2-blue {
  background-image: url(/assets/images/2U.252cbbb1.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

/**
 * Le phyrexian porte sa couleur *et* son phi : il lui faut les deux classes
 * pour être reconnu, et l'image du phi doit passer devant celle de la
 * couleur seule.
 */
.mnv-mana-phyrexian.mnv-mana-blue {
  background-image: url(/assets/images/UP.5880b5af.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-black {
  background-image: url(/assets/images/B.bd2b643d.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-2-black {
  background-image: url(/assets/images/2B.e0dfc1eb.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

/**
 * Le phyrexian porte sa couleur *et* son phi : il lui faut les deux classes
 * pour être reconnu, et l'image du phi doit passer devant celle de la
 * couleur seule.
 */
.mnv-mana-phyrexian.mnv-mana-black {
  background-image: url(/assets/images/BP.2d0249a4.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-red {
  background-image: url(/assets/images/R.e70eaf3f.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-2-red {
  background-image: url(/assets/images/2R.9e7cdac9.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

/**
 * Le phyrexian porte sa couleur *et* son phi : il lui faut les deux classes
 * pour être reconnu, et l'image du phi doit passer devant celle de la
 * couleur seule.
 */
.mnv-mana-phyrexian.mnv-mana-red {
  background-image: url(/assets/images/RP.8cc44d85.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-green {
  background-image: url(/assets/images/G.4ee55060.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-2-green {
  background-image: url(/assets/images/2G.e1488ba8.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

/**
 * Le phyrexian porte sa couleur *et* son phi : il lui faut les deux classes
 * pour être reconnu, et l'image du phi doit passer devant celle de la
 * couleur seule.
 */
.mnv-mana-phyrexian.mnv-mana-green {
  background-image: url(/assets/images/GP.efcbf28b.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-white-blue,
.mnv-mana-blue-white {
  background-image: url(/assets/images/WU.b056e9af.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-white-black,
.mnv-mana-black-white {
  background-image: url(/assets/images/WB.b237c820.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-blue-black,
.mnv-mana-black-blue {
  background-image: url(/assets/images/UB.12bca922.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-blue-red,
.mnv-mana-red-blue {
  background-image: url(/assets/images/UR.251756c2.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-black-red,
.mnv-mana-red-black {
  background-image: url(/assets/images/BR.9563b535.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-black-green,
.mnv-mana-green-black {
  background-image: url(/assets/images/BG.7957f0ea.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-red-green,
.mnv-mana-green-red {
  background-image: url(/assets/images/RG.abf2a097.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-red-white,
.mnv-mana-white-red {
  background-image: url(/assets/images/RW.2a9da3fc.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-green-white,
.mnv-mana-white-green {
  background-image: url(/assets/images/GW.3a36ce00.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-green-blue,
.mnv-mana-blue-green {
  background-image: url(/assets/images/GU.e2867beb.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-0 {
  background-image: url(/assets/images/0.bd3c92ef.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-1 {
  background-image: url(/assets/images/1.359827e3.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-2 {
  background-image: url(/assets/images/2.bc9ec4dd.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-3 {
  background-image: url(/assets/images/3.24766b60.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-4 {
  background-image: url(/assets/images/4.f43a79e8.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-colorless {
  background-image: url(/assets/images/C.27926ad9.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-snow {
  background-image: url(/assets/images/S.64fe3576.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-x {
  background-image: url(/assets/images/X.5df792f4.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-z {
  background-image: url(/assets/images/Z.0da82866.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
  color: transparent;
}

.mnv-mana-phyrexian.mnv-mana-white-blue {
  background: linear-gradient(135deg, #fffbd5 50%, #aae0fa 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-white-black {
  background: linear-gradient(135deg, #fffbd5 50%, #cbc2bf 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-white-red {
  background: linear-gradient(135deg, #fffbd5 50%, #f9aa8f 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-white-green {
  background: linear-gradient(135deg, #fffbd5 50%, #9bd3ae 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-blue-white {
  background: linear-gradient(135deg, #aae0fa 50%, #fffbd5 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-blue-black {
  background: linear-gradient(135deg, #aae0fa 50%, #cbc2bf 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-blue-red {
  background: linear-gradient(135deg, #aae0fa 50%, #f9aa8f 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-blue-green {
  background: linear-gradient(135deg, #aae0fa 50%, #9bd3ae 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-black-white {
  background: linear-gradient(135deg, #cbc2bf 50%, #fffbd5 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-black-blue {
  background: linear-gradient(135deg, #cbc2bf 50%, #aae0fa 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-black-red {
  background: linear-gradient(135deg, #cbc2bf 50%, #f9aa8f 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-black-green {
  background: linear-gradient(135deg, #cbc2bf 50%, #9bd3ae 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-red-white {
  background: linear-gradient(135deg, #f9aa8f 50%, #fffbd5 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-red-blue {
  background: linear-gradient(135deg, #f9aa8f 50%, #aae0fa 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-red-black {
  background: linear-gradient(135deg, #f9aa8f 50%, #cbc2bf 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-red-green {
  background: linear-gradient(135deg, #f9aa8f 50%, #9bd3ae 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-green-white {
  background: linear-gradient(135deg, #9bd3ae 50%, #fffbd5 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-green-blue {
  background: linear-gradient(135deg, #9bd3ae 50%, #aae0fa 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-green-black {
  background: linear-gradient(135deg, #9bd3ae 50%, #cbc2bf 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-green-red {
  background: linear-gradient(135deg, #9bd3ae 50%, #f9aa8f 50%);
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

.mnv-mana-phyrexian.mnv-mana-colorless {
  background: #ccc2c0;
  box-shadow: inset -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.25);
  color: #0d0d0d;
}

/**
 * Une carte qu'on regarde, et qu'on manipule.
 *
 * Le mouvement est piloté par `card-viewer.js`, qui n'écrit que trois nombres :
 * l'inclinaison sur deux axes et l'angle de retournement. Tout le reste — la
 * perspective, l'épaisseur, le reflet — est ici, et ne bouge pas.
 *
 * Sans JavaScript les variables gardent leur valeur de repos : la carte
 * s'affiche à plat, et le bouton de retournement ne fait rien. Rien n'est
 * illisible pour autant.
 */
.mnv-card-viewer {
  --mnv-card-viewer-width: 20rem;
  --mnv-card-viewer-tilt-x: 0deg;
  --mnv-card-viewer-tilt-y: 0deg;
  --mnv-card-viewer-flip: 0deg;
  --mnv-card-viewer-shine-x: 50%;
  --mnv-card-viewer-shine-y: 50%;
  --mnv-card-viewer-shine-opacity: 0;
  --mnv-card-viewer-tool: 2.125rem;
  --mnv-card-viewer-tab: calc(var(--mnv-card-viewer-tool) + 0.625rem);
  position: relative;
  z-index: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--mnv-card-viewer-tab);
}

/**
 * La perspective vit sur la scène et non sur la carte : posée sur l'élément qui
 * tourne, elle tournerait avec lui et l'inclinaison n'aurait plus de fuite.
 */
.mnv-card-viewer-stage {
  perspective: 1200px;
  width: var(--mnv-card-viewer-width);
  max-width: 100%;
  /**
   * Sur mobile, incliner se fait au doigt : le geste appartient à la carte,
   * pas au défilement de la page.
   */
  touch-action: none;
}

.mnv-card-viewer-card {
  position: relative;
  width: 100%;
  aspect-ratio: 63/88;
  transform-style: preserve-3d;
  transform: rotateX(var(--mnv-card-viewer-tilt-x)) rotateY(calc(var(--mnv-card-viewer-tilt-y) + var(--mnv-card-viewer-flip)));
}

.mnv-card-viewer-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5%/3.6%;
  backface-visibility: hidden;
  box-shadow: var(--mnv-shadow-card);
}
.mnv-card-viewer-face > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mnv-card-viewer-face-verso {
  transform: rotateY(180deg);
}

/**
 * Le reflet suit le curseur : c'est lui qui donne le relief, l'inclinaison
 * seule reste plate.
 */
.mnv-card-viewer-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--mnv-card-viewer-shine-opacity);
  background: radial-gradient(circle at var(--mnv-card-viewer-shine-x) var(--mnv-card-viewer-shine-y), var(--mnv-shine), var(--mnv-shine-fade) 60%);
}

/**
 * Le dos d'une carte qui n'a pas de verso. Dessiné plutôt qu'illustré : le vrai
 * dos appartient à son éditeur, et un aplat suffit à dire « c'est retourné ».
 */
.mnv-card-viewer-cardback {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mnv-cardback-surface);
  border: 0.6rem solid var(--mnv-cardback-edge);
  border-radius: inherit;
}
.mnv-card-viewer-cardback::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 0.15rem solid var(--mnv-cardback-ring);
  border-radius: 50%;
}

.mnv-card-viewer-tab {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: calc(var(--mnv-card-viewer-tab) - var(--mnv-card-viewer-tool) - 5px + 90px) 5px 5px;
  background: var(--mnv-surface-raised);
  border: 1px solid var(--mnv-border);
  border-top: 0;
  border-radius: 0 0 13px 13px;
  box-shadow: var(--mnv-shadow-tab);
}

.mnv-card-viewer-tool {
  display: grid;
  place-items: center;
  width: var(--mnv-card-viewer-tool);
  height: var(--mnv-card-viewer-tool);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mnv-text);
  font-size: calc(var(--mnv-card-viewer-tool) * 0.5);
  cursor: pointer;
  transition: background 0.15s;
}
.mnv-card-viewer-tool:hover {
  background: var(--mnv-fill-selected);
}
.mnv-card-viewer-tool:focus-visible {
  outline: 2px solid var(--mnv-focus);
}
.mnv-card-viewer-tool[aria-pressed=true] {
  background: var(--mnv-accent-soft);
  color: var(--mnv-accent-text);
}

/**
 * Qui demande moins de mouvement n'en reçoit aucun : le JavaScript s'en tient
 * au retournement, et la carte ne suit plus le curseur.
 */
@media (prefers-reduced-motion: reduce) {
  .mnv-card-viewer-shine {
    display: none;
  }
}
.mnv-card-modal {
  background: var(--mnv-bg-veil);
  backdrop-filter: blur(3px);
  color: var(--mnv-text);
}
.mnv-card-modal .modal-dialog {
  height: auto;
  min-height: 100%;
}
.mnv-card-modal .modal-content {
  position: relative;
  height: auto;
  min-height: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  backdrop-filter: none;
}

.mnv-card-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--mnv-border-strong);
  border-radius: 50%;
  background: var(--mnv-surface-glass-top);
  color: var(--mnv-text);
}
.mnv-card-modal-close:hover {
  background: var(--mnv-fill-selected);
}
.mnv-card-modal-close:focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: 2px;
}

.mnv-card-modal-picture,
.mnv-card-modal-fragment,
.mnv-card-modal-loading {
  display: none;
}

.mnv-card-modal[data-card-modal-mode=picture] .mnv-card-modal-picture,
.mnv-card-modal[data-card-modal-mode=loading] .mnv-card-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 3.5rem 1rem 1rem;
}

.mnv-card-modal[data-card-modal-navigating] .mnv-card-modal-loading {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mnv-bg-veil-light);
  pointer-events: none;
  animation: mnv-card-modal-appear 0.2s ease-out 0.15s both;
}

@keyframes mnv-card-modal-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mnv-card-modal[data-card-modal-mode=fragment] .mnv-card-modal-fragment {
  display: block;
}

.mnv-card-modal {
  --mnv-card-modal-picture-width: min(clamp(200px, calc((100dvh - 160px) * 0.716), 420px), 80vw);
}

.mnv-card-modal-picture img {
  width: var(--mnv-card-modal-picture-width);
  height: auto;
  margin-bottom: 2.75rem;
}

.mnv-card-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 3.5rem 1rem 1rem;
}
.mnv-card-picture .mnv-card-viewer {
  --mnv-card-viewer-width: var(--mnv-card-modal-picture-width);
}

.mnv-card-detailed {
  --mnv-card-detailed-card-width: clamp(240px, calc((100dvh - 140px) * 0.716), 380px);
  --mnv-card-detailed-card-height: calc(var(--mnv-card-detailed-card-width) * 88 / 63);
  --mnv-card-detailed-panel-width: min(700px, calc(100vw - var(--mnv-card-detailed-card-width) - 200px));
  --mnv-card-detailed-tuck: 56px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 100dvh;
  padding: 64px 16px 24px;
  overflow: hidden;
  font-size: 14px;
}

.mnv-card-detailed-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 55% 60% at 40% 50%, #000 20%, transparent 75%);
}
.mnv-card-detailed-ambient img {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(80px);
  opacity: 0.22;
}

.mnv-card-detailed-compo {
  position: relative;
  display: grid;
  grid-template-columns: auto var(--mnv-card-detailed-card-width) var(--mnv-card-detailed-panel-width) auto;
  grid-template-areas: "prev card panel next";
  column-gap: 16px;
  align-items: start;
}

.mnv-card-detailed-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: calc(var(--mnv-card-detailed-card-height) / 2 - 22px);
  border: 1px solid var(--mnv-border-strong);
  border-radius: 50%;
  background: var(--mnv-surface-glass-top);
  color: var(--mnv-text);
  font-size: 17px;
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
}
.mnv-card-detailed-nav:hover:not(:disabled) {
  background: var(--mnv-fill-selected);
}
.mnv-card-detailed-nav:disabled {
  opacity: 0.18;
  cursor: default;
}
.mnv-card-detailed-nav:focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: 3px;
}
.mnv-card-detailed-nav[hidden] {
  display: none;
}

.mnv-card-detailed-nav-prev {
  grid-area: prev;
}
.mnv-card-detailed-nav-prev:hover:not(:disabled) {
  transform: translateX(-2px);
}

.mnv-card-detailed-nav-next {
  grid-area: next;
}
.mnv-card-detailed-nav-next:hover:not(:disabled) {
  transform: translateX(2px);
}

.mnv-card-detailed-counter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--mnv-text-muted);
  font-size: 12.5px;
}
.mnv-card-detailed-counter kbd {
  padding: 0.1em 0.4em;
  background: var(--mnv-fill-hover);
  border: 1px solid var(--mnv-border-strong);
  border-radius: 4px;
  color: var(--mnv-text-soft);
  font-size: 0.9em;
}
.mnv-card-detailed-counter [hidden] {
  display: none;
}

.mnv-card-detailed-position {
  color: var(--mnv-text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.mnv-card-detailed-dots {
  display: flex;
  align-items: center;
}
.mnv-card-detailed-dots button {
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.mnv-card-detailed-dots button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mnv-border-strong);
  transition: background 0.2s, width 0.2s, height 0.2s;
}
.mnv-card-detailed-dots button:hover::before {
  background: var(--mnv-text-muted);
}
.mnv-card-detailed-dots button:focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: 0;
}
.mnv-card-detailed-dots button.is-continued::before {
  width: 4px;
  height: 4px;
}
.mnv-card-detailed-dots button.is-current::before {
  width: 16px;
  height: 6px;
  border-radius: 3px;
  background: var(--mnv-text-strong);
}

.mnv-card-detailed-keys {
  display: flex;
  gap: 12px;
}

.mnv-card-detailed-card {
  position: relative;
  z-index: 2;
  grid-area: card;
  animation: mnv-card-detailed-rise 0.35s ease-out both;
}
.mnv-card-detailed-card .mnv-card-viewer {
  --mnv-card-viewer-width: var(--mnv-card-detailed-card-width);
  display: flex;
}

.mnv-card-detailed-scryfall {
  position: absolute;
  z-index: -1;
  top: -50px;
  right: 12%;
  display: flex;
  padding: 6px 6px 92px;
  background: var(--mnv-surface-raised);
  border: 1px solid var(--mnv-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: var(--mnv-shadow-tab);
  transition: transform 0.2s ease-out;
}
.mnv-card-detailed-scryfall:hover, .mnv-card-detailed-scryfall:focus-within {
  transform: translateY(-6px);
}

.mnv-card-detailed-scryfall-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background 0.15s;
}
.mnv-card-detailed-scryfall-link:hover {
  background: var(--mnv-fill-selected);
}
.mnv-card-detailed-scryfall-link:focus-visible {
  outline: 2px solid var(--mnv-focus);
}
.mnv-card-detailed-scryfall-link img {
  display: block;
}

.mnv-card-detailed-panel {
  position: relative;
  z-index: 1;
  grid-area: panel;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: calc(var(--mnv-card-detailed-card-height) * 0.96);
  margin-top: calc(var(--mnv-card-detailed-card-height) * 0.02);
  margin-left: calc(-1 * (var(--mnv-card-detailed-tuck) + 16px));
  padding: 24px 24px 20px calc(var(--mnv-card-detailed-tuck) + 16px + 24px);
  background: linear-gradient(180deg, var(--mnv-surface-glass-top) 0%, var(--mnv-surface-glass) 30%);
  backdrop-filter: blur(14px);
  border: 1px solid var(--mnv-border-subtle);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  box-shadow: var(--mnv-shadow-panel);
  animation: mnv-card-detailed-slide-out 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
  container-type: inline-size;
}

.mnv-card-detailed-columns {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 24px;
  min-height: 0;
}

.mnv-card-detailed-info,
.mnv-card-detailed-printings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.mnv-card-detailed-printings {
  padding-left: 24px;
  border-left: 1px solid var(--mnv-border-subtle);
}

.mnv-card-detailed-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--mnv-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mnv-card-detailed-owned {
  color: var(--mnv-success);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.mnv-card-detailed-owned.is-none {
  color: var(--mnv-text-muted);
}

.mnv-card-detailed-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.mnv-card-detailed-flag {
  position: relative;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  opacity: 0.45;
  filter: saturate(0.5);
  transition: opacity 0.15s;
}
.mnv-card-detailed-flag:hover {
  opacity: 0.9;
  filter: none;
}
.mnv-card-detailed-flag[aria-current=true] {
  background: var(--mnv-accent-soft);
  border-color: var(--mnv-accent-border);
  opacity: 1;
  filter: none;
}
.mnv-card-detailed-flag:focus-visible {
  outline: 2px solid var(--mnv-focus);
  opacity: 1;
}
.mnv-card-detailed-flag.is-owned::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mnv-success-dot);
  box-shadow: 0 0 0 2px var(--mnv-surface);
}

.mnv-card-detailed-editions {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.mnv-card-detailed-edition-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-content: start;
  gap: 2px 0;
  min-height: 0;
  margin: 0;
  padding: 0 0 14px;
  overflow-y: auto;
  list-style: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  scrollbar-width: thin;
  scrollbar-color: var(--mnv-scrollbar) transparent;
}
.mnv-card-detailed-edition-list li {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.mnv-card-detailed-edition {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--mnv-text-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.mnv-card-detailed-edition:hover {
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-strong);
}
.mnv-card-detailed-edition:focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: -2px;
}
.mnv-card-detailed-edition.is-current {
  background: var(--mnv-accent-soft);
  color: var(--mnv-text-strong);
}
.mnv-card-detailed-edition.is-current .mnv-card-detailed-edition-name {
  font-weight: 600;
}
.mnv-card-detailed-edition .mnv-card-set {
  justify-self: start;
  font-size: 12px;
}

.mnv-card-detailed-edition-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mnv-card-detailed-edition-date {
  color: var(--mnv-text-muted);
}

.mnv-card-detailed-edition-pager {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 6px;
  color: var(--mnv-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mnv-card-detailed-edition-pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mnv-text-soft);
}
.mnv-card-detailed-edition-pager button:hover:not(:disabled) {
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-strong);
}
.mnv-card-detailed-edition-pager button:focus-visible {
  outline: 2px solid var(--mnv-focus);
}
.mnv-card-detailed-edition-pager button:disabled {
  opacity: 0.35;
}

@container (max-width: 540px) {
  .mnv-card-detailed-columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }
  .mnv-card-detailed-info {
    gap: 8px;
  }
  .mnv-card-detailed-faces {
    flex: none;
    max-height: 10.5rem;
  }
  .mnv-card-detailed-printings {
    gap: 10px;
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--mnv-border-subtle);
    border-left: 0;
  }
  .mnv-card-detailed-languages {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }
  .mnv-card-detailed-languages .mnv-card-detailed-section-title {
    order: 2;
    margin: 0;
  }
  .mnv-card-detailed-languages .mnv-card-detailed-section-label {
    display: none;
  }
}
.mnv-card-detailed-faces {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mnv-scrollbar) transparent;
}

.mnv-card-detailed-face {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mnv-card-detailed-face:only-child {
  flex: 1 0 auto;
}
.mnv-card-detailed-face:only-child .mnv-card-detailed-rules {
  flex: 1 0 auto;
}

.mnv-card-detailed-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mnv-card-detailed-head .mnv-mana-cost {
  padding-top: 0.15rem;
  font-size: 1.25rem;
}

.mnv-card-detailed-name {
  flex: 1;
  margin: 0;
  color: var(--mnv-text-strong);
  font-size: 1.55rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mnv-card-detailed-type {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mnv-text-secondary);
}

.mnv-card-detailed-type-line {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mnv-card-detailed-text-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  background: var(--mnv-fill-hover);
  border: 1px solid var(--mnv-border-subtle);
  border-radius: 999px;
}
.mnv-card-detailed-text-switch button {
  padding: 0.15rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--mnv-text-secondary);
  font: inherit;
  font-size: 11.5px;
}
.mnv-card-detailed-text-switch button[aria-pressed=true] {
  background: var(--mnv-fill-selected);
  color: var(--mnv-text-strong);
}
.mnv-card-detailed-text-switch button:focus-visible {
  outline: 2px solid var(--mnv-focus);
}

.mnv-card-detailed-faces[hidden] {
  display: none;
}

.mnv-card-detailed-rules {
  display: flow-root;
  padding: 14px 16px;
  background: var(--mnv-surface-sunken);
  border-radius: 12px;
  color: var(--mnv-text);
  font-size: 14.5px;
  line-height: 1.65;
}
.mnv-card-detailed-rules p {
  margin: 0;
}

.mnv-card-detailed-rules .mnv-card-detailed-flavor {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mnv-border-subtle);
  color: var(--mnv-text-secondary);
  font-family: Georgia, serif;
  font-size: 15px;
  font-style: italic;
}

.mnv-card-detailed-stat {
  float: right;
  margin-top: 8px;
  padding: 1px 10px;
  background: var(--mnv-fill-active);
  border: 1px solid var(--mnv-border-strong);
  border-radius: 6px;
  color: var(--mnv-text-strong);
  font-size: 13px;
  font-weight: 700;
}

.mnv-deck-add-card {
  position: relative;
  flex: none;
}

.mnv-deck-add-card-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--mnv-text);
  font-size: 17px;
  background: var(--mnv-fill-hover);
  border: 1px solid var(--mnv-border-strong);
  border-radius: 10px;
  transition: background 0.15s;
}
.mnv-deck-add-card-toggle:hover, .mnv-deck-add-card-toggle[aria-expanded=true] {
  background: var(--mnv-fill-active);
}
.mnv-deck-add-card-toggle:focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: 2px;
}

.mnv-deck-add-card-menu,
.mnv-deck-add-card-message {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 4;
}

.mnv-deck-add-card-menu {
  max-height: 360px;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: var(--mnv-scrollbar) transparent;
  list-style: none;
  background: var(--mnv-surface-overlay);
  border: 1px solid var(--mnv-border);
  border-radius: 10px;
  box-shadow: var(--mnv-shadow-float);
}
.mnv-deck-add-card-menu[hidden] {
  display: none;
}
.mnv-deck-add-card-menu ul {
  list-style: none;
}
.mnv-deck-add-card-menu button {
  color: var(--mnv-text);
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
}
.mnv-deck-add-card-menu button:hover {
  background: var(--mnv-fill-active);
}
.mnv-deck-add-card-menu button:focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: -2px;
}
.mnv-deck-add-card-menu button:disabled {
  opacity: 0.55;
}
.mnv-deck-add-card-menu button.is-pending {
  opacity: 1;
}

.mnv-deck-add-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 5px 8px 8px;
  color: var(--mnv-text);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--mnv-border);
}

.mnv-deck-add-card-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mnv-deck-add-card-menu .mnv-deck-add-card-target {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnv-deck-add-card-menu .mnv-deck-add-card-sections-toggle {
  flex: none;
  width: 30px;
  color: var(--mnv-text-muted);
  text-align: center;
}
.mnv-deck-add-card-menu .mnv-deck-add-card-sections-toggle .bi {
  display: inline-block;
  transition: transform 0.15s;
}
.mnv-deck-add-card-menu .mnv-deck-add-card-sections-toggle[aria-expanded=true] .bi {
  transform: rotate(90deg);
}

.mnv-deck-add-card-sections {
  margin: 0 0 4px 14px;
  padding: 0 0 0 8px;
  border-left: 1px solid var(--mnv-border);
}
.mnv-deck-add-card-sections button {
  width: 100%;
}
.mnv-deck-add-card-menu .mnv-deck-add-card-sections button {
  color: var(--mnv-text-secondary);
  font-size: 12.5px;
  padding: 5px 8px;
}

.mnv-deck-add-card-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--mnv-border);
}

.mnv-deck-add-card-menu .mnv-deck-add-card-new {
  width: 100%;
  color: var(--mnv-accent);
}

.mnv-deck-add-card-new-form {
  display: grid;
  gap: 6px;
  padding: 6px 8px 4px;
}
.mnv-deck-add-card-new-form label {
  color: var(--mnv-text-muted);
  font-size: 11px;
}
.mnv-deck-add-card-new-form input {
  padding: 6px 8px;
  color: var(--mnv-text);
  font-size: 13px;
  background: var(--mnv-field);
  border: 1px solid var(--mnv-border-strong);
  border-radius: 7px;
}
.mnv-deck-add-card-new-form input:focus {
  outline: 2px solid var(--mnv-focus);
  outline-offset: 0;
}

.mnv-deck-add-card-new-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.mnv-deck-add-card-menu .mnv-deck-add-card-new-actions button {
  width: auto;
  padding: 5px 10px;
  font-size: 12.5px;
}
.mnv-deck-add-card-menu .mnv-deck-add-card-new-actions .is-primary {
  color: var(--mnv-on-accent);
  background: var(--mnv-accent-solid);
}
.mnv-deck-add-card-menu .mnv-deck-add-card-new-actions .is-primary:hover {
  background: var(--mnv-accent-solid-hover);
}

.mnv-deck-add-card-message {
  padding: 8px 12px;
  color: var(--mnv-success-ink);
  font-size: 12.5px;
  background: var(--mnv-success-bg);
  border: 1px solid var(--mnv-success-border);
  border-radius: 10px;
  box-shadow: var(--mnv-shadow-float);
}
.mnv-deck-add-card-message[hidden] {
  display: none;
}
.mnv-deck-add-card-message.is-refused {
  color: var(--mnv-warning-ink);
  background: var(--mnv-warning-bg);
  border-color: var(--mnv-warning-border);
}
.mnv-deck-add-card-message a {
  color: inherit;
  font-weight: 600;
}

.mnv-card-detailed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 0 4px;
  color: var(--mnv-text-secondary);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.mnv-card-detailed-line .mnv-card-prices {
  margin-left: auto;
}

.mnv-card-detailed-line .mnv-card-prices-regular {
  color: var(--mnv-text);
  font-weight: 600;
}

.mnv-card-detailed-line .mnv-card-prices-foil {
  color: var(--mnv-text-secondary);
}

.mnv-card-detailed-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mnv-text-faint);
}

@media (max-width: 767.98px) {
  .mnv-card-detailed-ambient {
    mask-image: radial-gradient(ellipse 70% 40% at 50% 30%, #000 20%, transparent 75%);
  }
  .mnv-card-detailed {
    --mnv-card-detailed-card-width: min(calc(100vw - 124px), 300px);
    --mnv-card-detailed-tuck: 40px;
    justify-content: flex-start;
    gap: 0;
    padding: 58px 12px 50dvh;
  }
  .mnv-card-detailed-compo {
    grid-template-columns: 1fr var(--mnv-card-detailed-card-width) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "prev card next" "panel panel panel";
    column-gap: 10px;
    width: 100%;
  }
  .mnv-card-detailed-nav {
    width: 38px;
    height: 38px;
    margin-top: calc(var(--mnv-card-detailed-card-height) / 2 - 19px);
    font-size: 15px;
  }
  .mnv-card-detailed-nav-prev {
    justify-self: end;
  }
  .mnv-card-detailed-nav-next {
    justify-self: start;
  }
  .mnv-card-detailed-counter {
    position: absolute;
    top: 20px;
    left: 16px;
  }
  .mnv-card-detailed-keys {
    display: none;
  }
  .mnv-card-detailed-panel {
    width: 100%;
    height: auto;
    touch-action: pan-y;
    margin: calc(-1 * (var(--mnv-card-detailed-tuck) + 44px)) 0 0;
    padding: calc(var(--mnv-card-detailed-tuck) + 44px + 12px) 16px 14px;
    background: linear-gradient(0deg, var(--mnv-surface-glass) 55%, var(--mnv-surface-glass-top) 100%);
    border-left: 1px solid var(--mnv-border-subtle);
    border-radius: 18px;
    animation-name: mnv-card-detailed-slide-down;
  }
  .mnv-card-detailed-faces {
    max-height: none;
    overflow: visible;
  }
  .mnv-card-detailed-columns {
    grid-template-rows: auto auto;
  }
  .mnv-card-detailed-printings {
    height: 440px;
  }
  .mnv-card-detailed-name {
    font-size: 1.3rem;
  }
}
.mnv-card-detailed[data-card-modal-arrival] .mnv-card-detailed-panel {
  animation: mnv-card-detailed-fade 0.25s ease-out both;
}

.mnv-card-detailed[data-card-modal-arrival=next] .mnv-card-detailed-card {
  animation: mnv-card-detailed-from-next 0.32s ease-out both;
}

.mnv-card-detailed[data-card-modal-arrival=previous] .mnv-card-detailed-card {
  animation: mnv-card-detailed-from-previous 0.32s ease-out both;
}

@keyframes mnv-card-detailed-from-next {
  from {
    transform: translateX(36px) rotate(2deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes mnv-card-detailed-from-previous {
  from {
    transform: translateX(-36px) rotate(-2deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes mnv-card-detailed-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mnv-card-detailed-rise {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes mnv-card-detailed-slide-out {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes mnv-card-detailed-slide-down {
  from {
    transform: translateY(-30%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mnv-card-detailed-card,
  .mnv-card-detailed-panel,
  .mnv-card-detailed[data-card-modal-arrival] .mnv-card-detailed-card,
  .mnv-card-detailed[data-card-modal-arrival] .mnv-card-detailed-panel {
    animation: none;
  }
  .mnv-card-detailed-scryfall {
    transition: none;
  }
}
.mnv-card-set .badge {
  vertical-align: 0.145em;
}

.mnv-card-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mnv-card-prices-foil-label {
  margin-right: 3px;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/**
 * Le nom d'un deck, replié derrière son icone.
 *
 * L'ouverture s'anime sur une colonne de grille plutôt que sur une largeur
 * choisie d'avance : le nom s'arrête où il se termine, court ou long. C'est ce
 * qui justifie le span intérieur — c'est lui qui est débordé pendant que la
 * colonne s'ouvre.
 *
 * Replié, le nom est invisible au sens propre : il sort de l'ordre de
 * tabulation et de ce qu'un lecteur d'écran parcourt. C'est le bouton qui le
 * porte alors, et lui seul.
 *
 * Sans JavaScript rien ne s'ouvre : le nom reste dans le `title` et dans le nom
 * accessible du bouton, où il se lit toujours.
 */
.mnv-deck-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.mnv-deck-name__toggle {
  display: inline-flex;
  align-items: center;
  padding: 0 0.125rem;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  line-height: 1;
  cursor: pointer;
}

.mnv-deck-name__toggle[aria-expanded=true] {
  color: var(--bs-body-color);
}

.mnv-deck-name__label {
  display: inline-grid;
  grid-template-columns: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-columns 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mnv-deck-name__toggle[aria-expanded=true] + .mnv-deck-name__label {
  grid-template-columns: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-columns 0.2s ease, opacity 0.2s ease, visibility 0s;
}

.mnv-deck-name__text {
  overflow: hidden;
  padding-left: 0.25rem;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mnv-deck-name__label,
  .mnv-deck-name__toggle[aria-expanded=true] + .mnv-deck-name__label {
    transition: none;
  }
}
/**
 * La tuile : une vignette ronde, et un nom centré dessous.
 *
 * Elle se rend par le composant `tile` — et par lui seul. Ces classes sont
 * celles qu'il pose, et elles vivent ici plutôt que dans un module : la tuile
 * n'appartient plus à l'écran qui l'a vue naître.
 */
.mnv-tile {
  flex: 0 0 auto;
  width: 4.75rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.25rem;
  background: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  color: inherit;
  cursor: pointer;
}

.mnv-tile[aria-pressed=true] {
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.mnv-tile--plain {
  cursor: default;
}

/**
 * La tuile qui nomme sans faire choisir, sur les écrans qui ne demandent rien :
 * le cadre disait qu'on peut appuyer dessus, il s'en va. Le reste ne bouge pas —
 * c'est à cela qu'on reconnaît un joueur d'un écran à l'autre.
 */
.mnv-tile--borderless {
  border-color: transparent;
  cursor: default;
  text-decoration: none;
}

.mnv-tile--link {
  cursor: pointer;
  text-decoration: none;
}

.mnv-tile--link:hover .mnv-tile-name,
.mnv-tile--link:focus-visible .mnv-tile-name {
  text-decoration: underline;
}

.mnv-tile:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/**
 * La vignette tient la place de l'image à venir : les initiales sur une teinte
 * tirée du nom, et rien d'autre à charger.
 */
.mnv-tile-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--mnv-tile-hue, 210) var(--mnv-tile-art-background));
  color: hsl(var(--mnv-tile-hue, 210) var(--mnv-tile-art-ink));
  font-size: 1rem;
  font-weight: 600;
}

.mnv-tile-name {
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * Ce que la tuile porte en plus de son nom : le nombre de fois qu'un deck a été
 * joué, par exemple.
 */
.mnv-tile-caption {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--bs-secondary-color);
}

/**
 * La bande de tuiles : elle défile sous le doigt plutôt que de descendre la
 * page. Ce qui dépasse à droite dit qu'il y en a d'autres, et le pas d'arrêt
 * remet une tuile entière au bord.
 */
.mnv-tile-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.125rem 0.125rem 0.5rem;
  scrollbar-width: thin;
}

.mnv-deck-tile {
  --mnv-deck-tile-width: 8.5rem;
  --mnv-deck-tile-cover: 4.75rem;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: var(--mnv-deck-tile-width);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.mnv-deck-tile--sm {
  --mnv-deck-tile-width: 7rem;
  --mnv-deck-tile-cover: 3.9rem;
}

.mnv-deck-tile--lg {
  --mnv-deck-tile-width: 11rem;
  --mnv-deck-tile-cover: 6.25rem;
}

.mnv-deck-tile--fluid {
  width: 100%;
}

.mnv-deck-tile--link {
  cursor: pointer;
}

.mnv-deck-tile--link:hover {
  box-shadow: var(--bs-box-shadow-sm);
}

.mnv-deck-tile--link:hover .mnv-deck-tile__name,
.mnv-deck-tile--link:focus-visible .mnv-deck-tile__name {
  text-decoration: underline;
}

.mnv-deck-tile__cover {
  position: relative;
  height: var(--mnv-deck-tile-cover);
  background-color: var(--bs-secondary-bg);
  background-position: center 30%;
  background-size: cover;
}

.mnv-deck-tile__cover--empty {
  background-color: hsl(var(--mnv-tile-hue, 210) var(--mnv-tile-art-background));
  background-image: repeating-linear-gradient(135deg, var(--mnv-fill-active), var(--mnv-fill-active) 8px, transparent 8px, transparent 16px);
}

.mnv-deck-tile__monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--mnv-tile-hue, 210) var(--mnv-tile-art-ink));
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mnv-deck-tile__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  padding: 1rem 0.35rem 0.25rem;
  background: var(--mnv-image-fade);
  color: var(--mnv-on-image);
}

.mnv-deck-tile__colors {
  display: flex;
  margin-left: auto;
  gap: 0.1rem;
  font-size: 0.75rem;
  filter: var(--mnv-image-icon-shadow);
}

.mnv-deck-tile__precon {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.3rem;
  border-radius: var(--bs-border-radius-sm);
  background: var(--mnv-image-scrim);
  color: var(--mnv-on-image);
  font-size: 0.65rem;
  line-height: 1;
  white-space: nowrap;
}

.mnv-deck-tile__precon-label {
  display: none;
}

.mnv-deck-tile--lg .mnv-deck-tile__precon {
  padding: 0.15rem 0.4rem;
}

.mnv-deck-tile--lg .mnv-deck-tile__precon-label {
  display: inline;
}

.mnv-deck-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.45rem 0.45rem;
  min-width: 0;
}

.mnv-deck-tile__name {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.1rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mnv-deck-tile--sm .mnv-deck-tile__name {
  min-height: 1.95rem;
  font-size: 0.75rem;
}

.mnv-deck-tile--lg .mnv-deck-tile__name {
  min-height: 2.45rem;
  font-size: 0.9375rem;
}

.mnv-deck-tile__meta {
  margin: 0;
  overflow: hidden;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnv-deck-tile__chosen {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--mnv-accent-solid);
  color: var(--mnv-on-accent);
  font-size: 0.8rem;
}

.mnv-deck-tile-selectable {
  display: flex;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.mnv-deck-tile-selectable:hover .mnv-deck-tile {
  box-shadow: var(--bs-box-shadow-sm);
}

.mnv-deck-tile-selectable[aria-pressed=true] .mnv-deck-tile {
  border-color: var(--mnv-accent-border);
  box-shadow: 0 0 0 2px var(--mnv-accent-soft);
}

.mnv-deck-tile-selectable[aria-pressed=true] .mnv-deck-tile__chosen {
  display: inline-flex;
}

.mnv-deck-tile-selectable:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mnv-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: var(--mnv-space-6);
  height: var(--mnv-topbar-height);
  padding: 0 var(--mnv-space-6);
  border-bottom: 1px solid var(--mnv-border-subtle);
  background: color-mix(in srgb, var(--mnv-bg) 78%, transparent);
  backdrop-filter: blur(var(--mnv-blur-glass)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--mnv-blur-glass)) saturate(1.2);
}

.mnv-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mnv-space-4);
  color: var(--mnv-text-strong);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.mnv-brand:hover {
  color: var(--mnv-text-strong);
}
.mnv-brand .bi {
  color: var(--mnv-accent);
  font-size: 20px;
}

.mnv-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnv-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mnv-space-3);
  height: 34px;
  padding: 0 12px;
  border-radius: var(--mnv-radius-pill);
  color: var(--mnv-text-secondary);
  font-size: var(--mnv-font-size-md);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--mnv-duration-fast), color var(--mnv-duration-fast);
}
.mnv-nav-link:hover {
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-strong);
}
.mnv-nav-link[aria-current=page] {
  background: var(--mnv-fill-selected);
  color: var(--mnv-text-strong);
}

.mnv-topbar-end {
  display: flex;
  align-items: center;
  gap: var(--mnv-space-4);
  margin-left: auto;
}

.mnv-topbar-action {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--mnv-radius-pill);
  background: transparent;
  color: var(--mnv-text-soft);
  font-size: 17px;
  transition: background-color var(--mnv-duration-fast), color var(--mnv-duration-fast);
}
.mnv-topbar-action:hover, .mnv-topbar-action[aria-expanded=true] {
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-strong);
}
.mnv-topbar-action:focus-visible {
  outline: 0;
  box-shadow: var(--mnv-focus-ring);
}

.mnv-theme-choices {
  padding: var(--mnv-space-2) var(--mnv-space-6) var(--mnv-space-4);
}
.mnv-theme-choices .mnv-segmented {
  display: flex;
}
.mnv-theme-choices .mnv-segmented > button {
  flex: 1 1 0;
}

@media (max-width: 991.98px) {
  .mnv-nav-label {
    display: none;
  }
  .mnv-nav-link {
    padding: 0 10px;
    font-size: 16px;
  }
}
@media (max-width: 767.98px) {
  .mnv-topbar {
    padding: 0 var(--mnv-space-5);
  }
  .mnv-topbar .mnv-nav,
  .mnv-topbar-account {
    display: none;
  }
}
.mnv-tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 1030;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mnv-border-subtle);
  background: color-mix(in srgb, var(--mnv-bg) 82%, transparent);
  backdrop-filter: blur(var(--mnv-blur-glass)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--mnv-blur-glass)) saturate(1.2);
}

.mnv-tabbar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--mnv-radius-md);
  background: transparent;
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-eyebrow);
  font-weight: 500;
  text-decoration: none;
}
.mnv-tabbar-link .bi {
  font-size: 19px;
  line-height: 1;
}
.mnv-tabbar-link:hover {
  color: var(--mnv-text-strong);
}
.mnv-tabbar-link[aria-current=page], .mnv-tabbar-link[aria-expanded=true] {
  color: var(--mnv-text-strong);
}
.mnv-tabbar-link[aria-current=page] .bi, .mnv-tabbar-link[aria-expanded=true] .bi {
  color: var(--mnv-accent);
}
.mnv-tabbar-link:focus-visible {
  outline: 0;
  box-shadow: var(--mnv-focus-ring);
}

.mnv-tabbar .dropdown-menu {
  max-height: calc(100dvh - var(--mnv-topbar-height) - var(--mnv-tabbar-offset) - var(--mnv-space-6));
  overflow-y: auto;
}

@media (max-width: 767.98px) {
  .mnv-tabbar {
    display: grid;
  }
}
.mnv-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--mnv-accent-solid);
  color: var(--mnv-on-accent);
  font-size: 12px;
  font-weight: 600;
  object-fit: cover;
}

.mnv-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 var(--mnv-space-6);
  padding-top: var(--mnv-space-6);
  padding-bottom: var(--mnv-space-6);
}
.mnv-page-head:empty {
  display: none;
}

.mnv-breadcrumb {
  grid-column: 1/-1;
  margin-bottom: 6px;
}
.mnv-breadcrumb .breadcrumb {
  margin: 0;
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-sm);
}
.mnv-breadcrumb .breadcrumb-item a {
  color: var(--mnv-text-secondary);
}
.mnv-breadcrumb .breadcrumb-item a:hover {
  color: var(--mnv-text-strong);
}

.mnv-page-title {
  grid-column: 1;
  margin: 0;
  color: var(--mnv-text-strong);
  font-size: var(--mnv-font-size-xl);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.mnv-page-count {
  margin-left: var(--mnv-space-3);
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-md);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mnv-page-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mnv-space-4);
}

@media (max-width: 767.98px) {
  .mnv-page-head {
    padding-top: var(--mnv-space-5);
    padding-bottom: var(--mnv-space-5);
  }
  .mnv-page-head:has(> .d-none:only-child) {
    display: none;
  }
  .mnv-breadcrumb--first-level {
    display: none;
  }
  .mnv-page-title {
    font-size: 1.3rem;
  }
}
.mnv-icon-button {
  --mnv-icon-button-size: var(--mnv-control-md);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--mnv-icon-button-size);
  height: var(--mnv-icon-button-size);
  padding: 0;
  border: 1px solid var(--mnv-border);
  border-radius: var(--mnv-radius-pill);
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-soft);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mnv-duration-fast), color var(--mnv-duration-fast);
}
.mnv-icon-button:hover:not(:disabled), .mnv-icon-button[aria-expanded=true] {
  background: var(--mnv-fill-selected);
  color: var(--mnv-text-strong);
}
.mnv-icon-button:focus-visible {
  outline: 0;
  box-shadow: var(--mnv-focus-ring);
}
.mnv-icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.mnv-icon-button--sm {
  --mnv-icon-button-size: var(--mnv-control-sm);
  border-color: transparent;
  border-radius: var(--mnv-radius-sm);
  background: transparent;
  font-size: 14px;
}
.mnv-icon-button--sm:hover:not(:disabled), .mnv-icon-button--sm[aria-expanded=true] {
  background: var(--mnv-fill-hover);
}

.mnv-icon-button--danger:hover:not(:disabled) {
  background: var(--mnv-danger-bg);
  color: var(--mnv-danger);
}

@media (max-width: 767.98px) {
  .mnv-icon-button--sm {
    --mnv-icon-button-size: 36px;
    font-size: 16px;
  }
}
.mnv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mnv-space-3);
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--mnv-border);
  border-radius: var(--mnv-radius-pill);
  background: transparent;
  color: var(--mnv-text-soft);
  font-size: var(--mnv-font-size-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mnv-duration-fast), border-color var(--mnv-duration-fast), color var(--mnv-duration-fast);
}
.mnv-chip:hover {
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-strong);
}
.mnv-chip:focus-visible {
  outline: 0;
  box-shadow: var(--mnv-focus-ring);
}
.mnv-chip.is-active, .mnv-chip[aria-pressed=true] {
  border-color: var(--mnv-accent-border);
  background: var(--mnv-accent-soft);
  color: var(--mnv-text-strong);
}
.mnv-chip.dropdown-toggle::after {
  margin-left: 0;
  color: var(--mnv-text-muted);
}

.mnv-chip-label {
  overflow: hidden;
  max-width: 14rem;
  text-overflow: ellipsis;
}

.mnv-chip-count {
  padding: 0 6px;
  border-radius: var(--mnv-radius-pill);
  background: var(--mnv-accent-solid);
  color: var(--mnv-on-accent);
  font-size: var(--mnv-font-size-eyebrow);
  font-weight: 700;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .mnv-chip {
    min-height: 36px;
  }
}
.mnv-segmented {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--mnv-border-subtle);
  border-radius: var(--mnv-radius-sm);
  background: var(--mnv-fill-hover);
}
.mnv-segmented > a,
.mnv-segmented > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mnv-space-3);
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--mnv-duration-fast), color var(--mnv-duration-fast);
}
.mnv-segmented > a:hover,
.mnv-segmented > button:hover {
  color: var(--mnv-text-strong);
}
.mnv-segmented > a:focus-visible,
.mnv-segmented > button:focus-visible {
  outline: 0;
  box-shadow: var(--mnv-focus-ring);
}
.mnv-segmented > a[aria-current=true], .mnv-segmented > a[aria-pressed=true],
.mnv-segmented > button[aria-current=true],
.mnv-segmented > button[aria-pressed=true] {
  background: var(--mnv-segment-selected);
  box-shadow: var(--mnv-segment-selected-shadow);
  color: var(--mnv-text-strong);
}

.mnv-segmented--icons > a,
.mnv-segmented--icons > button {
  padding: 0 8px;
  font-size: 14px;
}

@media (max-width: 767.98px) {
  .mnv-segmented > a,
  .mnv-segmented > button {
    min-height: 32px;
  }
}
.mnv-search {
  position: relative;
}
.mnv-search > .bi {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: var(--mnv-text-muted);
  font-size: 13px;
  pointer-events: none;
}
.mnv-search > .form-control {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 32px;
  border-radius: var(--mnv-radius-pill);
  font-size: var(--mnv-font-size-sm);
}

@media (max-width: 767.98px) {
  .mnv-search > .form-control {
    min-height: 38px;
  }
}
.mnv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mnv-space-4);
  padding: var(--mnv-space-8) var(--mnv-space-6);
  border: 1px dashed var(--mnv-border-strong);
  border-radius: var(--mnv-radius-lg);
  color: var(--mnv-text-secondary);
  text-align: center;
}
.mnv-empty strong {
  color: var(--mnv-text-strong);
  font-size: var(--mnv-font-size-base);
  font-weight: 600;
}

.mnv-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mnv-fill-hover);
  color: var(--mnv-text-muted);
  font-size: 18px;
}

.mnv-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mnv-space-4);
  margin-top: var(--mnv-space-2);
}

@keyframes mnv-shimmer {
  to {
    transform: translateX(100%);
  }
}
.mnv-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--mnv-fill-hover);
}
.mnv-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--mnv-fill-hover), transparent);
  animation: mnv-shimmer 1.4s ease-in-out infinite;
}
.mnv-skeleton > img {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mnv-skeleton::after {
    animation: none;
  }
}
.mnv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mnv-space-4);
  padding: 10px 0;
  border-block: 1px solid var(--mnv-border-subtle);
}

.mnv-toolbar-search {
  flex: 0 1 240px;
  min-width: 180px;
}

.mnv-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mnv-space-3);
}

.mnv-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mnv-space-4);
  margin-left: auto;
}

@media (min-width: 768px) {
  .mnv-toolbar-filters.collapse {
    display: flex;
  }
}
@media (max-width: 767.98px) {
  .mnv-toolbar {
    gap: var(--mnv-space-3);
  }
  .mnv-toolbar-search {
    flex: 1 1 100%;
  }
  .mnv-toolbar-filters {
    flex: 1 1 100%;
    order: 1;
  }
  .mnv-toolbar-filters.collapsing {
    display: flex;
  }
  .mnv-toolbar-end {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
}
.mnv-filter-menu {
  --bs-dropdown-padding-x: var(--mnv-space-4);
  --bs-dropdown-padding-y: var(--mnv-space-4);
  min-width: 15rem;
  max-width: calc(100vw - 24px);
}

.mnv-filter-menu--fit {
  width: max-content;
  max-width: min(40rem, 100vw - 24px);
}
.mnv-filter-menu--fit .form-check-label {
  white-space: nowrap;
}

.mnv-filter-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mnv-space-4);
  margin-bottom: var(--mnv-space-4);
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.mnv-filter-menu-head .btn {
  letter-spacing: 0;
  text-transform: none;
}

.mnv-filter-menu-list {
  max-height: 20rem;
  overflow-y: auto;
  padding-left: var(--mnv-space-2);
}

.mnv-filter-menu-option {
  display: flex;
  align-items: center;
  gap: var(--mnv-space-4);
  width: 100%;
  padding: var(--mnv-space-2) var(--mnv-space-4);
  border-radius: var(--mnv-radius-sm);
  cursor: pointer;
}
.mnv-filter-menu-option:hover {
  background: var(--mnv-fill-hover);
}
.mnv-filter-menu-option input {
  flex: none;
  margin: 0;
  cursor: pointer;
}

.mnv-filter-menu-actions {
  display: flex;
  gap: var(--mnv-space-4);
  margin-top: var(--mnv-space-4);
  padding-top: var(--mnv-space-4);
  border-top: 1px solid var(--mnv-border);
}

.mnv-panel {
  padding: var(--mnv-space-6);
  border: 1px solid var(--mnv-border-subtle);
  border-radius: var(--mnv-radius-lg);
  background: var(--mnv-surface);
}

.mnv-panel-title {
  display: flex;
  align-items: center;
  gap: var(--mnv-space-3);
  margin: 0 0 var(--mnv-space-5);
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mnv-section-title {
  display: flex;
  align-items: center;
  gap: var(--mnv-space-4);
  margin: 0 0 var(--mnv-space-4);
  padding-bottom: var(--mnv-space-3);
  border-bottom: 1px solid var(--mnv-border-subtle);
  color: var(--mnv-text-strong);
  font-size: var(--mnv-font-size-base);
  font-weight: 600;
}

.mnv-section-count {
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.mnv-inline-form {
  display: flex;
  gap: var(--mnv-space-4);
  max-width: 32rem;
  padding: var(--mnv-space-5);
}

.mnv-panel--glass {
  background: linear-gradient(180deg, var(--mnv-surface-glass-top) 0%, var(--mnv-surface-glass) 30%);
  border-color: var(--mnv-border);
  box-shadow: var(--mnv-shadow-panel);
  backdrop-filter: blur(var(--mnv-blur-glass));
}

.badge-neutral {
  --bs-badge-color: var(--mnv-badge-neutral-text);
  background-color: var(--mnv-badge-neutral-bg);
}

.badge-soft {
  --bs-badge-color: var(--mnv-text-soft);
  background-color: var(--mnv-fill-active);
}

.badge-accent {
  --bs-badge-color: var(--mnv-accent-text);
  background-color: var(--mnv-accent-soft);
  box-shadow: inset 0 0 0 1px var(--mnv-accent-border);
}

.badge-success {
  --bs-badge-color: var(--mnv-success-ink);
  background-color: var(--mnv-success-bg);
  box-shadow: inset 0 0 0 1px var(--mnv-success-border);
}

.badge-warning {
  --bs-badge-color: var(--mnv-warning-ink);
  background-color: var(--mnv-warning-bg);
  box-shadow: inset 0 0 0 1px var(--mnv-warning-border);
}

.badge-caution {
  --bs-badge-color: var(--mnv-caution-ink);
  background-color: var(--mnv-caution-bg);
  box-shadow: inset 0 0 0 1px var(--mnv-caution-border);
}

.badge-danger {
  --bs-badge-color: var(--mnv-danger-ink);
  background-color: var(--mnv-danger-bg);
  box-shadow: inset 0 0 0 1px var(--mnv-danger-border);
}

.badge-overlay {
  --bs-badge-color: var(--mnv-on-image);
  background-color: var(--mnv-image-scrim);
  text-shadow: var(--mnv-image-text-shadow);
}

.mnv-message {
  --mnv-message-ink: var(--mnv-text-soft);
  --mnv-message-bg: var(--mnv-fill-hover);
  --mnv-message-border: var(--mnv-border);
  --mnv-message-icon: var(--mnv-text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--mnv-space-4);
  padding: var(--mnv-space-4) var(--mnv-space-5);
  color: var(--mnv-message-ink);
  font-size: var(--mnv-font-size-md);
  background: var(--mnv-message-bg);
  border: 1px solid var(--mnv-message-border);
  border-radius: var(--mnv-radius-md);
}
.mnv-message a:not(.btn) {
  color: inherit;
  font-weight: 600;
}
.mnv-message p,
.mnv-message ul {
  margin: 0;
}
.mnv-message ul {
  padding-left: 1.1rem;
}

.mnv-message-icon {
  flex: none;
  color: var(--mnv-message-icon);
  font-size: 1rem;
  line-height: 1.3;
}

.mnv-message-body {
  flex: 1 1 0;
  min-width: 0;
}
.mnv-message-body > * + * {
  margin-top: var(--mnv-space-2);
}

.mnv-message-title {
  display: block;
  margin: 0;
  color: var(--mnv-message-ink);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

.mnv-message-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-self: center;
  gap: var(--mnv-space-3);
}

.mnv-message--info {
  --mnv-message-ink: var(--mnv-accent-text);
  --mnv-message-bg: var(--mnv-accent-soft);
  --mnv-message-border: var(--mnv-accent-border);
  --mnv-message-icon: var(--mnv-accent);
}

.mnv-message--success {
  --mnv-message-ink: var(--mnv-success-ink);
  --mnv-message-bg: var(--mnv-success-bg);
  --mnv-message-border: var(--mnv-success-border);
  --mnv-message-icon: var(--mnv-success);
}

.mnv-message--warning {
  --mnv-message-ink: var(--mnv-warning-ink);
  --mnv-message-bg: var(--mnv-warning-bg);
  --mnv-message-border: var(--mnv-warning-border);
  --mnv-message-icon: var(--mnv-warning);
}

.mnv-message--danger {
  --mnv-message-ink: var(--mnv-danger-ink);
  --mnv-message-bg: var(--mnv-danger-bg);
  --mnv-message-border: var(--mnv-danger-border);
  --mnv-message-icon: var(--mnv-danger);
}

.mnv-message--compact {
  gap: var(--mnv-space-3);
  padding: var(--mnv-space-2) var(--mnv-space-4);
  font-size: var(--mnv-font-size-sm);
  border-radius: var(--mnv-radius-sm);
}
.mnv-message--compact .mnv-message-icon {
  font-size: var(--mnv-font-size-sm);
}

@media (max-width: 575.98px) {
  .mnv-message {
    flex-wrap: wrap;
  }
  .mnv-message-actions {
    flex-basis: 100%;
  }
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mnv-border-subtle);
  border-radius: var(--mnv-radius-lg);
  background: var(--mnv-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--mnv-scrollbar) transparent;
}
.table-wrap > .table {
  margin-bottom: 0;
}
.table-wrap > .table > :last-child > tr:last-child > * {
  border-bottom-width: 0;
}
.table-wrap > .table > :not(caption) > tr > :first-child {
  padding-left: var(--mnv-space-6);
}
.table-wrap > .table > :not(caption) > tr > :last-child {
  padding-right: var(--mnv-space-6);
}

.table {
  font-size: var(--mnv-font-size-md);
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th {
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: bottom;
  border-bottom-color: var(--mnv-border);
}
.table > tbody > tr > th {
  color: var(--mnv-text-strong);
  font-weight: 600;
}

.table > tbody > tr.is-selected > * {
  --bs-table-bg-state: var(--mnv-accent-soft);
}
.table > tbody > tr.is-success > * {
  --bs-table-bg-state: var(--mnv-success-bg);
}
.table > tbody > tr.is-warning > * {
  --bs-table-bg-state: var(--mnv-warning-bg);
}
.table > tbody > tr.is-danger > * {
  --bs-table-bg-state: var(--mnv-danger-bg);
}

.mnv-list {
  display: flex;
  flex-direction: column;
  gap: var(--mnv-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnv-list-row {
  display: flex;
  align-items: center;
  gap: var(--mnv-space-5);
  min-height: var(--mnv-control-md);
  padding: var(--mnv-space-3) var(--mnv-space-5);
  color: var(--mnv-text-soft);
  font-size: var(--mnv-font-size-md);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-radius: var(--mnv-radius-sm);
}
.mnv-list-row:is(a, button) {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.mnv-list-row:is(a, button):hover {
  color: var(--mnv-text-strong);
  background: var(--mnv-fill-hover);
}
.mnv-list-row:is(a, button):focus-visible {
  outline: 2px solid var(--mnv-focus);
  outline-offset: -2px;
}
.mnv-list-row.is-current, .mnv-list-row[aria-current=true], .mnv-list-row[aria-current=page] {
  color: var(--mnv-text-strong);
  background: var(--mnv-accent-soft);
}
.mnv-list-row.is-current .mnv-list-row-title, .mnv-list-row[aria-current=true] .mnv-list-row-title, .mnv-list-row[aria-current=page] .mnv-list-row-title {
  font-weight: 600;
}

.mnv-list-row-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mnv-list-row-meta {
  flex: none;
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-sm);
}

.mnv-list-row-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--mnv-space-2);
}

.mnv-list--divided {
  gap: 0;
}
.mnv-list--divided > li + li {
  border-top: 1px solid var(--mnv-border-subtle);
}
.mnv-list--divided .mnv-list-row {
  border-radius: 0;
}

.mnv-list--inset {
  gap: 0;
  padding: var(--mnv-space-2);
  background: var(--mnv-surface-sunken);
  border: 1px solid var(--mnv-border-subtle);
  border-radius: var(--mnv-radius-md);
}
.mnv-list--inset .mnv-list-row {
  min-height: var(--mnv-control-sm);
  padding: var(--mnv-space-2) var(--mnv-space-4);
}

@media (max-width: 575.98px) {
  .mnv-list-row {
    flex-wrap: wrap;
    row-gap: var(--mnv-space-2);
  }
}
.mnv-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mnv-space-5) var(--mnv-space-8);
  margin: 0;
  padding: var(--mnv-space-5) var(--mnv-space-6);
  background: var(--mnv-surface);
  border: 1px solid var(--mnv-border-subtle);
  border-radius: var(--mnv-radius-lg);
}

.mnv-figure {
  display: flex;
  flex-direction: column;
  gap: var(--mnv-space-1);
  min-width: 0;
}
.mnv-figure dt {
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.mnv-figure dd {
  margin: 0;
  color: var(--mnv-text-strong);
  font-size: var(--mnv-font-size-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mnv-figure-note {
  color: var(--mnv-text-muted);
  font-size: var(--mnv-font-size-sm);
  font-weight: 400;
}

.mnv-login {
  min-height: 100vh;
  padding: 0;
  background: radial-gradient(circle at 18% 22%, rgba(var(--mnv-accent-rgb), 0.32), transparent 42%), radial-gradient(circle at 82% 78%, rgba(var(--mnv-accent-rgb), 0.18), transparent 46%), var(--mnv-bg);
}

.mnv-login-stage {
  display: grid;
  background: transparent;
  place-items: center;
  min-height: 100vh;
  padding: var(--mnv-space-6);
}

.mnv-login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mnv-space-4);
  width: 100%;
  max-width: 22rem;
  padding: var(--mnv-space-8) var(--mnv-space-7);
  text-align: center;
}

.mnv-login-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--mnv-accent-text);
  font-size: 1.6rem;
  background: var(--mnv-accent-soft);
  border: 1px solid var(--mnv-accent-border);
  border-radius: var(--mnv-radius-lg);
}

.mnv-login-title {
  margin: var(--mnv-space-2) 0 var(--mnv-space-5);
  color: var(--mnv-text-strong);
  font-size: var(--mnv-font-size-xl);
  font-weight: 600;
}

:root {
  --mnv-topbar-height: 56px;
  --mnv-tabbar-offset: 0px;
}

@media (max-width: 767.98px) {
  :root {
    --mnv-tabbar-offset: calc(57px + env(safe-area-inset-bottom));
  }
}
body {
  padding-top: var(--mnv-topbar-height);
  padding-bottom: var(--mnv-tabbar-offset);
  min-height: 100vh;
}

main {
  display: flex;
  min-height: calc(100vh - var(--mnv-topbar-height) - var(--mnv-tabbar-offset));
  flex-direction: column;
  flex: 1;
  background-color: var(--bs-body-bg);
}

.form-check label, .form-check input {
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.fs-7 {
  font-size: 0.875rem !important;
}

.fs-8 {
  font-size: 0.75rem !important;
}

.fs-9 {
  font-size: 0.625rem !important;
}

.col-fit {
  width: 1%;
  white-space: nowrap;
}

.text-bg-orange {
  color: var(--mnv-caution-ink) !important;
  background-color: var(--mnv-caution-bg) !important;
  box-shadow: inset 0 0 0 1px var(--mnv-caution-border);
}

.flag-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.1rem 0.2rem;
  user-select: none;
  transition: border-color 0.15s ease-in-out;
}
.flag-select--active {
  border-color: var(--bs-border-color);
  background: var(--bs-body-bg);
}
.flag-select__controls {
  position: absolute;
  left: 100%;
  top: -1px;
  bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.2rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-left: none;
  border-radius: 0 var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0;
  z-index: 1;
}
.flag-select__chevron {
  font-size: 0.6rem;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
.flag-select__reset {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}
.flag-select__reset:hover {
  color: var(--bs-body-color);
}
.flag-select__dropdown {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-sm);
  z-index: 1050;
  overflow-y: auto;
  max-height: 14rem;
  min-width: 10rem;
}
.flag-select__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.2rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
}
.flag-select__option:hover {
  background: var(--bs-secondary-bg);
}
.flag-select__option--selected {
  background: var(--bs-primary-bg-subtle);
  font-weight: 500;
}
.flag-select__option-hint {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  font-style: italic;
}
.flag-select__divider {
  margin: 0.25rem 0;
  border-color: var(--bs-border-color);
  opacity: 1;
}

.btn-xs {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-group-xs > .btn {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-font-size: 0.75rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.form-control-ghost {
  border-color: transparent;
  border-bottom-color: var(--bs-border-color-translucent);
  background-color: transparent;
  box-shadow: none;
}
.form-control-ghost:focus {
  border-color: var(--bs-border-color);
  border-bottom-color: var(--bs-secondary-color);
  background-color: var(--bs-body-bg);
  box-shadow: var(--bs-focus-ring-box-shadow);
}
.form-control-ghost[type=number]::-webkit-inner-spin-button {
  margin-left: 0.375rem;
}