/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: 'Bangers Modified';
  src: url('/fonts/BangersModified.woff2') format('woff2'), url('/fonts/BangersModified.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1013;
  --panel: #080202aa;
  --panel-2: #22252d;
  --nav-height: 52px;
  --line: #2e323c;
  --text: #e8e9ec;
  --muted: #9a9fa7;
  --accent: #f2b544;
  --danger: #d84a4a;
  --ok: #4caf50;
  --card-base: clamp(64px, min(17vmin, 10vw, 13vh), 150px);
  --card-scale: 1;
  --card-w: calc(var(--card-base) * var(--card-scale));
  --card-sm: calc(var(--card-w) * 0.64);
  --card-lg: calc(var(--card-w) * 1.33);
  --card-unit: calc(0.7px + var(--card-w) * 0.3 / 64);
  --hand-w: var(--card-w);
  --sidebar-w: 220px;
}

:root[data-card-size='tiny'] {
  --card-scale: 0.65;
}

:root[data-card-size='smaller'] {
  --card-scale: 0.8;
}

:root[data-card-size='bigger'] {
  --card-scale: 1.23;
}

:root[data-card-size='biggest'] {
  --card-scale: 1.5;
}

* {
  box-sizing: border-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
code,
.share code {
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

button img,
a img {
  pointer-events: none;
}

/* The site's background is the A Game of Rolls wood; inside a game (main.game) it is the game's own art, set from the layout. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, #000e 0%, transparent 45%), url('/images/wood_bg.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

body:has(main.game)::before {
  opacity: 0.16;
  filter: saturate(0.85);
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 12px;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.primary,
button.active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

.lobby {
  box-sizing: border-box;
  max-width: 608px;
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  /* The panel of the Firewall and dice pages (#0008 with this radius and shadow), a touch lighter. */
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.lobby label,
.lobby .lobby-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
}

.lobby input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.hero-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game {
  height: 100vh;
  height: 100dvh;
}

body:has(.game) {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
}

.board-wrap {
  position: relative;
}

.game.log-open .board-wrap {
  padding-right: calc(var(--sidebar-w) + 14px);
}

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

.log-toggle {
  padding: 0 6px;
  font-size: 26px;
  line-height: 1;
  font-weight: 300;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.log-toggle:hover {
  color: var(--accent);
}

.settings {
  position: relative;
}

.settings-toggle {
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: 0;
  color: #fff;
}

.settings-toggle:hover {
  color: var(--accent);
}

.settings-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 250;
  background: #0e0a0a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.setting-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.setting input[type='range'] {
  width: 100%;
}

.table {
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  padding: 12px 16px 160px;
}

.hand-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 4px 16px 12px;
  background: none;
  pointer-events: none;
}

.hand-bar .hand-label,
.hand-bar .hand-slot {
  pointer-events: auto;
}

.hand-bar {
  transition: transform 0.25s ease;
}

.hand-bar.collapsed {
  transform: translateY(calc(100% - 84px));
}

.hand-bar.collapsed.holding {
  transform: none;
}

.hand-bar.collapsed.holding .fan {
  display: none;
}

.hand-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  text-shadow: 0 0 4px #000, 0 0 8px #000, 0 1px 2px #000;
}

.hand-toggle {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
}

.hand-bar .zone {
  align-items: center;
  width: 100%;
}

.hand-bar .fan {
  width: 100%;
  box-sizing: border-box;
}

.hand-bar .fan {
  justify-content: center;
  overflow: visible;
  padding: 4px 24px;
  --hand-overlap: 0px;
}

.hand-bar .card {
  width: var(--hand-w);
}

.hand-bar .hand-slot + .hand-slot {
  margin-left: calc(var(--hand-overlap) * -1);
}


.hand-bar .hand-slot-shifted {
  transform: translateX(34px);
}

.row {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

.fan,
.city,
.hq,
.side-piles {
  flex-wrap: nowrap;
}

.topbar {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.game-clock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.game-clock-turn {
  white-space: nowrap;
}

.game-clock-time {
  font-weight: 700;
  font-size: 14px;
}

.game-clock-turn {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .game-clock {
    position: static;
    transform: none;
    margin-left: auto;
    gap: 6px;
    white-space: nowrap;
  }

  .game-clock-time {
    font-size: 12px;
  }

  .game-clock-turn {
    font-size: 11px;
  }

  .game-clock .game-action {
    padding: 1px 6px;
    font-size: 10px;
  }

  .game-clock .game-action:first-of-type {
    margin-left: 2px;
  }
}

.topbar a {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  text-shadow: 2px 2px 0 #111;
}

.status {
  font-size: 12px;
  color: var(--muted);
}

.status.on::before,
.status.off::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0;
  background: var(--ok);
}

.status {
  display: inline-flex;
  margin-right: -4px;
}

.status.off::before {
  background: var(--danger);
}

.error {
  color: var(--danger);
}

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--sidebar-w);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.sidebar > .sidebar-tabs {
  flex: none;
}

.sidebar > .log-wrap,
.sidebar > .debug-log,
.sidebar > .chat {
  flex: 1 1;
  min-height: 0;
  /* These panels are written as height: 100%; inside the tabbed column that would measure the whole sidebar and spill past the tabs. */
  height: auto;
}

.sidebar .log,
.sidebar .debug-steps {
  border-radius: 0 0 10px 10px;
}

/* The sidebar holds two tabs: the step history and the room's chat. */
.sidebar-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 4px 0;
  border-bottom: 1px solid var(--line);
}

.sidebar-tab {
  position: relative;
  flex: 1 1;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: none;
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.sidebar-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.unread-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #e8c97a);
  box-shadow: 0 0 0 2px var(--panel);
}

.log-button {
  position: relative;
}

.log-button .unread-dot {
  top: 2px;
  right: 0;
}

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chat-lines {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 5px;
  padding: 8px;
  font-size: 11px;
}

.chat-empty {
  margin: 0;
  color: #7c7c7c;
  font-style: italic;
}

/* Discord style: who and when on one line, the message underneath. */
.chat-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.chat-who {
  color: var(--accent, #e8c97a);
  font-weight: 700;
  white-space: nowrap;
}

.chat-who.chat-spectator {
  color: #8fb3d9;
  font-weight: 600;
}

.chat-mine .chat-who {
  color: #9ad79f;
}

.chat-text {
  color: #e6e6e6;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.chat-at {
  color: #6f6f6f;
  font-size: 9px;
  white-space: nowrap;
}

/* Reactions: a faint smiley appears at the line's edge on hover (long-press on touch) and opens a tray; reactions sit as small outlined chips under the line, in the panel's own dark tones. */
.chat-line {
  position: relative;
}

.chat-react-button {
  position: absolute;
  right: 0;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
}

/* Only real hover reveals the icon: a touch hover rule would make Safari spend the first tap on "hover" and need a second one to click a chip. */
@media (hover: hover) {
  .chat-line:hover .chat-react-button {
    opacity: 1;
  }
}

.chat-line.chat-picking .chat-react-button,
.chat-react-button:focus-visible {
  opacity: 1;
}

@media (hover: hover) {
  .chat-react-button:hover {
    color: var(--text);
  }
}

/* Touch and pen: a Pencil hover (or a tap, which Safari treats as hover) reveals the same icon with a finger-sized target; a long press is the other way in. */
@media (pointer: coarse) {
  .chat-react-button {
    width: 22px;
    height: 22px;
    top: -4px;
  }
}

.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}

.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px 0 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
  font-size: 9px;
  line-height: 15px;
  cursor: pointer;
}

@media (hover: hover) {
  .chat-reaction:hover {
    border-color: var(--muted);
    color: var(--text);
  }
}

.chat-reaction-mine {
  border-color: rgba(242, 181, 68, 0.75);
  background: rgba(242, 181, 68, 0.12);
  color: var(--accent);
}

.chat-reaction-emoji {
  font-size: 10px;
  line-height: 15px;
}

.chat-line.chat-pressing {
  background: rgba(242, 181, 68, 0);
  animation: chat-press 0.45s ease-in forwards;
}

.chat-line.chat-picking {
  background: rgba(242, 181, 68, 0.14);
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(242, 181, 68, 0.14);
}

@keyframes chat-press {
  to {
    background: rgba(242, 181, 68, 0.14);
    box-shadow: 0 0 0 4px rgba(242, 181, 68, 0.14);
    border-radius: 4px;
  }
}

/* The tray lives outside the scrolling list, so it is never clipped: fixed at the line's edge, above it when there is room. */
.chat-picker {
  position: fixed;
  z-index: 40;
  display: flex;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 2, 2, 0.96);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  animation: chat-tray-pop 0.14s ease-out;
}

@keyframes chat-tray-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.chat-picker-emoji {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
  .chat-picker-emoji:hover {
    background: rgba(242, 181, 68, 0.18);
  }
}

.chat-compose {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid var(--line);
}

.chat-compose input {
  flex: 1 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 11px;
}

.chat-compose input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.chat-send {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: #cfcfcf;
  font-size: 11px;
  cursor: pointer;
}

.chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.player-row.your-turn {
  border-color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok), 0 0 24px rgba(76, 175, 80, 0.25);
}

.prompt {
  position: relative;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.prompt:not(.waiting):not(.outcome) {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.prompt:not(.waiting):not(.outcome) .prompt-options {
  align-items: center;
}

.player-zones > .prompt:not(.waiting):not(.outcome) {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(22, 20, 26, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Shared confirm modal: the focus modal's shell around what to do with what was picked, used by any board that commits a turn
   from the board itself. The actions stack, so a thing worth doing two ways reads as two buttons rather than two board widgets. */

/* A question about the board belongs in the middle of the screen, where the focus modal puts a phone's panel at the bottom edge. */
.confirm-backdrop {
  align-items: center;
}

.confirm-modal {
  width: min(92vw, 320px);
  gap: 10px;
  /* Opaque, unlike the panel colour: a translucent modal left the board legible straight through the question it was asking. */
  background: #12141a;
  text-align: center;
}

.confirm-modal .prompt {
  width: 100%;
  align-items: center;
}

.confirm-detail {
  margin: 0;
  font-size: 13px;
  opacity: 0.82;
}

.confirm-body {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.confirm-modal .prompt-options {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.confirm-action {
  justify-content: center;
}

.confirm-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.prompt-options .hint {
  margin-right: 4px;
}

.prompt h2 {
  margin: 0;
  font-size: 15px;
}

.prompt-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt .confirm {
  margin: 0;
  width: auto;
}

.board {
  display: flex;
  flex-direction: column;
  --board-gap: 14px;
  gap: var(--board-gap);
}

.board-empty {
  color: var(--muted);
  padding: 40px;
}

.row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.city,
.hq {
  display: flex;
  gap: 10px;
  flex: 1 1;
}

.zone-block {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: flex-start;
}

.zone-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zone-group > .city,
.zone-group > .hq {
  flex: none;
}

.zone-title {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #111;
  -webkit-text-stroke: 0.5px #111;
  order: 1;
  margin-top: 2px;
  pointer-events: none;
}

.board:not(.board-mini) .hq-row .zone-title {
  margin-top: 10px;
}

.city-space {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* Revelations: a Location stands above its city space and never moves; the Villain passes under it. */
.city-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--line);
}

.location-tag,
.alias-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.alias-tag {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.city-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.city-empty {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.mastermind {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/*
 * Phones: the Mastermind, the Escape Pile and Scheme, and the Villain Deck share a line above the city, and the city takes
 * the whole next line so all five spaces fit the screen. Tablets keep the single row, which fits them.
 */
@media (max-width: 700px) {
  .row.enemy-row {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    row-gap: 10px;
  }

  .row.enemy-row > .zone-block {
    order: 1;
    flex-basis: 100%;
    align-items: center;
  }
}

.side-piles {
  display: flex;
  gap: 8px;
}

.pile-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pile-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.captured {
  --captured-w: 60px;
  display: flex;
  gap: 4px;
  margin-top: -30px;
  padding-left: 20px;
  position: relative;
  z-index: 0;
}

.city-space > .card,
.mastermind-row {
  position: relative;
  z-index: 1;
}

.mastermind-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.mastermind-notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.card-badge.mastermind-note {
  position: static;
  white-space: nowrap;
  font-size: clamp(8px, calc(var(--card-w) * 0.09), 15px);
  padding: calc(var(--card-w) * 0.012) calc(var(--card-w) * 0.05);
}

/* The Always Leads substitute is secondary information: smaller and grey. */
.card-badge.mastermind-note.mastermind-note-leads {
  font-size: clamp(6px, calc(var(--card-w) * 0.06), 10px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #b3b3b3;
  background: rgba(0, 0, 0, 0.55);
  padding: calc(var(--card-w) * 0.008) calc(var(--card-w) * 0.04);
}

.mastermind-row .blocker,
.scheme-guards .blocker {
  padding-bottom: 32px;
}

.captured .card {
  width: var(--captured-w);
}

.captured-fan {
  align-items: flex-end;
  gap: 0;
  padding-left: 12px;
  position: relative;
}

.captured-fan .stack-fan {
  width: 84px;
  height: 58px;
}

.captured-fan .stack-fan img {
  width: 34px;
}

.stack-fan-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  aspect-ratio: 5 / 7;
  transform-origin: 50% 120%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}

.captured-fan .stack-fan-badge {
  width: 34px;
}

.captured-count {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.card {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
  flex-shrink: 0;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
}

.card-sm {
  width: var(--card-sm);
  --card-unit: calc(0.7px + var(--card-sm) * 0.3 / 64);
}

.card-lg {
  width: var(--card-lg);
  --card-unit: calc(0.7px + var(--card-lg) * 0.3 / 64);
}

.card.card-landscape {
  width: calc(var(--card-w) * 7 / 5);
  aspect-ratio: 7 / 5;
}

.card-half-left img {
  object-position: left center;
}

.card-half-right img {
  object-position: right center;
}

.card-mini.card-half-left .mini-art img,
.card-mini.card-half-right .mini-art img {
  top: 0;
  width: 260%;
  height: 130%;
  aspect-ratio: auto;
  object-position: center top;
}

.card-mini.card-half-left .mini-art img {
  left: -15%;
}

.card-mini.card-half-right .mini-art img {
  left: -145%;
}

.card-modal .card-preview-frame.card-half-left img,
.card-modal .card-preview-frame.card-half-right img {
  aspect-ratio: 5 / 7;
  object-fit: cover;
}

.card-modal .card-preview-frame.card-half-left img {
  object-position: left center;
}

.card-modal .card-preview-frame.card-half-right img {
  object-position: right center;
}

.card-sm.card-landscape {
  width: calc(var(--card-sm) * 7 / 5);
}

.card-lg.card-landscape {
  width: calc(var(--card-lg) * 7 / 5);
}

.card-back {
  background: #1c1e26;
}

.card-empty {
  background: repeating-linear-gradient(45deg, #232631, #232631 6px, #1c1e26 6px, #1c1e26 12px);
  border-style: dashed;
}

.mastermind-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-clickable {
  cursor: pointer;
}

.card-highlight {
  box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(242, 181, 68, 0.45);
}

.card-preview {
  position: fixed;
  z-index: 350;
  pointer-events: none;
}

.card-preview .card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
}

.card-preview-frame {
  position: relative;
}

.card-preview-title {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 18%, rgba(0, 0, 0, 0.8) 82%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #111, 0 0 8px #000;
  -webkit-text-stroke: 0.5px #111;
  pointer-events: none;
}

.card-preview-text {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.card-preview-text .card-section b {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #ffd23f;
}

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  padding: 24px;
  touch-action: none;
}

.card-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(86vw, 420px);
  max-height: 100%;
}

.card-modal img {
  width: min(86vw, 62vh * 5 / 7, 420px);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
}

body.dragging-card .card-preview {
  display: none;
}

.card-selected {
  box-shadow: 0 0 0 3px var(--ok), 0 0 18px rgba(76, 175, 80, 0.6);
}

.focus-row {
  flex-direction: column;
  gap: 6px;
  border-color: var(--accent);
}

.hint {
  color: var(--muted);
  font-size: 12px;
}

.card-dimmed {
  opacity: 0.45;
}

.card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
}

.badge-duel {
  display: inline-flex;
  align-items: center;
  padding: 0 0.4em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e8d9a8;
  background: rgba(60, 30, 10, 0.85);
  border: 1px solid rgba(232, 217, 168, 0.5);
}

.badge-duel.badge-duel-ready {
  color: #1b1206;
  background: #e8c97a;
}

.badge-astral {
  display: inline-flex;
  align-items: center;
  padding: 0 0.4em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e6dcff;
  background: rgba(58, 32, 110, 0.85);
  border: 1px solid rgba(190, 160, 255, 0.55);
}

.astral-plane {
  padding: 4px;
  border: 1px dashed rgba(190, 160, 255, 0.45);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(120, 80, 200, 0.22), rgba(0, 0, 0, 0) 70%);
}

.astral-plane .city-empty.astral-empty {
  width: var(--card-sm);
  border-color: rgba(190, 160, 255, 0.35);
}

.badge-shards {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
}

.badge-shards .badge-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.card-placeholder {
  height: 100%;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
  line-height: 1.2;
}

.card-name {
  font-weight: 700;
  font-size: 10px;
}

.card-sub {
  color: rgba(255, 255, 255, 0.75);
}

.card-text {
  flex: 1 1;
  overflow: hidden;
}

.card-stats {
  display: flex;
  gap: 6px;
  font-weight: 600;
}

.card-sm .card-placeholder {
  font-size: 7px;
}

.card-sm .card-text {
  display: none;
}

.pools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}

.pool {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
}

.pool-value {
  font-size: 26px;
  font-weight: 700;
}

.pool-label,
.pool-note {
  font-size: 11px;
  color: var(--muted);
}

.play-all {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
  border-radius: 999px;
}

/* Playing only the greys is the quieter of the two shortcuts, so it reads as secondary. */
.play-all.play-greys {
  border-color: rgba(255, 255, 255, 0.35);
  color: #cfcfcf;
}

.hand-label .play-all {
  margin-right: 4px;
}

.end-turn {
  align-self: center;
  background: var(--accent);
  color: #111;
  font-weight: 700;
  padding: 3px 9px;
  font-size: 11px;
}

.prompt-options .play-all {
  align-self: center;
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 6px;
}

.prompt .undo {
  align-self: center;
  margin: 0;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.prompt .undo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.prompt.waiting .undo {
  margin-left: auto;
}

.player-zones {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zone[data-drop='play'],
.zone.artifacts {
  min-height: 140px;
  --played-w: var(--card-w);
}

html[data-compact-played='on'] .zone[data-drop='play'],
html[data-compact-played='on'] .zone.artifacts {
  --played-w: calc(var(--card-w) * 0.75);
}

.zone.artifacts .fan,
.zone[data-drop='play'] .fan {
  --card-w: var(--played-w);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

.player-row {
  overflow: visible;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'pools top piles'
    'pools played piles';
  align-items: start;
}

.player-top {
  grid-area: top;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.player-row > .pools {
  grid-area: pools;
  flex-direction: column;
  flex: none;
  gap: 6px;
  min-width: 0;
  align-self: start;
}

.player-row > .pools .pool {
  width: 64px;
  flex: none;
  background: none;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/*
 * Shared board furniture. `.players-strip`, `.player-chip`, `.player-row`, `.pools`, `.pool`, `.pool-badge`, `.pool-caption` and
 * `.pool-value` are the vocabulary every game's board uses for "the tabs and the panel belonging to a player", so boards stay
 * consistent. Legendary's panel is a three-column grid (two pools beside the played cards); a game with more pools than that
 * stacks them instead with `.player-row-stacked`.
 */
.player-row.player-row-stacked {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
}

.player-row.player-row-stacked > .pools {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}

.player-row.player-row-stacked > .pools .pool {
  width: auto;
  min-width: 54px;
  flex: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.player-row.player-row-stacked > .player-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pool-badge {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
}

/* A pool whose badge is a token rather than an icon (Splendor's gems). Your own empty pool stays legible rather than ghosting out. */
.pool-badge > .gem-chip {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.pool-badge > .gem-chip.gem-empty {
  opacity: 0.6;
}

/* Two numbers in one badge ("3/10") need to be narrower than a single digit. */
.pool-value.pool-fraction {
  font-size: 0.62em;
  letter-spacing: -0.02em;
}

.pool-badge .pool-icon {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  opacity: 0.8;
}

.pool-badge-attack {
  width: 40px;
  height: 40px;
}

.pool-badge-attack .pool-icon {
  inset: 0;
  width: 100%;
  height: 100%;
}

.player-top,
.player-row > .pools,
.player-row > .pools .pool {
  overflow: visible;
}

.pool-icon-attack {
  fill: none;
  stroke: var(--danger);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.pool-badge .pool-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px #000, 0 0 12px #000, 0 0 12px #000;
}

.pool .pool-note {
  flex-basis: 100%;
  text-align: center;
}

.pool-badge .pool-value.pool-zero {
  color: #aeadad;
}

.pool-caption {
  flex-basis: 100%;
  margin-top: -4px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.player-row .side-piles {
  grid-area: piles;
}

.played-row {
  grid-area: played;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.played-row .zone[data-drop='play'] {
  min-width: 0;
}

.played-row .artifacts {
  min-width: 0;
}

.played-row .artifacts .fan {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

.player-zones {
  min-width: 0;
}

.zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zone-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.fan {
  display: flex;
  gap: 8px;
  min-height: 40px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.choice.end {
  background: var(--accent);
  color: #111;
}

.choice.fight {
  border-color: var(--danger);
}

.choice.recruit {
  border-color: var(--accent);
}

.choice.use {
  background: #0af;
  border-color: #0af;
  color: #111;
  font-weight: 700;
  padding: 3px 9px;
  font-size: 11px;
  box-shadow: 0 0 6px rgba(0, 170, 255, 0.55), 0 0 14px rgba(0, 170, 255, 0.3);
}

.choice.use[data-option='lightshow'] {
  background: linear-gradient(110deg, #8b3dff 0%, #ff4fb6 55%, #ffd23f 100%);
  border-color: #ff4fb6;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
  animation: lightshow-glow 1.8s ease-in-out infinite;
}

@keyframes lightshow-glow {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(139, 61, 255, 0.6), 0 0 14px rgba(255, 79, 182, 0.35);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.75), 0 0 22px rgba(255, 79, 182, 0.55);
  }
}

.choice.active {
  outline: 2px solid var(--accent);
}

.confirm {
  margin-top: 10px;
  width: 100%;
  background: var(--accent);
  color: #111;
  font-weight: 700;
}

.waiting {
  color: var(--muted);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;
}

.waiting > .spinner {
  flex: none;
  margin-top: 4px;
}

.waiting > span:not(.spinner) {
  min-width: 0;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

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

.outcome h2 {
  color: var(--accent);
}

.log-wrap {
  position: relative;
  height: 100%;
}

.log {
  overflow: auto;
  height: 100%;
  padding: 8px 8px;
  font-size: 11px;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}

.log-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.log-divider::before,
.log-divider::after {
  content: '';
  flex: 1 1;
  border-top: 1px solid var(--line);
}

.log-line {
  color: var(--muted);
  padding: 2px 6px;
  border-left: 2px solid transparent;
}

.log-latest {
  color: var(--text);
  border-left-color: var(--accent);
  background: rgba(242, 181, 68, 0.08);
  animation: pop 0.3s ease-out;
}

@keyframes pop {
  from {
    transform: translateX(6px);
    opacity: 0.3;
  }
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.lobby-view {
  max-width: 640px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px;
  box-sizing: border-box;
}

.seats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seat {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  color: var(--muted);
  min-width: 140px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.seat.filled {
  border-style: solid;
  color: var(--text);
  background: var(--panel-2);
}

.seat.me {
  border-color: var(--ok);
}

.tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.join-form {
  display: flex;
  gap: 8px;
}

.join-form input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  flex: 1 1;
}

.share {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share code {
  background: var(--panel-2);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
}

.players-strip {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  padding: 0;
  margin-bottom: calc(-1 * var(--board-gap, 14px));
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}

.players-strip::-webkit-scrollbar {
  display: none;
}

.player-chip {
  display: flex;
  flex-direction: column;
  flex: none;
  padding: 5px 10px 6px;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  background: rgba(0, 0, 0, 0.35);
  min-width: 120px;
}

.player-chip.active {
  box-shadow: inset 3px 0 0 var(--ok);
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(76, 175, 80, 0.35);
}

.player-chip-info {
  margin-left: auto;
}

.players-strip .player-chip[role='button'] {
  cursor: pointer;
}

.players-strip .player-chip:not(.viewing) {
  opacity: 0.45;
}

.players-strip .player-chip.deciding {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 10px rgba(242, 181, 68, 0.35);
}

.players-strip .player-chip.deciding .player-name {
  color: var(--accent);
}

.players-strip .player-chip:not(.viewing):hover {
  opacity: 0.7;
}

.players-strip + .player-row,
.players-strip + .row {
  border-top-left-radius: 0;
}

.player-name {
  font-weight: 600;
}

.player-stats {
  font-size: 11px;
  color: var(--muted);
}

.hand-slot {
  touch-action: pan-y;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.18s ease;
}

.hand-slot-shifted {
  transform: translateX(34px) rotate(1.5deg);
}

body[data-drag-target='play'] [data-drop='play'],
body[data-drag-target='discard'] [data-drop='discard'] {
  outline: 2px dashed var(--line);
  outline-offset: 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
}

body[data-drag-target='play'][data-drag-over='play'] [data-drop='play'],
body[data-drag-target='discard'][data-drag-over='discard'] [data-drop='discard'] {
  outline-color: var(--accent);
  background: rgba(242, 181, 68, 0.12);
}

.card-dragging {
  opacity: 0.3;
}

.drag-clone {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.05) rotate(-2deg);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.7));
}

.drag-clone.drag-over {
  transform: translate(-50%, -50%) scale(0.9);
}

.insert-marker {
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
  align-self: stretch;
  margin: 0 -6px;
}

[data-drop] {
  transition: box-shadow 0.15s;
}

.stack {
  position: relative;
  flex-shrink: 0;
}

.stack-card {
  position: absolute;
}

.announcer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}

.announcement {
  position: relative;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  padding: 18px 40px 44px;
  border-radius: 14px;
  background: rgba(15, 16, 19, 0.88);
  border: 2px solid var(--danger);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  max-width: 80vw;
  pointer-events: auto;
  cursor: pointer;
  animation: announce-in 0.35s ease-out;
}

.announcement-player {
  border-color: var(--ok);
  color: #d9f5dc;
}

.announcement-paused {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.announcement-continue {
  position: absolute;
  right: 10px;
  bottom: 8px;
  overflow: hidden;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.announcement-progress {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.announcement-player .announcement-progress {
  background: rgba(76, 175, 80, 0.35);
}

.announcement-continue-label {
  position: relative;
}

@keyframes announce-in {
  0% {
    transform: translateY(24px) scale(0.96);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.status-text {
  display: inline;
}

.log-backdrop {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --hand-w: 92px;
  }

  .game,
  .game.log-closed {
    grid-template-columns: 1fr;
  }

  .table {
    padding: 8px 0 160px;
  }

  .topbar {
    padding: 0 8px;
  }

  .row {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .sidebar {
    position: static;
    width: auto;
    height: 45vh;
    /* The hand is fixed to the bottom of the screen, so leave room to scroll the panel (and the chat box) clear of it. */
    margin: 10px 8px 104px;
  }

  .log-backdrop {
    display: none;
  }

  .game.log-open .board-wrap {
    padding-right: 0;
  }

  .topbar {
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
  }

  .topbar a {
    font-size: 19px;
    white-space: nowrap;
  }

  .topbar-actions {
    gap: 4px;
  }

  .settings-toggle {
    padding: 3px 5px;
  }

  .log-toggle {
    font-size: 24px;
    padding: 0 2px;
  }

  .status-text,
  .topbar .muted {
    display: none;
  }

  .row {
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
  }

  .board {
    --board-gap: 8px;
    gap: var(--board-gap);
  }

  .city,
  .hq {
    gap: 6px;
  }

  .city-name {
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .pile-label,
  .zone-label {
    font-size: 9px;
  }

  .card-badge {
    font-size: 9px;
    padding: 1px 4px;
    top: 2px;
    right: 2px;
  }

  .captured {
    margin-top: -18px;
    padding-left: 10px;
  }

  .captured {
    --captured-w: 30px;
  }

  .pool-note {
    font-size: 10px;
    line-height: 1.2;
  }

  .prompt h2 {
    font-size: 14px;
  }

  .prompt-options button {
    padding: 8px 10px;
    font-size: 13px;
  }

  .prompt-options .end-turn,
  .prompt-options .play-all,
  .prompt .undo {
    padding: 4px 9px;
    font-size: 11px;
  }

  .player-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'pools top'
      'pools played'
      'piles piles';
  }

  .zone[data-drop='play'] {
    min-height: 100px;
  }

  .hand-bar {
    padding: 6px 8px 8px;
  }

  .hand-bar .fan {
    padding: 4px 8px;
  }

  .hand-bar .hand-slot:focus-within {
    z-index: 5;
  }

  .hand-slot-shifted {
    transform: translateX(22px);
  }

  .hand-bar.collapsed {
    transform: translateY(calc(100% - 78px));
  }

  .players-strip {
    gap: 3px;
    padding: 0;
  }

  .player-chip {
    min-width: 0;
    padding: 4px 8px 5px;
  }

  .lobby {
    margin: 24px auto;
    padding: 16px;
    max-width: min(608px, calc(100% - 16px));
  }

  .settings-popover {
    min-width: 200px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .table {
    padding-bottom: 0;
  }
}

.inspect {
  margin-left: 2px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  border: none;
  background: none;
  vertical-align: middle;
  opacity: 0.8;
}

.inspect:hover {
  opacity: 1;
}

.deck-empty {
  padding: 24px;
  margin: 0;
}

.reason {
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--accent);
}

.prompt .reason {
  margin-top: -4px;
}

.waiting .reason {
  display: block;
  margin-top: 2px;
}

.deck-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.deck-modal {
  background: #15161a;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(1100px, 100%);
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
}

.deck-modal header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.deck-modal h2 {
  margin: 0;
  font-size: 16px;
}

.deck-modal header button {
  margin-left: auto;
  padding: 4px 10px;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-w) + 12px), 1fr));
  grid-gap: 14px 10px;
  gap: 14px 10px;
  padding: 16px;
  overflow: auto;
  min-height: 0;
}

.deck-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.deck-entry-name {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .deck-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .deck-grid .card {
    width: 92px;
  }
}

.ghost-card {
  opacity: 0.35;
  filter: grayscale(0.6);
  pointer-events: none;
}

.lobby-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* The game's name in the same lettering as the in-game header (.topbar a), larger. */
.lobby-title h1 {
  margin: 0;
  color: var(--accent);
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 44px;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 3px 3px 0 #111;
}

.lobby-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
}

.lobby-links a {
  color: var(--accent);
  text-decoration: none;
}

.lobby-links a:hover {
  text-decoration: underline;
}

.setup-popover {
  min-width: 300px;
  max-width: min(92vw, 420px);
  max-height: 70vh;
  overflow-y: auto;
}

.setup-popover select {
  font: inherit;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.setting-check {
  align-items: center;
  cursor: pointer;
}

.hero-picker.compact button {
  padding: 4px 8px;
  font-size: 12px;
}

.hero-picker button.led {
  opacity: 0.8;
  border-style: dashed;
}

.hero-picker button.led-option {
  border-style: dashed;
}

.setup-section .setup-note {
  margin: 0;
  padding-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.setup-note button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.mastermind-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Identical guards next to the Mastermind: a real card on top, the rest fanned out behind it */
.guard-fan {
  position: relative;
  justify-content: flex-end;
  min-height: calc(var(--card-sm) * 1.4 + 32px + var(--card-sm) * 0.2);
}

.guard-fan .stack-fan {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 0;
  height: calc(var(--card-sm) * 1.4);
  z-index: 0;
  pointer-events: none;
}

.guard-fan .stack-fan img {
  width: var(--card-sm);
  border-radius: 6px;
  transform-origin: 50% 110%;
  opacity: 0.9;
}

.guard-fan-top {
  position: relative;
  z-index: 1;
}

.guard-fan-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.blocker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.zone.artifacts {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.zone.artifacts .fan {
  margin: -6px;
  padding: 6px 6px 12px;
}

.announcement-with-card {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}

.announcement-card-strip {
  display: flex;
  gap: 10px;
  flex: none;
}

.announcement-card-strip .card {
  width: clamp(90px, 13vw, 150px);
  cursor: zoom-in;
}

.announcement-card-strip .card-badge,
.announcement-mini-strip .card-badge,
.log-card-strip .card-badge {
  font-size: calc(7.5 * var(--card-unit));
  padding: calc(1 * var(--card-unit)) calc(4 * var(--card-unit));
}

.announcement-with-card .announcement-mini-strip {
  display: none;
}

.announcement-card-strip[data-count='3'] .card,
.announcement-card-strip[data-count='4'] .card {
  width: clamp(70px, 9vw, 110px);
}

.log-has-cards {
  cursor: pointer;
  border-left-color: var(--line);
}

.log-peeked {
  color: var(--text);
}

.log-cards {
  position: fixed;
  transform: translate(calc(-100% - 10px), -50%);
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  z-index: 260;
  pointer-events: none;
}

.log-card-strip {
  display: flex;
  gap: 6px;
}

.log-card-strip .card {
  width: min(260px, 40vw);
}

.log-card-strip .card.card-landscape {
  width: min(360px, 60vw);
}

@media (max-width: 900px) {
  .log-cards {
    transform: translate(0, 10px);
    left: 12px !important;
    max-width: calc(100vw - 24px);
  }

  .log-card-strip {
    overflow-x: auto;
  }

  .log-card-strip .card {
    flex: none;
    width: 48vw;
  }
}

.lobby .setting-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.lobby .setup-popover .setting {
  text-align: left;
}

.mastermind-pick {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pick-row .card-select {
  flex: 1 1;
  min-width: 0;
}

.pick-row .epic-toggle {
  flex: none;
  white-space: nowrap;
}

.pick-detail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
}

.pick-main {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pick-main select {
  flex: none;
  width: 100%;
}

.card-select {
  position: relative;
  width: 100%;
}

.card-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.card-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-select-caret {
  flex: none;
  color: #fff;
  font-size: 12px;
}

.card-select-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #15161a;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.card-select-above {
  top: auto;
  bottom: calc(100% + 4px);
}

.card-select-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(0, 0, 0, 0.5);
}

.card-select-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
}

.card-select-fixed.card-select-sheet {
  height: 70vh;
}

.card-select-sheet {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.card-select-group {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 6px 10px 4px;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: #15161a;
  border-bottom: 1px solid var(--line);
}

.card-select-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.card-select-option:last-child {
  border-bottom: 0;
}

.card-select-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.card-select-popover button.card-select-option.active {
  background: rgba(242, 181, 68, 0.22);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}

.card-select-popover button.card-select-option.active .card-select-name {
  color: var(--accent);
}

.card-select-option img,
.card-select-blank {
  flex: none;
  width: 48px;
  border-radius: 4px;
}

.card-select-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.card-select-name {
  font-size: 14px;
  font-weight: 600;
}

.card-select-name em {
  margin-left: 6px;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

.card-select-text {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.card-select-text .card-section + .card-section {
  margin-top: 2px;
}

.card-select-text .card-section b {
  color: var(--text);
  font-weight: 600;
}

.stack-option {
  align-items: center;
}

.stack-fan-wrap {
  display: block;
  flex: none;
  position: relative;
  z-index: 0;
}

.stack-fan {
  position: relative;
  display: block;
  width: 96px;
  height: 66px;
  overflow: visible;
}

.stack-fan img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  border-radius: 3px;
  transform-origin: 50% 120%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.card-stack-preview {
  position: fixed;
  z-index: 350;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.card-stack-preview img {
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
}

.card-modal-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  max-width: 96vw;
  padding: 8px;
  scroll-snap-type: x mandatory;
}

.card-modal-strip img {
  flex: none;
  width: min(62vw, 260px);
  border-radius: 10px;
  scroll-snap-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
}

.picked-stacks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.picked-stack-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.picked-stack-cards {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

.picked-stack-cards .card {
  flex: none;
}

.hero-classes {
  display: flex;
  gap: 4px;
  align-items: center;
}

.hero-classes img {
  width: 18px;
  height: 18px;
}

.hero-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hero-icon i {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.8;
}

.picked-stacks-totals .deck-summary {
  padding: 4px 0 8px;
  gap: 10px;
}

.picked-stacks-totals .deck-tally img {
  width: 22px;
  height: 22px;
}

.stack-check {
  flex: none;
  margin-left: auto;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 20px;
  color: var(--accent);
}

.card-select-option:disabled {
  opacity: 0.4;
  cursor: default;
}

.stack-option.active:disabled {
  opacity: 0.85;
}

.stack-option.led-option {
  box-shadow: inset 0 0 0 1px rgba(242, 181, 68, 0.5);
}

.stack-hint {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0.85;
}

.stack-meta {
  font-size: 11px;
  color: var(--muted);
}

.pick-text {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.card-section {
  display: block;
}

.card-section + .card-section {
  margin-top: 4px;
}

.pick-text .card-section b {
  color: var(--text);
  font-weight: 600;
}

.pick-card {
  flex: none;
}

.pick-card .card {
  width: var(--card-w);
}

.pick-card .city-empty {
  width: var(--card-w);
}

.lobby label > select {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.mastermind-pick select {
  flex: 1 1;
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.lobby .epic-toggle {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.darkness {
  position: relative;
}

.darkness > .card,
.darkness > .city-empty {
  position: relative;
  z-index: 1;
}

.darkness::before,
.darkness::after {
  z-index: 2;
}

.darkness::before,
.darkness::after {
  content: '';
  position: absolute;
  left: -16%;
  right: -16%;
  top: -22%;
  bottom: 0;
  pointer-events: none;
  background-repeat: repeat-y;
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0, #000 20%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0, #000 20%, #000 60%, transparent 100%);
}

.darkness::before {
  background-image:
    radial-gradient(45% 38% at 30% 28%, rgba(0, 0, 0, 0.95), transparent 70%),
    radial-gradient(40% 34% at 72% 62%, rgba(118, 50, 185, 0.75), transparent 70%),
    radial-gradient(34% 30% at 48% 90%, rgba(0, 0, 0, 0.9), transparent 70%);
  background-size: 100% 140px;
  animation: smoke-scroll-a 3.2s linear infinite;
}

.darkness::after {
  background-image:
    radial-gradient(42% 36% at 66% 20%, rgba(0, 0, 0, 0.85), transparent 70%),
    radial-gradient(36% 32% at 26% 55%, rgba(160, 95, 230, 0.55), transparent 70%),
    radial-gradient(40% 34% at 58% 84%, rgba(0, 0, 0, 0.9), transparent 70%);
  background-size: 100% 190px;
  animation: smoke-scroll-b 4.6s linear infinite;
}

@keyframes smoke-scroll-a {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}

@keyframes smoke-scroll-b {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -190px;
  }
}

.hq-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.card-alias {
  position: absolute;
  top: calc(3 * var(--card-unit) / 1.3);
  left: 0;
  right: 0;
  padding: calc(1.5 * var(--card-unit)) calc(3 * var(--card-unit));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 18%, rgba(0, 0, 0, 0.8) 82%, rgba(0, 0, 0, 0) 100%);
  color: #ffd23f;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: calc(10.5 * var(--card-unit));
  font-weight: 400;
  letter-spacing: 0.03em;
  text-shadow: 2px 2px 0 #111, 0 0 8px #000;
  -webkit-text-stroke: 0.5px #111;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.1;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.space-highlight {
  cursor: pointer;
}

.space-highlight .city-empty,
.space-highlight > .card,
.space-highlight > .card-wrap > .card {
  border-color: var(--accent);
  border-radius: 8px;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(242, 181, 68, 0.6);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent), 0 0 6px rgba(242, 181, 68, 0.3);
  }
}

.card-flight {
  position: fixed;
  z-index: 280;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
  transform-origin: top left;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  background: var(--panel-2);
}

.card-flight img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A board that draws its cards from data instead of showing a scan flies a copy of the card, so the copy fills the ghost. */
.card-flight.card-flight-clone {
  background: none;
}

.card-flight.card-flight-clone > * {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.enemy-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  max-width: var(--card-w);
}

.enemy-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attack-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
}

.attack-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--danger);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.attack-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000;
}

.mastermind .enemy-stat {
  justify-content: center;
}

.announcement-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
}

.announcement:not(.announcement-with-card):not(.announcement-with-minis) .announcement-lines {
  align-items: center;
  text-align: center;
}

.announcement-with-minis {
  text-align: left;
}

.announcement-with-minis .announcement-line {
  width: 100%;
}

.announcement-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 600;
  letter-spacing: 0;
  color: #d7d9de;
}

.announcement-line-player {
  color: #bfe8c3;
}

.announcement-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.announcement-block-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.announcement-mini-strip {
  display: flex;
  gap: 3px;
  flex: none;
}

.announcement-mini-strip {
  margin-top: 0.15em;
}

.announcement-mini-strip .card {
  width: 34px;
  border-width: 1px;
  border-radius: 3px;
  cursor: zoom-in;
}

.announcement-mini-strip .card-alias {
  display: none;
}

.announcement-mini-empty {
  width: 34px;
  flex: none;
}

.announcement-detail {
  display: block;
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.35;
}

.announcement-line.announcement-text {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.announcement-text + .announcement-detail {
  margin-top: -2px;
}

.game-action {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.game-action {
  color: #0af;
  border-color: rgba(0, 170, 255, 0.55);
  background: rgba(0, 170, 255, 0.1);
}

.game-action:hover {
  color: #fff;
  border-color: #0af;
  background: rgba(0, 170, 255, 0.3);
}

.game-action-end {
  color: #ff6b6b;
  border-color: rgba(220, 60, 60, 0.55);
  background: rgba(220, 60, 60, 0.1);
}

.game-action-end:hover {
  color: #fff;
  border-color: var(--danger);
  background: rgba(220, 60, 60, 0.35);
}

.reset-settings {
  width: 100%;
  margin-top: 4px;
}

.zone-note {
  margin-left: 10px;
  font-size: 12px;
  color: #d9c7a0;
  opacity: 0.9;
}

.game-clock .game-action:first-of-type {
  margin-left: 6px;
}

.deck-entry-hero {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.announcement-hint {
  position: absolute;
  left: 18px;
  right: 120px;
  bottom: 13px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.announcement-no-expiry .announcement-hint {
  right: 18px;
}

.setting-disabled {
  opacity: 0.45;
}

.setting-divider {
  width: 60%;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--line);
}

.log-jump {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(15, 16, 19, 0.92);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  animation: pop 0.25s ease-out;
}

.log-count {
  color: var(--muted);
  opacity: 0.8;
}

.log-divider {
  color: var(--accent);
}




.log-button {
  padding: 4px 6px;
  line-height: 1;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

.log-button svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.log-button:hover {
  color: var(--accent);
}

.log-button.active,
.log-button.active:hover {
  color: var(--ok);
  background: none;
  border: 0;
}

.card-modal-closing {
  opacity: 0;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--card-w);
  font-size: 12px;
  color: var(--muted);
}

.hero-stat-left {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.hero-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.stat-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
}

.stat-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stat-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000;
}



.card-icons {
  position: absolute;
  top: 4%;
  left: 3%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 17%;
  z-index: 2;
  pointer-events: none;
}

.card-icons img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transform: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.card-sm .card-icons {
  display: none;
}

@media (max-width: 900px) {
  .announcement-card-strip {
    display: none;
  }

  .announcement-with-card .announcement-mini-strip {
    display: flex;
  }

  .announcement-with-card {
    text-align: center;
  }

  .announcement-with-card .announcement-lines {
    align-items: stretch;
    text-align: left;
    width: 100%;
  }

  .announcement {
    min-width: min(92vw, 380px);
    max-width: 92vw;
    padding: 16px 18px 44px;
  }

  .announcement-mini-strip .card {
    width: 40px;
    cursor: default;
  }
}

.debug-log {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 11px;
}

.debug-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.debug-toolbar button {
  padding: 3px 8px;
  font-size: 11px;
}

.debug-search {
  flex: 1 1;
  min-width: 120px;
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.debug-turn {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debug-divider {
  cursor: pointer;
  margin: 10px 0 4px;
}

.debug-divider:hover span {
  color: var(--text);
}

.debug-steps {
  overflow: auto;
  flex: 1 1;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.debug-step {
  cursor: pointer;
  display: flex;
  gap: 8px;
}

.debug-step:hover {
  color: var(--text);
}

.debug-seq {
  flex: none;
  min-width: 32px;
  text-align: right;
  color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.debug-choice {
  color: var(--accent);
}

.debug-current {
  color: var(--text);
  border-left-color: var(--ok);
  background: rgba(255, 255, 255, 0.05);
}

.table.rewound .board {
  outline: 2px dashed var(--ok);
  outline-offset: -2px;
}

.attack-breakdown {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.92);
  color: #d6d8de;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.attack-breakdown-total {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 4px;
}

.attack-part {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.attack-part b {
  color: #fff;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.keyword-notes {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.92);
  color: #d6d8de;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.keyword-notes p {
  margin: 0;
}

.keyword-notes p + p {
  margin-top: 6px;
}

.keyword-notes b {
  color: var(--accent);
}

.inline-icon {
  height: 1.3em;
  width: 1.3em;
  vertical-align: -0.35em;
  margin: 0 1px;
  fill: none;
  stroke: var(--danger);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.inline-icon.inline-recruit {
  width: 2em;
  height: 2em;
  margin: -0.5em -0.45em;
  vertical-align: -0.55em;
}

.card-modal .keyword-notes {
  overflow: auto;
  max-height: 30vh;
}

.card-preview .keyword-notes {
  position: absolute;
  margin: 0;
  width: 250px;
}

.card-preview.side-right .keyword-notes {
  left: 100%;
  top: 0;
  margin-left: 8px;
}

.card-preview.side-left .keyword-notes {
  right: 100%;
  top: 0;
  margin-right: 8px;
}

.card-preview.side-bottom .keyword-notes,
.card-preview.side-top .keyword-notes {
  left: 0;
  width: 100%;
}

.card-preview.side-bottom .keyword-notes {
  top: 100%;
  margin-top: 6px;
}

.card-preview.side-top .keyword-notes {
  bottom: 100%;
  margin-bottom: 6px;
}

.focus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
}

.focus-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(92vw, 900px);
  max-height: 90dvh;
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.focus-head .prompt {
  flex: 1 1;
}

.focus-head .prompt h2 {
  color: var(--accent);
}

.focus-head .minimize {
  flex: none;
  padding: 6px 12px;
  font-size: 12px;
}

.focus-modal .fan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.focus-modal.focus-single {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  grid-column-gap: 22px;
  column-gap: 22px;
  width: min(92vw, 760px);
}

.focus-modal.focus-single .fan {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.focus-modal.focus-single .focus-head {
  grid-column: 2;
  grid-row: 1;
}

.focus-modal.focus-single .zone-label {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 900px) {
  .focus-modal.focus-single {
    display: flex;
  }
}

.show-options-row {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.show-options {
  pointer-events: auto;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #14120c;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  box-shadow: 0 0 12px 3px rgba(255, 138, 61, 0.55), 0 0 30px 10px rgba(0, 0, 0, 0.6);
  animation: show-options-glow 3.6s ease-in-out infinite;
}

@keyframes show-options-glow {
  0%,
  100% {
    box-shadow: 0 0 10px 2px rgba(255, 138, 61, 0.45), 0 0 30px 10px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 24px 9px rgba(255, 138, 61, 0.95), 0 0 30px 10px rgba(0, 0, 0, 0.6);
  }
}

.debug-add {
  display: flex;
  gap: 4px;
  width: 100%;
}

.debug-add input {
  flex: 1 1;
  min-width: 0;
  font-size: 11px;
  padding: 3px 6px;
}

@media (max-width: 900px) {
  .focus-backdrop {
    padding: 8px;
    align-items: flex-end;
  }

  .focus-modal {
    width: 100%;
    max-height: 85dvh;
  }
}

.debug-players {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.debug-player {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.debug-player-name {
  flex: none;
  color: var(--text);
}

.debug-player-id {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--muted);
}

.pile-choice > .card {
  cursor: pointer;
}

.debug-toolbar .debug-rewind {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.debug-toolbar .debug-rewind:disabled {
  opacity: 0.4;
}

.deck-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}

.deck-tally {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deck-tally img {
  width: 30px;
  height: 30px;
}

.deck-tally-gap {
  width: 1px;
  height: 18px;
  background: var(--line);
}

.attack-icon-art {
  width: 30px;
  height: 30px;
}

.attack-icon-art img {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  pointer-events: none;
}

.attack-icon-art .attack-value {
  font-size: 14px;
}

.card.card-mini {
  width: calc(var(--card-w) * 1.25);
  aspect-ratio: 1;
  overflow: visible;
  border-width: 2px;
  border-bottom-width: 5px;
  border-bottom-color: #1a1b20;
  background: #101114;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card.card-mini.card-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(242, 181, 68, 0.55), 0 4px 12px rgba(242, 181, 68, 0.4), 0 4px 6px rgba(0, 0, 0, 0.45);
}

.card.card-mini.card-highlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(242, 181, 68, 0.75), rgba(242, 181, 68, 0.25) 55%, rgba(242, 181, 68, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 4px;
}

.card-mini .mini-art {
  border-radius: 6px 6px 4px 4px;
}

.card-mini .card-badge {
  top: -8px;
  right: -8px;
  bottom: auto;
}

.card-mini .mini-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
}

.card-mini .mini-art img {
  position: absolute;
  left: -15%;
  top: 0;
  width: 130%;
  height: 130%;
  object-fit: cover;
  object-position: 50% 12%;
  transform: none;
}

.card-mini .mini-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 11px 3px 6px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.card-mini .mini-icons {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.card-mini .mini-icons img {
  width: 24px;
  height: 24px;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.card-mini .mini-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.15;
  font-size: calc(var(--card-unit) * 7.5);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.card .mini-stats {
  position: absolute;
  left: 50%;
  bottom: calc(-18px * var(--card-scale));
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.card-mini .mini-powers {
  position: absolute;
  left: -3px;
  bottom: -5px;
  z-index: 3;
  display: flex;
  gap: 1px;
  pointer-events: none;
}

.card-mini .mini-powers img {
  width: 16px;
  height: 16px;
  flex: none;
  padding: 1px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.card-mini .mini-cost {
  position: absolute;
  right: -7px;
  bottom: -9px;
  z-index: 3;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.card-mini .mini-cost img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.card-mini .mini-cost span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 6px #000;
}

.card .mini-stat {
  position: relative;
  width: calc(34px * var(--card-scale));
  height: calc(34px * var(--card-scale));
  flex: none;
}

.card .mini-stat img,
.card .mini-stat svg {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
}

.card .mini-stat svg {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.card-mini .mini-cost svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card .mini-stats-compact {
  gap: 0;
  left: 2px;
  right: 2px;
  transform: none;
  justify-content: space-evenly;
  bottom: calc(-11 * var(--card-unit));
}

.card .mini-stats-compact .mini-stat {
  width: calc(20 * var(--card-unit));
  height: calc(20 * var(--card-unit));
  margin: 0;
}

.card .mini-stats-compact .mini-stat span {
  font-size: calc(11 * var(--card-unit));
}

.card-mini .mini-cost.mini-cost-compact {
  width: calc(20 * var(--card-unit));
  height: calc(20 * var(--card-unit));
  right: calc(-5 * var(--card-unit));
  bottom: calc(-6 * var(--card-unit));
}

.card-mini .mini-cost.mini-cost-compact span {
  font-size: calc(10 * var(--card-unit));
}

@font-face {
  font-family: 'ChampionsIcons';
  src: url('/fonts/ChampionsIcons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.champ-glyph {
  font-family: 'ChampionsIcons', sans-serif;
  font-style: normal;
  line-height: 1;
}

.card-mini .mini-cost .champ-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f2f2f2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.action-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.action-sheet {
  width: min(520px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: #1c1e26;
  border: 1px solid #3a3d4a;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
}

.action-sheet-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.action-sheet-head .card {
  flex: none;
}

.action-sheet-head p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.action-sheet-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-sheet-options button {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #3a3d4a;
  background: #262935;
  color: #f2f2f2;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.action-sheet-options button.action-attack {
  border-color: #d9483b;
}

.action-sheet-options button.action-thwart {
  border-color: #3d9be9;
}

.action-sheet-options button.action-flip,
.action-sheet-options button.action-recover {
  border-color: #e6a23c;
}

.action-sheet-options button.action-cancel {
  background: transparent;
  color: #aaa;
  text-align: center;
}

.card.card-mini.card-landscape {
  width: calc(var(--card-w) * 1.25 * 1.4);
  aspect-ratio: 7 / 5;
}

.card-mini.card-landscape .mini-art img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.champ-character {
  position: relative;
  padding-top: 9px;
  flex: none;
}

.champ-health {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  white-space: nowrap;
  pointer-events: none;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.85);
}

@media (max-width: 900px) and (hover: hover) {
  .hand-bar .hand-slot:hover {
    z-index: 5;
  }
}

.hand-bar .hand-slot {
  position: relative;
  z-index: 0;
}

.debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

.setup-section {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.setup-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.setup-section > summary::-webkit-details-marker {
  display: none;
}

.setup-section > summary::before {
  content: '▸';
  display: inline-block;
  width: 1.1em;
  transition: transform 0.15s;
}

.setup-section[open] > summary::before {
  transform: rotate(90deg);
}

.setup-section[open] > summary {
  color: var(--text, #f2f2f2);
}

.setup-section > :not(summary) {
  padding: 0 12px 12px;
}

.setup-section .hero-picker button {
  opacity: 0.9;
}

.setup-section .hero-picker button.active {
  opacity: 1;
}

.setup-section .epic-toggle {
  border: none;
  background: none;
  padding: 0 4px;
}

.setup-section select {
  color-scheme: dark;
}

.setup-sets {
  gap: 12px;
}

.setup-sets p {
  margin: 0;
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.filter-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.filter-facet.card-select {
  width: auto;
}

.filter-bar .card-select-trigger.filter-chip {
  width: auto;
  height: 32px;
  gap: 6px;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.filter-bar .card-select-trigger.filter-chip-include {
  border-color: var(--accent);
}

.filter-active-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #15161a;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.filter-popover:not(.card-select-sheet) {
  min-width: 280px;
  right: auto;
}

.filter-popover-header {
  flex-wrap: wrap;
}

.filter-popover .filter-popover-header input {
  flex-basis: 100%;
}

.filter-popover-title {
  flex: 1 1;
  font-size: 12px;
  color: var(--muted);
}

.filter-hint {
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--muted);
}

.card-select-popover button.card-select-option.filter-option {
  align-items: center;
  padding: 6px 10px;
}

.card-select-popover button.card-select-option.filter-option:has(.filter-option-text) {
  align-items: flex-start;
}

.filter-option:has(.filter-option-text) .filter-mark {
  margin-top: 2px;
}

.card-select-popover button.card-select-option.filter-option-exclude {
  background: rgba(216, 74, 74, 0.16);
}

.filter-option-exclude .filter-option-label {
  text-decoration: line-through;
}

.filter-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1;
}

.filter-mark-include {
  border-color: var(--accent);
  background: var(--accent);
  color: #15161a;
}

.filter-mark-exclude {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.card-select-option img.filter-icon,
.filter-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 0;
}

.filter-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.filter-option-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-option-text {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.filter-option-exclude .filter-option-text {
  text-decoration: none;
}

.filter-count {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.filter-link {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.filter-summary {
  font-size: 12px;
}

.filter-bar-footer .filter-link {
  padding: 0;
}

.filter-bar.filter-bar-plain {
  padding: 0;
  border: none;
  background: none;
}

.setup-section .filter-bar.filter-bar-plain {
  padding: 0 12px 8px;
}

.metrics {
  max-width: 1280px;
  margin: 24px auto 60px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.metrics-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.metrics-head h1 {
  margin: 0 0 4px;
}

.metrics-head p {
  margin: 0;
}

.metrics-home {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}

.metrics-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.metrics-stat {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metrics-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.metrics-stat-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.metrics-group h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.metrics-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px 8px;
  min-width: 0;
}

.metrics-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #d7d9de;
}

.metrics-canvas {
  position: relative;
  height: 180px;
}

.metrics-empty {
  color: var(--muted);
  padding: 40px 0;
  text-align: center;
}

.attack-ghost {
  position: fixed;
  z-index: 400;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(242, 181, 68, 0.6);
  transform-origin: center;
}

.attack-hidden {
  visibility: hidden;
}

.attack-impact {
  position: fixed;
  z-index: 399;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 240, 200, 0.95) 0%, rgba(242, 181, 68, 0.6) 35%, rgba(242, 181, 68, 0) 70%);
}

.end-turn.end-game {
  background: var(--ok);
  border-color: var(--ok);
  color: #0d1a0e;
}

.win-note {
  flex-basis: 100%;
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
}

.report-button {
  padding: 6px 12px;
  font-size: 13px;
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.report-modal {
  width: min(900px, 100%);
}

.report-modal header {
  position: relative;
}

.report-close {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 13px;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  padding: 12px 16px 4px;
}

.report-tile {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.report-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.report-table-wrap {
  overflow: auto;
  padding: 8px 16px 16px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.report-table th,
.report-table td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.report-table th:first-child,
.report-table td:first-child {
  text-align: left;
  color: var(--muted);
}

.report-table th {
  color: var(--accent);
  font-weight: 600;
}

.help-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
}

.help-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 0 4px #ffd23f, 0 0 24px rgba(255, 210, 63, 0.6);
  pointer-events: none;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.help-spot-none {
  inset: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.62);
}

.help-bubble {
  position: fixed;
  background: #fffdf5;
  color: #111;
  border: 4px solid #111;
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 8px 8px 0 #111;
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
  transition: left 0.25s ease, top 0.25s ease;
}

.help-bubble::before,
.help-bubble::after {
  content: '';
  position: absolute;
  left: var(--tail-x);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  transform: translateX(-50%);
}

.help-tail-top::before {
  top: -24px;
  border-bottom: 24px solid #111;
}

.help-tail-top::after {
  top: -17px;
  border-bottom: 20px solid #fffdf5;
}

.help-tail-bottom::before {
  bottom: -24px;
  border-top: 24px solid #111;
}

.help-tail-bottom::after {
  bottom: -17px;
  border-top: 20px solid #fffdf5;
}

.help-counter-wrap {
  position: absolute;
  top: -14px;
  right: 14px;
}

.help-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffd23f;
  color: #111;
  border: 3px solid #111;
  border-radius: 999px;
  padding: 2px 8px 2px 10px;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.help-caret {
  font-size: 12px;
  line-height: 1;
}

.help-jump-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1;
  min-width: 200px;
  max-height: 50vh;
  overflow-y: auto;
  background: #fffdf5;
  border: 3px solid #111;
  border-radius: 10px;
  box-shadow: 6px 6px 0 #111;
  padding: 4px;
}

.help-counter-left .help-jump-menu {
  right: auto;
  left: 0;
}

.help-jump-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #111;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.help-jump-menu button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.help-jump-menu button.active {
  background: #ffd23f;
}

.help-jump-number {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  min-width: 18px;
  text-align: right;
  color: #555;
}

.help-counter-left {
  right: auto;
  left: 14px;
}

.help-bubble h3 {
  margin: 0 0 6px;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #d21f2b;
  text-shadow: 2px 2px 0 #111;
  -webkit-text-stroke: 0.5px #111;
}

.help-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 12px;
}

.help-chip {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  margin: 2px 6px 4px 2px;
  transform: rotate(-4deg);
}

.help-chip .card {
  width: 72px;
}

.help-image {
  flex: 0 0 auto;
  width: 72px;
  border: 3px solid #111;
  border-radius: 6px;
  box-shadow: 3px 3px 0 #111;
  transform: rotate(-4deg);
  margin: 2px 6px 4px 2px;
}

.help-bubble p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-line;
}

.help-bubble p b {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.05em;
  color: #111;
}

.help-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.help-actions button {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border: 3px solid #111;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #111;
  color: #111;
  background: #fff;
  cursor: pointer;
}

.help-actions button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #111;
}

.help-actions .help-next {
  background: #ffd23f;
}

.help-actions .help-skip {
  margin-right: auto;
  background: #eee;
}


.card-back.card-back-plain {
  background: radial-gradient(circle at 50% 40%, #3b2a5a 0%, #1c1e26 70%);
}

.card .mini-stat span.mini-boosted {
  color: var(--accent);
}

.card .mini-stat span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--card-scale));
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 6px #000;
}

.card-mini .card-alias,
.card-mini .card-badge {
  z-index: 3;
}

.board-mini .city-empty {
  width: calc(var(--card-w) * 1.25);
  aspect-ratio: 1;
}

.board-mini .fan,
.board-mini .hq,
.board-mini .city {
  padding-top: 12px;
  padding-bottom: 16px;
}

.board-mini .fan,
.board-mini .hq,
.board-mini .city {
  transform: perspective(900px) rotateX(22deg);
  transform-origin: 50% 100%;
}

.card-mini .card-alias {
  top: 6px;
}

.card-mini.card-aliased .mini-name {
  visibility: hidden;
}

.strike-icon {
  position: fixed;
  z-index: 340;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

.card.card-badged {
  overflow: visible;
}

.card-badged .card-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
}

.card-badged .mini-stats {
  bottom: calc(-18px * var(--card-scale));
}


.board:not(.board-mini) .city,
.board:not(.board-mini) .mastermind-row {
  padding-bottom: 16px;
}

.card-stats-inplace .mini-stats {
  inset: 0;
  transform: none;
  display: block;
}

.card-stats-inplace .mini-stat {
  position: absolute;
  height: auto;
  aspect-ratio: 1;
}

.card-stats-inplace .mini-stat-recruit {
  left: -3.5%;
  top: 62.8%;
  width: 27%;
}

.card-stats-inplace .mini-stat-attack {
  left: -3%;
  top: 78.3%;
  width: 25%;
}

.card-stats-inplace .mini-stat span {
  font-size: 15px;
}

.card-stats-inplace .mini-stat:not(:has(.mini-boosted)) {
  display: none;
}

.card-stats-inplace .mini-stat img {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.7));
}

@media (max-width: 900px) {
  .row {
    border-radius: 0;
  }
}

.pile-short .card {
  height: calc(var(--card-w) * 0.38);
  aspect-ratio: auto;
}

.pile-short .card img {
  object-position: 50% 12%;
}

.optional-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.houserule-tag {
  margin-right: 6px;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.optional-rule-text {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
}

.hero-deck-column {
  align-items: center;
  gap: 6px;
}

.hq-reroll {
  white-space: nowrap;
}

.hq-reroll:disabled {
  opacity: 0.45;
  cursor: default;
}

.pile-note {
  font-size: clamp(8px, calc(var(--card-w) * 0.09), 15px);
  line-height: 1.2;
  margin-top: -2px;
  color: var(--muted);
  text-align: center;
  max-width: calc(var(--card-w) + 12px);
}

.card-badge,
.pool-value,
.pool-badge .pool-value,
.stat-value,
.card .mini-stat span,
.card-mini .mini-cost span,
.champ-health {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.card-badge {
  font-size: calc(9 * var(--card-unit));
  font-weight: 300;
  padding: calc(1 * var(--card-unit)) calc(5 * var(--card-unit));
  border-radius: calc(10 * var(--card-unit));
}

.card-mini .mini-cost span {
  font-size: 13px;
}

.card-mini .mini-cost.mini-cost-compact span {
  font-size: calc(12 * var(--card-unit));
}

.champ-health {
  font-size: 13px;
}

.setup-seat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.setup-seat-row .card-select {
  flex: 1 1 14rem;
  min-width: 12rem;
}

.setup-seat + .setup-seat {
  margin-top: 0.25rem;
}

.hand-slot {
  position: relative;
}

.resource-pips {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 6;
  pointer-events: none;
}

.resource-pip {
  min-width: 26px;
  height: 26px;
  padding: 0 5px 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.resource-pip b {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
}

.resource-pip .resource-glyph {
  font-size: 15px;
}

.resource-glyph-energy {
  color: #f5c542;
}

.resource-glyph-mental {
  color: #4aa3ff;
}

.resource-glyph-physical {
  color: #e8503a;
}

.resource-glyph-wild {
  color: #5ccf6a;
}

.resource-pip b.resource-doubled {
  color: var(--accent, #f0a020);
}

.card .mini-stats.mini-health {
  left: auto;
  right: calc(-5 * var(--card-unit));
  bottom: auto;
  top: calc(-6 * var(--card-unit));
  justify-content: flex-end;
}

.card .mini-stats-compact.mini-health .mini-stat {
  width: calc(24 * var(--card-unit));
  height: calc(24 * var(--card-unit));
}

.card .mini-stat-health span {
  padding-bottom: calc(2 * var(--card-unit));
}

.champ-status {
  position: absolute;
  top: calc(22 * var(--card-unit));
  right: calc(-4 * var(--card-unit));
  z-index: 4;
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: calc(10 * var(--card-unit));
  line-height: 1;
  padding: calc(2 * var(--card-unit)) calc(5 * var(--card-unit));
  border-radius: calc(8 * var(--card-unit));
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}

.card .mini-stat .stat-glyph {
  font-family: 'ChampionsIcons', sans-serif;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(36px * var(--card-scale));
  text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.9);
}

.card .mini-stats-compact .mini-stat .stat-glyph {
  font-size: calc(23 * var(--card-unit));
}

.card .mini-stat .stat-glyph-attack {
  color: #d9483b;
}

.card .mini-stat .stat-glyph-thwart,
.card .mini-stat .stat-glyph-scheme {
  color: #3d9be9;
}

.champ-character.exhausted .card {
  opacity: 0.72;
}

.champ-character.exhausted::after {
  content: '✕';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: calc(44 * var(--card-unit));
  line-height: 1;
  color: #e5352b;
  text-shadow: 0 0 3px #000, 0 2px 4px rgba(0, 0, 0, 0.8);
}

.card .mini-stat .mini-stat-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: calc(-1 * var(--card-unit));
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(7 * var(--card-unit));
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 1px 2px #000;
  white-space: nowrap;
  pointer-events: none;
}

.card .mini-stats.mini-health .mini-stat-label {
  display: none;
}

.dark-mark {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1;
  vertical-align: -1px;
  white-space: nowrap;
}

.dark-mark::before {
  content: '';
  position: absolute;
  inset: -55% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 90, 240, 0.9), rgba(95, 35, 170, 0.5) 50%, transparent 74%);
  filter: blur(3px);
}

.dark-mark > span {
  position: relative;
  display: inline-block;
  filter: sepia(1) saturate(4) hue-rotate(225deg) brightness(1.15) drop-shadow(0 0 3px rgba(185, 120, 255, 0.95));
}

/* Lash City: the Tornado sits over one city space; the Villain under it gets +3 Attack. */
.family-deck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  margin-left: 0.4em;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 700;
  color: #fff;
  background: rgba(120, 20, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  vertical-align: middle;
}

.incursion-mark::before {
  background: radial-gradient(circle, rgba(255, 200, 80, 0.9), rgba(200, 120, 20, 0.5) 50%, transparent 74%);
}

/* Breach Parallel Dimensions: one counter per Dimension deck under the Villain Deck pile. */
.dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 96px;
  justify-content: center;
}

.dimension {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 700;
  color: #fff;
  background: rgba(40, 60, 120, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.dimension-active {
  background: rgba(212, 160, 23, 0.9);
  color: #111;
}

.dimension-destroyed {
  background: rgba(60, 60, 60, 0.8);
  color: #ddd;
}

.tornado-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8f4ff;
  background: linear-gradient(135deg, #3b6d8f, #1e3a52);
  border: 1px solid rgba(160, 210, 255, 0.7);
  box-shadow: 0 0 8px rgba(120, 190, 255, 0.55);
  vertical-align: 1px;
  white-space: nowrap;
}


.pool-note span {
  display: block;
}

.card-mini .mini-cost span.mini-boosted {
  color: var(--accent);
}

.card-mini .mini-cost-dark::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 90, 240, 0.9), rgba(95, 35, 170, 0.5) 50%, transparent 74%);
  filter: blur(2px);
}

.card-mini .mini-cost-moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  filter: sepia(1) saturate(4) hue-rotate(225deg) brightness(1.15) drop-shadow(0 0 2px rgba(185, 120, 255, 0.9));
}

.announcement-detail .card-section + .card-section {
  margin-top: 3px;
}

.announcement-detail .card-section b {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0.05em;
  color: #ffd23f;
}

.card-select-thumb {
  display: block;
  flex: none;
}

.card-select-thumb img {
  display: block;
}

.fan-bleed {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.fan-bleed::-webkit-scrollbar {
  display: none;
}

@media (min-width: 701px) {
  .fan.fan-play {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 12px;
  }
}

@media (max-width: 700px) {
  .fan-bleed {
    margin-left: -16px;
    margin-right: -8px;
    padding-left: 16px;
    padding-right: 8px;
    scroll-padding-left: 16px;
  }
}

.champ-character .champ-attachments.captured-fan {
  margin-top: -26px;
  padding-left: 10px;
  justify-content: center;
}

.card-mini + .champ-attachments.captured-fan {
  margin-top: -14px;
}

.champ-character > .card {
  position: relative;
  z-index: 1;
}

.champ-character > .champ-attachments.captured-fan {
  z-index: 0;
}

.hand-held {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.hand-bar .hand-held .card {
  pointer-events: auto;
}

.hand-held .card {
  box-shadow: 0 0 0 2px var(--accent), 0 12px 30px rgba(0, 0, 0, 0.7);
  animation: hand-held-float 2.4s ease-in-out infinite;
}

@keyframes hand-held-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
    box-shadow: 0 0 0 2px var(--accent), 0 12px 30px rgba(0, 0, 0, 0.7);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
    box-shadow: 0 0 0 2px var(--accent), 0 22px 36px rgba(0, 0, 0, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand-held .card {
    animation: none;
  }
}

.custom-deck-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.custom-deck-list li {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.custom-deck-pick {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.custom-deck-list li.active .custom-deck-pick {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.custom-deck-name {
  font-weight: 700;
}

.custom-deck-meta {
  font-size: 12px;
  color: var(--muted);
}

.custom-deck-view {
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.champ-status-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  z-index: 4;
  pointer-events: none;
}

.champ-status-overlay.overlay-sm {
  width: var(--card-sm);
}

.champ-status-overlay.overlay-lg {
  width: var(--card-lg);
}

.champ-status-icon {
  position: relative;
  width: 44%;
  opacity: 0.78;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.overlay-count-2 .champ-status-icon {
  width: 36%;
}

.overlay-count-3 .champ-status-icon {
  width: 28%;
}

.champ-status-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.champ-status-icon b {
  position: absolute;
  right: -6%;
  bottom: -6%;
  min-width: 1.4em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: calc(11 * var(--card-unit));
  text-align: center;
  line-height: 1.4;
}

.pool-value.pool-boosted {
  color: var(--accent);
}

.pool.level {
  padding-top: 4px;
}

.pool-badge-level {
  width: 48px;
  height: 48px;
}

.pool-badge-level .pool-icon {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.pool.shield-level .pool-icon {
  inset: -25%;
  width: 150%;
  height: 150%;
}

.pool-level-prefix {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin-right: 2px;
  letter-spacing: 0;
}

.pool.level .pool-caption {
  font-size: 8px;
  letter-spacing: 0.08em;
  margin-top: -2px;
}

.pool.shield-level .pool-value {
  color: #9ec5ff;
}

.pool.hydra-level .pool-value {
  color: #ff8a8a;
}

.stack-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}

.stack-options .setting-row {
  max-width: 640px;
}

.stack-options .setting-sub {
  margin-left: 28px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
}

.setting-disabled {
  opacity: 0.5;
}

.blocker.double-agent {
  outline: 2px dashed rgba(255, 90, 90, 0.6);
  border-radius: 8px;
}

.admin-cards {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  grid-gap: 16px;
  gap: 16px;
  height: calc(100dvh - var(--nav-height));
  padding: 12px;
  box-sizing: border-box;
  background: var(--bg, #0f1013);
  color: var(--text);
}

.admin-cards-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.admin-cards-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.admin-cards-search {
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.admin-cards-rows {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1;
}

.admin-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.admin-card-row:hover {
  background: var(--panel-2);
}

.admin-card-row.active {
  background: rgba(242, 181, 68, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-card-row.active .card-select-name {
  color: var(--accent);
}

.admin-card-subgroup {
  position: -webkit-sticky;
  position: sticky;
  top: 26px;
  z-index: 19;
  padding: 4px 10px 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: #15161a;
  border-bottom: 1px solid var(--line);
}

.admin-card-row .card-select-thumb .card {
  width: 44px;
}

.admin-card-id {
  font-size: 11px;
  color: var(--muted);
}

.admin-cards-detail {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 16px;
}

.admin-cards-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.admin-cards-head h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.admin-cards-preview .card {
  width: 180px;
}

.admin-cards-text {
  max-width: 640px;
  line-height: 1.4;
}

.admin-cards-pane {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 12px;
}

.admin-cards-pane + .admin-cards-pane {
  margin-top: 16px;
}

.admin-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.admin-cards-pane h2 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.admin-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-seg button,
.admin-seg a {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}

.admin-seg button:hover,
.admin-seg a:hover {
  color: var(--text);
}

.admin-seg button.active,
.admin-seg a.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(242, 181, 68, 0.12);
}

.admin-graph-viewport {
  position: relative;
  overflow: hidden;
  height: 55vh;
  border-radius: 8px;
  background: var(--panel);
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overscroll-behavior: contain;
}

.admin-graph-viewport.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.admin-graph {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transform-origin: 0 0;
  will-change: transform;
}

.admin-graph-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
}

.admin-graph-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.admin-graph-zoom button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-graph-zoom button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-graph-zoom span {
  font-size: 11px;
  text-align: center;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.admin-graph-edge path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

.admin-graph-edge text {
  font-size: 10px;
  fill: var(--muted);
}

.admin-graph-node rect {
  fill: var(--panel-2);
  stroke: var(--line);
  stroke-width: 1.5;
  cursor: pointer;
}

.admin-graph-node.kind-effect rect {
  stroke: #3fa7d6;
}

.admin-graph-node.kind-condition rect {
  stroke: #a06ee1;
}

.admin-graph-node.kind-listener rect {
  stroke: #d84a4a;
}

.admin-graph-node.kind-predicate rect {
  stroke: #4caf50;
  fill: rgba(76, 175, 80, 0.12);
}

.admin-graph-node.kind-selector rect {
  stroke: #2bb5a0;
  fill: rgba(43, 181, 160, 0.12);
}

.admin-graph-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--text);
}

.admin-graph-node.kind-effect .admin-graph-label {
  fill: #8fd3f4;
}

.admin-graph-node.kind-condition .admin-graph-label {
  fill: #d3b8ff;
}

.admin-graph-node.kind-listener .admin-graph-label {
  fill: #ffb3b3;
}

.admin-graph-node.kind-predicate .admin-graph-label {
  fill: #b9f0bb;
}

.admin-graph-node.kind-selector .admin-graph-label {
  fill: #9fe8dc;
}

.admin-graph-detail {
  font-size: 10px;
  fill: var(--muted);
}

.admin-graph-node.focused rect {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(242, 181, 68, 0.5));
}

.admin-graph-popover {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: min(420px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.admin-graph-popover.kind-effect {
  border-color: #3fa7d6;
}

.admin-graph-popover.kind-condition {
  border-color: #a06ee1;
}

.admin-graph-popover.kind-listener {
  border-color: #d84a4a;
}

.admin-graph-popover.kind-predicate {
  border-color: #4caf50;
}

.admin-graph-popover.kind-selector {
  border-color: #2bb5a0;
}

.admin-graph-popover-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.admin-graph-popover-label {
  font-weight: 700;
  font-size: 13px;
}

.admin-graph-popover.kind-effect .admin-graph-popover-label {
  color: #8fd3f4;
}

.admin-graph-popover.kind-condition .admin-graph-popover-label {
  color: #d3b8ff;
}

.admin-graph-popover.kind-listener .admin-graph-popover-label {
  color: #ffb3b3;
}

.admin-graph-popover.kind-predicate .admin-graph-popover-label {
  color: #b9f0bb;
}

.admin-graph-popover.kind-selector .admin-graph-popover-label {
  color: #9fe8dc;
}

.admin-graph-popover dl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.admin-graph-popover dt {
  margin: 0;
}

.admin-graph-popover dd {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.admin-graph-popover p {
  margin: 0;
}

.admin-cards-json {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-cards-empty {
  padding: 40px;
  text-align: center;
}

.tree {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.tree-node > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 6px;
}

.tree-node > summary::before {
  content: '▸';
  color: var(--muted);
  width: 10px;
}

.tree-node[open] > summary::before {
  content: '▾';
}

.tree-node > summary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tree-children {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.tree-row {
  display: flex;
  gap: 8px;
  padding: 1px 4px 1px 18px;
}

.tree-key {
  color: #9ec5ff;
}

.tree-string {
  color: #c6e48b;
}

.tree-number {
  color: #f2b544;
}

.tree-boolean {
  color: #ed93b1;
}

.tree-null {
  color: var(--muted);
}

.tree-muted {
  color: var(--muted);
}

.tree-badge {
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.tree-effect {
  background: rgba(63, 167, 214, 0.25);
  color: #8fd3f4;
}

.tree-type {
  background: rgba(160, 110, 225, 0.25);
  color: #d3b8ff;
}

.tree-listener {
  background: rgba(216, 74, 74, 0.25);
  color: #ffb3b3;
}

.tree-label {
  background: rgba(76, 175, 80, 0.2);
  color: #b9f0bb;
}

@media (max-width: 900px) {
  .admin-cards {
    grid-template-columns: 1fr;
    height: auto;
  }

  .admin-cards-rows {
    max-height: 50vh;
  }
}

.docs {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  color: var(--text);
  line-height: 1.6;
}

.docs-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 13px;
}

.docs-nav a {
  color: var(--accent);
  text-decoration: none;
}

.docs-crumb {
  color: var(--muted);
}

.docs-others {
  margin-left: auto;
  display: flex;
  gap: 12px;
}

.docs-body h1 {
  font-size: 30px;
  margin: 0 0 16px;
}

.docs-body h2 {
  font-size: 20px;
  margin: 36px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.docs-body h3 {
  font-size: 16px;
  margin: 24px 0 8px;
}

.docs-body p,
.docs-body li {
  font-size: 15px;
}

.docs-body a {
  color: var(--accent);
}

.docs-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-2);
}

.docs-body pre {
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.docs-body pre code {
  padding: 0;
  background: none;
}

.docs-body table {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}

.docs-body th,
.docs-body td {
  text-align: left;
  padding: 6px 10px;
  border: 1px solid var(--line);
  vertical-align: top;
}

.docs-body th {
  background: var(--panel-2);
}

.docs-body ul,
.docs-body ol {
  padding-left: 22px;
}

.docs-body li + li {
  margin-top: 4px;
}

.docs-body input[type='checkbox'] {
  margin-right: 6px;
}

.split-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.split-choice.split-buttons {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.split-choice input[type='range'] {
  width: min(260px, 60vw);
  accent-color: #f5a623;
}

.split-slider {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.split-label {
  font-weight: 600;
}

.hq-slot {
  position: relative;
}

.hq-slot.destroyed .flames > .card,
.hq-slot.destroyed .flames > .city-empty,
.hq-slot.destroyed .flames > .darkness {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.hq-explosions {
  margin-top: 2px;
  pointer-events: none;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(190, 40, 20, 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.hq-deck {
  margin-top: 2px;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(30, 110, 180, 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}

.hq-deck-gone {
  background: rgba(90, 90, 90, 0.85);
  text-decoration: line-through;
}

.city-thralls {
  border-bottom-style: dotted;
}

.hq-disks {
  margin-top: 2px;
  pointer-events: none;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(120, 60, 200, 0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.generate-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.generate-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.generate-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.generate-field em {
  color: var(--accent);
  font-style: normal;
}

.generate-field input,
.generate-field textarea,
.generate-field select {
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  resize: vertical;
}

.generate-field small {
  font-size: 12px;
  line-height: 1.3;
}

.generate-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.generate-preview figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s;
}

.generate-preview figure.busy {
  opacity: 0.6;
}

.generate-preview img {
  max-width: 100%;
  max-height: calc(100dvh - 110px);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.generate-preview figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
}

.generate-download {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.generate-download:disabled {
  opacity: 0.6;
  cursor: progress;
}

.generate-download:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.generate-error {
  color: #e5484d;
}

.generate-preview img {
  -webkit-user-drag: auto;
  -webkit-touch-callout: default;
  -moz-user-select: auto;
       user-select: auto;
  -webkit-user-select: auto;
  pointer-events: auto;
}

.generate-actions {
  padding: 10px;
  border-top: 1px solid var(--line);
}

.generate-button {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #1a1206;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.generate-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.generate-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.generate-item legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.generate-item-actions {
  display: inline-flex;
  gap: 4px;
}

.generate-item-actions button,
.generate-add {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.generate-item-actions button {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}

.generate-item-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.generate-add {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 13px;
}

.generate-add:hover,
.generate-item-actions button:hover:not(:disabled) {
  border-color: var(--accent);
}

.picklist-select .card-select-option img {
  width: 64px;
  max-height: 64px;
  object-fit: cover;
}

.picklist-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.picklist-selected img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
}

.generate-check {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 8px;
  column-gap: 8px;
  align-items: center;
}

.generate-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.generate-check > span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.generate-check small {
  grid-column: 2;
}

.admin-cards.generate {
  background: transparent;
}

.generate .admin-cards-controls,
.generate .generate-actions {
  background: rgba(0, 0, 0, 0.28);
}

.generate .admin-cards-controls {
  border-radius: 12px 12px 0 0;
}

.generate .generate-actions {
  border-radius: 0 0 12px 12px;
}

.generate .generate-fields {
  background: rgba(255, 255, 255, 0.035);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
  min-height: var(--nav-height);
  box-sizing: border-box;
  padding: 6px 12px;
}

.site-nav-logo {
  display: flex;
  align-items: center;
}

.site-nav-logo img {
  height: 34px;
  width: auto;
  pointer-events: auto;
}

.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease;
}

.nav-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.nav-button.active {
  background: #fd7e14;
}

.nav-button.active:hover {
  background: #e8590c;
}

.nav-menu {
  position: relative;
}

.nav-menu-items {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #121317f2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Bridges the gap under the button, so the pointer can reach the menu without it closing. */
.nav-menu-items::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}

.nav-menu-items a {
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--text);
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu-items a:hover,
.nav-menu-items a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.nav-menu-items a.active {
  color: #fd7e14;
}

.site-nav-end {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1206;
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}

.nav-avatar:hover,
.nav-avatar[aria-expanded='true'] {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px var(--accent);
}

.nav-menu-heading {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.nav-menu-items.align-right {
  left: auto;
  right: 0;
}

.nav-menu-items button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.nav-menu-items button:hover,
.nav-menu-items button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}


@media (max-width: 560px) {
  .nav-button {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
  }

  .site-nav-logo img {
    height: 30px;
  }
}

.generate-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.generate-slider input[type='range'] {
  flex: 1 1;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
}

.generate-slider output {
  min-width: 3ch;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.debug-place {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.debug-place .card-select {
  flex: 1 1;
  min-width: 0;
}

.debug-place .card-select-trigger {
  padding: 4px 8px;
  font-size: 11px;
}

.debug-menu {
  position: relative;
}

.debug-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.debug-menu-list button {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
}

.debug-menu-list button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.card-select-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #15161a;
  border-bottom: 1px solid var(--line);
}

.card-select-search input {
  flex: 1 1;
  min-width: 0;
  font: inherit;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.card-select-search .muted {
  flex: none;
  font-size: 11px;
}

.pool.piercing .pool-value {
  color: #ff8a3d;
}

.card .mini-stat-piercing span {
  color: #ff6a1a;
}

.scheme-guards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
}

/* Bodyguards next to the Scheme: between the Scheme pile and the city, same stacks as the Mastermind's */
.scheme-guards {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.human-shields {
  position: relative;
  display: inline-flex;
  margin-top: 4px;
  align-self: center;
}

.human-shields .card {
  width: 60px;
}

/* Hidden Witnesses cost a flat 2 Recruit each: the price wears a card's cost badge, the coin with the number on it. */
.shield-price {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  z-index: 21;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.shield-price img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.shield-price span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 6px #000;
}

.human-shields .human-shields-label {
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.city-space.destroyed {
  opacity: 0.45;
  filter: grayscale(1);
}

.ascended-mastermind {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setting-stack {
  gap: 10px;
}

.setting-stack .stack-fan-wrap {
  margin-right: 2px;
}

.setting-stack .stack-fan {
  width: 72px;
  height: 50px;
}

.setting-stack .stack-fan img {
  width: 30px;
}

.setting-stack > span:not(.stack-fan-wrap) {
  flex: 1 1;
  text-align: left;
}

.stack-options .setting-stack ~ .setting-sub {
  margin-left: 84px;
}

.announcement-turn-card {
  position: relative;
}

.announcement-turn-number {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(16px, 2.2vw, 26px);
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #111;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 75%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.announcement-mini-strip.announcement-turn-card {
  width: -moz-fit-content;
  width: fit-content;
}

.announcement-mini-strip.announcement-turn-card .card {
  cursor: default;
}

.announcement-mini-strip.announcement-turn-card .announcement-turn-number {
  top: 4%;
  font-size: 8px;
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0 #111;
}

.card-focused {
  box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, 0.55);
  transform: translateY(-8px);
  z-index: 3;
}

.card-focused.card-highlight {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent), 0 0 18px rgba(242, 181, 68, 0.55);
}

.card-focused.card-selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ok), 0 0 18px rgba(76, 175, 80, 0.6);
}

.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.fx-lightshow-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 16, 0.5);
  animation: fx-fade 4.2s ease both;
}

.fx-beam {
  position: absolute;
  bottom: -25vh;
  width: 16vw;
  height: 190vh;
  opacity: 0;
  transform-origin: 50% 100%;
  filter: blur(8px);
  mix-blend-mode: screen;
  background: linear-gradient(to top, var(--beam) 0%, var(--beam) 60%, transparent 96%);
}

.fx-beam-left {
  left: -4vw;
  animation: fx-swing-left 3.8s ease-in-out both;
}

.fx-beam-right {
  right: -4vw;
  animation: fx-swing-right 3.8s ease-in-out both;
}

.fx-beam-0 {
  --beam: rgba(167, 139, 250, 0.5);
}

.fx-beam-1 {
  --beam: rgba(96, 165, 250, 0.46);
  animation-delay: 0.22s;
}

.fx-beam-2 {
  --beam: rgba(253, 224, 71, 0.4);
  animation-delay: 0.44s;
}

@keyframes fx-swing-left {
  0% { transform: rotate(-30deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: rotate(58deg); }
  86% { opacity: 1; }
  100% { transform: rotate(-10deg); opacity: 0; }
}

@keyframes fx-swing-right {
  0% { transform: rotate(30deg); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: rotate(-58deg); }
  86% { opacity: 1; }
  100% { transform: rotate(10deg); opacity: 0; }
}

.fx-confetti span {
  position: absolute;
  top: -5vh;
  border-radius: 2px;
  opacity: 0;
  animation-name: fx-confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes fx-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.95; }
  100% { transform: translateY(112vh) rotate(720deg); opacity: 0.15; }
}

.fx-lightshow-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  text-align: center;
  font-size: clamp(44px, 9vw, 124px);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 0 10px rgba(253, 224, 71, 0.9), 0 0 24px rgba(167, 139, 250, 0.9), 0 0 48px rgba(96, 165, 250, 0.8);
  animation: fx-title 4.2s ease both;
}

@keyframes fx-title {
  0% { transform: scale(0.4); opacity: 0; }
  16% { transform: scale(1.1); opacity: 1; }
  28% { transform: scale(1); }
  82% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes fx-fade {
  0% { opacity: 0; }
  14% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .fx-beam,
  .fx-confetti {
    display: none;
  }
  .fx-lightshow-title {
    animation: fx-fade 4.2s ease both;
  }
}

.fx-boom {
  position: absolute;
  width: var(--boom);
  height: var(--boom);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fx-boom-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 220, 0.95) 0%, rgba(255, 200, 80, 0.7) 35%, transparent 70%);
  animation: fx-boom-flash 0.5s ease-out both;
}

.fx-boom-fire {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 160, 1) 0%, rgba(255, 140, 40, 0.95) 30%, rgba(200, 40, 20, 0.85) 60%, rgba(40, 10, 5, 0) 75%);
  filter: blur(2px);
  animation: fx-boom-fire 1.3s ease-out both;
}

.fx-boom-ring {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 3px solid rgba(255, 220, 140, 0.9);
  box-shadow: 0 0 18px rgba(255, 160, 60, 0.8);
  animation: fx-boom-ring 1s ease-out both;
}

.fx-boom-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 18px;
  margin: -9px 0 0 -3px;
  border-radius: 3px;
  background: linear-gradient(to top, rgba(255, 120, 30, 0), #ffd166 60%, #fff 100%);
  transform-origin: 50% 50%;
  animation: fx-boom-spark 1.1s ease-out both;
}

.fx-boom-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(18px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 10px #ff9a3c, 0 0 22px #ff3d1f;
  animation: fx-boom-label 1.5s ease both;
}

@keyframes fx-boom-flash {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes fx-boom-fire {
  0% { transform: scale(0.15); opacity: 0.2; }
  18% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15) translateY(-12%); opacity: 0; }
}

@keyframes fx-boom-ring {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes fx-boom-spark {
  0% { transform: rotate(var(--angle)) translateY(0) scaleY(0.4); opacity: 1; }
  100% { transform: rotate(var(--angle)) translateY(calc(var(--boom) * -0.55)) scaleY(1.2); opacity: 0; }
}

@keyframes fx-boom-label {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}

.flames {
  position: relative;
}

.flames > .card,
.flames > .city-empty,
.flames > .darkness {
  position: relative;
  z-index: 1;
}

.flames::before,
.flames::after {
  content: '';
  position: absolute;
  left: -14%;
  right: -14%;
  top: -30%;
  bottom: -4%;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat-y;
  filter: blur(4px);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 45%, transparent 100%);
}

.flames::before {
  background-image:
    radial-gradient(38% 34% at 28% 80%, rgba(255, 170, 40, 0.95), transparent 70%),
    radial-gradient(30% 30% at 68% 62%, rgba(255, 70, 20, 0.85), transparent 70%),
    radial-gradient(26% 26% at 50% 96%, rgba(255, 230, 120, 0.9), transparent 70%);
  background-size: 100% 120px;
  animation: fire-scroll-a 1.4s linear infinite;
}

.flames::after {
  background-image:
    radial-gradient(34% 30% at 72% 84%, rgba(255, 120, 30, 0.9), transparent 70%),
    radial-gradient(28% 28% at 20% 58%, rgba(230, 40, 10, 0.8), transparent 70%),
    radial-gradient(24% 24% at 46% 90%, rgba(255, 210, 90, 0.85), transparent 70%);
  background-size: 100% 160px;
  animation: fire-scroll-b 2.1s linear infinite;
}

@keyframes fire-scroll-a {
  from { background-position: 0 0; }
  to { background-position: 0 -120px; }
}

@keyframes fire-scroll-b {
  from { background-position: 0 0; }
  to { background-position: 0 -160px; }
}

@media (prefers-reduced-motion: reduce) {
  .flames::before,
  .flames::after {
    animation: none;
  }
}

.pool.shards .pool-icon {
  inset: -10%;
  width: 120%;
  height: 120%;
}

/* Tutorial: a smaller blue button beside the start button, and the kicker on tutorial bubbles */
/* Home page: the setup fields above the start button, with the chosen scenario's comic beside them, as tall as they are. */
.lobby-top {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.lobby-top-fields {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scenario-thumb {
  flex: none;
  align-self: flex-start;
  /* A narrow column: the whole strip at this width is shorter than the fields beside it. */
  width: clamp(90px, 24%, 150px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}

.scenario-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.scenario-thumb:hover {
  border-color: var(--accent);
}

.scenario-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}

.scenario-preview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* The whole strip fits the window: no taller than 90% of it, no wider than the screen, never scrolled. */
.scenario-preview img {
  display: block;
  max-height: 90vh;
  max-width: calc(100vw - 32px);
  width: auto;
  height: auto;
}

.scenario-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.scenario-note {
  margin: 4px 0 0;
  font-size: 12px;
}

.setup-scope {
  display: contents;
}

/* A scenario's setup is shown but cannot be changed (the wrapper is inert); dim it so that reads at a glance. */
.setup-locked > * {
  opacity: 0.7;
}

.start-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.start-row .primary {
  flex: 1 1;
}

.solo-rules {
  margin: 8px 0 0;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--accent);
  text-shadow: 1px 1px 0 #111;
}

.solo-rules-title {
  color: #ff5a5a;
  font-size: 14px;
}

.solo-rules ul {
  margin: 2px 0 0;
  padding-left: 18px;
}

.solo-rules li {
  margin: 1px 0;
  line-height: 1.3;
}

.tutorial-button {
  flex: none;
  background: #2f7bf5;
  border-color: #2f7bf5;
  color: #fff;
  padding-left: 14px;
  padding-right: 14px;
}

.tutorial-button:hover:not(:disabled) {
  background: #4a8ef7;
  border-color: #4a8ef7;
}

.help-kicker {
  background: #2f7bf5;
  color: #fff;
  margin-right: 6px;
}

.help-banger {
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0.04em;
  color: #ff5a5a;
  text-shadow: 1px 1px 0 #111;
}

/* Debug panel: the card picker and the Do… menu open leftwards over the board, so they need room but never leave the screen */
.debug-place .card-select-popover {
  left: auto;
  right: 0;
  width: min(400px, calc(100vw - 24px));
}

.debug-menu-list {
  min-width: min(300px, calc(100vw - 24px));
}

/* Smash: the board shakes, the glass cracks and the smashing card lands on the impact */
body.fx-shaking .board-wrap {
  animation: fx-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes fx-shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-8px, 3px, 0); }
  40%, 60% { transform: translate3d(8px, -3px, 0); }
}

.fx-smash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-smash-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(120, 220, 120, 0.35) 30%, transparent 65%);
  animation: fx-boom-flash 0.5s ease-out both;
  animation-delay: 0.32s;
}

.fx-smash-cracks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.fx-smash-crack {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--length);
  height: 3px;
  margin-top: -1.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--angle)) scaleX(0);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6) 60%, transparent);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 2px #000;
  animation: fx-crack 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: 0.34s;
}

@keyframes fx-crack {
  0% { transform: rotate(var(--angle)) scaleX(0); opacity: 0; }
  15% { opacity: 1; }
  40% { transform: rotate(var(--angle)) scaleX(1); }
  100% { transform: rotate(var(--angle)) scaleX(1); opacity: 0; }
}

.fx-smash-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 40vmin;
  height: 40vmin;
  margin: -20vmin 0 0 -20vmin;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(120, 255, 120, 0.7);
  animation: fx-boom-ring 0.8s ease-out both;
  animation-delay: 0.34s;
}

.fx-smash-ring-2 {
  animation-delay: 0.46s;
  border-style: dashed;
}

.fx-smash-card {
  position: absolute;
  width: clamp(120px, 20vmin, 220px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
  animation: fx-smash-card 1.5s cubic-bezier(0.5, 0, 0.2, 1) both;
}

@keyframes fx-smash-card {
  0% { transform: translate(-60vw, -40vh) rotate(-40deg) scale(2.6); opacity: 0; }
  10% { opacity: 1; }
  32% { transform: translate(0, 0) rotate(-8deg) scale(0.95); }
  40% { transform: translate(0, 0) rotate(-6deg) scale(1.08); }
  50% { transform: translate(0, 0) rotate(-6deg) scale(1); }
  82% { transform: translate(0, 0) rotate(-6deg) scale(1); opacity: 1; }
  100% { transform: translate(0, -12vh) rotate(-6deg) scale(0.9); opacity: 0; }
}

.fx-smash-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
  text-align: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(56px, 12vw, 150px);
  letter-spacing: 0.06em;
  color: #6ee85a;
  -webkit-text-stroke: 3px #0b2a08;
  text-shadow: 6px 6px 0 #0b2a08, 0 0 28px rgba(110, 232, 90, 0.8);
  animation: fx-smash-title 1.5s cubic-bezier(0.5, 0, 0.2, 1) both;
}

@keyframes fx-smash-title {
  0%, 30% { transform: scale(3) rotate(-10deg); opacity: 0; }
  38% { transform: scale(0.92) rotate(-4deg); opacity: 1; }
  46% { transform: scale(1.06) rotate(-4deg); }
  54% { transform: scale(1) rotate(-4deg); }
  84% { opacity: 1; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1.1) rotate(-4deg); }
}

/* Gamma Bomb Disaster: a green wash, a pulse, and the transformed card bursting out of the old one */
.fx-gamma {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-gamma-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(120, 255, 90, 0.75) 0%, rgba(40, 160, 40, 0.55) 40%, rgba(6, 30, 8, 0.7) 100%);
  mix-blend-mode: screen;
  animation: fx-gamma-wash 2.6s ease both;
}

@keyframes fx-gamma-wash {
  0% { opacity: 0; transform: scale(0.2); }
  25% { opacity: 1; transform: scale(1); }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.15); }
}

.fx-gamma-pulse {
  position: absolute;
  width: 30vmin;
  height: 30vmin;
  border-radius: 50%;
  border: 4px solid rgba(160, 255, 120, 0.9);
  box-shadow: 0 0 24px rgba(120, 255, 90, 0.9);
  animation: fx-gamma-pulse 1.1s ease-out both infinite;
  animation-delay: 0.4s;
}

.fx-gamma-pulse-2 {
  animation-delay: 0.95s;
}

@keyframes fx-gamma-pulse {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}

.fx-gamma-cards {
  position: absolute;
  width: clamp(140px, 24vmin, 260px);
  aspect-ratio: 5 / 7;
}

.fx-gamma-before,
.fx-gamma-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}

.fx-gamma-before {
  animation: fx-gamma-before 2.6s ease both;
}

@keyframes fx-gamma-before {
  0% { transform: scale(0.6); opacity: 0; filter: none; }
  15% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.04) rotate(-2deg); filter: brightness(1.1) saturate(1.3); }
  40% { transform: scale(0.98) rotate(2deg); }
  50% { transform: scale(1.08) rotate(-3deg); filter: brightness(1.5) saturate(1.8) hue-rotate(40deg); }
  58% { transform: scale(0.97) rotate(3deg); }
  66% { transform: scale(1.3); opacity: 0; filter: brightness(3) blur(6px); }
  100% { opacity: 0; }
}

.fx-gamma-after {
  animation: fx-gamma-after 2.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes fx-gamma-after {
  0%, 60% { transform: scale(0.2); opacity: 0; filter: brightness(3); }
  70% { transform: scale(1.25); opacity: 1; filter: brightness(1.4); }
  78% { transform: scale(1); filter: none; }
  90% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9) translateY(10vh); opacity: 0; }
}

.fx-gamma-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  text-align: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(44px, 9vw, 120px);
  letter-spacing: 0.1em;
  color: #c8ff9a;
  -webkit-text-stroke: 2px #0b2a08;
  text-shadow: 5px 5px 0 #0b2a08, 0 0 30px rgba(120, 255, 90, 0.9);
  animation: fx-gamma-title 2.6s ease both;
}

@keyframes fx-gamma-title {
  0% { opacity: 0; transform: scale(0.6); letter-spacing: 0.4em; }
  20% { opacity: 1; transform: scale(1); letter-spacing: 0.1em; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-gamma-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  text-align: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 3px 3px 0 #0b2a08, 0 0 20px rgba(120, 255, 90, 0.9);
  animation: fx-gamma-name 2.6s ease both;
}

@keyframes fx-gamma-name {
  0%, 64% { opacity: 0; transform: translateY(20px); }
  76% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Transforming Mastermind: the same wash in red, and the card actually flips over */
.fx-gamma.fx-red .fx-gamma-wash {
  background: radial-gradient(circle at 50% 55%, rgba(255, 80, 60, 0.8) 0%, rgba(170, 20, 20, 0.6) 40%, rgba(30, 4, 4, 0.75) 100%);
  animation-duration: 2.4s;
}

.fx-gamma.fx-red .fx-gamma-pulse {
  border-color: rgba(255, 140, 120, 0.9);
  box-shadow: 0 0 24px rgba(255, 80, 60, 0.9);
}

.fx-gamma.fx-red .fx-gamma-title,
.fx-gamma.fx-red .fx-gamma-name {
  color: #ffd0c0;
  -webkit-text-stroke: 2px #3a0606;
  text-shadow: 5px 5px 0 #3a0606, 0 0 30px rgba(255, 80, 60, 0.9);
  animation-duration: 2.4s;
}

.fx-gamma.fx-red .fx-gamma-name {
  color: #fff;
}

.fx-flip {
  perspective: 1400px;
}

.fx-flip-before,
.fx-flip-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.fx-flip-before {
  animation: fx-flip-before 2.4s ease-in-out both;
}

@keyframes fx-flip-before {
  0% { transform: scale(0.6) rotateY(0deg); opacity: 0; }
  15% { transform: scale(1) rotateY(0deg); opacity: 1; }
  40% { transform: scale(1.06) rotateY(0deg); filter: brightness(1.2) saturate(1.4); }
  55% { transform: scale(1.08) rotateY(90deg); filter: brightness(2); opacity: 1; }
  56%, 100% { transform: scale(1.08) rotateY(90deg); opacity: 0; }
}

.fx-flip-after {
  animation: fx-flip-after 2.4s ease-in-out both;
}

@keyframes fx-flip-after {
  0%, 55% { transform: scale(1.08) rotateY(-90deg); opacity: 0; }
  56% { opacity: 1; filter: brightness(2); }
  72% { transform: scale(1.12) rotateY(0deg); filter: brightness(1.2); }
  80% { transform: scale(1) rotateY(0deg); filter: none; }
  90% { opacity: 1; }
  100% { transform: scale(0.9) translateY(10vh); opacity: 0; }
}

/* Divided Cards in the hand keep the regular card size, showing the centre of the landscape art; the preview shows the whole card */
.hand-bar .hand-slot .card.card-landscape,
.hand-bar .hand-held .card.card-landscape,
.hand-bar .drag-clone .card.card-landscape {
  width: var(--hand-w);
  aspect-ratio: 5 / 7;
}

.hand-bar .hand-slot .card.card-landscape > img,
.hand-bar .hand-held .card.card-landscape > img,
.hand-bar .drag-clone .card.card-landscape > img {
  object-fit: cover;
  object-position: center center;
}

/* Divided Cards at portrait size: each side's class icons and stat badges stacked in a column at the middle of its edge, the cost at the bottom */
.divided-sides {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hand-bar .card-landscape .divided-sides {
  display: block;
}

.divided-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 3px #000) drop-shadow(0 0 6px #000) drop-shadow(0 0 12px #000) drop-shadow(0 0 18px #000);
}

.divided-side-left {
  left: 6px;
}

.divided-side-right {
  right: 6px;
}

.divided-sides .mini-icons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.divided-sides .mini-icons img {
  width: 28px;
  height: 28px;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.card .divided-sides .mini-stats {
  position: static;
  transform: none;
  flex-direction: column;
  gap: 0;
}

/* Fantastic Four play effects */
.fx-flame, .fx-clobber, .fx-barrier, .fx-nullifier {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-flame-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(255, 120, 20, 0.85) 0%, rgba(255, 60, 0, 0.45) 35%, transparent 70%);
  animation: fx-flame-glow 2s ease-out both;
}

@keyframes fx-flame-glow {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-flame-wall {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60vh;
}

.fx-flame-tongue {
  position: absolute;
  bottom: -6vh;
  left: var(--x);
  width: 14vw;
  height: var(--h);
  margin-left: -7vw;
  border-radius: 50% 50% 20% 20% / 70% 70% 20% 20%;
  background: linear-gradient(to top, rgba(255, 240, 150, 0.95) 0%, rgba(255, 140, 20, 0.9) 35%, rgba(255, 40, 0, 0.7) 70%, transparent 100%);
  filter: blur(6px);
  transform-origin: 50% 100%;
  animation: fx-flame-tongue 2s ease-in-out both;
  animation-delay: var(--d);
  mix-blend-mode: screen;
}

@keyframes fx-flame-tongue {
  0% { transform: scaleY(0) scaleX(0.6); opacity: 0; }
  20% { transform: scaleY(1) scaleX(1); opacity: 1; }
  35% { transform: scaleY(0.85) scaleX(1.1); }
  50% { transform: scaleY(1.05) scaleX(0.95); }
  65% { transform: scaleY(0.9) scaleX(1.05); }
  85% { transform: scaleY(1) scaleX(1); opacity: 1; }
  100% { transform: scaleY(0.2) scaleX(0.8); opacity: 0; }
}

.fx-flame-embers {
  position: absolute;
  inset: 0;
}

.fx-flame-ember {
  position: absolute;
  bottom: 10vh;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffd36b;
  box-shadow: 0 0 8px 2px rgba(255, 150, 40, 0.9);
  animation: fx-flame-ember 1.8s ease-out both;
  animation-delay: var(--d);
}

@keyframes fx-flame-ember {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-80vh) translateX(6vw) scale(0.2); opacity: 0; }
}

.fx-flame-card {
  position: absolute;
  width: clamp(120px, 20vmin, 220px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  box-shadow: 0 0 40px 12px rgba(255, 120, 20, 0.9), 0 12px 30px rgba(0, 0, 0, 0.8);
  animation: fx-flame-card 2s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

@keyframes fx-flame-card {
  0% { transform: translateY(70vh) scale(0.6); opacity: 0; }
  30% { transform: translateY(0) scale(1.08); opacity: 1; }
  40% { transform: translateY(0) scale(1); }
  85% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-10vh) scale(0.9); opacity: 0; }
}

.fx-flame-title, .fx-clobber-title, .fx-barrier-title, .fx-nullifier-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  text-align: center;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 0.06em;
  line-height: 0.95;
}

.fx-flame-title {
  font-size: clamp(56px, 12vw, 150px);
  color: #ffb02e;
  -webkit-text-stroke: 3px #4a1200;
  text-shadow: 6px 6px 0 #4a1200, 0 0 30px rgba(255, 120, 0, 0.9);
  animation: fx-smash-title 2s cubic-bezier(0.5, 0, 0.2, 1) both;
}

.fx-clobber-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 230, 190, 0.9) 0%, rgba(230, 120, 40, 0.4) 30%, transparent 65%);
  animation: fx-boom-flash 0.5s ease-out both;
  animation-delay: 0.34s;
}

.fx-clobber-impact {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0;
  height: 0;
}

.fx-clobber-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 40vmin;
  height: 40vmin;
  margin: -20vmin 0 0 -20vmin;
  border-radius: 50%;
  border: 4px solid rgba(255, 190, 120, 0.9);
  box-shadow: 0 0 14px rgba(255, 140, 40, 0.8);
  animation: fx-boom-ring 0.8s ease-out both;
  animation-delay: 0.34s;
}

.fx-clobber-ring-2 {
  animation-delay: 0.5s;
  border-style: dashed;
}

.fx-clobber-rock {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  background: linear-gradient(135deg, #d9843a, #7a3d12);
  border: 1px solid #2b1305;
  border-radius: 20% 40% 25% 35%;
  transform: rotate(var(--angle)) translateX(0) rotate(0deg);
  animation: fx-clobber-rock 1.1s cubic-bezier(0.2, 0.8, 0.4, 1) both;
  animation-delay: 0.34s;
}

@keyframes fx-clobber-rock {
  0% { transform: rotate(var(--angle)) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: rotate(var(--angle)) translateX(var(--dist)) rotate(var(--spin)); opacity: 0; }
}

.fx-clobber-card {
  position: absolute;
  width: clamp(120px, 20vmin, 220px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
  animation: fx-clobber-card 2s cubic-bezier(0.5, 0, 0.2, 1) both;
}

@keyframes fx-clobber-card {
  0% { transform: translateY(-70vh) rotate(12deg) scale(2.4); opacity: 0; }
  12% { opacity: 1; }
  32% { transform: translateY(0) rotate(4deg) scale(0.92); }
  40% { transform: translateY(0) rotate(4deg) scale(1.06); }
  50% { transform: translateY(0) rotate(4deg) scale(1); }
  85% { transform: translateY(0) rotate(4deg) scale(1); opacity: 1; }
  100% { transform: translateY(-10vh) rotate(4deg) scale(0.9); opacity: 0; }
}

.fx-clobber-title {
  font-size: clamp(40px, 8vw, 110px);
  color: #ff9a3c;
  -webkit-text-stroke: 3px #3a1a05;
  text-shadow: 6px 6px 0 #3a1a05, 0 0 24px rgba(255, 140, 40, 0.8);
  animation: fx-smash-title 2s cubic-bezier(0.5, 0, 0.2, 1) both;
}

.fx-barrier-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(120, 200, 255, 0.55) 0%, rgba(40, 110, 220, 0.35) 40%, transparent 75%);
  animation: fx-flame-glow 2.1s ease-out both;
}

.fx-barrier-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30vmin;
  height: 30vmin;
  margin: -15vmin 0 0 -15vmin;
  border-radius: 50%;
  border: 3px solid rgba(190, 235, 255, 0.95);
  box-shadow: 0 0 18px rgba(120, 200, 255, 0.9), inset 0 0 30px rgba(120, 200, 255, 0.5);
  animation: fx-barrier-ring 1.6s ease-out both;
  animation-delay: 0.2s;
}

.fx-barrier-ring-2 { animation-delay: 0.55s; }
.fx-barrier-ring-3 { animation-delay: 0.9s; }

@keyframes fx-barrier-ring {
  0% { transform: scale(0.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: scale(4.2); opacity: 0; }
}

.fx-barrier-hex {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(60deg, rgba(180, 230, 255, 0.18) 0 2px, transparent 2px 28px), repeating-linear-gradient(-60deg, rgba(180, 230, 255, 0.18) 0 2px, transparent 2px 28px), repeating-linear-gradient(0deg, rgba(180, 230, 255, 0.12) 0 2px, transparent 2px 28px);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 60%);
  animation: fx-flame-glow 2.1s ease-out both;
}

.fx-barrier-card {
  position: absolute;
  width: clamp(120px, 20vmin, 220px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  box-shadow: 0 0 40px 10px rgba(120, 200, 255, 0.8), 0 12px 30px rgba(0, 0, 0, 0.8);
  animation: fx-barrier-card 2.1s ease-in-out both;
}

@keyframes fx-barrier-card {
  0% { transform: scale(0.7); opacity: 0; filter: blur(6px); }
  18% { transform: scale(1.05); opacity: 1; filter: blur(0); }
  30% { opacity: 0.15; filter: blur(3px); }
  42% { opacity: 1; filter: blur(0); }
  54% { opacity: 0.2; filter: blur(3px); }
  66% { opacity: 1; filter: blur(0); }
  86% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; filter: blur(8px); }
}

.fx-barrier-title {
  font-size: clamp(40px, 8vw, 110px);
  color: #bfe9ff;
  -webkit-text-stroke: 3px #0b2c4a;
  text-shadow: 6px 6px 0 #0b2c4a, 0 0 28px rgba(120, 200, 255, 0.9);
  animation: fx-smash-title 2.1s cubic-bezier(0.5, 0, 0.2, 1) both;
}

.fx-nullifier-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.85) 70%);
  animation: fx-flame-glow 2.2s ease-out both;
}

.fx-nullifier-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: fx-nullifier-spin 2.2s linear both;
}

@keyframes fx-nullifier-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(40deg); }
}

.fx-nullifier-ray {
  position: absolute;
  left: 0;
  top: 0;
  width: 120vmax;
  height: 5px;
  margin-top: -2.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--angle)) scaleX(0);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(160, 240, 255, 0.7) 40%, transparent);
  box-shadow: 0 0 10px rgba(180, 240, 255, 0.9);
  animation: fx-nullifier-ray 1.8s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: calc(0.35s + var(--d));
}

@keyframes fx-nullifier-ray {
  0% { transform: rotate(var(--angle)) scaleX(0); opacity: 0; }
  20% { transform: rotate(var(--angle)) scaleX(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: rotate(var(--angle)) scaleX(1); opacity: 0; }
}

.fx-nullifier-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60vmin;
  height: 60vmin;
  margin: -30vmin 0 0 -30vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(170, 240, 255, 0.8) 25%, transparent 65%);
  animation: fx-boom-flash 0.9s ease-out both;
  animation-delay: 0.35s;
}

.fx-nullifier-card {
  position: absolute;
  width: clamp(120px, 20vmin, 220px);
  aspect-ratio: 5 / 7;
  border-radius: 10px;
  box-shadow: 0 0 50px 14px rgba(200, 245, 255, 0.9), 0 12px 30px rgba(0, 0, 0, 0.8);
  animation: fx-nullifier-card 2.2s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

@keyframes fx-nullifier-card {
  0% { transform: scale(0.2) rotate(-20deg); opacity: 0; filter: brightness(3); }
  25% { transform: scale(1.1) rotate(0deg); opacity: 1; filter: brightness(1.6); }
  35% { transform: scale(1); filter: brightness(1); }
  86% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

.fx-nullifier-title {
  font-size: clamp(40px, 8vw, 110px);
  color: #eafcff;
  -webkit-text-stroke: 3px #0a2a33;
  text-shadow: 6px 6px 0 #0a2a33, 0 0 30px rgba(200, 245, 255, 0.95);
  animation: fx-smash-title 2.2s cubic-bezier(0.5, 0, 0.2, 1) both;
}

/* ---- Win-rate stats page ---- */
.stats-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.stats-min {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.stats-min select {
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 6px;
}

.stats-name {
  font-size: 15px;
}

.stats-section h2 {
  margin: 8px 0 2px;
  font-size: 18px;
}

.stats-section > p {
  margin: 0 0 8px;
  font-size: 13px;
}

.stats-scroll {
  overflow-x: auto;
  border-radius: 10px;
}

/* Admin dashboard */
.admin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-filters {
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table td {
  white-space: nowrap;
}

.admin-status,
.admin-outcome {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
}

.admin-status-waiting {
  color: #0af;
  border-color: rgba(0, 170, 255, 0.55);
}

.admin-status-in_progress {
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.55);
}

.admin-status-active {
  color: #ffca28;
  border-color: rgba(255, 202, 40, 0.55);
}

.admin-fixed {
  margin: 0 0 12px;
}

.admin-status-finished {
  color: var(--muted);
}

.admin-status-inactive {
  color: #ff8a65;
  border-color: rgba(255, 138, 101, 0.55);
}

.admin-outcome {
  margin-left: 6px;
  text-transform: capitalize;
}

.admin-archived {
  color: var(--muted);
  font-style: italic;
}

.admin-outcome-win {
  color: #4caf50;
}

.admin-outcome-loss {
  color: #ef5350;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
}

.stats-table th,
.stats-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.stats-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.stats-table tbody tr:last-child td {
  border-bottom: none;
}

.stats-table tbody tr:nth-child(1) .stats-rank,
.stats-table tbody tr:nth-child(2) .stats-rank,
.stats-table tbody tr:nth-child(3) .stats-rank {
  color: #f1c40f;
  font-weight: 700;
}

.stats-rank,
.stats-num {
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.stats-table td.stats-num,
.stats-table th.stats-num {
  text-align: right;
}

.stats-rate {
  min-width: 180px;
  white-space: nowrap;
}

.stats-rate > span:last-child {
  display: inline-block;
  min-width: 56px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.stats-bar {
  display: inline-flex;
  width: 100px;
  height: 10px;
  margin-right: 8px;
  border-radius: 5px;
  background: rgba(231, 76, 60, 0.35);
  overflow: hidden;
  vertical-align: middle;
}

.stats-bar-wins {
  height: 100%;
  background: linear-gradient(90deg, #27ae60, #2ecc71);
}

.stats-bar-ties {
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
}

.stats-more {
  margin-top: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}

.stats-more:hover {
  color: inherit;
  border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
  .stats-table {
    font-size: 12px;
  }
  .stats-table th,
  .stats-table td {
    padding: 5px 6px;
  }
  .stats-bar {
    width: 56px;
  }
  .stats-rate {
    min-width: 0;
  }
}

/* Cosmic Threat marker on an enemy the player can reveal Heroes against */
.badge-threat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.badge-wounds {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #ffd9d9;
  background: rgba(140, 20, 30, 0.85);
  border: 1px solid rgba(255, 120, 120, 0.6);
  white-space: nowrap;
}

.city-pawns {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  color: #fff3d6;
  background: rgba(242, 181, 68, 0.22);
  border: 1px solid rgba(242, 181, 68, 0.6);
  white-space: nowrap;
  vertical-align: 1px;
}

.player-tags {
  display: flex;
  gap: 4px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.player-tag {
  padding: 0 5px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.player-tag-throne {
  color: #ffe8a3;
  border-color: rgba(242, 181, 68, 0.7);
  background: rgba(242, 181, 68, 0.18);
}

.badge-shards + .badge-threat {
  margin-left: 6px;
}

.badge-threat:first-child {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.badge-threat .badge-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.badge-threat .badge-icon:first-child {
  width: 16px;
  height: 16px;
  animation: threat-pulse 1.6s ease-in-out infinite;
}

@keyframes threat-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 190, 120, 0));
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 4px rgba(255, 190, 120, 0.9));
  }
}

/* Stats table: search box and sortable headers */
.stats-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 16px;
}

.stats-search {
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: 220px;
  margin-bottom: 8px;
}

.stats-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.stats-table th button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.stats-table th button:hover {
  color: #fff;
}

.stats-table th.sorted {
  color: #f1c40f;
}

.stats-sort-arrow {
  display: inline-block;
  width: 10px;
  font-size: 9px;
}

.stats-table th.stats-num button {
  justify-content: flex-end;
}

/* ---- DC core set: core-set picker, expansion divider ---- */

.setting-divider {
  height: 1px;
  margin: 8px 0 4px;
  background: rgba(255, 255, 255, 0.18);
}

/* ---- Hope and Fear track (between the city and the HQ) ---- */
.hope-row {
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 12px 24px;
  background: none;
  border: none;
  overflow: visible;
}

/* Each end of the track: the Fight Crime button with the side's name in comic lettering under it. Fear is red, Hope is blue. */
.hope-end {
  position: relative;
  display: flex;
  align-items: center;
}

/* FEAR and HOPE hang under each side's "2" space; the buttons stay level with the track. */
.hope-title {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 3px 0 0;
  font-family: 'Bangers Modified', 'Bangers', 'Impact', sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.6);
}

.hope-title.fear {
  color: #f87171;
}

.hope-title.hope {
  color: #60a5fa;
}

.hope-track {
  display: flex;
  gap: 6px;
}

.hope-space {
  position: relative;
  width: 44px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-family: 'Bangers Modified', 'Bangers', 'Impact', sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}

.hope-space.fear {
  background: linear-gradient(180deg, rgba(153, 27, 27, 0.5), rgba(107, 15, 15, 0.6));
  border-color: rgba(248, 113, 113, 0.45);
}

.hope-space.hope {
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.5), rgba(23, 37, 110, 0.6));
  border-color: rgba(96, 165, 250, 0.45);
}

.hope-space.current {
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, 0.6);
}

.hope-token {
  position: absolute;
  inset: -6px auto auto -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d6, #f5b400 60%, #8a5a00);
  border: 2px solid #111;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hope-crime {
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.hope-crime:disabled {
  opacity: 0.35;
  cursor: default;
}

.hope-crime:not(:disabled):hover {
  border-color: #ffd23f;
  color: #ffd23f;
}

/* ---- Frozen HQ Heroes (Captain Cold) ---- */
.hq-slot.frozen .card {
  filter: saturate(0.5) brightness(0.85);
  box-shadow: 0 0 0 2px rgba(147, 210, 255, 0.85), 0 0 16px rgba(147, 210, 255, 0.55);
}

.badge-frozen {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #cfefff;
}

@media (max-width: 640px) {
  .hope-row {
    flex-wrap: nowrap;
    gap: 5px;
    padding: 6px 4px 20px;
  }
  .hope-title {
    font-size: 13px;
  }
  .hope-track {
    gap: 3px;
  }
  .hope-space {
    width: 30px;
    height: 26px;
    font-size: 14px;
  }
  .hope-crime {
    font-size: 11px;
    padding: 4px 5px;
  }
}


/* ---------------------------------------------------------------- Splendor
   Every face is drawn from card data rather than a scan: a gem colour, a prestige number and a column of cost chips.
   The board itself is the interface: gems and cards are the buttons, so there is no list of turn options to read. */
.splendor-board .zone-label {
  min-width: 68px;
}

.gem-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  font-size: 13px;
  color: #10131a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.gem-sm {
  width: 20px;
  height: 20px;
  font-size: 11px;
  /* A small chip gives proportionally more of itself to its border and inset highlight than a bank chip does, which reads as a
     duller colour at the same size. Thinning both keeps a cost chip as vivid as the same gem in the bank. */
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.gem-empty {
  opacity: 0.3;
}

button.gem-pick {
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* No hover anywhere on this board. A phone keeps the hover style on whatever was tapped last, so a chip you just put back would
   go on looking picked. Selected is the only state a chip has. */
.gem-on {
  transform: translateY(-3px) scale(1.1);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 0 3px #d4a017, 0 4px 8px rgba(0, 0, 0, 0.65);
}

.splendor-row,
.splendor-bank,
.splendor-nobles,
.splendor-reserved,
.splendor-tableau {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.splendor-card {
  position: relative;
  width: 82px;
  border: 2px solid #555;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(30, 32, 40, 0.95), rgba(16, 18, 24, 0.95));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}

.splendor-face {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  min-height: 96px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  width: 100%;
}

button.splendor-face {
  cursor: pointer;
}

.splendor-card.can-buy {
  box-shadow: 0 0 0 2px #4ade80, 0 0 14px rgba(74, 222, 128, 0.45);
}

.splendor-card.can-reserve {
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.85);
}

.splendor-back {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  min-height: 96px;
}

.splendor-back-mark {
  font-size: 28px;
  opacity: 0.5;
}

.splendor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  padding: 2px 5px;
  min-height: 24px;
}

.splendor-points {
  font-weight: 800;
  font-size: 17px;
  color: #10131a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.splendor-gem {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.splendor-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
}

.splendor-noble {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border: 2px solid #8a6d3b;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(60, 50, 30, 0.95), rgba(24, 20, 12, 0.95));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
}

button.splendor-noble {
  cursor: pointer;
}

.splendor-noble .splendor-points {
  color: #f0d79a;
  text-shadow: none;
}

/* Three requirement chips have to sit on one line, or a triple noble wraps and grows taller than a pair. */
.splendor-noble .splendor-cost {
  flex-wrap: nowrap;
}

.splendor-noble .gem-chip {
  width: 15px;
  height: 15px;
  font-size: 9px;
  flex: 0 0 auto;
}

.splendor-deck {
  width: 60px;
  min-height: 96px;
  border: 2px dashed #4a4f5c;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
}

.splendor-tier {
  letter-spacing: 2px;
  color: #d4a017;
}

.splendor-deck-count {
  opacity: 0.75;
}

.splendor-blind,
.splendor-confirm,
.splendor-clear {
  border-radius: 5px;
  border: 1px solid rgba(212, 160, 23, 0.75);
  background: rgba(212, 160, 23, 0.18);
  color: #f3e7c8;
  cursor: pointer;
}

.splendor-blind {
  font-size: 9px;
  padding: 2px 4px;
}

.splendor-confirm {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  margin-left: 6px;
  background: rgba(74, 222, 128, 0.22);
  border-color: #4ade80;
  color: #bbf7d0;
}

.splendor-clear {
  font-size: 12px;
  padding: 7px 12px;
}

.gem-chip {
  position: relative;
}

.confirm-gems {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.splendor-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* A bought card only has to say its colour and its prestige, so all but the front card of a colour is clipped to its top bar and
   they sit in one column, the way they are laid out on the table. */
.splendor-stacks {
  align-items: flex-start;
}

.splendor-stack {
  display: flex;
  flex-direction: column;
}

/* Every card keeps its own rounded frame and casts a shadow on the one behind it, so a pile reads as cards laid over each other
   rather than one tall card. */
.splendor-stack .splendor-card {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.55);
}

.splendor-stack .splendor-card + .splendor-card {
  margin-top: -6px;
}

/* Tall enough for the top bar and a few pixels of card under it, so one header never touches the next. */
.splendor-card.is-stacked {
  height: 40px;
}

.splendor-count {
  font-size: 12px;
  opacity: 0.85;
  white-space: nowrap;
}

.splendor-count.over {
  color: var(--danger, #e05252);
  opacity: 1;
  font-weight: 700;
}

.splendor-hint {
  font-size: 13px;
  opacity: 0.8;
  flex-basis: 100%;
}


.splendor-prestige {
  font-weight: 800;
  font-size: 16px;
  color: #d4a017;
}

.splendor-holdings {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.splendor-holding {
  position: relative;
  display: inline-flex;
}

.splendor-bonus {
  position: absolute;
  right: -5px;
  bottom: -4px;
  min-width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid;
  background: rgba(10, 12, 16, 0.92);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* The tabs carry live scores, so every one of them stays readable: the board you are looking at is marked, the rest are not dimmed.
   The hover rule is overridden too, because a phone leaves hover stuck on whatever was tapped last. */
.splendor-board .players-strip .player-chip:not(.viewing),
.splendor-board .players-strip .player-chip:not(.viewing):hover {
  opacity: 1;
}

.splendor-board .players-strip .player-chip.viewing {
  border-color: var(--accent);
  background: rgba(242, 181, 68, 0.12);
}

/* Someone else's board, so nothing in it is yours to act on. */
.splendor-board .player-row-viewing {
  border-color: var(--accent);
}

.splendor-fallback {
  margin-top: 6px;
  opacity: 0.55;
  font-size: 12px;
}

.splendor-fallback summary {
  cursor: pointer;
}

@media (max-width: 720px) {
  .splendor-card {
    width: 72px;
  }
  .gem-chip {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .gem-sm {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}

/* Accounts: the username form (first sign-in prompt and account page) and the account pages. */
.username-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.username-form input {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
}

.username-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 13px;
}

.username-status.error {
  color: var(--danger);
}

.username-prompt {
  max-width: 380px;
  text-align: left;
}

.link-button {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.account-page h2 {
  margin: 8px 0 0;
  font-size: 16px;
}

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

.account-row:last-child {
  border-bottom: 0;
}

.account-row .muted {
  font-size: 13px;
}

/* Signing in: the navbar's Login button, the modal, and the providers' own buttons (their brand colours). */
.nav-login {
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #1a1206;
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.nav-login:hover {
  filter: brightness(1.08);
}

.signin-modal {
  position: relative;
  width: min(92vw, 400px);
  text-align: left;
}

.signin-modal h2 {
  margin: 0 0 6px;
}

.signin-close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.signin-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  font-family: 'Lato', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.signin-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.signin-button.google {
  border: 1px solid #dadce0;
  background: #fff;
  color: #1f1f1f;
}

.signin-button.google:hover:not(:disabled) {
  background: #f2f2f2;
}

.signin-button.discord {
  border: 1px solid #5865f2;
  background: #5865f2;
  color: #fff;
}

.signin-button.discord:hover:not(:disabled) {
  background: #4752c4;
}

.signin-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.auth-window {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--muted);
}

.account-games a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.account-games a:hover {
  color: var(--accent);
}

.host-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.guest-games code {
  font-size: 12px;
  -moz-user-select: all;
       user-select: all;
  -webkit-user-select: all;
}

.guest-id {
  font-size: 12px;
  word-break: break-all;
}

.guest-mover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.guest-mover input {
  min-width: 220px;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../node_modules/@mantine/core/styles.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
/* ----- CSS reset ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  text-transform: none;
}

/* ----- Global styles ----- */
body {
  margin: 0;
  font-family: var(--mantine-font-family);
  font-size: var(--mantine-font-size-md);
  line-height: var(--mantine-line-height);
  background-color: var(--mantine-color-body);
  color: var(--mantine-color-text);

  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}
@media screen and (max-device-width: 31.25em) {
body {
    -webkit-text-size-adjust: 100%
}
  }

@media (prefers-reduced-motion: reduce) {
    [data-respect-reduced-motion] [data-reduce-motion] {
      transition: none;
      animation: none;
    }
  }

[data-mantine-color-scheme='light'] .mantine-light-hidden {
    display: none;
}

[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
    display: none;
}

.mantine-focus-auto:focus-visible {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.mantine-focus-always:focus {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.mantine-focus-never:focus {
    outline: none;
  }

.mantine-active:active {
    transform: translateY(calc(0.0625rem * var(--mantine-scale)));
  }

fieldset:disabled .mantine-active:active {
    transform: none;
  }

:where([dir="rtl"]) .mantine-rotate-rtl {
    transform: rotate(180deg);
}

/* ----- Default CSS variables ----- */

:root {
  color-scheme: var(--mantine-color-scheme);

  --mantine-z-index-app: 100;
  --mantine-z-index-modal: 200;
  --mantine-z-index-popover: 300;
  --mantine-z-index-overlay: 400;
  --mantine-z-index-max: 9999;

  --mantine-scale: 1;
  --mantine-cursor-type: default;
  --mantine-webkit-font-smoothing: antialiased;
  --mantine-color-scheme: light dark;
  --mantine-moz-font-smoothing: grayscale;
  --mantine-color-white: #fff;
  --mantine-color-black: #000;
  --mantine-line-height: 1.55;
  --mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
  --mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --mantine-heading-font-weight: 700;
  --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
  --mantine-primary-color-0: var(--mantine-color-blue-0);
  --mantine-primary-color-1: var(--mantine-color-blue-1);
  --mantine-primary-color-2: var(--mantine-color-blue-2);
  --mantine-primary-color-3: var(--mantine-color-blue-3);
  --mantine-primary-color-4: var(--mantine-color-blue-4);
  --mantine-primary-color-5: var(--mantine-color-blue-5);
  --mantine-primary-color-6: var(--mantine-color-blue-6);
  --mantine-primary-color-7: var(--mantine-color-blue-7);
  --mantine-primary-color-8: var(--mantine-color-blue-8);
  --mantine-primary-color-9: var(--mantine-color-blue-9);
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);
  --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
  --mantine-primary-color-light: var(--mantine-color-blue-light);
  --mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);
  --mantine-primary-color-light-color: var(--mantine-color-blue-light-color);
  --mantine-breakpoint-xs: 36em;
  --mantine-breakpoint-sm: 48em;
  --mantine-breakpoint-md: 62em;
  --mantine-breakpoint-lg: 75em;
  --mantine-breakpoint-xl: 88em;
  --mantine-spacing-xs: calc(0.625rem * var(--mantine-scale));
  --mantine-spacing-sm: calc(0.75rem * var(--mantine-scale));
  --mantine-spacing-md: calc(1rem * var(--mantine-scale));
  --mantine-spacing-lg: calc(1.25rem * var(--mantine-scale));
  --mantine-spacing-xl: calc(2rem * var(--mantine-scale));
  --mantine-font-size-xs: calc(0.75rem * var(--mantine-scale));
  --mantine-font-size-sm: calc(0.875rem * var(--mantine-scale));
  --mantine-font-size-md: calc(1rem * var(--mantine-scale));
  --mantine-font-size-lg: calc(1.125rem * var(--mantine-scale));
  --mantine-font-size-xl: calc(1.25rem * var(--mantine-scale));
  --mantine-line-height-xs: 1.4;
  --mantine-line-height-sm: 1.45;
  --mantine-line-height-md: 1.55;
  --mantine-line-height-lg: 1.6;
  --mantine-line-height-xl: 1.65;
  --mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale))
      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.1);
  --mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale))
      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale))
      calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale))
      calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
  --mantine-shadow-md: 0 calc(0.0625rem * var(--mantine-scale))
      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale))
      calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale))
      calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
  --mantine-shadow-lg: 0 calc(0.0625rem * var(--mantine-scale))
      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale))
      calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale))
      calc(-0.4375rem * var(--mantine-scale));
  --mantine-shadow-xl: 0 calc(0.0625rem * var(--mantine-scale))
      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale))
      calc(-0.4375rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale))
      calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));
  --mantine-radius-xs: calc(0.125rem * var(--mantine-scale));
  --mantine-radius-sm: calc(0.25rem * var(--mantine-scale));
  --mantine-radius-md: calc(0.5rem * var(--mantine-scale));
  --mantine-radius-lg: calc(1rem * var(--mantine-scale));
  --mantine-radius-xl: calc(2rem * var(--mantine-scale));
  --mantine-color-dark-0: #c9c9c9;
  --mantine-color-dark-1: #b8b8b8;
  --mantine-color-dark-2: #828282;
  --mantine-color-dark-3: #696969;
  --mantine-color-dark-4: #424242;
  --mantine-color-dark-5: #3b3b3b;
  --mantine-color-dark-6: #2e2e2e;
  --mantine-color-dark-7: #242424;
  --mantine-color-dark-8: #1f1f1f;
  --mantine-color-dark-9: #141414;
  --mantine-color-gray-0: #f8f9fa;
  --mantine-color-gray-1: #f1f3f5;
  --mantine-color-gray-2: #e9ecef;
  --mantine-color-gray-3: #dee2e6;
  --mantine-color-gray-4: #ced4da;
  --mantine-color-gray-5: #adb5bd;
  --mantine-color-gray-6: #868e96;
  --mantine-color-gray-7: #495057;
  --mantine-color-gray-8: #343a40;
  --mantine-color-gray-9: #212529;
  --mantine-color-red-0: #fff5f5;
  --mantine-color-red-1: #ffe3e3;
  --mantine-color-red-2: #ffc9c9;
  --mantine-color-red-3: #ffa8a8;
  --mantine-color-red-4: #ff8787;
  --mantine-color-red-5: #ff6b6b;
  --mantine-color-red-6: #fa5252;
  --mantine-color-red-7: #f03e3e;
  --mantine-color-red-8: #e03131;
  --mantine-color-red-9: #c92a2a;
  --mantine-color-pink-0: #fff0f6;
  --mantine-color-pink-1: #ffdeeb;
  --mantine-color-pink-2: #fcc2d7;
  --mantine-color-pink-3: #faa2c1;
  --mantine-color-pink-4: #f783ac;
  --mantine-color-pink-5: #f06595;
  --mantine-color-pink-6: #e64980;
  --mantine-color-pink-7: #d6336c;
  --mantine-color-pink-8: #c2255c;
  --mantine-color-pink-9: #a61e4d;
  --mantine-color-grape-0: #f8f0fc;
  --mantine-color-grape-1: #f3d9fa;
  --mantine-color-grape-2: #eebefa;
  --mantine-color-grape-3: #e599f7;
  --mantine-color-grape-4: #da77f2;
  --mantine-color-grape-5: #cc5de8;
  --mantine-color-grape-6: #be4bdb;
  --mantine-color-grape-7: #ae3ec9;
  --mantine-color-grape-8: #9c36b5;
  --mantine-color-grape-9: #862e9c;
  --mantine-color-violet-0: #f3f0ff;
  --mantine-color-violet-1: #e5dbff;
  --mantine-color-violet-2: #d0bfff;
  --mantine-color-violet-3: #b197fc;
  --mantine-color-violet-4: #9775fa;
  --mantine-color-violet-5: #845ef7;
  --mantine-color-violet-6: #7950f2;
  --mantine-color-violet-7: #7048e8;
  --mantine-color-violet-8: #6741d9;
  --mantine-color-violet-9: #5f3dc4;
  --mantine-color-indigo-0: #edf2ff;
  --mantine-color-indigo-1: #dbe4ff;
  --mantine-color-indigo-2: #bac8ff;
  --mantine-color-indigo-3: #91a7ff;
  --mantine-color-indigo-4: #748ffc;
  --mantine-color-indigo-5: #5c7cfa;
  --mantine-color-indigo-6: #4c6ef5;
  --mantine-color-indigo-7: #4263eb;
  --mantine-color-indigo-8: #3b5bdb;
  --mantine-color-indigo-9: #364fc7;
  --mantine-color-blue-0: #e7f5ff;
  --mantine-color-blue-1: #d0ebff;
  --mantine-color-blue-2: #a5d8ff;
  --mantine-color-blue-3: #74c0fc;
  --mantine-color-blue-4: #4dabf7;
  --mantine-color-blue-5: #339af0;
  --mantine-color-blue-6: #228be6;
  --mantine-color-blue-7: #1c7ed6;
  --mantine-color-blue-8: #1971c2;
  --mantine-color-blue-9: #1864ab;
  --mantine-color-cyan-0: #e3fafc;
  --mantine-color-cyan-1: #c5f6fa;
  --mantine-color-cyan-2: #99e9f2;
  --mantine-color-cyan-3: #66d9e8;
  --mantine-color-cyan-4: #3bc9db;
  --mantine-color-cyan-5: #22b8cf;
  --mantine-color-cyan-6: #15aabf;
  --mantine-color-cyan-7: #1098ad;
  --mantine-color-cyan-8: #0c8599;
  --mantine-color-cyan-9: #0b7285;
  --mantine-color-teal-0: #e6fcf5;
  --mantine-color-teal-1: #c3fae8;
  --mantine-color-teal-2: #96f2d7;
  --mantine-color-teal-3: #63e6be;
  --mantine-color-teal-4: #38d9a9;
  --mantine-color-teal-5: #20c997;
  --mantine-color-teal-6: #12b886;
  --mantine-color-teal-7: #0ca678;
  --mantine-color-teal-8: #099268;
  --mantine-color-teal-9: #087f5b;
  --mantine-color-green-0: #ebfbee;
  --mantine-color-green-1: #d3f9d8;
  --mantine-color-green-2: #b2f2bb;
  --mantine-color-green-3: #8ce99a;
  --mantine-color-green-4: #69db7c;
  --mantine-color-green-5: #51cf66;
  --mantine-color-green-6: #40c057;
  --mantine-color-green-7: #37b24d;
  --mantine-color-green-8: #2f9e44;
  --mantine-color-green-9: #2b8a3e;
  --mantine-color-lime-0: #f4fce3;
  --mantine-color-lime-1: #e9fac8;
  --mantine-color-lime-2: #d8f5a2;
  --mantine-color-lime-3: #c0eb75;
  --mantine-color-lime-4: #a9e34b;
  --mantine-color-lime-5: #94d82d;
  --mantine-color-lime-6: #82c91e;
  --mantine-color-lime-7: #74b816;
  --mantine-color-lime-8: #66a80f;
  --mantine-color-lime-9: #5c940d;
  --mantine-color-yellow-0: #fff9db;
  --mantine-color-yellow-1: #fff3bf;
  --mantine-color-yellow-2: #ffec99;
  --mantine-color-yellow-3: #ffe066;
  --mantine-color-yellow-4: #ffd43b;
  --mantine-color-yellow-5: #fcc419;
  --mantine-color-yellow-6: #fab005;
  --mantine-color-yellow-7: #f59f00;
  --mantine-color-yellow-8: #f08c00;
  --mantine-color-yellow-9: #e67700;
  --mantine-color-orange-0: #fff4e6;
  --mantine-color-orange-1: #ffe8cc;
  --mantine-color-orange-2: #ffd8a8;
  --mantine-color-orange-3: #ffc078;
  --mantine-color-orange-4: #ffa94d;
  --mantine-color-orange-5: #ff922b;
  --mantine-color-orange-6: #fd7e14;
  --mantine-color-orange-7: #f76707;
  --mantine-color-orange-8: #e8590c;
  --mantine-color-orange-9: #d9480f;
  --mantine-h1-font-size: calc(2.125rem * var(--mantine-scale));
  --mantine-h1-line-height: 1.3;
  --mantine-h1-font-weight: 700;
  --mantine-h2-font-size: calc(1.625rem * var(--mantine-scale));
  --mantine-h2-line-height: 1.35;
  --mantine-h2-font-weight: 700;
  --mantine-h3-font-size: calc(1.375rem * var(--mantine-scale));
  --mantine-h3-line-height: 1.4;
  --mantine-h3-font-weight: 700;
  --mantine-h4-font-size: calc(1.125rem * var(--mantine-scale));
  --mantine-h4-line-height: 1.45;
  --mantine-h4-font-weight: 700;
  --mantine-h5-font-size: calc(1rem * var(--mantine-scale));
  --mantine-h5-line-height: 1.5;
  --mantine-h5-font-weight: 700;
  --mantine-h6-font-size: calc(0.875rem * var(--mantine-scale));
  --mantine-h6-line-height: 1.5;
  --mantine-h6-font-weight: 700;
}

:root[data-mantine-color-scheme='dark'] {
  --mantine-color-scheme: dark;
  --mantine-primary-color-contrast: var(--mantine-color-white);
  --mantine-color-bright: var(--mantine-color-white);
  --mantine-color-text: var(--mantine-color-dark-0);
  --mantine-color-body: var(--mantine-color-dark-7);
  --mantine-color-error: var(--mantine-color-red-8);
  --mantine-color-placeholder: var(--mantine-color-dark-3);
  --mantine-color-anchor: var(--mantine-color-blue-4);
  --mantine-color-default: var(--mantine-color-dark-6);
  --mantine-color-default-hover: var(--mantine-color-dark-5);
  --mantine-color-default-color: var(--mantine-color-white);
  --mantine-color-default-border: var(--mantine-color-dark-4);
  --mantine-color-dimmed: var(--mantine-color-dark-2);
  --mantine-color-dark-text: var(--mantine-color-dark-4);
  --mantine-color-dark-filled: var(--mantine-color-dark-8);
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
  --mantine-color-dark-light: rgba(36, 36, 36, 0.15);
  --mantine-color-dark-light-hover: rgba(36, 36, 36, 0.2);
  --mantine-color-dark-light-color: var(--mantine-color-dark-3);
  --mantine-color-dark-outline: var(--mantine-color-dark-4);
  --mantine-color-dark-outline-hover: rgba(36, 36, 36, 0.05);
  --mantine-color-gray-text: var(--mantine-color-gray-4);
  --mantine-color-gray-filled: var(--mantine-color-gray-8);
  --mantine-color-gray-filled-hover: var(--mantine-color-gray-9);
  --mantine-color-gray-light: rgba(134, 142, 150, 0.15);
  --mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);
  --mantine-color-gray-light-color: var(--mantine-color-gray-3);
  --mantine-color-gray-outline: var(--mantine-color-gray-4);
  --mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
  --mantine-color-red-text: var(--mantine-color-red-4);
  --mantine-color-red-filled: var(--mantine-color-red-8);
  --mantine-color-red-filled-hover: var(--mantine-color-red-9);
  --mantine-color-red-light: rgba(250, 82, 82, 0.15);
  --mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);
  --mantine-color-red-light-color: var(--mantine-color-red-3);
  --mantine-color-red-outline: var(--mantine-color-red-4);
  --mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);
  --mantine-color-pink-text: var(--mantine-color-pink-4);
  --mantine-color-pink-filled: var(--mantine-color-pink-8);
  --mantine-color-pink-filled-hover: var(--mantine-color-pink-9);
  --mantine-color-pink-light: rgba(230, 73, 128, 0.15);
  --mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);
  --mantine-color-pink-light-color: var(--mantine-color-pink-3);
  --mantine-color-pink-outline: var(--mantine-color-pink-4);
  --mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
  --mantine-color-grape-text: var(--mantine-color-grape-4);
  --mantine-color-grape-filled: var(--mantine-color-grape-8);
  --mantine-color-grape-filled-hover: var(--mantine-color-grape-9);
  --mantine-color-grape-light: rgba(190, 75, 219, 0.15);
  --mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);
  --mantine-color-grape-light-color: var(--mantine-color-grape-3);
  --mantine-color-grape-outline: var(--mantine-color-grape-4);
  --mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
  --mantine-color-violet-text: var(--mantine-color-violet-4);
  --mantine-color-violet-filled: var(--mantine-color-violet-8);
  --mantine-color-violet-filled-hover: var(--mantine-color-violet-9);
  --mantine-color-violet-light: rgba(121, 80, 242, 0.15);
  --mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);
  --mantine-color-violet-light-color: var(--mantine-color-violet-3);
  --mantine-color-violet-outline: var(--mantine-color-violet-4);
  --mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
  --mantine-color-indigo-text: var(--mantine-color-indigo-4);
  --mantine-color-indigo-filled: var(--mantine-color-indigo-8);
  --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);
  --mantine-color-indigo-light: rgba(76, 110, 245, 0.15);
  --mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);
  --mantine-color-indigo-light-color: var(--mantine-color-indigo-3);
  --mantine-color-indigo-outline: var(--mantine-color-indigo-4);
  --mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
  --mantine-color-blue-text: var(--mantine-color-blue-4);
  --mantine-color-blue-filled: var(--mantine-color-blue-8);
  --mantine-color-blue-filled-hover: var(--mantine-color-blue-9);
  --mantine-color-blue-light: rgba(34, 139, 230, 0.15);
  --mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);
  --mantine-color-blue-light-color: var(--mantine-color-blue-3);
  --mantine-color-blue-outline: var(--mantine-color-blue-4);
  --mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
  --mantine-color-cyan-text: var(--mantine-color-cyan-4);
  --mantine-color-cyan-filled: var(--mantine-color-cyan-8);
  --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);
  --mantine-color-cyan-light: rgba(21, 170, 191, 0.15);
  --mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);
  --mantine-color-cyan-light-color: var(--mantine-color-cyan-3);
  --mantine-color-cyan-outline: var(--mantine-color-cyan-4);
  --mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
  --mantine-color-teal-text: var(--mantine-color-teal-4);
  --mantine-color-teal-filled: var(--mantine-color-teal-8);
  --mantine-color-teal-filled-hover: var(--mantine-color-teal-9);
  --mantine-color-teal-light: rgba(18, 184, 134, 0.15);
  --mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);
  --mantine-color-teal-light-color: var(--mantine-color-teal-3);
  --mantine-color-teal-outline: var(--mantine-color-teal-4);
  --mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
  --mantine-color-green-text: var(--mantine-color-green-4);
  --mantine-color-green-filled: var(--mantine-color-green-8);
  --mantine-color-green-filled-hover: var(--mantine-color-green-9);
  --mantine-color-green-light: rgba(64, 192, 87, 0.15);
  --mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);
  --mantine-color-green-light-color: var(--mantine-color-green-3);
  --mantine-color-green-outline: var(--mantine-color-green-4);
  --mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);
  --mantine-color-lime-text: var(--mantine-color-lime-4);
  --mantine-color-lime-filled: var(--mantine-color-lime-8);
  --mantine-color-lime-filled-hover: var(--mantine-color-lime-9);
  --mantine-color-lime-light: rgba(130, 201, 30, 0.15);
  --mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);
  --mantine-color-lime-light-color: var(--mantine-color-lime-3);
  --mantine-color-lime-outline: var(--mantine-color-lime-4);
  --mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
  --mantine-color-yellow-text: var(--mantine-color-yellow-4);
  --mantine-color-yellow-filled: var(--mantine-color-yellow-8);
  --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);
  --mantine-color-yellow-light: rgba(250, 176, 5, 0.15);
  --mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-3);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-4);
  --mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
  --mantine-color-orange-text: var(--mantine-color-orange-4);
  --mantine-color-orange-filled: var(--mantine-color-orange-8);
  --mantine-color-orange-filled-hover: var(--mantine-color-orange-9);
  --mantine-color-orange-light: rgba(253, 126, 20, 0.15);
  --mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);
  --mantine-color-orange-light-color: var(--mantine-color-orange-3);
  --mantine-color-orange-outline: var(--mantine-color-orange-4);
  --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
}

:root[data-mantine-color-scheme='light'] {
  --mantine-color-scheme: light;
  --mantine-color-bright: var(--mantine-color-black);
  --mantine-color-text: var(--mantine-color-black);
  --mantine-color-body: var(--mantine-color-white);
  --mantine-primary-color-contrast: var(--mantine-color-white);
  --mantine-color-error: var(--mantine-color-red-6);
  --mantine-color-placeholder: var(--mantine-color-gray-5);
  --mantine-color-anchor: var(--mantine-primary-color-filled);
  --mantine-color-default: var(--mantine-color-white);
  --mantine-color-default-hover: var(--mantine-color-gray-0);
  --mantine-color-default-color: var(--mantine-color-gray-9);
  --mantine-color-default-border: var(--mantine-color-gray-4);
  --mantine-color-dimmed: var(--mantine-color-gray-6);
  --mantine-color-dark-text: var(--mantine-color-dark-filled);
  --mantine-color-dark-filled: var(--mantine-color-dark-6);
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
  --mantine-color-dark-light: rgba(56, 56, 56, 0.1);
  --mantine-color-dark-light-hover: rgba(56, 56, 56, 0.12);
  --mantine-color-dark-light-color: var(--mantine-color-dark-6);
  --mantine-color-dark-outline: var(--mantine-color-dark-6);
  --mantine-color-dark-outline-hover: rgba(56, 56, 56, 0.05);
  --mantine-color-gray-text: var(--mantine-color-gray-filled);
  --mantine-color-gray-filled: var(--mantine-color-gray-6);
  --mantine-color-gray-filled-hover: var(--mantine-color-gray-7);
  --mantine-color-gray-light: rgba(134, 142, 150, 0.1);
  --mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);
  --mantine-color-gray-light-color: var(--mantine-color-gray-6);
  --mantine-color-gray-outline: var(--mantine-color-gray-6);
  --mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);
  --mantine-color-red-text: var(--mantine-color-red-filled);
  --mantine-color-red-filled: var(--mantine-color-red-6);
  --mantine-color-red-filled-hover: var(--mantine-color-red-7);
  --mantine-color-red-light: rgba(250, 82, 82, 0.1);
  --mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);
  --mantine-color-red-light-color: var(--mantine-color-red-6);
  --mantine-color-red-outline: var(--mantine-color-red-6);
  --mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);
  --mantine-color-pink-text: var(--mantine-color-pink-filled);
  --mantine-color-pink-filled: var(--mantine-color-pink-6);
  --mantine-color-pink-filled-hover: var(--mantine-color-pink-7);
  --mantine-color-pink-light: rgba(230, 73, 128, 0.1);
  --mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);
  --mantine-color-pink-light-color: var(--mantine-color-pink-6);
  --mantine-color-pink-outline: var(--mantine-color-pink-6);
  --mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);
  --mantine-color-grape-text: var(--mantine-color-grape-filled);
  --mantine-color-grape-filled: var(--mantine-color-grape-6);
  --mantine-color-grape-filled-hover: var(--mantine-color-grape-7);
  --mantine-color-grape-light: rgba(190, 75, 219, 0.1);
  --mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);
  --mantine-color-grape-light-color: var(--mantine-color-grape-6);
  --mantine-color-grape-outline: var(--mantine-color-grape-6);
  --mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);
  --mantine-color-violet-text: var(--mantine-color-violet-filled);
  --mantine-color-violet-filled: var(--mantine-color-violet-6);
  --mantine-color-violet-filled-hover: var(--mantine-color-violet-7);
  --mantine-color-violet-light: rgba(121, 80, 242, 0.1);
  --mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);
  --mantine-color-violet-light-color: var(--mantine-color-violet-6);
  --mantine-color-violet-outline: var(--mantine-color-violet-6);
  --mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);
  --mantine-color-indigo-text: var(--mantine-color-indigo-filled);
  --mantine-color-indigo-filled: var(--mantine-color-indigo-6);
  --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);
  --mantine-color-indigo-light: rgba(76, 110, 245, 0.1);
  --mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);
  --mantine-color-indigo-light-color: var(--mantine-color-indigo-6);
  --mantine-color-indigo-outline: var(--mantine-color-indigo-6);
  --mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);
  --mantine-color-blue-text: var(--mantine-color-blue-filled);
  --mantine-color-blue-filled: var(--mantine-color-blue-6);
  --mantine-color-blue-filled-hover: var(--mantine-color-blue-7);
  --mantine-color-blue-light: rgba(34, 139, 230, 0.1);
  --mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);
  --mantine-color-blue-light-color: var(--mantine-color-blue-6);
  --mantine-color-blue-outline: var(--mantine-color-blue-6);
  --mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);
  --mantine-color-cyan-text: var(--mantine-color-cyan-filled);
  --mantine-color-cyan-filled: var(--mantine-color-cyan-6);
  --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);
  --mantine-color-cyan-light: rgba(21, 170, 191, 0.1);
  --mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);
  --mantine-color-cyan-light-color: var(--mantine-color-cyan-6);
  --mantine-color-cyan-outline: var(--mantine-color-cyan-6);
  --mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);
  --mantine-color-teal-text: var(--mantine-color-teal-filled);
  --mantine-color-teal-filled: var(--mantine-color-teal-6);
  --mantine-color-teal-filled-hover: var(--mantine-color-teal-7);
  --mantine-color-teal-light: rgba(18, 184, 134, 0.1);
  --mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);
  --mantine-color-teal-light-color: var(--mantine-color-teal-6);
  --mantine-color-teal-outline: var(--mantine-color-teal-6);
  --mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);
  --mantine-color-green-text: var(--mantine-color-green-filled);
  --mantine-color-green-filled: var(--mantine-color-green-6);
  --mantine-color-green-filled-hover: var(--mantine-color-green-7);
  --mantine-color-green-light: rgba(64, 192, 87, 0.1);
  --mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);
  --mantine-color-green-light-color: var(--mantine-color-green-6);
  --mantine-color-green-outline: var(--mantine-color-green-6);
  --mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);
  --mantine-color-lime-text: var(--mantine-color-lime-filled);
  --mantine-color-lime-filled: var(--mantine-color-lime-6);
  --mantine-color-lime-filled-hover: var(--mantine-color-lime-7);
  --mantine-color-lime-light: rgba(130, 201, 30, 0.1);
  --mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);
  --mantine-color-lime-light-color: var(--mantine-color-lime-6);
  --mantine-color-lime-outline: var(--mantine-color-lime-6);
  --mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);
  --mantine-color-yellow-text: var(--mantine-color-yellow-filled);
  --mantine-color-yellow-filled: var(--mantine-color-yellow-6);
  --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);
  --mantine-color-yellow-light: rgba(250, 176, 5, 0.1);
  --mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-6);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-6);
  --mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);
  --mantine-color-orange-text: var(--mantine-color-orange-filled);
  --mantine-color-orange-filled: var(--mantine-color-orange-6);
  --mantine-color-orange-filled-hover: var(--mantine-color-orange-7);
  --mantine-color-orange-light: rgba(253, 126, 20, 0.1);
  --mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);
  --mantine-color-orange-light-color: var(--mantine-color-orange-6);
  --mantine-color-orange-outline: var(--mantine-color-orange-6);
  --mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
}

.m_d57069b5 {
  --scrollarea-scrollbar-size: calc(0.75rem * var(--mantine-scale));

  position: relative;
  overflow: hidden;
}

.m_c0783ff9 {
  scrollbar-width: none;
  overscroll-behavior: var(--scrollarea-over-scroll-behavior);
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
}

.m_c0783ff9::-webkit-scrollbar {
    display: none;
  }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
        [data-offset-scrollbars='xy'],
        [data-offset-scrollbars='y'],
        [data-offset-scrollbars='present']
      ):where([data-vertical-hidden]) {
        -webkit-padding-end: 0;
                padding-inline-end: 0;
        -webkit-padding-start: 0;
                padding-inline-start: 0;
      }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
        [data-offset-scrollbars='xy'],
        [data-offset-scrollbars='y'],
        [data-offset-scrollbars='present']
      ):not([data-vertical-hidden]) {
        -webkit-padding-end: var(--scrollarea-scrollbar-size);
                padding-inline-end: var(--scrollarea-scrollbar-size);
        -webkit-padding-start: unset;
                padding-inline-start: unset;
      }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
        [data-offset-scrollbars='xy'],
        [data-offset-scrollbars='x'],
        [data-offset-scrollbars='present']
      ):where([data-horizontal-hidden]) {
        padding-bottom: 0;
      }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
        [data-offset-scrollbars='xy'],
        [data-offset-scrollbars='x'],
        [data-offset-scrollbars='present']
      ):not([data-horizontal-hidden]) {
        padding-bottom: var(--scrollarea-scrollbar-size);
      }

.m_f8f631dd {
  min-width: 100%;
  display: table;
}

.m_c44ba933 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  box-sizing: border-box;
  transition:
    background-color 150ms ease,
    opacity 150ms ease;

  padding: calc(var(--scrollarea-scrollbar-size) / 5);
  display: flex;
  background-color: transparent;
  flex-direction: row;
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_c44ba933:hover {
      background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='light']) .m_c44ba933:hover > .m_d8b5e363 {
        background-color: rgba(0, 0, 0, 0.5);
      }

    :where([data-mantine-color-scheme='dark']) .m_c44ba933:hover {
      background-color: var(--mantine-color-dark-8);
  }

      :where([data-mantine-color-scheme='dark']) .m_c44ba933:hover > .m_d8b5e363 {
        background-color: rgba(255, 255, 255, 0.5);
      }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_c44ba933:active {
      background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='light']) .m_c44ba933:active > .m_d8b5e363 {
        background-color: rgba(0, 0, 0, 0.5);
      }

    :where([data-mantine-color-scheme='dark']) .m_c44ba933:active {
      background-color: var(--mantine-color-dark-8);
  }

      :where([data-mantine-color-scheme='dark']) .m_c44ba933:active > .m_d8b5e363 {
        background-color: rgba(255, 255, 255, 0.5);
      }
}

.m_c44ba933:where([data-hidden], [data-state='hidden']) {
    display: none;
  }

.m_c44ba933:where([data-orientation='vertical']) {
    width: var(--scrollarea-scrollbar-size);
    top: 0;
    bottom: var(--sa-corner-width);
    inset-inline-end: 0;
  }

.m_c44ba933:where([data-orientation='horizontal']) {
    height: var(--scrollarea-scrollbar-size);
    flex-direction: column;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: var(--sa-corner-width);
  }

.m_d8b5e363 {
  flex: 1 1;
  border-radius: var(--scrollarea-scrollbar-size);
  position: relative;
  transition: background-color 150ms ease;
  overflow: hidden;
  opacity: var(--thumb-opacity);
}

.m_d8b5e363::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: calc(2.75rem * var(--mantine-scale));
    min-height: calc(2.75rem * var(--mantine-scale));
  }

:where([data-mantine-color-scheme='light']) .m_d8b5e363 {
    background-color: rgba(0, 0, 0, 0.4);
}

:where([data-mantine-color-scheme='dark']) .m_d8b5e363 {
    background-color: rgba(255, 255, 255, 0.4);
}

.m_21657268 {
  position: absolute;
  opacity: 0;
  transition: opacity 150ms ease;
  display: block;
  inset-inline-end: 0;
  bottom: 0;
}

:where([data-mantine-color-scheme='light']) .m_21657268 {
    background-color: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_21657268 {
    background-color: var(--mantine-color-dark-8);
}

.m_21657268:where([data-hovered]) {
    opacity: 1;
  }

.m_21657268:where([data-hidden]) {
    display: none;
  }

.m_87cf2631 {
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: var(--mantine-font-size-md);
  text-align: left;
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

  :where([dir="rtl"]) .m_87cf2631 {
    text-align: right;
}

.m_515a97f8 {
  border: 0;
  clip: rect(0 0 0 0);
  height: calc(0.0625rem * var(--mantine-scale));
  width: calc(0.0625rem * var(--mantine-scale));
  margin: calc(-0.0625rem * var(--mantine-scale));
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.m_1b7284a3 {
  --paper-radius: var(--mantine-radius-default);

  outline: 0;
  -webkit-tap-highlight-color: transparent;
  display: block;
  touch-action: manipulation;
  text-decoration: none;
  border-radius: var(--paper-radius);
  box-shadow: var(--paper-shadow);
  background-color: var(--mantine-color-body);
}

  [data-mantine-color-scheme='light'] .m_1b7284a3 {
    --paper-border-color: var(--mantine-color-gray-3);
}

  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
    --paper-border-color: var(--mantine-color-dark-4);
}

  .m_1b7284a3:where([data-with-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
  }

.m_9814e45f {
  inset: 0;
  position: absolute;
  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
  -webkit-backdrop-filter: var(--overlay-filter);
  backdrop-filter: var(--overlay-filter);
  border-radius: var(--overlay-radius, 0);
  z-index: var(--overlay-z-index);
}

  .m_9814e45f:where([data-fixed]) {
    position: fixed;
  }

  .m_9814e45f:where([data-center]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.m_38a85659 {
  position: absolute;
  border: 1px solid var(--popover-border-color);
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
  box-shadow: var(--popover-shadow, none);
  border-radius: var(--popover-radius, var(--mantine-radius-default));
}

  .m_38a85659:where([data-fixed]) {
    position: fixed;
  }

  .m_38a85659:focus {
    outline: none;
  }

  :where([data-mantine-color-scheme='light']) .m_38a85659 {
    --popover-border-color: var(--mantine-color-gray-2);
    background-color: var(--mantine-color-white);
}

  :where([data-mantine-color-scheme='dark']) .m_38a85659 {
    --popover-border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
}

.m_a31dc6c1 {
  background-color: inherit;
  border: 1px solid var(--popover-border-color);
  z-index: 1;
}

.m_3d7bc908 {
  position: fixed;
  inset: 0;
}

.m_5ae2e3c {
  --loader-size-xs: calc(1.125rem * var(--mantine-scale));
  --loader-size-sm: calc(1.375rem * var(--mantine-scale));
  --loader-size-md: calc(2.25rem * var(--mantine-scale));
  --loader-size-lg: calc(2.75rem * var(--mantine-scale));
  --loader-size-xl: calc(3.625rem * var(--mantine-scale));
  --loader-size: var(--loader-size-md);
  --loader-color: var(--mantine-primary-color-filled);
}

/* ----- Bars loader ----- */
@keyframes m_5d2b3b9d {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  50%,
  100% {
    transform: scale(1);
  }
}

.m_7a2bd4cd {
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  display: flex;
  gap: calc(var(--loader-size) / 5);
}

.m_870bb79 {
  flex: 1 1;
  background: var(--loader-color);
  animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  border-radius: calc(0.125rem * var(--mantine-scale));
}

.m_870bb79:nth-of-type(1) {
    animation-delay: -240ms;
  }

.m_870bb79:nth-of-type(2) {
    animation-delay: -120ms;
  }

.m_870bb79:nth-of-type(3) {
    animation-delay: 0;
  }

/* ----- Dots loader ----- */
@keyframes m_aac34a1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.6);
    opacity: 0.5;
  }
}

.m_4e3f22d7 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--loader-size) / 10);
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
}

.m_870c4af {
  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
  border-radius: 50%;
  background: var(--loader-color);
  animation: m_aac34a1 0.8s infinite linear;
}

.m_870c4af:nth-child(2) {
    animation-delay: 0.4s;
  }

/* ----- Oval loader ----- */
@keyframes m_f8e89c4b {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.m_b34414df {
  display: inline-block;
  width: var(--loader-size);
  height: var(--loader-size);
}

.m_b34414df::after {
    content: '';
    display: block;
    width: var(--loader-size);
    height: var(--loader-size);
    border-radius: calc(625rem * var(--mantine-scale));
    border-width: calc(var(--loader-size) / 8);
    border-style: solid;
    border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;
    animation: m_f8e89c4b 1.2s linear infinite;
  }

.m_8d3f4000 {
  --ai-size-xs: calc(1.125rem * var(--mantine-scale));
  --ai-size-sm: calc(1.375rem * var(--mantine-scale));
  --ai-size-md: calc(1.75rem * var(--mantine-scale));
  --ai-size-lg: calc(2.125rem * var(--mantine-scale));
  --ai-size-xl: calc(2.75rem * var(--mantine-scale));

  --ai-size-input-xs: calc(1.875rem * var(--mantine-scale));
  --ai-size-input-sm: calc(2.25rem * var(--mantine-scale));
  --ai-size-input-md: calc(2.625rem * var(--mantine-scale));
  --ai-size-input-lg: calc(3.125rem * var(--mantine-scale));
  --ai-size-input-xl: calc(3.75rem * var(--mantine-scale));

  --ai-size: var(--ai-size-md);
  --ai-color: var(--mantine-color-white);

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;

  width: var(--ai-size);
  height: var(--ai-size);
  min-width: var(--ai-size);
  min-height: var(--ai-size);
  border-radius: var(--ai-radius, var(--mantine-radius-default));
  background: var(--ai-bg, var(--mantine-primary-color-filled));
  color: var(--ai-color, var(--mantine-color-white));
  border: var(--ai-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  cursor: pointer;
}

  @media (hover: hover) {
    .m_8d3f4000:hover:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover));
      color: var(--ai-hover-color, var(--ai-color));
    }
}

  @media (hover: none) {
    .m_8d3f4000:active:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover));
      color: var(--ai-hover-color, var(--ai-color));
    }
}

  .m_8d3f4000[data-loading] {
    cursor: not-allowed;
  }

  .m_8d3f4000[data-loading] .m_8d3afb97 {
      opacity: 0;
      transform: translateY(100%);
    }

  .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
    cursor: not-allowed;
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  }

  :where([data-mantine-color-scheme='light']) .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
      background-color: var(--mantine-color-gray-1);
      color: var(--mantine-color-gray-5);
}

  :where([data-mantine-color-scheme='dark']) .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
      background-color: var(--mantine-color-dark-6);
      color: var(--mantine-color-dark-3);
}

  .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])):active {
      transform: none;
    }

.m_302b9fb1 {
  inset: calc(-0.0625rem * var(--mantine-scale));
  position: absolute;
  border-radius: var(--ai-radius, var(--mantine-radius-default));
  display: flex;
  align-items: center;
  justify-content: center;
}

:where([data-mantine-color-scheme='light']) .m_302b9fb1 {
    background-color: rgba(255, 255, 255, 0.15);
}

:where([data-mantine-color-scheme='dark']) .m_302b9fb1 {
    background-color: rgba(0, 0, 0, 0.15);
}

.m_1a0f1b21 {
  --ai-border-width: calc(0.0625rem * var(--mantine-scale));
  display: flex;
}

.m_1a0f1b21 :where(*):focus {
      position: relative;
      z-index: 1;
    }

.m_1a0f1b21[data-orientation='horizontal'] {
    flex-direction: row;
  }

.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child {
        border-end-end-radius: 0;
        border-start-end-radius: 0;
        border-inline-end-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child {
        border-end-start-radius: 0;
        border-start-start-radius: 0;
        border-inline-start-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-inline-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='vertical'] {
    flex-direction: column;
  }

.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-bottom-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-top-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-bottom-width: calc(var(--ai-border-width) / 2);
        border-top-width: calc(var(--ai-border-width) / 2);
      }

.m_8d3afb97 {
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 150ms ease,
    opacity 100ms ease;
  width: 100%;
  height: 100%;
}

.m_437b6484 {
  --section-height-xs: calc(1.125rem * var(--mantine-scale));
  --section-height-sm: calc(1.375rem * var(--mantine-scale));
  --section-height-md: calc(1.75rem * var(--mantine-scale));
  --section-height-lg: calc(2.125rem * var(--mantine-scale));
  --section-height-xl: calc(2.75rem * var(--mantine-scale));

  --section-height-input-xs: calc(1.875rem * var(--mantine-scale));
  --section-height-input-sm: calc(2.25rem * var(--mantine-scale));
  --section-height-input-md: calc(2.625rem * var(--mantine-scale));
  --section-height-input-lg: calc(3.125rem * var(--mantine-scale));
  --section-height-input-xl: calc(3.75rem * var(--mantine-scale));

  --section-padding-x-xs: calc(0.375rem * var(--mantine-scale));
  --section-padding-x-sm: calc(0.5rem * var(--mantine-scale));
  --section-padding-x-md: calc(0.625rem * var(--mantine-scale));
  --section-padding-x-lg: calc(0.75rem * var(--mantine-scale));
  --section-padding-x-xl: calc(1rem * var(--mantine-scale));

  --section-height: var(--section-height-sm);
  --section-padding-x: var(--section-padding-x-sm);
  --section-color: var(--mantine-color-white);

  font-weight: 600;
  width: auto;
  border-radius: var(--section-radius, var(--mantine-radius-default));
  font-size: var(--section-fz, var(--mantine-font-size-sm));
  background: var(--section-bg, var(--mantine-primary-color-filled));
  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  color: var(--section-color, var(--mantine-color-white));
  height: var(--section-height, var(--section-height-sm));
  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m_86a44da5 {
  --cb-size-xs: calc(1.125rem * var(--mantine-scale));
  --cb-size-sm: calc(1.375rem * var(--mantine-scale));
  --cb-size-md: calc(1.75rem * var(--mantine-scale));
  --cb-size-lg: calc(2.125rem * var(--mantine-scale));
  --cb-size-xl: calc(2.75rem * var(--mantine-scale));

  --cb-size: var(--cb-size-md);
  --cb-icon-size: 70%;
  --cb-radius: var(--mantine-radius-default);

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  width: var(--cb-size);
  height: var(--cb-size);
  min-width: var(--cb-size);
  min-height: var(--cb-size);
  border-radius: var(--cb-radius);
}

  :where([data-mantine-color-scheme='light']) .m_86a44da5 {
    color: var(--mantine-color-gray-7);
}

  :where([data-mantine-color-scheme='dark']) .m_86a44da5 {
    color: var(--mantine-color-dark-1);
}

  .m_86a44da5[data-disabled],
  .m_86a44da5:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
      background-color: var(--mantine-color-dark-6);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
      background-color: var(--mantine-color-dark-6);
  }
}

.m_4081bf90 {
  display: flex;
  flex-direction: row;
  flex-wrap: var(--group-wrap, wrap);
  justify-content: var(--group-justify, flex-start);
  align-items: var(--group-align, center);
  gap: var(--group-gap, var(--mantine-spacing-md));
}

  .m_4081bf90:where([data-grow]) > * {
      flex-grow: 1;
      max-width: var(--group-child-width);
    }

.m_615af6c9 {
  line-height: 1;
  padding: 0;
  margin: 0;
  font-weight: 400;
  font-size: var(--mantine-font-size-md);
}

.m_b5489c3c {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mb-padding, var(--mantine-spacing-md));
  -webkit-padding-end: calc(var(--mb-padding, var(--mantine-spacing-md)) - calc(0.3125rem * var(--mantine-scale)));
          padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) - calc(0.3125rem * var(--mantine-scale)));
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: var(--mantine-color-body);
  z-index: 1000;
  min-height: calc(3.75rem * var(--mantine-scale));
  transition: -webkit-padding-end 100ms;
  transition: padding-inline-end 100ms;
  transition: padding-inline-end 100ms, -webkit-padding-end 100ms;
}

.m_60c222c7 {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: var(--mb-z-index);
  pointer-events: none;
}

.m_fd1ab0aa {
  pointer-events: all;
  box-shadow: var(--mb-shadow, var(--mantine-shadow-xl));
}

.m_fd1ab0aa [data-mantine-scrollbar] {
    z-index: 1001;
  }

[data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar]) .m_b5489c3c {
    -webkit-padding-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale)));
            padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale)));
  }

.m_606cb269 {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

.m_5df29311 {
  padding: var(--mb-padding, var(--mantine-spacing-md));
  padding-top: var(--mb-padding, var(--mantine-spacing-md));
}

.m_5df29311:where(:not(:only-child)) {
    padding-top: 0;
  }

.m_6c018570 {
  position: relative;
  margin-top: var(--input-margin-top, 0rem);
  margin-bottom: var(--input-margin-bottom, 0rem);

  --input-height-xs: calc(1.875rem * var(--mantine-scale));
  --input-height-sm: calc(2.25rem * var(--mantine-scale));
  --input-height-md: calc(2.625rem * var(--mantine-scale));
  --input-height-lg: calc(3.125rem * var(--mantine-scale));
  --input-height-xl: calc(3.75rem * var(--mantine-scale));

  --input-padding-y-xs: calc(0.3125rem * var(--mantine-scale));
  --input-padding-y-sm: calc(0.375rem * var(--mantine-scale));
  --input-padding-y-md: calc(0.5rem * var(--mantine-scale));
  --input-padding-y-lg: calc(0.625rem * var(--mantine-scale));
  --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));

  --input-height: var(--input-height-sm);
  --input-radius: var(--mantine-radius-default);

  --input-cursor: text;
  --input-text-align: left;
  --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
  --input-padding: calc(var(--input-height) / 3);
  --input-padding-inline-start: var(--input-padding);
  --input-padding-inline-end: var(--input-padding);
  --input-placeholder-color: var(--mantine-color-placeholder);
  --input-color: var(--mantine-color-text);

  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));

  --input-right-section-size: var(
    --input-right-section-width,
    calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))
  );

  --input-size: var(--input-height);

  --section-y: calc(0.0625rem * var(--mantine-scale));
  --left-section-start: calc(0.0625rem * var(--mantine-scale));
  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);

  --right-section-end: calc(0.0625rem * var(--mantine-scale));
  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
}

  .m_6c018570[data-variant='unstyled'] {
    --input-padding: 0;
    --input-padding-y: 0;
    --input-padding-inline-start: 0;
    --input-padding-inline-end: 0;
  }

  .m_6c018570[data-pointer] {
    --input-cursor: pointer;
  }

  .m_6c018570[data-multiline] {
    --input-padding-y-xs: calc(0.28125rem * var(--mantine-scale));
    --input-padding-y-sm: calc(0.34375rem * var(--mantine-scale));
    --input-padding-y-md: calc(0.4375rem * var(--mantine-scale));
    --input-padding-y-lg: calc(0.59375rem * var(--mantine-scale));
    --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));

    --input-size: auto;
    --input-line-height: var(--mantine-line-height);
    --input-padding-y: var(--input-padding-y-sm);
  }

  .m_6c018570[data-with-left-section] {
    --input-padding-inline-start: var(--input-left-section-size);
  }

  .m_6c018570[data-with-right-section] {
    --input-padding-inline-end: var(--input-right-section-size);
  }

  [data-mantine-color-scheme='light'] .m_6c018570 {
    --input-disabled-bg: var(--mantine-color-gray-1);
    --input-disabled-color: var(--mantine-color-gray-6);
}

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
      --input-bd: var(--mantine-color-gray-4);
      --input-bg: var(--mantine-color-white);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='filled'] {
      --input-bd: transparent;
      --input-bg: var(--mantine-color-gray-1);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='unstyled'] {
      --input-bd: transparent;
      --input-bg: transparent;
      --input-bd-focus: transparent;
    }

  [data-mantine-color-scheme='dark'] .m_6c018570 {
    --input-disabled-bg: var(--mantine-color-dark-6);
    --input-disabled-color: var(--mantine-color-dark-2);
}

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] {
      --input-bd: var(--mantine-color-dark-4);
      --input-bg: var(--mantine-color-dark-6);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='filled'] {
      --input-bd: transparent;
      --input-bg: var(--mantine-color-dark-5);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='unstyled'] {
      --input-bd: transparent;
      --input-bg: transparent;
      --input-bd-focus: transparent;
    }

  [data-mantine-color-scheme] .m_6c018570[data-error]:not([data-variant='unstyled']) {
      --input-bd: var(--mantine-color-error);
    }

  [data-mantine-color-scheme] .m_6c018570[data-error] {

    --input-color: var(--mantine-color-error);
    --input-placeholder-color: var(--mantine-color-error);
    --input-section-color: var(--mantine-color-error);
}

  :where([dir="rtl"]) .m_6c018570 {
    --input-text-align: right;
    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
}

.m_8fb7ebe7 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  resize: var(--input-resize, none);
  display: block;
  width: 100%;
  transition: border-color 100ms ease;

  text-align: var(--input-text-align);
  color: var(--input-color);
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
  background-color: var(--input-bg);
  font-family: var(--input-font-family, var(--mantine-font-family));
  height: var(--input-size);
  min-height: var(--input-height);
  line-height: var(--input-line-height);
  font-size: var(--input-fz, var(--input-fz, var(--mantine-font-size-sm)));
  border-radius: var(--input-radius);
  -webkit-padding-start: var(--input-padding-inline-start);
          padding-inline-start: var(--input-padding-inline-start);
  -webkit-padding-end: var(--input-padding-inline-end);
          padding-inline-end: var(--input-padding-inline-end);
  padding-top: var(--input-padding-y, 0rem);
  padding-bottom: var(--input-padding-y, 0rem);
  cursor: var(--input-cursor);
  overflow: var(--input-overflow);
}

/* Used as data attribute in Textarea component, does not have associated prop on the Input component */

.m_8fb7ebe7[data-no-overflow] {
    --input-overflow: hidden;
  }

/* Used as data attribute in JsonInput component, does not have associated prop on the Input component */

.m_8fb7ebe7[data-monospace] {
    --input-font-family: var(--mantine-font-family-monospace);
    --input-fz: calc(var(--input-fz, var(--mantine-font-size-sm)) - calc(0.125rem * var(--mantine-scale)));
  }

.m_8fb7ebe7:focus,
  .m_8fb7ebe7:focus-within {
    outline: none;
    --input-bd: var(--input-bd-focus);
  }

[data-error] .m_8fb7ebe7:focus, [data-error] .m_8fb7ebe7:focus-within {
      --input-bd: var(--mantine-color-error);
    }

.m_8fb7ebe7::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

.m_8fb7ebe7::-webkit-inner-spin-button,
  .m_8fb7ebe7::-webkit-outer-spin-button,
  .m_8fb7ebe7::-webkit-search-decoration,
  .m_8fb7ebe7::-webkit-search-cancel-button,
  .m_8fb7ebe7::-webkit-search-results-button,
  .m_8fb7ebe7::-webkit-search-results-decoration {
    -webkit-appearance: none;
            appearance: none;
  }

.m_8fb7ebe7[type='number'] {
    -moz-appearance: textfield;
  }

.m_8fb7ebe7:disabled,
  .m_8fb7ebe7[data-disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */

.m_8fb7ebe7:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

.m_82577fc2 {
  pointer-events: var(--section-pointer-events);
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--section-start);
  inset-inline-end: var(--section-end);
  bottom: var(--section-y);
  top: var(--section-y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--section-size);
  border-radius: var(--section-border-radius);
  color: var(--input-section-color, var(--mantine-color-dimmed));
}

.m_82577fc2[data-position='right'] {
    --section-pointer-events: var(--input-right-section-pointer-events);
    --section-end: var(--right-section-end);
    --section-size: var(--input-right-section-size);
    --section-border-radius: var(--right-section-border-radius);
  }

.m_82577fc2[data-position='left'] {
    --section-pointer-events: var(--input-left-section-pointer-events);
    --section-start: var(--left-section-start);
    --section-size: var(--input-left-section-size);
    --section-border-radius: var(--left-section-border-radius);
  }

/* ----- Input.Placeholder ----- */
.m_88bacfd0 {
  color: var(--input-placeholder-color, var(--mantine-color-placeholder));
}
[data-error] .m_88bacfd0 {
    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
  }

/* ----- Input.Wrapper ----- */
.m_46b77525 {
  line-height: var(--mantine-line-height);
}

.m_8fdc1311 {
  display: inline-block;
  font-weight: 500;
  word-break: break-word;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--input-label-size, var(--mantine-font-size-sm));
}

.m_78a94662 {
  color: var(--input-asterisk-color, var(--mantine-color-error));
}

.m_8f816625,
.m_fe47ce59 {
  word-wrap: break-word;
  line-height: 1.2;
  display: block;
  margin: 0;
  padding: 0;
}

.m_8f816625 {
  color: var(--mantine-color-error);
  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_fe47ce59 {
  color: var(--mantine-color-dimmed);
  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_8bffd616 {
  display: flex;
}

.m_96b553a6 {
  --transition-duration: 150ms;

  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
  transition-property: transform, width, height;
  transition-timing-function: ease;
  transition-duration: 0ms;
}

  .m_96b553a6:where([data-initialized]) {
    transition-duration: var(--transition-duration);
  }

  .m_96b553a6:where([data-hidden]) {
    background-color: red;
    display: none;
  }

.m_9bdbb667 {
  --accordion-radius: var(--mantine-radius-default);
}

.m_df78851f {
  word-break: break-word;
}

.m_4ba554d4 {
  padding: var(--mantine-spacing-md);
  padding-top: calc(var(--mantine-spacing-xs) / 2);
}

.m_8fa820a0 {
  margin: 0;
  padding: 0;
}

.m_4ba585b8 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-inline: var(--mantine-spacing-md);
  opacity: 1;
  cursor: pointer;
  background-color: transparent;
}

.m_4ba585b8:where([data-chevron-position='left']) {
    flex-direction: row;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }

:where([data-mantine-color-scheme='light']) .m_4ba585b8 {
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_4ba585b8 {
    color: var(--mantine-color-dark-0);
}

.m_4ba585b8:where(:disabled, [data-disabled]) {
    opacity: 0.4;
    cursor: not-allowed;
  }

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) .m_4271d21b:where(:not(:disabled, [data-disabled])):hover {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) .m_4271d21b:where(:not(:disabled, [data-disabled])):hover {
        background-color: var(--mantine-color-dark-6);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) .m_4271d21b:where(:not(:disabled, [data-disabled])):active {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) .m_4271d21b:where(:not(:disabled, [data-disabled])):active {
        background-color: var(--mantine-color-dark-6);
  }
}

.m_df3ffa0f {
  color: inherit;
  font-weight: 400;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: var(--mantine-spacing-sm);
  padding-bottom: var(--mantine-spacing-sm);
}

.m_3f35ae96 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: transform var(--accordion-transition-duration, 200ms) ease;
  width: var(--accordion-chevron-size, calc(0.9375rem * var(--mantine-scale)));
  min-width: var(--accordion-chevron-size, calc(0.9375rem * var(--mantine-scale)));
  transform: rotate(0deg);
}

.m_3f35ae96:where([data-rotate]) {
    transform: rotate(180deg);
  }

.m_3f35ae96:where([data-position='left']) {
    -webkit-margin-end: var(--mantine-spacing-md);
            margin-inline-end: var(--mantine-spacing-md);
    -webkit-margin-start: var(--mantine-spacing-md);
            margin-inline-start: var(--mantine-spacing-md);
  }

.m_9bd771fe {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-margin-end: var(--mantine-spacing-sm);
          margin-inline-end: var(--mantine-spacing-sm);
}

.m_9bd771fe:where([data-chevron-position='left']) {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
    -webkit-margin-start: var(--mantine-spacing-lg);
            margin-inline-start: var(--mantine-spacing-lg);
  }

:where([data-mantine-color-scheme='light']) .m_9bd7b098 {
    --item-border-color: var(--mantine-color-gray-3);
    --item-filled-color: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_9bd7b098 {
    --item-border-color: var(--mantine-color-dark-4);
    --item-filled-color: var(--mantine-color-dark-6);
}

.m_fe19b709 {
  border-bottom: 1px solid var(--item-border-color);
}

.m_1f921b3b {
  border: 1px solid var(--item-border-color);
  transition: background-color 150ms ease;
}

.m_1f921b3b:where([data-active]) {
    background-color: var(--item-filled-color);
  }

.m_1f921b3b:first-of-type {
    border-start-start-radius: var(--accordion-radius);
    border-start-end-radius: var(--accordion-radius);
  }

.m_1f921b3b:first-of-type > [data-accordion-control] {
      border-start-start-radius: var(--accordion-radius);
      border-start-end-radius: var(--accordion-radius);
    }

.m_1f921b3b:last-of-type {
    border-end-start-radius: var(--accordion-radius);
    border-end-end-radius: var(--accordion-radius);
  }

.m_1f921b3b:last-of-type > [data-accordion-control] {
      border-end-start-radius: var(--accordion-radius);
      border-end-end-radius: var(--accordion-radius);
    }

.m_1f921b3b + .m_1f921b3b {
    border-top: 0;
  }

.m_2cdf939a {
  border-radius: var(--accordion-radius);
}

.m_2cdf939a:where([data-active]) {
    background-color: var(--item-filled-color);
  }

.m_9f59b069 {
  background-color: var(--item-filled-color);
  border-radius: var(--accordion-radius);
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  transition: background-color 150ms ease;
}

.m_9f59b069[data-active] {
    border-color: var(--item-border-color);
  }

:where([data-mantine-color-scheme='light']) .m_9f59b069[data-active] {
      background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_9f59b069[data-active] {
      background-color: var(--mantine-color-dark-7);
}

.m_9f59b069 + .m_9f59b069 {
    margin-top: var(--mantine-spacing-md);
  }

.m_7f854edf {
  position: fixed;
  z-index: var(--affix-z-index);
  inset-inline-start: var(--affix-left);
  inset-inline-end: var(--affix-right);
  top: var(--affix-top);
  bottom: var(--affix-bottom);
}

.m_66836ed3 {
  --alert-radius: var(--mantine-radius-default);
  --alert-bg: var(--mantine-primary-color-light);
  --alert-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  --alert-color: var(--mantine-primary-color-light-color);

  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);
  border-radius: var(--alert-radius);
  position: relative;
  overflow: hidden;
  background-color: var(--alert-bg);
  border: var(--alert-bd);
  color: var(--alert-color);
}

.m_a5d60502 {
  display: flex;
}

.m_667c2793 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--mantine-spacing-xs);
}

.m_6a03f287 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mantine-font-size-sm);
  font-weight: 700;
}

.m_6a03f287:where([data-with-close-button]) {
    -webkit-padding-end: var(--mantine-spacing-md);
            padding-inline-end: var(--mantine-spacing-md);
  }

.m_698f4f23 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m_667f2a6a {
  line-height: 1;
  width: calc(1.25rem * var(--mantine-scale));
  height: calc(1.25rem * var(--mantine-scale));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-margin-end: var(--mantine-spacing-md);
          margin-inline-end: var(--mantine-spacing-md);
  margin-top: calc(0.0625rem * var(--mantine-scale));
}

.m_7fa78076 {
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: var(--mantine-font-size-sm);
}

:where([data-mantine-color-scheme='light']) .m_7fa78076 {
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_7fa78076 {
    color: var(--mantine-color-white);
}

.m_7fa78076:where([data-variant='filled']) {
    color: var(--alert-color);
  }

.m_7fa78076:where([data-variant='white']) {
    color: var(--mantine-color-black);
  }

.m_87f54839 {
  width: calc(1.25rem * var(--mantine-scale));
  height: calc(1.25rem * var(--mantine-scale));
  color: var(--alert-color);
}

.m_b6d8b162 {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  font-size: var(--text-fz, var(--mantine-font-size-md));
  line-height: var(--text-lh, var(--mantine-line-height-md));
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: var(--text-color);
}

  .m_b6d8b162:where([data-truncate]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m_b6d8b162:where([data-truncate='start']) {
    direction: rtl;
    text-align: right;
  }

  :where([dir="rtl"]) .m_b6d8b162:where([data-truncate='start']) {
      direction: ltr;
      text-align: left;
}

  .m_b6d8b162:where([data-variant='gradient']) {
    background-image: var(--text-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .m_b6d8b162:where([data-line-clamp]) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--text-line-clamp);
    -webkit-box-orient: vertical;
  }

  .m_b6d8b162:where([data-inherit]) {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
  }

  .m_b6d8b162:where([data-inline]) {
    line-height: 1;
  }

.m_849cf0da {
  color: var(--mantine-color-anchor);
  text-decoration: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  display: inline;
  padding: 0;
  margin: 0;
  background-color: transparent;
  cursor: pointer;
}

  @media (hover: hover) {

  .m_849cf0da:where([data-underline='hover']):hover {
      text-decoration: underline;
  }
}

  @media (hover: none) {

  .m_849cf0da:where([data-underline='hover']):active {
      text-decoration: underline;
  }
}

  .m_849cf0da:where([data-underline='not-hover']) {
    text-decoration: underline;
  }

  @media (hover: hover) {

  .m_849cf0da:where([data-underline='not-hover']):hover {
      text-decoration: none;
  }
}

  @media (hover: none) {

  .m_849cf0da:where([data-underline='not-hover']):active {
      text-decoration: none;
  }
}

  .m_849cf0da:where([data-underline='always']) {
    text-decoration: underline;
  }

  .m_849cf0da:where([data-variant='gradient']),
    .m_849cf0da:where([data-variant='gradient']):hover {
      text-decoration: none;
    }

  .m_849cf0da:where([data-line-clamp]) {
    display: -webkit-box;
  }

.m_48204f9b {
  width: var(--slider-size);
  height: var(--slider-size);
  position: relative;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

  .m_48204f9b:focus-within {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

  .m_48204f9b {

  --slider-size: calc(3.75rem * var(--mantine-scale));
  --thumb-size: calc(var(--slider-size) / 5);
}

  :where([data-mantine-color-scheme='light']) .m_48204f9b {
    background-color: var(--mantine-color-gray-1);
}

  :where([data-mantine-color-scheme='dark']) .m_48204f9b {
    background-color: var(--mantine-color-dark-5);
}

.m_bb9cdbad {
  position: absolute;
  inset: calc(0.0625rem * var(--mantine-scale));
  border-radius: var(--slider-size);
  pointer-events: none;
}

.m_481dd586 {
  width: calc(0.125rem * var(--mantine-scale));
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  transform: rotate(var(--angle));
}

.m_481dd586::before {
    content: '';
    position: absolute;
    top: calc(var(--thumb-size) / 3);
    left: calc(0.03125rem * var(--mantine-scale));
    width: calc(0.0625rem * var(--mantine-scale));
    height: calc(var(--thumb-size) / 1.5);
    transform: translate(-50%, -50%);
  }

:where([data-mantine-color-scheme='light']) .m_481dd586::before {
      background-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_481dd586::before {
      background-color: var(--mantine-color-dark-3);
}

.m_481dd586[data-label]::after {
    min-width: calc(1.125rem * var(--mantine-scale));
    text-align: center;
    content: attr(data-label);
    position: absolute;
    top: calc(-1.5rem * var(--mantine-scale));
    left: calc(-0.4375rem * var(--mantine-scale));
    transform: rotate(calc(360deg - var(--angle)));
    font-size: var(--mantine-font-size-xs);
  }

.m_bc02ba3d {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1.5px);
  inset-inline-end: 0;
  height: 100%;
  width: calc(0.1875rem * var(--mantine-scale));
  outline: none;
  pointer-events: none;
}

.m_bc02ba3d::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: min(var(--thumb-size), calc(var(--slider-size) / 2));
    width: calc(0.1875rem * var(--mantine-scale));
  }

:where([data-mantine-color-scheme='light']) .m_bc02ba3d::before {
      background-color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_bc02ba3d::before {
      background-color: var(--mantine-color-dark-1);
}

.m_bb8e875b {
  font-size: var(--mantine-font-size-xs);
}

.m_89ab340[data-resizing] {
    --app-shell-transition-duration: 0ms !important;
  }
  .m_89ab340[data-disabled] {
    --app-shell-header-offset: 0rem !important;
    --app-shell-navbar-offset: 0rem !important;
    --app-shell-aside-offset: 0rem !important;
    --app-shell-footer-offset: 0rem !important;
  }
  [data-mantine-color-scheme='light'] .m_89ab340 {
    --app-shell-border-color: var(--mantine-color-gray-3);
}
  [data-mantine-color-scheme='dark'] .m_89ab340 {
    --app-shell-border-color: var(--mantine-color-dark-4);
}

.m_45252eee,
.m_9cdde9a,
.m_3b16f56b,
.m_8983817,
.m_3840c879 {
  transition-duration: var(--app-shell-transition-duration);
  transition-timing-function: var(--app-shell-transition-timing-function);
}

.m_45252eee,
.m_9cdde9a {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: var(--app-shell-header-offset, 0rem);
  height: calc(
    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)
  );
  background-color: var(--mantine-color-body);
  transition-property: transform, top, height;
}

:where([data-layout='alt']) .m_45252eee, :where([data-layout='alt']) .m_9cdde9a {
    top: 0rem;
    height: 100dvh;
  }

.m_45252eee {
  inset-inline-start: 0;
  width: var(--app-shell-navbar-width);
  transition-property: transform, top, height;
  transform: var(--app-shell-navbar-transform);
  z-index: var(--app-shell-navbar-z-index);
}

:where([dir="rtl"]) .m_45252eee {
    transform: var(--app-shell-navbar-transform-rtl);
}

.m_45252eee:where([data-with-border]) {
    -webkit-border-end: 1px solid var(--app-shell-border-color);
            border-inline-end: 1px solid var(--app-shell-border-color);
  }

.m_9cdde9a {
  inset-inline-end: 0;
  width: var(--app-shell-aside-width);
  transform: var(--app-shell-aside-transform);
  z-index: var(--app-shell-aside-z-index);
}

:where([dir="rtl"]) .m_9cdde9a {
    transform: var(--app-shell-aside-transform-rtl);
}

.m_9cdde9a:where([data-with-border]) {
    -webkit-border-start: 1px solid var(--app-shell-border-color);
            border-inline-start: 1px solid var(--app-shell-border-color);
  }

.m_8983817 {
  -webkit-padding-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
          padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
  -webkit-padding-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
          padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
  min-height: 100dvh;
  transition-property: padding;
}

.m_3b16f56b,
.m_3840c879 {
  position: fixed;
  inset-inline: 0;
  transition-property: transform, left, right;
  background-color: var(--mantine-color-body);
}

:where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
    inset-inline-end: var(--app-shell-aside-offset, 0rem);
  }

.m_3b16f56b {
  top: 0;
  height: var(--app-shell-header-height);
  background-color: var(--mantine-color-body);
  transform: var(--app-shell-header-transform);
  z-index: var(--app-shell-header-z-index);
}

.m_3b16f56b:where([data-with-border]) {
    border-bottom: 1px solid var(--app-shell-border-color);
  }

.m_3840c879 {
  bottom: 0;
  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: var(--app-shell-footer-transform);
  z-index: var(--app-shell-footer-z-index);
}

.m_3840c879:where([data-with-border]) {
    border-top: 1px solid var(--app-shell-border-color);
  }

.m_6dcfc7c7 {
  flex-grow: 0;
}

.m_6dcfc7c7:where([data-grow]) {
    flex-grow: 1;
  }

.m_71ac47fc {
  --ar-ratio: 1;
  max-width: 100%;
}

  .m_71ac47fc > :where(*:not(style)) {
    aspect-ratio: var(--ar-ratio);
    width: 100%;
  }

  .m_71ac47fc > :where(img, video) {
    object-fit: cover;
  }

.m_88b62a41 {
  --combobox-padding: calc(0.25rem * var(--mantine-scale));
  padding: var(--combobox-padding);
}

  .m_88b62a41:has([data-mantine-scrollbar]) .m_985517d8 {
      max-width: calc(100% + var(--combobox-padding));
    }

  .m_88b62a41[data-composed] {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }

  .m_88b62a41[data-hidden] {
    display: none;
  }

/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
.m_88b62a41,
.m_b2821a6e {
  --combobox-option-padding-xs: calc(0.25rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
  --combobox-option-padding-sm: calc(0.375rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
  --combobox-option-padding-md: calc(0.5rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
  --combobox-option-padding-lg: calc(0.625rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
  --combobox-option-padding-xl: calc(0.875rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
  --combobox-option-padding: var(--combobox-option-padding-sm);
}

.m_92253aa5 {
  padding: var(--combobox-option-padding);
  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
  border-radius: var(--mantine-radius-default);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  word-break: break-word;
}

.m_92253aa5:where([data-combobox-selected]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
  }

.m_92253aa5:where([data-combobox-disabled]) {
    cursor: not-allowed;
    opacity: 0.35;
  }

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-dark-7);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-dark-7);
  }
}

.m_985517d8 {
  margin-inline: calc(var(--combobox-padding) * -1);
  margin-top: calc(var(--combobox-padding) * -1);
  width: calc(100% + var(--combobox-padding) * 2);
  border-top-width: 0;
  border-inline-width: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  margin-bottom: var(--combobox-padding);
  position: relative;
}

:where([data-mantine-color-scheme='light']) .m_985517d8, :where([data-mantine-color-scheme='light']) .m_985517d8:focus {
      border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_985517d8, :where([data-mantine-color-scheme='dark']) .m_985517d8:focus {
      border-color: var(--mantine-color-dark-4);
}

:where([data-mantine-color-scheme='light']) .m_985517d8 {
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_985517d8 {
    background-color: var(--mantine-color-dark-7);
}

.m_2530cd1d {
  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
  text-align: center;
  padding: var(--combobox-option-padding);
  color: var(--mantine-color-dimmed);
}

.m_858f94bd,
.m_82b967cb {
  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
  border: 0 solid transparent;
  margin-inline: calc(var(--combobox-padding) * -1);
  padding: var(--combobox-option-padding);
}

:where([data-mantine-color-scheme='light']) .m_858f94bd, :where([data-mantine-color-scheme='light']) .m_82b967cb {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_858f94bd, :where([data-mantine-color-scheme='dark']) .m_82b967cb {
    border-color: var(--mantine-color-dark-4);
}

.m_82b967cb {
  border-top-width: calc(0.0625rem * var(--mantine-scale));
  margin-top: var(--combobox-padding);
  margin-bottom: calc(var(--combobox-padding) * -1);
}

.m_858f94bd {
  border-bottom-width: calc(0.0625rem * var(--mantine-scale));
  margin-bottom: var(--combobox-padding);
  margin-top: calc(var(--combobox-padding) * -1);
}

.m_254f3e4f:has(.m_2bb2e9e5:only-child) {
    display: none;
  }

.m_2bb2e9e5 {
  color: var(--mantine-color-dimmed);
  font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);
  padding: var(--combobox-option-padding);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
}

.m_2bb2e9e5::after {
    content: '';
    flex: 1 1;
    inset-inline: 0;
    height: calc(0.0625rem * var(--mantine-scale));
    -webkit-margin-start: var(--mantine-spacing-xs);
            margin-inline-start: var(--mantine-spacing-xs);
  }

:where([data-mantine-color-scheme='light']) .m_2bb2e9e5::after {
      background-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_2bb2e9e5::after {
      background-color: var(--mantine-color-dark-4);
}

.m_2bb2e9e5:only-child {
    display: none;
  }

/* ------- Combobox.Chevron ------- */
.m_2943220b {
  --combobox-chevron-size-xs: calc(0.875rem * var(--mantine-scale));
  --combobox-chevron-size-sm: calc(1.125rem * var(--mantine-scale));
  --combobox-chevron-size-md: calc(1.25rem * var(--mantine-scale));
  --combobox-chevron-size-lg: calc(1.5rem * var(--mantine-scale));
  --combobox-chevron-size-xl: calc(1.75rem * var(--mantine-scale));
  --combobox-chevron-size: var(--combobox-chevron-size-sm);
}
:where([data-mantine-color-scheme='light']) .m_2943220b {
    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));
}
:where([data-mantine-color-scheme='dark']) .m_2943220b {
    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));
}
.m_2943220b {

  width: var(--combobox-chevron-size);
  height: var(--combobox-chevron-size);
  color: var(--_combobox-chevron-color);
}
.m_2943220b:where([data-error]) {
    color: var(--combobox-chevron-color, var(--mantine-color-error));
  }

/* ------- OptionsDropdown ------- */
.m_390b5f4 {
  display: flex;
  align-items: center;
  gap: calc(0.5rem * var(--mantine-scale));
}
.m_390b5f4:where([data-reverse]) {
    justify-content: space-between;
  }

.m_8ee53fc2 {
  opacity: 0.4;
  width: 0.8em;
  min-width: 0.8em;
  height: 0.8em;
}

:where([data-combobox-selected]) .m_8ee53fc2 {
    opacity: 1;
  }

.m_5f75b09e {
  --label-lh-xs: calc(1rem * var(--mantine-scale));
  --label-lh-sm: calc(1.25rem * var(--mantine-scale));
  --label-lh-md: calc(1.5rem * var(--mantine-scale));
  --label-lh-lg: calc(1.875rem * var(--mantine-scale));
  --label-lh-xl: calc(2.25rem * var(--mantine-scale));
  --label-lh: var(--label-lh-sm);
}

  .m_5f75b09e[data-label-position='left'] {
    --label-order: 1;
    --label-offset-end: var(--mantine-spacing-sm);
    --label-offset-start: 0;
  }

  .m_5f75b09e[data-label-position='right'] {
    --label-order: 2;
    --label-offset-end: 0;
    --label-offset-start: var(--mantine-spacing-sm);
  }

.m_5f6e695e {
  display: flex;
}

.m_d3ea56bb {
  --label-cursor: var(--mantine-cursor-type);

  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  flex-direction: column;
  font-size: var(--label-fz, var(--mantine-font-size-sm));
  line-height: var(--label-lh);
  cursor: var(--label-cursor);
  order: var(--label-order);
}

fieldset:disabled .m_d3ea56bb,
  .m_d3ea56bb[data-disabled] {
    --label-cursor: not-allowed;
  }

.m_8ee546b8 {
  cursor: var(--label-cursor);
  color: inherit;
  -webkit-padding-start: var(--label-offset-start);
          padding-inline-start: var(--label-offset-start);
  -webkit-padding-end: var(--label-offset-end);
          padding-inline-end: var(--label-offset-end);
}

:where([data-mantine-color-scheme='light']) fieldset:disabled .m_8ee546b8, :where([data-mantine-color-scheme='light']) .m_8ee546b8:where([data-disabled]) {
      color: var(--mantine-color-gray-5);
}

:where([data-mantine-color-scheme='dark']) fieldset:disabled .m_8ee546b8, :where([data-mantine-color-scheme='dark']) .m_8ee546b8:where([data-disabled]) {
      color: var(--mantine-color-dark-3);
}

.m_328f68c0 {
  margin-top: calc(var(--mantine-spacing-xs) / 2);
  -webkit-padding-start: var(--label-offset-start);
          padding-inline-start: var(--label-offset-start);
  -webkit-padding-end: var(--label-offset-end);
          padding-inline-end: var(--label-offset-end);
}

.m_8e8a99cc {
  margin-top: calc(var(--mantine-spacing-xs) / 2);
  -webkit-padding-start: var(--label-offset-start);
          padding-inline-start: var(--label-offset-start);
  -webkit-padding-end: var(--label-offset-end);
          padding-inline-end: var(--label-offset-end);
}

.m_26775b0a {
  --card-radius: var(--mantine-radius-default);

  display: block;
  width: 100%;
  border-radius: var(--card-radius);
  cursor: pointer;
}

  .m_26775b0a :where(*) {
    cursor: inherit;
  }

  .m_26775b0a:where([data-with-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  }

  :where([data-mantine-color-scheme='light']) .m_26775b0a:where([data-with-border]) {
      border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_26775b0a:where([data-with-border]) {
      border-color: var(--mantine-color-dark-4);
}

.m_5e5256ee {
  --checkbox-size-xs: calc(1rem * var(--mantine-scale));
  --checkbox-size-sm: calc(1.25rem * var(--mantine-scale));
  --checkbox-size-md: calc(1.5rem * var(--mantine-scale));
  --checkbox-size-lg: calc(1.875rem * var(--mantine-scale));
  --checkbox-size-xl: calc(2.25rem * var(--mantine-scale));

  --checkbox-size: var(--checkbox-size-sm);
  --checkbox-color: var(--mantine-primary-color-filled);
  --checkbox-icon-color: var(--mantine-color-white);

  position: relative;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  width: var(--checkbox-size);
  min-width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-height: var(--checkbox-size);
  border-radius: var(--checkbox-radius, var(--mantine-radius-default));
  transition:
    border-color 100ms ease,
    background-color 100ms ease;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

  :where([data-mantine-color-scheme='light']) .m_5e5256ee {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

  :where([data-mantine-color-scheme='dark']) .m_5e5256ee {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

  .m_5e5256ee[data-indeterminate],
  .m_5e5256ee[data-checked] {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
  }

  .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a {
      opacity: 1;
      transform: none;
      color: var(--checkbox-icon-color);
    }

  .m_5e5256ee[data-disabled] {
    cursor: not-allowed;
  }

  :where([data-mantine-color-scheme='light']) .m_5e5256ee[data-disabled] {
      background-color: var(--mantine-color-gray-2);
      border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_5e5256ee[data-disabled] {
      background-color: var(--mantine-color-dark-6);
      border-color: var(--mantine-color-dark-6);
}

  [data-mantine-color-scheme='light'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
        color: var(--mantine-color-gray-5);
}

  [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
        color: var(--mantine-color-dark-3);
}

.m_76e20374[data-indeterminate]:not([data-disabled]),
  .m_76e20374[data-checked]:not([data-disabled]) {
    background-color: transparent;
    border-color: var(--checkbox-color);
  }

.m_76e20374[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_76e20374[data-checked]:not([data-disabled]) > .m_1b1c543a {
      color: var(--checkbox-color);
      opacity: 1;
      transform: none;
    }

.m_1b1c543a {
  display: block;
  width: 60%;
  color: transparent;
  pointer-events: none;
  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
  opacity: 1;
  transition:
    transform 100ms ease,
    opacity 100ms ease;
}

.m_bf2d988c {
  --checkbox-size-xs: calc(1rem * var(--mantine-scale));
  --checkbox-size-sm: calc(1.25rem * var(--mantine-scale));
  --checkbox-size-md: calc(1.5rem * var(--mantine-scale));
  --checkbox-size-lg: calc(1.875rem * var(--mantine-scale));
  --checkbox-size-xl: calc(2.25rem * var(--mantine-scale));

  --checkbox-size: var(--checkbox-size-sm);
  --checkbox-color: var(--mantine-primary-color-filled);
  --checkbox-icon-color: var(--mantine-color-white);
}

.m_26062bec {
  position: relative;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  order: 1;
}

.m_26062bec:where([data-label-position='left']) {
    order: 2;
  }

.m_26063560 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-radius, var(--mantine-radius-default));
  padding: 0;
  display: block;
  margin: 0;
  transition:
    border-color 100ms ease,
    background-color 100ms ease;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
}

:where([data-mantine-color-scheme='light']) .m_26063560 {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_26063560 {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

.m_26063560:where([data-error]) {
    border-color: var(--mantine-color-error);
  }

.m_26063560[data-indeterminate],
  .m_26063560:checked {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
  }

.m_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 {
      opacity: 1;
      transform: none;
    }

.m_26063560:disabled {
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_26063560:disabled {
      background-color: var(--mantine-color-gray-2);
      border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_26063560:disabled {
      background-color: var(--mantine-color-dark-6);
      border-color: var(--mantine-color-dark-6);
}

[data-mantine-color-scheme='light'] .m_26063560:disabled + .m_bf295423 {
        color: var(--mantine-color-gray-5);
}

[data-mantine-color-scheme='dark'] .m_26063560:disabled + .m_bf295423 {
        color: var(--mantine-color-dark-3);
}

.m_215c4542 + .m_bf295423 {
    color: var(--checkbox-color);
  }

.m_215c4542[data-indeterminate]:not(:disabled),
  .m_215c4542:checked:not(:disabled) {
    background-color: transparent;
    border-color: var(--checkbox-color);
  }

.m_215c4542[data-indeterminate]:not(:disabled) + .m_bf295423, .m_215c4542:checked:not(:disabled) + .m_bf295423 {
      color: var(--checkbox-color);
      opacity: 1;
      transform: none;
    }

.m_bf295423 {
  position: absolute;
  inset: 0;
  width: 60%;
  margin: auto;
  color: var(--checkbox-icon-color);
  pointer-events: none;
  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
  opacity: 0;
  transition:
    transform 100ms ease,
    opacity 100ms ease;
}

/* Avatar.Group root element */
.m_11def92b {
  --ag-spacing: var(--mantine-spacing-sm);
  --ag-offset: calc(var(--ag-spacing) * -1);

  display: flex;
  -webkit-padding-start: var(--ag-spacing);
          padding-inline-start: var(--ag-spacing);
}

/* Avatar root element */
.m_f85678b6 {
  --avatar-size-xs: calc(1rem * var(--mantine-scale));
  --avatar-size-sm: calc(1.625rem * var(--mantine-scale));
  --avatar-size-md: calc(2.375rem * var(--mantine-scale));
  --avatar-size-lg: calc(3.5rem * var(--mantine-scale));
  --avatar-size-xl: calc(5.25rem * var(--mantine-scale));

  --avatar-size: var(--avatar-size-md);
  --avatar-radius: calc(62.5rem * var(--mantine-scale));
  --avatar-bg: var(--mantine-color-gray-light);
  --avatar-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  --avatar-color: var(--mantine-color-gray-light-color);
  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);

  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  border-radius: var(--avatar-radius);
  text-decoration: none;
  padding: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
}
.m_f85678b6:where([data-within-group]) {
    -webkit-margin-start: var(--ag-offset);
            margin-inline-start: var(--ag-offset);
    border: 2px solid var(--mantine-color-body);
    background: var(--mantine-color-body);
  }

.m_11f8ac07 {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.m_104cd71f {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: var(--avatar-radius);
  font-size: var(--avatar-placeholder-fz);
  background: var(--avatar-bg);
  border: var(--avatar-bd);
  color: var(--avatar-color);
}

.m_104cd71f > [data-avatar-placeholder-icon] {
    width: 70%;
    height: 70%;
  }

.m_2ce0de02 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  border: 0;
  text-decoration: none;
  border-radius: var(--bi-radius, 0);
}

.m_347db0ec {
  --badge-height-xs: calc(1rem * var(--mantine-scale));
  --badge-height-sm: calc(1.125rem * var(--mantine-scale));
  --badge-height-md: calc(1.25rem * var(--mantine-scale));
  --badge-height-lg: calc(1.625rem * var(--mantine-scale));
  --badge-height-xl: calc(2rem * var(--mantine-scale));

  --badge-fz-xs: calc(0.5625rem * var(--mantine-scale));
  --badge-fz-sm: calc(0.625rem * var(--mantine-scale));
  --badge-fz-md: calc(0.6875rem * var(--mantine-scale));
  --badge-fz-lg: calc(0.8125rem * var(--mantine-scale));
  --badge-fz-xl: calc(1rem * var(--mantine-scale));

  --badge-padding-x-xs: calc(0.375rem * var(--mantine-scale));
  --badge-padding-x-sm: calc(0.5rem * var(--mantine-scale));
  --badge-padding-x-md: calc(0.625rem * var(--mantine-scale));
  --badge-padding-x-lg: calc(0.75rem * var(--mantine-scale));
  --badge-padding-x-xl: calc(1rem * var(--mantine-scale));

  --badge-height: var(--badge-height-md);
  --badge-fz: var(--badge-fz-md);
  --badge-padding-x: var(--badge-padding-x-md);
  --badge-radius: calc(62.5rem * var(--mantine-scale));
  --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
  --badge-color: var(--mantine-color-white);
  --badge-bg: var(--mantine-primary-color-filled);
  --badge-border-width: calc(0.0625rem * var(--mantine-scale));
  --badge-bd: var(--badge-border-width) solid transparent;

  -webkit-tap-highlight-color: transparent;
  font-size: var(--badge-fz);
  border-radius: var(--badge-radius);
  height: var(--badge-height);
  line-height: var(--badge-lh);
  text-decoration: none;
  padding: 0 var(--badge-padding-x);
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: calc(0.015625rem * var(--mantine-scale));
  cursor: default;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--badge-color);
  background: var(--badge-bg);
  border: var(--badge-bd);
}

  .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
    grid-template-columns: auto 1fr;
  }

  .m_347db0ec:where([data-with-right-section]) {
    grid-template-columns: 1fr auto;
  }

  .m_347db0ec:where(
      [data-with-left-section][data-with-right-section],
      [data-variant='dot'][data-with-right-section]
    ) {
    grid-template-columns: auto 1fr auto;
  }

  .m_347db0ec:where([data-block]) {
    display: flex;
    width: 100%;
  }

  .m_347db0ec:where([data-circle]) {
    padding-inline: calc(0.125rem * var(--mantine-scale));
    display: flex;
    width: var(--badge-height);
  }

.m_fbd81e3d {
  --badge-dot-size: calc(var(--badge-height) / 3.4);
}

:where([data-mantine-color-scheme='light']) .m_fbd81e3d {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_fbd81e3d {
    background-color: var(--mantine-color-dark-5);
    border-color: var(--mantine-color-dark-5);
    color: var(--mantine-color-white);
}

.m_fbd81e3d::before {
    content: '';
    display: block;
    width: var(--badge-dot-size);
    height: var(--badge-dot-size);
    border-radius: var(--badge-dot-size);
    background-color: var(--badge-dot-color);
    -webkit-margin-end: var(--badge-dot-size);
            margin-inline-end: var(--badge-dot-size);
  }

.m_5add502a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  cursor: inherit;
}

.m_91fdda9b {
  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
}

.m_91fdda9b:where([data-position='left']) {
    -webkit-margin-end: var(--badge-section-margin);
            margin-inline-end: var(--badge-section-margin);
  }

.m_91fdda9b:where([data-position='right']) {
    -webkit-margin-start: var(--badge-section-margin);
            margin-inline-start: var(--badge-section-margin);
  }

.m_ddec01c0 {
  --blockquote-border: 3px solid var(--bq-bd);

  position: relative;
  margin: 0;
  -webkit-border-start: var(--blockquote-border);
          border-inline-start: var(--blockquote-border);
  border-start-end-radius: var(--bq-radius);
  border-end-end-radius: var(--bq-radius);
  padding: var(--mantine-spacing-xl) calc(2.375rem * var(--mantine-scale));
}

  :where([data-mantine-color-scheme='light']) .m_ddec01c0 {
    background-color: var(--bq-bg-light);
}

  :where([data-mantine-color-scheme='dark']) .m_ddec01c0 {
    background-color: var(--bq-bg-dark);
}

.m_dde7bd57 {
  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);

  position: absolute;
  color: var(--bq-bd);
  background-color: var(--mantine-color-body);
  display: flex;
  align-items: center;
  justify-content: center;
  top: var(--blockquote-icon-offset);
  inset-inline-start: var(--blockquote-icon-offset);
  width: var(--bq-icon-size);
  height: var(--bq-icon-size);
  border-radius: var(--bq-icon-size);
}

.m_dde51a35 {
  display: block;
  margin-top: var(--mantine-spacing-md);
  opacity: 0.6;
  font-size: 85%;
}

.m_8b3717df {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.m_f678d540 {
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.m_3b8f2208 {
  margin-inline: var(--bc-separator-margin, var(--mantine-spacing-xs));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where([data-mantine-color-scheme='light']) .m_3b8f2208 {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_3b8f2208 {
    color: var(--mantine-color-dark-2);
}

.m_fea6bf1a {
  --burger-size-xs: calc(0.75rem * var(--mantine-scale));
  --burger-size-sm: calc(1.125rem * var(--mantine-scale));
  --burger-size-md: calc(1.5rem * var(--mantine-scale));
  --burger-size-lg: calc(2.125rem * var(--mantine-scale));
  --burger-size-xl: calc(2.625rem * var(--mantine-scale));

  --burger-size: var(--burger-size-md);
  --burger-line-size: calc(var(--burger-size) / 12);

  width: calc(var(--burger-size) + var(--mantine-spacing-xs));
  height: calc(var(--burger-size) + var(--mantine-spacing-xs));
  padding: calc(var(--mantine-spacing-xs) / 2);
  cursor: pointer;
}

  :where([data-mantine-color-scheme='light']) .m_fea6bf1a {
    --burger-color: var(--mantine-color-black);
}

  :where([data-mantine-color-scheme='dark']) .m_fea6bf1a {
    --burger-color: var(--mantine-color-white);
}

.m_d4fb9cad {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.m_d4fb9cad,
  .m_d4fb9cad::before,
  .m_d4fb9cad::after {
    display: block;
    width: var(--burger-size);
    height: var(--burger-line-size);
    background-color: var(--burger-color);
    outline: calc(0.0625rem * var(--mantine-scale)) solid transparent;
    transition-property: background-color, transform;
    transition-duration: var(--burger-transition-duration, 300ms);
    transition-timing-function: var(--burger-transition-timing-function, ease);
  }

.m_d4fb9cad::before,
  .m_d4fb9cad::after {
    position: absolute;
    content: '';
    inset-inline-start: 0;
  }

.m_d4fb9cad::before {
    top: calc(var(--burger-size) / -3);
  }

.m_d4fb9cad::after {
    top: calc(var(--burger-size) / 3);
  }

.m_d4fb9cad[data-opened] {
    background-color: transparent;
  }

.m_d4fb9cad[data-opened]::before {
      transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg);
    }

.m_d4fb9cad[data-opened]::after {
      transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
    }

.m_77c9d27d {
  --button-height-xs: calc(1.875rem * var(--mantine-scale));
  --button-height-sm: calc(2.25rem * var(--mantine-scale));
  --button-height-md: calc(2.625rem * var(--mantine-scale));
  --button-height-lg: calc(3.125rem * var(--mantine-scale));
  --button-height-xl: calc(3.75rem * var(--mantine-scale));

  --button-height-compact-xs: calc(1.375rem * var(--mantine-scale));
  --button-height-compact-sm: calc(1.625rem * var(--mantine-scale));
  --button-height-compact-md: calc(1.875rem * var(--mantine-scale));
  --button-height-compact-lg: calc(2.125rem * var(--mantine-scale));
  --button-height-compact-xl: calc(2.5rem * var(--mantine-scale));

  --button-padding-x-xs: calc(0.875rem * var(--mantine-scale));
  --button-padding-x-sm: calc(1.125rem * var(--mantine-scale));
  --button-padding-x-md: calc(1.375rem * var(--mantine-scale));
  --button-padding-x-lg: calc(1.625rem * var(--mantine-scale));
  --button-padding-x-xl: calc(2rem * var(--mantine-scale));

  --button-padding-x-compact-xs: calc(0.4375rem * var(--mantine-scale));
  --button-padding-x-compact-sm: calc(0.5rem * var(--mantine-scale));
  --button-padding-x-compact-md: calc(0.625rem * var(--mantine-scale));
  --button-padding-x-compact-lg: calc(0.75rem * var(--mantine-scale));
  --button-padding-x-compact-xl: calc(0.875rem * var(--mantine-scale));

  --button-height: var(--button-height-sm);
  --button-padding-x: var(--button-padding-x-sm);
  --button-color: var(--mantine-color-white);

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
  font-weight: 600;
  position: relative;
  line-height: 1;
  text-align: center;
  overflow: hidden;

  width: auto;
  cursor: pointer;
  display: inline-block;
  border-radius: var(--button-radius, var(--mantine-radius-default));
  font-size: var(--button-fz, var(--mantine-font-size-sm));
  background: var(--button-bg, var(--mantine-primary-color-filled));
  border: var(--button-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  color: var(--button-color, var(--mantine-color-white));
  height: var(--button-height, var(--button-height-sm));
  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
  vertical-align: middle;
}

  .m_77c9d27d:where([data-block]) {
    display: block;
    width: 100%;
  }

  .m_77c9d27d:where([data-with-left-section]) {
    -webkit-padding-start: calc(var(--button-padding-x) / 1.5);
            padding-inline-start: calc(var(--button-padding-x) / 1.5);
  }

  .m_77c9d27d:where([data-with-right-section]) {
    -webkit-padding-end: calc(var(--button-padding-x) / 1.5);
            padding-inline-end: calc(var(--button-padding-x) / 1.5);
  }

  .m_77c9d27d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
    cursor: not-allowed;
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
    transform: none;
  }

  :where([data-mantine-color-scheme='light']) .m_77c9d27d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
      color: var(--mantine-color-gray-5);
      background: var(--mantine-color-gray-1);
}

  :where([data-mantine-color-scheme='dark']) .m_77c9d27d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
      color: var(--mantine-color-dark-3);
      background: var(--mantine-color-dark-6);
}

  .m_77c9d27d::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(-0.0625rem * var(--mantine-scale));
    border-radius: var(--button-radius, var(--mantine-radius-default));
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(12px);
    transition:
      transform 150ms ease,
      opacity 100ms ease;
  }

  :where([data-mantine-color-scheme='light']) .m_77c9d27d::before {
      background-color: rgba(255, 255, 255, 0.15);
}

  :where([data-mantine-color-scheme='dark']) .m_77c9d27d::before {
      background-color: rgba(0, 0, 0, 0.15);
}

  .m_77c9d27d:where([data-loading]) {
    cursor: not-allowed;
    transform: none;
  }

  .m_77c9d27d:where([data-loading])::before {
      transform: translateY(0);
      opacity: 1;
    }

  .m_77c9d27d:where([data-loading]) .m_80f1301b {
      opacity: 0;
      transform: translateY(100%);
    }

  @media (hover: hover) {
    .m_77c9d27d:hover:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));
      color: var(--button-hover-color, var(--button-color));
    }
}

  @media (hover: none) {
    .m_77c9d27d:active:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));
      color: var(--button-hover-color, var(--button-color));
    }
}

.m_80f1301b {
  display: flex;
  align-items: center;
  justify-content: var(--button-justify, center);
  height: 100%;
  overflow: visible;
  transition:
    transform 150ms ease,
    opacity 100ms ease;
}

.m_811560b9 {
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  opacity: 1;
}

.m_811560b9:where([data-loading]) {
    opacity: 0.2;
  }

.m_a74036a {
  display: flex;
  align-items: center;
}

.m_a74036a:where([data-position='left']) {
    -webkit-margin-end: var(--mantine-spacing-xs);
            margin-inline-end: var(--mantine-spacing-xs);
  }

.m_a74036a:where([data-position='right']) {
    -webkit-margin-start: var(--mantine-spacing-xs);
            margin-inline-start: var(--mantine-spacing-xs);
  }

.m_a25b86ee {
  position: absolute;
  left: 50%;
  top: 50%;
}

.m_80d6d844 {
  --button-border-width: calc(0.0625rem * var(--mantine-scale));
  display: flex;
}

.m_80d6d844 :where(.m_77c9d27d):focus {
      position: relative;
      z-index: 1;
    }

.m_80d6d844[data-orientation='horizontal'] {
    flex-direction: row;
  }

.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):first-child {
        border-end-end-radius: 0;
        border-start-end-radius: 0;
        border-inline-end-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):last-child {
        border-end-start-radius: 0;
        border-start-start-radius: 0;
        border-inline-start-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-inline-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='vertical'] {
    flex-direction: column;
  }

.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):first-child {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-bottom-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):last-child {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-top-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-bottom-width: calc(var(--button-border-width) / 2);
        border-top-width: calc(var(--button-border-width) / 2);
      }

.m_70be2a01 {
  --section-height-xs: calc(1.875rem * var(--mantine-scale));
  --section-height-sm: calc(2.25rem * var(--mantine-scale));
  --section-height-md: calc(2.625rem * var(--mantine-scale));
  --section-height-lg: calc(3.125rem * var(--mantine-scale));
  --section-height-xl: calc(3.75rem * var(--mantine-scale));

  --section-height-compact-xs: calc(1.375rem * var(--mantine-scale));
  --section-height-compact-sm: calc(1.625rem * var(--mantine-scale));
  --section-height-compact-md: calc(1.875rem * var(--mantine-scale));
  --section-height-compact-lg: calc(2.125rem * var(--mantine-scale));
  --section-height-compact-xl: calc(2.5rem * var(--mantine-scale));

  --section-padding-x-xs: calc(0.875rem * var(--mantine-scale));
  --section-padding-x-sm: calc(1.125rem * var(--mantine-scale));
  --section-padding-x-md: calc(1.375rem * var(--mantine-scale));
  --section-padding-x-lg: calc(1.625rem * var(--mantine-scale));
  --section-padding-x-xl: calc(2rem * var(--mantine-scale));

  --section-padding-x-compact-xs: calc(0.4375rem * var(--mantine-scale));
  --section-padding-x-compact-sm: calc(0.5rem * var(--mantine-scale));
  --section-padding-x-compact-md: calc(0.625rem * var(--mantine-scale));
  --section-padding-x-compact-lg: calc(0.75rem * var(--mantine-scale));
  --section-padding-x-compact-xl: calc(0.875rem * var(--mantine-scale));

  --section-height: var(--section-height-sm);
  --section-padding-x: var(--section-padding-x-sm);
  --section-color: var(--mantine-color-white);

  font-weight: 600;
  width: auto;
  border-radius: var(--section-radius, var(--mantine-radius-default));
  font-size: var(--section-fz, var(--mantine-font-size-sm));
  background: var(--section-bg, var(--mantine-primary-color-filled));
  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  color: var(--section-color, var(--mantine-color-white));
  height: var(--section-height, var(--section-height-sm));
  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m_e615b15f {
  --card-padding: var(--mantine-spacing-md);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  color: var(--mantine-color-text);
}

  :where([data-mantine-color-scheme='light']) .m_e615b15f {
    background-color: var(--mantine-color-white);
}

  :where([data-mantine-color-scheme='dark']) .m_e615b15f {
    background-color: var(--mantine-color-dark-6);
}

.m_599a2148 {
  display: block;
  margin-inline: calc(var(--card-padding) * -1);
}

.m_599a2148:where(:first-child) {
    margin-top: calc(var(--card-padding) * -1);
    border-top: none !important;
  }

.m_599a2148:where(:last-child) {
    margin-bottom: calc(var(--card-padding) * -1);
    border-bottom: none !important;
  }

.m_599a2148:where([data-inherit-padding]) {
    padding-inline: var(--card-padding);
  }

.m_599a2148:where([data-with-border]) {
    border-top: calc(0.0625rem * var(--mantine-scale)) solid;
    border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
  }

:where([data-mantine-color-scheme='light']) .m_599a2148 {
    border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_599a2148 {
    border-color: var(--mantine-color-dark-4);
}

.m_599a2148 + .m_599a2148 {
    border-top: none !important;
  }

.m_4451eb3a {
  display: flex;
  align-items: center;
  justify-content: center;
}

  .m_4451eb3a:where([data-inline]) {
    display: inline-flex;
  }

.m_f59ffda3 {
  --chip-size-xs: calc(1.4375rem * var(--mantine-scale));
  --chip-size-sm: calc(1.75rem * var(--mantine-scale));
  --chip-size-md: calc(2rem * var(--mantine-scale));
  --chip-size-lg: calc(2.25rem * var(--mantine-scale));
  --chip-size-xl: calc(2.5rem * var(--mantine-scale));

  --chip-icon-size-xs: calc(0.625rem * var(--mantine-scale));
  --chip-icon-size-sm: calc(0.75rem * var(--mantine-scale));
  --chip-icon-size-md: calc(0.875rem * var(--mantine-scale));
  --chip-icon-size-lg: calc(1rem * var(--mantine-scale));
  --chip-icon-size-xl: calc(1.125rem * var(--mantine-scale));

  --chip-padding-xs: calc(1rem * var(--mantine-scale));
  --chip-padding-sm: calc(1.25rem * var(--mantine-scale));
  --chip-padding-md: calc(1.5rem * var(--mantine-scale));
  --chip-padding-lg: calc(1.75rem * var(--mantine-scale));
  --chip-padding-xl: calc(2rem * var(--mantine-scale));

  --chip-checked-padding-xs: calc(0.46875rem * var(--mantine-scale));
  --chip-checked-padding-sm: calc(0.625rem * var(--mantine-scale));
  --chip-checked-padding-md: calc(0.73125rem * var(--mantine-scale));
  --chip-checked-padding-lg: calc(0.84375rem * var(--mantine-scale));
  --chip-checked-padding-xl: calc(0.98125rem * var(--mantine-scale));

  --chip-spacing-xs: calc(0.625rem * var(--mantine-scale));
  --chip-spacing-sm: calc(0.75rem * var(--mantine-scale));
  --chip-spacing-md: calc(1rem * var(--mantine-scale));
  --chip-spacing-lg: calc(1.25rem * var(--mantine-scale));
  --chip-spacing-xl: calc(1.375rem * var(--mantine-scale));

  --chip-size: var(--chip-size-sm);
  --chip-icon-size: var(--chip-icon-size-sm);
  --chip-padding: var(--chip-padding-sm);
  --chip-spacing: var(--chip-spacing-sm);
  --chip-checked-padding: var(--chip-checked-padding-sm);
  --chip-bg: var(--mantine-primary-color-filled);
  --chip-hover: var(--mantine-primary-color-filled-hover);
  --chip-color: var(--mantine-color-white);
  --chip-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
}

.m_be049a53 {
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: var(--chip-radius, 1000rem);
  height: var(--chip-size);
  font-size: var(--chip-fz, var(--mantine-font-size-sm));
  line-height: calc(var(--chip-size) - calc(0.125rem * var(--mantine-scale)));
  padding-inline: var(--chip-padding);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  color: var(--mantine-color-text);
}

.m_be049a53:where([data-checked]) {
    padding: var(--chip-checked-padding);
  }

.m_be049a53:where([data-disabled]) {
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_be049a53:where([data-disabled]) {
      background-color: var(--mantine-color-gray-2);
      color: var(--mantine-color-gray-5);
}

:where([data-mantine-color-scheme='dark']) .m_be049a53:where([data-disabled]) {
      background-color: var(--mantine-color-dark-6);
      color: var(--mantine-color-dark-3);
}

:where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) {
    background-color: var(--mantine-color-white);
    border: 1px solid var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]) {
    background-color: var(--mantine-color-dark-6);
    border: 1px solid var(--mantine-color-dark-4);
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):hover {
      background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):active {
      background-color: var(--mantine-color-dark-5);
  }
}

.m_3904c1af:not([data-disabled]):where([data-checked]) {
    --chip-icon-color: var(--chip-color);
    border: var(--chip-bd);
  }

@media (hover: hover) {

  .m_3904c1af:not([data-disabled]):where([data-checked]):hover {
      background-color: var(--chip-hover);
  }
}

@media (hover: none) {

  .m_3904c1af:not([data-disabled]):where([data-checked]):active {
      background-color: var(--chip-hover);
  }
}

.m_fa109255:not([data-disabled]),
.m_f7e165c3:not([data-disabled]) {
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  color: var(--mantine-color-text);
}

:where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]) {
    background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]) {
    background-color: var(--mantine-color-dark-5);
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):hover {
      background-color: var(--mantine-color-gray-2);
  }

    :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):hover {
      background-color: var(--mantine-color-dark-4);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):active {
      background-color: var(--mantine-color-gray-2);
  }

    :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):active {
      background-color: var(--mantine-color-dark-4);
  }
}

.m_fa109255:not([data-disabled]):where([data-checked]), .m_f7e165c3:not([data-disabled]):where([data-checked]) {
    --chip-icon-color: var(--chip-color);
    color: var(--chip-color);
    background-color: var(--chip-bg);
  }

@media (hover: hover) {

  .m_fa109255:not([data-disabled]):where([data-checked]):hover, .m_f7e165c3:not([data-disabled]):where([data-checked]):hover {
      background-color: var(--chip-hover);
  }
}

@media (hover: none) {

  .m_fa109255:not([data-disabled]):where([data-checked]):active, .m_f7e165c3:not([data-disabled]):where([data-checked]):active {
      background-color: var(--chip-hover);
  }
}

.m_9ac86df9 {
  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
  height: var(--chip-icon-size);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.m_d6d72580 {
  width: var(--chip-icon-size);
  height: var(--chip-icon-size);
  display: block;
  color: var(--chip-icon-color, inherit);
}

.m_bde07329 {
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
  margin: 0;
}

.m_bde07329:focus-visible + .m_be049a53 {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.m_b183c0a2 {
  font-family: var(--mantine-font-family-monospace);
  line-height: var(--mantine-line-height);
  padding: 2px calc(var(--mantine-spacing-xs) / 2);
  border-radius: var(--mantine-radius-sm);
  font-size: var(--mantine-font-size-xs);
  margin: 0;
  overflow: auto;
}

  :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
    background-color: var(--code-bg, var(--mantine-color-gray-1));
    color: var(--mantine-color-black);
}

  :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
    background-color: var(--code-bg, var(--mantine-color-dark-5));
    color: var(--mantine-color-white);
}

  .m_b183c0a2[data-block] {
    padding: var(--mantine-spacing-xs);
  }

.m_de3d2490 {
  --cs-size: calc(1.75rem * var(--mantine-scale));
  --cs-radius: calc(62.5rem * var(--mantine-scale));

  -webkit-tap-highlight-color: transparent;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  line-height: 1;
  position: relative;
  width: var(--cs-size);
  height: var(--cs-size);
  min-width: var(--cs-size);
  min-height: var(--cs-size);
  border-radius: var(--cs-radius);
  color: inherit;
  text-decoration: none;
}

  [data-mantine-color-scheme='light'] .m_de3d2490 {
    --alpha-overlay-color: var(--mantine-color-gray-3);
    --alpha-overlay-bg: var(--mantine-color-white);
}

  [data-mantine-color-scheme='dark'] .m_de3d2490 {
    --alpha-overlay-color: var(--mantine-color-dark-4);
    --alpha-overlay-bg: var(--mantine-color-dark-7);
}

.m_862f3d1b {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
}

.m_98ae7f22 {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
  z-index: 1;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset,
    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--mantine-scale)) inset;
}

.m_95709ac0 {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
  background-size: calc(0.5rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
  background-position:
    0 0,
    0 calc(0.25rem * var(--mantine-scale)),
    calc(0.25rem * var(--mantine-scale)) calc(-0.25rem * var(--mantine-scale)),
    calc(-0.25rem * var(--mantine-scale)) 0;
  background-image: linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
}

.m_93e74e3 {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m_fee9c77 {
  --cp-width-xs: calc(11.25rem * var(--mantine-scale));
  --cp-width-sm: calc(12.5rem * var(--mantine-scale));
  --cp-width-md: calc(15rem * var(--mantine-scale));
  --cp-width-lg: calc(17.5rem * var(--mantine-scale));
  --cp-width-xl: calc(20rem * var(--mantine-scale));

  --cp-preview-size-xs: calc(1.625rem * var(--mantine-scale));
  --cp-preview-size-sm: calc(2.125rem * var(--mantine-scale));
  --cp-preview-size-md: calc(2.625rem * var(--mantine-scale));
  --cp-preview-size-lg: calc(3.125rem * var(--mantine-scale));
  --cp-preview-size-xl: calc(3.375rem * var(--mantine-scale));

  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
  --cp-thumb-size-md: calc(1rem * var(--mantine-scale));
  --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale));
  --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale));

  --cp-saturation-height-xs: calc(6.25rem * var(--mantine-scale));
  --cp-saturation-height-sm: calc(6.875rem * var(--mantine-scale));
  --cp-saturation-height-md: calc(7.5rem * var(--mantine-scale));
  --cp-saturation-height-lg: calc(8.75rem * var(--mantine-scale));
  --cp-saturation-height-xl: calc(10rem * var(--mantine-scale));

  --cp-preview-size: var(--cp-preview-size-sm);
  --cp-thumb-size: var(--cp-thumb-size-sm);
  --cp-saturation-height: var(--cp-saturation-height-sm);
  --cp-width: var(--cp-width-sm);
  --cp-body-spacing: var(--mantine-spacing-sm);

  width: var(--cp-width);
  padding: calc(0.0625rem * var(--mantine-scale));
}

  .m_fee9c77:where([data-full-width]) {
    width: 100%;
  }

.m_9dddfbac {
  width: var(--cp-preview-size);
  height: var(--cp-preview-size);
}

.m_bffecc3e {
  display: flex;
  padding-top: calc(var(--cp-body-spacing) / 2);
}

.m_3283bb96 {
  flex: 1 1;
}

.m_3283bb96:not(:only-child) {
    -webkit-margin-end: var(--mantine-spacing-xs);
            margin-inline-end: var(--mantine-spacing-xs);
  }

.m_40d572ba {
  overflow: hidden;
  position: absolute;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
  border: 2px solid var(--mantine-color-white);
  width: var(--cp-thumb-size);
  height: var(--cp-thumb-size);
  border-radius: var(--cp-thumb-size);
  left: calc(var(--thumb-x-offset) - var(--cp-thumb-size) / 2);
  top: calc(var(--thumb-y-offset) - var(--cp-thumb-size) / 2);
}

.m_d8ee6fd8 {
  height: unset !important;
  width: unset !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: calc(0.125rem * var(--mantine-scale));
  cursor: pointer;
  padding-bottom: calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale)));
  flex: 0 0 calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale)));
}

.m_5711e686 {
  margin-top: calc(0.3125rem * var(--mantine-scale));
  margin-inline: calc(-0.125rem * var(--mantine-scale));
  display: flex;
  flex-wrap: wrap;
}

.m_202a296e {
  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
  --cp-thumb-size-md: calc(1rem * var(--mantine-scale));
  --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale));
  --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale));

  -webkit-tap-highlight-color: transparent;
  position: relative;
  height: var(--cp-saturation-height);
  border-radius: var(--mantine-radius-sm);
  margin: calc(var(--cp-thumb-size) / 2);
}

.m_202a296e:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

.m_202a296e:where([data-focus-ring='always']):focus .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

.m_11b3db02 {
  position: absolute;
  border-radius: var(--mantine-radius-sm);
  inset: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale)));
}

.m_d856d47d {
  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
  --cp-thumb-size-md: calc(1rem * var(--mantine-scale));
  --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale));
  --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale));
  --cp-thumb-size: var(--cp-thumb-size, calc(0.75rem * var(--mantine-scale)));

  position: relative;
  height: calc(var(--cp-thumb-size) + calc(0.125rem * var(--mantine-scale)));
  margin-inline: calc(var(--cp-thumb-size) / 2);
  outline: none;
}

.m_d856d47d + .m_d856d47d {
    margin-top: calc(0.375rem * var(--mantine-scale));
  }

.m_d856d47d:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

.m_d856d47d:where([data-focus-ring='always']):focus .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

:where([data-mantine-color-scheme='light']) .m_d856d47d {
    --slider-checkers: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_d856d47d {
    --slider-checkers: var(--mantine-color-dark-4);
}

.m_8f327113 {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale)));
  border-radius: 10000rem;
}

.m_b077c2bc {
  --ci-eye-dropper-icon-size-xs: calc(0.875rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-sm: calc(1rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-md: calc(1.125rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-lg: calc(1.25rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-xl: calc(1.375rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size: var(--ci-eye-dropper-icon-size-sm);
}

.m_c5ccdcab {
  --ci-preview-size-xs: calc(1rem * var(--mantine-scale));
  --ci-preview-size-sm: calc(1.125rem * var(--mantine-scale));
  --ci-preview-size-md: calc(1.375rem * var(--mantine-scale));
  --ci-preview-size-lg: calc(1.75rem * var(--mantine-scale));
  --ci-preview-size-xl: calc(2.25rem * var(--mantine-scale));
  --ci-preview-size: var(--ci-preview-size-sm);
}

.m_5ece2cd7 {
  padding: calc(0.5rem * var(--mantine-scale));
}

.m_7485cace {
  --container-size-xs: calc(33.75rem * var(--mantine-scale));
  --container-size-sm: calc(45rem * var(--mantine-scale));
  --container-size-md: calc(60rem * var(--mantine-scale));
  --container-size-lg: calc(71.25rem * var(--mantine-scale));
  --container-size-xl: calc(82.5rem * var(--mantine-scale));
  --container-size: var(--container-size-md);

  max-width: var(--container-size);
  padding-inline: var(--mantine-spacing-md);
  margin-inline: auto;
}

  .m_7485cace:where([data-fluid]) {
    max-width: 100%;
  }

.m_e2125a27 {
  --dialog-size-xs: calc(10rem * var(--mantine-scale));
  --dialog-size-sm: calc(12.5rem * var(--mantine-scale));
  --dialog-size-md: calc(21.25rem * var(--mantine-scale));
  --dialog-size-lg: calc(25rem * var(--mantine-scale));
  --dialog-size-xl: calc(31.25rem * var(--mantine-scale));
  --dialog-size: var(--dialog-size-md);

  position: relative;
  width: var(--dialog-size);
  max-width: calc(100vw - var(--mantine-spacing-xl) * 2);
  min-height: calc(3.125rem * var(--mantine-scale));
}

.m_5abab665 {
  position: absolute;
  top: calc(var(--mantine-spacing-md) / 2);
  inset-inline-end: calc(var(--mantine-spacing-md) / 2);
}

.m_3eebeb36 {
  --divider-size-xs: calc(0.0625rem * var(--mantine-scale));
  --divider-size-sm: calc(0.125rem * var(--mantine-scale));
  --divider-size-md: calc(0.1875rem * var(--mantine-scale));
  --divider-size-lg: calc(0.25rem * var(--mantine-scale));
  --divider-size-xl: calc(0.3125rem * var(--mantine-scale));
  --divider-size: var(--divider-size-xs);
}

  :where([data-mantine-color-scheme='light']) .m_3eebeb36 {
    --divider-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_3eebeb36 {
    --divider-color: var(--mantine-color-dark-4);
}

  .m_3eebeb36:where([data-orientation='horizontal']) {
    border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
  }

  .m_3eebeb36:where([data-orientation='vertical']) {
    -webkit-border-start: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
            border-inline-start: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
    height: auto;
    align-self: stretch;
  }

  .m_3eebeb36:where([data-with-label]) {
    border: 0;
  }

.m_9e365f20 {
  display: flex;
  align-items: center;
  font-size: var(--mantine-font-size-xs);
  color: var(--mantine-color-dimmed);
  white-space: nowrap;
}

.m_9e365f20:where([data-position='left'])::before {
    display: none;
  }

.m_9e365f20:where([data-position='right'])::after {
    display: none;
  }

.m_9e365f20::before {
    content: '';
    flex: 1 1;
    height: calc(0.0625rem * var(--mantine-scale));
    border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
    -webkit-margin-end: var(--mantine-spacing-xs);
            margin-inline-end: var(--mantine-spacing-xs);
  }

.m_9e365f20::after {
    content: '';
    flex: 1 1;
    height: calc(0.0625rem * var(--mantine-scale));
    border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
    -webkit-margin-start: var(--mantine-spacing-xs);
            margin-inline-start: var(--mantine-spacing-xs);
  }

.m_f11b401e {
  --drawer-size-xs: calc(20rem * var(--mantine-scale));
  --drawer-size-sm: calc(23.75rem * var(--mantine-scale));
  --drawer-size-md: calc(27.5rem * var(--mantine-scale));
  --drawer-size-lg: calc(38.75rem * var(--mantine-scale));
  --drawer-size-xl: calc(48.75rem * var(--mantine-scale));
  --drawer-size: var(--drawer-size-md);
  --drawer-offset: 0rem;
}

.m_5a7c2c9 {
  z-index: 1000;
}

.m_b8a05bbd {
  flex: var(--drawer-flex, 0 0 var(--drawer-size));
  height: var(--drawer-height, calc(100% - var(--drawer-offset) * 2));
  margin: var(--drawer-offset);
  max-width: calc(100% - var(--drawer-offset) * 2);
  max-height: calc(100% - var(--drawer-offset) * 2);
  overflow-y: auto;
}

.m_b8a05bbd[data-hidden] {
    opacity: 0 !important;
    pointer-events: none;
  }

.m_31cd769a {
  display: flex;
  justify-content: var(--drawer-justify, flex-start);
  align-items: var(--drawer-align, flex-start);
}

.m_e9408a47 {
  padding: var(--mantine-spacing-lg);
  padding-top: var(--mantine-spacing-xs);
  border-radius: var(--fieldset-radius, var(--mantine-radius-default));
  min-inline-size: auto;
}

.m_84c9523a {
  border: calc(0.0625rem * var(--mantine-scale)) solid;
}

:where([data-mantine-color-scheme='light']) .m_84c9523a {
    border-color: var(--mantine-color-gray-3);
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_84c9523a {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-7);
}

.m_ef274e49 {
  border: calc(0.0625rem * var(--mantine-scale)) solid;
}

:where([data-mantine-color-scheme='light']) .m_ef274e49 {
    border-color: var(--mantine-color-gray-3);
    background-color: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_ef274e49 {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
}

.m_eda993d3 {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.m_90794832 {
  font-size: var(--mantine-font-size-sm);
}

.m_74ca27fe {
  padding: 0;
  margin-bottom: var(--mantine-spacing-sm);
}

.m_8478a6da {
  container: mantine-grid / inline-size;
}

.m_410352e9 {
  --grid-overflow: visible;
  --grid-margin: calc(var(--grid-gutter) / -2);
  --grid-col-padding: calc(var(--grid-gutter) / 2);

  overflow: var(--grid-overflow);
}

.m_dee7bd2f {
  width: calc(100% + var(--grid-gutter));
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--grid-justify);
  align-items: var(--grid-align);
  margin: var(--grid-margin);
}

.m_96bdd299 {
  --col-flex-grow: 0;
  --col-offset: 0rem;

  flex-shrink: 0;
  order: var(--col-order);
  flex-basis: var(--col-flex-basis);
  width: var(--col-width);
  max-width: var(--col-max-width);
  flex-grow: var(--col-flex-grow);
  -webkit-margin-start: var(--col-offset);
          margin-inline-start: var(--col-offset);
  padding: var(--grid-col-padding);
}

.m_bcb3f3c2 {
  color: var(--mantine-color-black);
}

  :where([data-mantine-color-scheme='light']) .m_bcb3f3c2 {
    background-color: var(--mark-bg-light);
}

  :where([data-mantine-color-scheme='dark']) .m_bcb3f3c2 {
    background-color: var(--mark-bg-dark);
}

.m_9e117634 {
  display: block;
  flex: 0 1;
  object-fit: var(--image-object-fit, cover);
  width: 100%;
  border-radius: var(--image-radius, 0);
}

@keyframes m_885901b1 {
  0% {
    opacity: 0.6;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

.m_e5262200 {
  --indicator-size: calc(0.625rem * var(--mantine-scale));
  --indicator-color: var(--mantine-primary-color-filled);

  position: relative;
  display: block;
}

.m_e5262200:where([data-inline]) {
    display: inline-block;
  }

.m_760d1fb1 {
  position: absolute;
  top: var(--indicator-top);
  left: var(--indicator-left);
  right: var(--indicator-right);
  bottom: var(--indicator-bottom);
  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
  min-width: var(--indicator-size);
  height: var(--indicator-size);
  border-radius: var(--indicator-radius, 1000rem);
  z-index: var(--indicator-z-index, 200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mantine-font-size-xs);
  background-color: var(--indicator-color);
  color: var(--indicator-text-color, var(--mantine-color-white));
  white-space: nowrap;
}

.m_760d1fb1::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--indicator-color);
    border-radius: var(--indicator-radius, 1000rem);
    z-index: -1;
  }

.m_760d1fb1:where([data-with-label]) {
    padding-inline: calc(var(--mantine-spacing-xs) / 2);
  }

.m_760d1fb1:where([data-with-border]) {
    border: 2px solid var(--mantine-color-body);
  }

.m_760d1fb1[data-processing]::before {
      animation: m_885901b1 1000ms linear infinite;
    }

.m_dc6f14e2 {
  --kbd-fz-xs: calc(0.625rem * var(--mantine-scale));
  --kbd-fz-sm: calc(0.75rem * var(--mantine-scale));
  --kbd-fz-md: calc(0.875rem * var(--mantine-scale));
  --kbd-fz-lg: calc(1rem * var(--mantine-scale));
  --kbd-fz-xl: calc(1.25rem * var(--mantine-scale));
  --kbd-fz: var(--kbd-fz-sm);

  --kbd-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
  --kbd-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
  --kbd-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale));
  --kbd-padding-lg: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
  --kbd-padding-xl: calc(0.5rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
  --kbd-padding: var(--kbd-padding-sm);

  font-family: var(--mantine-font-family-monospace);
  line-height: var(--mantine-line-height);
  font-weight: 700;
  padding: var(--kbd-padding);
  font-size: var(--kbd-fz);
  border-radius: var(--mantine-radius-sm);
  border: calc(0.0625rem * var(--mantine-scale)) solid;
  border-bottom-width: calc(0.1875rem * var(--mantine-scale));
  unicode-bidi: embed;
}

  :where([data-mantine-color-scheme='light']) .m_dc6f14e2 {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-7);
    background-color: var(--mantine-color-gray-0);
}

  :where([data-mantine-color-scheme='dark']) .m_dc6f14e2 {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);
    background-color: var(--mantine-color-dark-6);
}

.m_abbac491 {
  --list-fz: var(--mantine-font-size-md);
  --list-lh: var(--mantine-line-height-md);

  list-style-position: inside;
  font-size: var(--list-fz);
  line-height: var(--list-lh);
  margin: 0;
  padding: 0;
}

  .m_abbac491:where([data-with-padding]) {
    -webkit-padding-start: var(--mantine-spacing-md);
            padding-inline-start: var(--mantine-spacing-md);
  }

.m_abb6bec2 {
  white-space: nowrap;
  line-height: var(--list-lh);
}

.m_abb6bec2:where([data-with-icon]) {
    list-style: none;
  }

.m_abb6bec2:where([data-with-icon]) .m_75cd9f71 {
      --li-direction: row;
      --li-align: center;
    }

.m_abb6bec2:where(:not(:first-of-type)) {
    margin-top: var(--list-spacing, 0);
  }

.m_abb6bec2:where([data-centered]) {
    line-height: 1;
  }

.m_75cd9f71 {
  display: inline-flex;
  flex-direction: var(--li-direction, column);
  align-items: var(--li-align, flex-start);
  white-space: normal;
}

.m_60f83e5b {
  display: inline-block;
  vertical-align: middle;
  -webkit-margin-end: var(--mantine-spacing-sm);
          margin-inline-end: var(--mantine-spacing-sm);
}

.m_6e45937b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: var(--lo-z-index);
}

.m_e8eb006c {
  position: relative;
  z-index: calc(var(--lo-z-index) + 1);
}

.m_df587f17 {
  z-index: var(--lo-z-index);
}

.m_dc9b7c9f {
  padding: calc(0.25rem * var(--mantine-scale));
}

.m_9bfac126 {
  color: var(--mantine-color-dimmed);
  font-weight: 500;
  font-size: var(--mantine-font-size-xs);
  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
  cursor: default;
}

.m_efdf90cb {
  margin-top: calc(0.25rem * var(--mantine-scale));
  margin-bottom: calc(0.25rem * var(--mantine-scale));
  border-top: calc(0.0625rem * var(--mantine-scale)) solid;
}

:where([data-mantine-color-scheme='light']) .m_efdf90cb {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_efdf90cb {
    border-color: var(--mantine-color-dark-4);
}

.m_99ac2aa1 {
  font-size: var(--mantine-font-size-sm);
  width: 100%;
  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
  border-radius: var(--popover-radius, var(--mantine-radius-default));
  color: var(--menu-item-color, var(--mantine-color-text));
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.m_99ac2aa1:where([data-disabled], :disabled) {
    color: var(--mantine-color-dimmed);
    opacity: 0.6;
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
}

:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
}

.m_5476e0d3 {
  flex: 1 1;
}

.m_8b75e504 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m_8b75e504:where([data-position='left']) {
    -webkit-margin-end: var(--mantine-spacing-xs);
            margin-inline-end: var(--mantine-spacing-xs);
  }

.m_8b75e504:where([data-position='right']) {
    -webkit-margin-start: var(--mantine-spacing-xs);
            margin-inline-start: var(--mantine-spacing-xs);
  }

.m_9df02822 {
  --modal-size-xs: calc(20rem * var(--mantine-scale));
  --modal-size-sm: calc(23.75rem * var(--mantine-scale));
  --modal-size-md: calc(27.5rem * var(--mantine-scale));
  --modal-size-lg: calc(38.75rem * var(--mantine-scale));
  --modal-size-xl: calc(48.75rem * var(--mantine-scale));
  --modal-size: var(--modal-size-md);

  --modal-y-offset: 5dvh;
  --modal-x-offset: 5vw;
}

  .m_9df02822[data-full-screen] {
    --modal-border-radius: 0 !important;
  }

  .m_9df02822[data-full-screen] .m_54c44539 {
      --modal-content-flex: 0 0 100%;
      --modal-content-max-height: auto;
      --modal-content-height: 100dvh;
    }

  .m_9df02822[data-full-screen] .m_1f958f16 {
      --modal-inner-y-offset: 0;
      --modal-inner-x-offset: 0;
    }

  .m_9df02822[data-centered] .m_1f958f16 {
      --modal-inner-align: center;
    }

.m_d0e2b9cd {
  border-start-start-radius: var(--modal-radius, var(--mantine-radius-default));
  border-start-end-radius: var(--modal-radius, var(--mantine-radius-default));
}

.m_54c44539 {
  flex: var(--modal-content-flex, 0 0 var(--modal-size));
  max-width: 100%;
  max-height: var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2));
  height: var(--modal-content-height, auto);
  overflow-y: auto;
}

.m_54c44539[data-full-screen] {
    border-radius: 0;
  }

.m_54c44539[data-hidden] {
    opacity: 0 !important;
    pointer-events: none;
  }

.m_1f958f16 {
  display: flex;
  justify-content: center;
  align-items: var(--modal-inner-align, flex-start);
  padding-top: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-bottom: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-inline: var(--modal-inner-x-offset, var(--modal-x-offset));
}

.m_7cda1cd6 {
  --pill-fz-xs: calc(0.625rem * var(--mantine-scale));
  --pill-fz-sm: calc(0.75rem * var(--mantine-scale));
  --pill-fz-md: calc(0.875rem * var(--mantine-scale));
  --pill-fz-lg: calc(1rem * var(--mantine-scale));
  --pill-fz-xl: calc(1.125rem * var(--mantine-scale));

  --pill-height-xs: calc(1.125rem * var(--mantine-scale));
  --pill-height-sm: calc(1.375rem * var(--mantine-scale));
  --pill-height-md: calc(1.5625rem * var(--mantine-scale));
  --pill-height-lg: calc(1.75rem * var(--mantine-scale));
  --pill-height-xl: calc(2rem * var(--mantine-scale));

  --pill-fz: var(--pill-fz-sm);
  --pill-height: var(--pill-height-sm);

  font-size: var(--pill-fz);
  flex: 0 1;
  height: var(--pill-height);
  padding-inline: 0.8em;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill-radius, 1000rem);
  line-height: 1;
  white-space: nowrap;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
}

  :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 {
    background-color: var(--mantine-color-dark-7);
    color: var(--mantine-color-dark-0);
}

  :where([data-mantine-color-scheme='light']) .m_7cda1cd6 {
    color: var(--mantine-color-black);
}

  .m_7cda1cd6:where([data-with-remove]:not(:has(button:disabled))) {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }

  .m_7cda1cd6:where([data-disabled], :has(button:disabled)) {
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_44da308b {
    background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='light']) .m_44da308b:where([data-disabled], :has(button:disabled)) {
      background-color: var(--mantine-color-gray-3);
    }

:where([data-mantine-color-scheme='light']) .m_e3a01f8 {
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='light']) .m_e3a01f8:where([data-disabled], :has(button:disabled)) {
      background-color: var(--mantine-color-gray-3);
    }

.m_1e0e6180 {
  cursor: inherit;
  overflow: hidden;
  height: 100%;
  line-height: var(--pill-height);
  text-overflow: ellipsis;
}

.m_ae386778 {
  color: inherit;
  font-size: inherit;
  height: 100%;
  min-height: unset;
  min-width: 2em;
  width: unset;
  border-radius: 0;
  -webkit-padding-start: 0.1em;
          padding-inline-start: 0.1em;
  -webkit-padding-end: 0.3em;
          padding-inline-end: 0.3em;
  flex: 0 1;
  border-end-end-radius: var(--pill-radius, 50%);
  border-start-end-radius: var(--pill-radius, 50%);
}

.m_7cda1cd6[data-disabled] > .m_ae386778,
  .m_ae386778:disabled {
    display: none;
    background-color: transparent;
    width: 0.8em;
    min-width: 0.8em;
    padding: 0;
    cursor: not-allowed;
  }

.m_7cda1cd6[data-disabled] > .m_ae386778 > svg, .m_ae386778:disabled > svg {
      display: none;
    }

.m_ae386778 > svg {
    pointer-events: none;
  }

.m_1dcfd90b {
  --pg-gap-xs: calc(0.375rem * var(--mantine-scale));
  --pg-gap-sm: calc(0.5rem * var(--mantine-scale));
  --pg-gap-md: calc(0.625rem * var(--mantine-scale));
  --pg-gap-lg: calc(0.75rem * var(--mantine-scale));
  --pg-gap-xl: calc(0.75rem * var(--mantine-scale));
  --pg-gap: var(--pg-gap-sm);

  display: flex;
  align-items: center;
  gap: var(--pg-gap);
  flex-wrap: wrap;
}

.m_45c4369d {
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-width: calc(6.25rem * var(--mantine-scale));
  flex: 1 1;
  border: 0;
  font-size: inherit;
  height: 1.6em;
  color: inherit;
  padding: 0;
}

  .m_45c4369d::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

  .m_45c4369d:where([data-type='hidden'], [data-type='auto']) {
    height: calc(0.0625rem * var(--mantine-scale));
    width: calc(0.0625rem * var(--mantine-scale));
    top: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    opacity: 0;
  }

  .m_45c4369d:focus {
    outline: none;
  }

  .m_45c4369d:where([data-type='auto']:focus) {
    height: 1.6em;
    visibility: visible;
    opacity: 1;
    position: static;
  }

  .m_45c4369d:where([data-pointer]:not([data-disabled], :disabled)) {
    cursor: pointer;
  }

  .m_45c4369d:where([data-disabled], :disabled) {
    cursor: not-allowed;
  }

.m_f0824112 {
  --nl-bg: var(--mantine-primary-color-light);
  --nl-hover: var(--mantine-primary-color-light-hover);
  --nl-color: var(--mantine-primary-color-light-color);

  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px var(--mantine-spacing-sm);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

  @media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_f0824112:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_f0824112:hover {
      background-color: var(--mantine-color-dark-6);
  }
}

  @media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_f0824112:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_f0824112:active {
      background-color: var(--mantine-color-dark-6);
  }
}

  .m_f0824112:where([data-disabled]) {
    opacity: 0.4;
    pointer-events: none;
  }

  .m_f0824112:where([data-active], [aria-current='page']) {
    background-color: var(--nl-bg);
    color: var(--nl-color);
  }

  @media (hover: hover) {

  .m_f0824112:where([data-active], [aria-current='page']):hover {
      background-color: var(--nl-hover);
  }
}

  @media (hover: none) {

  .m_f0824112:where([data-active], [aria-current='page']):active {
      background-color: var(--nl-hover);
  }
}

  .m_f0824112:where([data-active], [aria-current='page']) .m_57492dcc {
      --description-opacity: 0.9;
      --description-color: var(--nl-color);
    }

.m_690090b5 {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease;
}

.m_690090b5 > svg {
    display: block;
  }

.m_690090b5:where([data-position='left']) {
    -webkit-margin-end: var(--mantine-spacing-sm);
            margin-inline-end: var(--mantine-spacing-sm);
  }

.m_690090b5:where([data-position='right']) {
    -webkit-margin-start: var(--mantine-spacing-sm);
            margin-inline-start: var(--mantine-spacing-sm);
  }

.m_690090b5:where([data-rotate]) {
    transform: rotate(90deg);
  }

.m_1f6ac4c4 {
  font-size: var(--mantine-font-size-sm);
}

.m_f07af9d2 {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m_f07af9d2:where([data-no-wrap]) {
    white-space: nowrap;
  }

.m_57492dcc {
  display: block;
  font-size: var(--mantine-font-size-xs);
  opacity: var(--description-opacity, 1);
  color: var(--description-color, var(--mantine-color-dimmed));
  overflow: hidden;
  text-overflow: ellipsis;
}

:where([data-no-wrap]) .m_57492dcc {
    white-space: nowrap;
  }

.m_e17b862f {
  -webkit-padding-start: var(--nl-offset, var(--mantine-spacing-lg));
          padding-inline-start: var(--nl-offset, var(--mantine-spacing-lg));
}

.m_1fd8a00b {
  transform: rotate(-90deg);
}

.m_a513464 {
  --notification-radius: var(--mantine-radius-default);
  --notification-color: var(--mantine-primary-color-filled);

  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  -webkit-padding-start: calc(1.375rem * var(--mantine-scale));
          padding-inline-start: calc(1.375rem * var(--mantine-scale));
  -webkit-padding-end: var(--mantine-spacing-xs);
          padding-inline-end: var(--mantine-spacing-xs);
  padding-top: var(--mantine-spacing-xs);
  padding-bottom: var(--mantine-spacing-xs);
  border-radius: var(--notification-radius);
  box-shadow: var(--mantine-shadow-lg);
}

  .m_a513464::before {
    content: '';
    display: block;
    position: absolute;
    width: calc(0.375rem * var(--mantine-scale));
    top: var(--notification-radius);
    bottom: var(--notification-radius);
    inset-inline-start: calc(0.25rem * var(--mantine-scale));
    border-radius: var(--notification-radius);
    background-color: var(--notification-color);
  }

  :where([data-mantine-color-scheme='light']) .m_a513464 {
    background-color: var(--mantine-color-white);
}

  :where([data-mantine-color-scheme='dark']) .m_a513464 {
    background-color: var(--mantine-color-dark-6);
}

  .m_a513464:where([data-with-icon]) {
    -webkit-padding-start: var(--mantine-spacing-xs);
            padding-inline-start: var(--mantine-spacing-xs);
  }

  .m_a513464:where([data-with-icon])::before {
      display: none;
    }

  :where([data-mantine-color-scheme='light']) .m_a513464:where([data-with-border]) {
      border: 1px solid var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_a513464:where([data-with-border]) {
      border: 1px solid var(--mantine-color-dark-4);
}

.m_a4ceffb {
  box-sizing: border-box;
  -webkit-margin-end: var(--mantine-spacing-md);
          margin-inline-end: var(--mantine-spacing-md);
  width: calc(1.75rem * var(--mantine-scale));
  height: calc(1.75rem * var(--mantine-scale));
  border-radius: calc(1.75rem * var(--mantine-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--notification-color);
  color: var(--mantine-color-white);
}

.m_b0920b15 {
  -webkit-margin-end: var(--mantine-spacing-md);
          margin-inline-end: var(--mantine-spacing-md);
}

.m_a49ed24 {
  flex: 1 1;
  overflow: hidden;
  -webkit-margin-end: var(--mantine-spacing-xs);
          margin-inline-end: var(--mantine-spacing-xs);
}

.m_3feedf16 {
  margin-bottom: calc(0.125rem * var(--mantine-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--mantine-font-size-sm);
  line-height: var(--mantine-line-height-sm);
  font-weight: 500;
}

:where([data-mantine-color-scheme='light']) .m_3feedf16 {
    color: var(--mantine-color-gray-9);
}

:where([data-mantine-color-scheme='dark']) .m_3feedf16 {
    color: var(--mantine-color-white);
}

.m_3d733a3a {
  font-size: var(--mantine-font-size-sm);
  line-height: var(--mantine-line-height-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}

:where([data-mantine-color-scheme='light']) .m_3d733a3a {
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_3d733a3a {
    color: var(--mantine-color-dark-0);
}

:where([data-mantine-color-scheme='light']) .m_3d733a3a:where([data-with-title]) {
      color: var(--mantine-color-gray-6);
}

:where([data-mantine-color-scheme='dark']) .m_3d733a3a:where([data-with-title]) {
      color: var(--mantine-color-dark-2);
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_919a4d88:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_919a4d88:hover {
      background-color: var(--mantine-color-dark-8);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_919a4d88:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_919a4d88:active {
      background-color: var(--mantine-color-dark-8);
  }
}

.m_e2f5cd4e {
  --ni-right-section-width-xs: calc(1.0625rem * var(--mantine-scale));
  --ni-right-section-width-sm: calc(1.5rem * var(--mantine-scale));
  --ni-right-section-width-md: calc(1.6875rem * var(--mantine-scale));
  --ni-right-section-width-lg: calc(1.9375rem * var(--mantine-scale));
  --ni-right-section-width-xl: calc(2.125rem * var(--mantine-scale));
}

.m_95e17d22 {
  --ni-chevron-size-xs: calc(0.625rem * var(--mantine-scale));
  --ni-chevron-size-sm: calc(0.875rem * var(--mantine-scale));
  --ni-chevron-size-md: calc(1rem * var(--mantine-scale));
  --ni-chevron-size-lg: calc(1.125rem * var(--mantine-scale));
  --ni-chevron-size-xl: calc(1.25rem * var(--mantine-scale));
  --ni-chevron-size: var(--ni-chevron-size-sm);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
  max-width: calc(var(--ni-chevron-size) * 1.7);
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}

.m_80b4b171 {
  --control-border: 1px solid var(--input-bd);
  --control-radius: calc(var(--input-radius) - calc(0.0625rem * var(--mantine-scale)));

  flex: 0 0 50%;
  width: 100%;
  padding: 0;
  height: calc(var(--input-height) / 2 - calc(0.0625rem * var(--mantine-scale)));
  -webkit-border-start: var(--control-border);
          border-inline-start: var(--control-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-text);
  background-color: transparent;
  cursor: pointer;
}

.m_80b4b171:where(:disabled) {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.6;
  }

:where([data-mantine-color-scheme='light']) .m_80b4b171:where(:disabled) {
      color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_80b4b171:where(:disabled) {
      color: var(--mantine-color-dark-3);
}

.m_e2f5cd4e[data-error] :where(.m_80b4b171) {
    color: var(--mantine-color-error);
  }

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_80b4b171:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_80b4b171:hover {
      background-color: var(--mantine-color-dark-4);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_80b4b171:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_80b4b171:active {
      background-color: var(--mantine-color-dark-4);
  }
}

.m_80b4b171:where(:first-of-type) {
    border-radius: 0;
    border-start-end-radius: var(--control-radius);
  }

.m_80b4b171:last-of-type {
    border-radius: 0;
    border-end-end-radius: var(--control-radius);
  }

.m_4addd315 {
  --pagination-control-size-xs: calc(1.375rem * var(--mantine-scale));
  --pagination-control-size-sm: calc(1.625rem * var(--mantine-scale));
  --pagination-control-size-md: calc(2rem * var(--mantine-scale));
  --pagination-control-size-lg: calc(2.375rem * var(--mantine-scale));
  --pagination-control-size-xl: calc(2.75rem * var(--mantine-scale));
  --pagination-control-size: var(--pagination-control-size-md);
  --pagination-control-fz: var(--mantine-font-size-md);
  --pagination-active-bg: var(--mantine-primary-color-filled);
}

.m_326d024a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(0.0625rem * var(--mantine-scale)) solid;
  cursor: pointer;
  color: var(--mantine-color-text);
  height: var(--pagination-control-size);
  min-width: var(--pagination-control-size);
  font-size: var(--pagination-control-fz);
  line-height: 1;
  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));
}

.m_326d024a:where([data-with-padding]) {
    padding: calc(var(--pagination-control-size) / 4);
  }

.m_326d024a:where(:disabled, [data-disabled]) {
    cursor: not-allowed;
    opacity: 0.4;
  }

:where([data-mantine-color-scheme='light']) .m_326d024a {
    border-color: var(--mantine-color-gray-4);
    background-color: var(--mantine-color-white);
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_326d024a:hover:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-gray-0);
      }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_326d024a:active:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-gray-0);
      }
}

:where([data-mantine-color-scheme='dark']) .m_326d024a {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='dark']) .m_326d024a:hover:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-dark-5);
      }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='dark']) .m_326d024a:active:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-dark-5);
      }
}

.m_326d024a:where([data-active]) {
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
    color: var(--pagination-active-color, var(--mantine-color-white));
  }

@media (hover: hover) {

  .m_326d024a:where([data-active]):hover {
      background-color: var(--pagination-active-bg);
  }
}

@media (hover: none) {

  .m_326d024a:where([data-active]):active {
      background-color: var(--pagination-active-bg);
  }
}

.m_4ad7767d {
  height: var(--pagination-control-size);
  min-width: var(--pagination-control-size);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.m_f61ca620 {
  --psi-button-size-xs: calc(1.375rem * var(--mantine-scale));
  --psi-button-size-sm: calc(1.625rem * var(--mantine-scale));
  --psi-button-size-md: calc(1.75rem * var(--mantine-scale));
  --psi-button-size-lg: calc(2rem * var(--mantine-scale));
  --psi-button-size-xl: calc(2.5rem * var(--mantine-scale));

  --psi-icon-size-xs: calc(0.75rem * var(--mantine-scale));
  --psi-icon-size-sm: calc(0.9375rem * var(--mantine-scale));
  --psi-icon-size-md: calc(1.0625rem * var(--mantine-scale));
  --psi-icon-size-lg: calc(1.1875rem * var(--mantine-scale));
  --psi-icon-size-xl: calc(1.3125rem * var(--mantine-scale));

  --psi-button-size: var(--psi-button-size-sm);
  --psi-icon-size: var(--psi-icon-size-sm);
}

.m_ccf8da4c {
  position: relative;
  overflow: hidden;
}

.m_f2d85dd2 {
  font-family: var(--mantine-font-family);
  background-color: transparent;
  border: 0;
  -webkit-padding-end: var(--input-padding-inline-end);
          padding-inline-end: var(--input-padding-inline-end);
  -webkit-padding-start: var(--input-padding-inline-start);
          padding-inline-start: var(--input-padding-inline-start);
  position: absolute;
  inset: 0;
  outline: 0;
  font-size: inherit;
  line-height: var(--mantine-line-height);
  height: 100%;
  width: 100%;
  color: inherit;
}

.m_ccf8da4c[data-disabled] .m_f2d85dd2,
  .m_f2d85dd2:disabled {
    cursor: not-allowed;
  }

.m_f2d85dd2::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

.m_f2d85dd2::-ms-reveal {
    display: none;
  }

.m_b1072d44 {
  width: var(--psi-button-size);
  height: var(--psi-button-size);
  min-width: var(--psi-button-size);
  min-height: var(--psi-button-size);
}

.m_b1072d44:disabled {
    display: none;
  }

.m_f1cb205a {
  --pin-input-size-xs: calc(1.875rem * var(--mantine-scale));
  --pin-input-size-sm: calc(2.25rem * var(--mantine-scale));
  --pin-input-size-md: calc(2.625rem * var(--mantine-scale));
  --pin-input-size-lg: calc(3.125rem * var(--mantine-scale));
  --pin-input-size-xl: calc(3.75rem * var(--mantine-scale));
  --pin-input-size: var(--pin-input-size-sm);
}

.m_cb288ead {
  width: var(--pin-input-size);
  height: var(--pin-input-size);
}

@keyframes m_81a374bd {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: calc(2.5rem * var(--mantine-scale)) 0;
  }
}

.m_db6d6462 {
  --progress-radius: var(--mantine-radius-default);
  --progress-size: var(--progress-size-md);

  --progress-size-xs: calc(0.1875rem * var(--mantine-scale));
  --progress-size-sm: calc(0.3125rem * var(--mantine-scale));
  --progress-size-md: calc(0.5rem * var(--mantine-scale));
  --progress-size-lg: calc(0.75rem * var(--mantine-scale));
  --progress-size-xl: calc(1rem * var(--mantine-scale));

  position: relative;
  height: var(--progress-size);
  border-radius: var(--progress-radius);
  overflow: hidden;
  display: flex;
}

:where([data-mantine-color-scheme='light']) .m_db6d6462 {
    background-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_db6d6462 {
    background-color: var(--mantine-color-dark-4);
}

.m_2242eb65 {
  background-color: var(--progress-section-color);
  height: 100%;
  width: var(--progress-section-width);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: calc(1.25rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
  transition: width var(--progress-transition-duration, 100ms) ease;
}

.m_2242eb65:where([data-striped]) {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
  }

.m_2242eb65:where([data-animated]) {
    animation: m_81a374bd 1s linear infinite;
  }

.m_2242eb65:where(:last-of-type) {
    border-radius: 0;
    border-start-end-radius: var(--progress-radius);
    border-end-end-radius: var(--progress-radius);
  }

.m_2242eb65:where(:first-of-type) {
    border-radius: 0;
    border-start-start-radius: var(--progress-radius);
    border-end-start-radius: var(--progress-radius);
  }

.m_91e40b74 {
  color: var(--progress-label-color, var(--mantine-color-white));
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: min(calc(var(--progress-size) * 0.65), calc(1.125rem * var(--mantine-scale)));
  line-height: 1;
  padding-inline: calc(0.25rem * var(--mantine-scale));
}

.m_9dc8ae12 {
  --card-radius: var(--mantine-radius-default);

  display: block;
  width: 100%;
  border-radius: var(--card-radius);
  cursor: pointer;
}

  .m_9dc8ae12 :where(*) {
    cursor: inherit;
  }

  .m_9dc8ae12:where([data-with-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  }

  :where([data-mantine-color-scheme='light']) .m_9dc8ae12:where([data-with-border]) {
      border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_9dc8ae12:where([data-with-border]) {
      border-color: var(--mantine-color-dark-4);
}

.m_717d7ff6 {
  --radio-size-xs: calc(1rem * var(--mantine-scale));
  --radio-size-sm: calc(1.25rem * var(--mantine-scale));
  --radio-size-md: calc(1.5rem * var(--mantine-scale));
  --radio-size-lg: calc(1.875rem * var(--mantine-scale));
  --radio-size-xl: calc(2.25rem * var(--mantine-scale));

  --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale));
  --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale));
  --radio-icon-size-md: calc(0.625rem * var(--mantine-scale));
  --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale));
  --radio-icon-size-xl: calc(1rem * var(--mantine-scale));

  --radio-icon-size: var(--radio-icon-size-sm);
  --radio-size: var(--radio-size-sm);
  --radio-color: var(--mantine-primary-color-filled);
  --radio-icon-color: var(--mantine-color-white);

  position: relative;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  width: var(--radio-size);
  min-width: var(--radio-size);
  height: var(--radio-size);
  min-height: var(--radio-size);
  border-radius: var(--radio-radius, 10000px);
  transition:
    border-color 100ms ease,
    background-color 100ms ease;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

  :where([data-mantine-color-scheme='light']) .m_717d7ff6 {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

  :where([data-mantine-color-scheme='dark']) .m_717d7ff6 {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

  .m_717d7ff6[data-indeterminate],
  .m_717d7ff6[data-checked] {
    background-color: var(--radio-color);
    border-color: var(--radio-color);
  }

  .m_717d7ff6[data-indeterminate] > .m_3e4da632, .m_717d7ff6[data-checked] > .m_3e4da632 {
      opacity: 1;
      transform: none;
      color: var(--radio-icon-color);
    }

  .m_717d7ff6[data-disabled] {
    cursor: not-allowed;
  }

  :where([data-mantine-color-scheme='light']) .m_717d7ff6[data-disabled] {
      background-color: var(--mantine-color-gray-2);
      border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_717d7ff6[data-disabled] {
      background-color: var(--mantine-color-dark-6);
      border-color: var(--mantine-color-dark-6);
}

  [data-mantine-color-scheme='light'] .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
        color: var(--mantine-color-gray-5);
}

  [data-mantine-color-scheme='dark'] .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
        color: var(--mantine-color-dark-3);
}

.m_2980836c[data-indeterminate]:not([data-disabled]),
  .m_2980836c[data-checked]:not([data-disabled]) {
    background-color: transparent;
    border-color: var(--radio-color);
  }

.m_2980836c[data-indeterminate]:not([data-disabled]) > .m_3e4da632, .m_2980836c[data-checked]:not([data-disabled]) > .m_3e4da632 {
      color: var(--radio-color);
      opacity: 1;
      transform: none;
    }

.m_3e4da632 {
  display: block;
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  color: transparent;
  pointer-events: none;
  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
  opacity: 1;
  transition:
    transform 100ms ease,
    opacity 100ms ease;
}

.m_f3f1af94 {
  --radio-size-xs: calc(1rem * var(--mantine-scale));
  --radio-size-sm: calc(1.25rem * var(--mantine-scale));
  --radio-size-md: calc(1.5rem * var(--mantine-scale));
  --radio-size-lg: calc(1.875rem * var(--mantine-scale));
  --radio-size-xl: calc(2.25rem * var(--mantine-scale));
  --radio-size: var(--radio-size-sm);

  --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale));
  --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale));
  --radio-icon-size-md: calc(0.625rem * var(--mantine-scale));
  --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale));
  --radio-icon-size-xl: calc(1rem * var(--mantine-scale));
  --radio-icon-size: var(--radio-icon-size-sm);
  --radio-icon-color: var(--mantine-color-white);
}

.m_89c4f5e4 {
  position: relative;
  width: var(--radio-size);
  height: var(--radio-size);
  order: 1;
}

.m_89c4f5e4:where([data-label-position='left']) {
    order: 2;
  }

.m_f3ed6b2b {
  color: var(--radio-icon-color);
  opacity: var(--radio-icon-opacity, 0);
  transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
  transition:
    opacity 100ms ease,
    transform 200ms ease;
  pointer-events: none;
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  position: absolute;
  top: calc(50% - var(--radio-icon-size) / 2);
  left: calc(50% - var(--radio-icon-size) / 2);
}

.m_8a3dbb89 {
  border: calc(0.0625rem * var(--mantine-scale)) solid;
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: var(--radio-radius, var(--radio-size));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background-color, border-color;
  transition-timing-function: ease;
  transition-duration: 100ms;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
}

:where([data-mantine-color-scheme='light']) .m_8a3dbb89 {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_8a3dbb89 {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

.m_8a3dbb89:checked {
    background-color: var(--radio-color, var(--mantine-primary-color-filled));
    border-color: var(--radio-color, var(--mantine-primary-color-filled));
  }

.m_8a3dbb89:checked + .m_f3ed6b2b {
      --radio-icon-opacity: 1;
      --radio-icon-transform: scale(1);
    }

.m_8a3dbb89:disabled {
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_8a3dbb89:disabled {
      background-color: var(--mantine-color-gray-1);
      border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='light']) .m_8a3dbb89:disabled + .m_f3ed6b2b {
        --radio-icon-color: var(--mantine-color-gray-3);
      }

:where([data-mantine-color-scheme='dark']) .m_8a3dbb89:disabled {
      background-color: var(--mantine-color-dark-5);
      border-color: var(--mantine-color-dark-4);
}

:where([data-mantine-color-scheme='dark']) .m_8a3dbb89:disabled + .m_f3ed6b2b {
        --radio-icon-color: var(--mantine-color-dark-7);
      }

.m_8a3dbb89:where([data-error]) {
    border-color: var(--mantine-color-error);
  }

.m_1bfe9d39 + .m_f3ed6b2b {
    --radio-icon-color: var(--radio-color);
  }

.m_1bfe9d39:checked:not(:disabled) {
    background-color: transparent;
    border-color: var(--radio-color);
  }

.m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b {
      --radio-icon-color: var(--radio-color);
      --radio-icon-opacity: 1;
      --radio-icon-transform: none;
    }

.m_f8d312f2 {
  --rating-size-xs: calc(0.875rem * var(--mantine-scale));
  --rating-size-sm: calc(1.125rem * var(--mantine-scale));
  --rating-size-md: calc(1.25rem * var(--mantine-scale));
  --rating-size-lg: calc(1.75rem * var(--mantine-scale));
  --rating-size-xl: calc(2rem * var(--mantine-scale));

  display: flex;
  width: max-content;
}

  .m_f8d312f2:where(:has(input:disabled)) {
    pointer-events: none;
  }

.m_61734bb7 {
  position: relative;
  transition: transform 100ms ease;
}

.m_61734bb7:where([data-active]) {
    z-index: 1;
    transform: scale(1.1);
  }

.m_5662a89a {
  width: var(--rating-size);
  height: var(--rating-size);
  display: block;
}

:where([data-mantine-color-scheme='light']) .m_5662a89a {
    fill: var(--mantine-color-gray-3);
    stroke: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_5662a89a {
    fill: var(--mantine-color-dark-3);
    stroke: var(--mantine-color-dark-3);
}

.m_5662a89a:where([data-filled]) {
    fill: var(--rating-color);
    stroke: var(--rating-color);
  }

.m_211007ba {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

.m_211007ba:focus-visible + label {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.m_21342ee4 {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--rating-item-z-index, 0);
  -webkit-tap-highlight-color: transparent;
}

.m_21342ee4:where([data-read-only]) {
    cursor: default;
  }

.m_21342ee4:where(:last-of-type) {
    position: relative;
  }

.m_fae05d6a {
  -webkit-clip-path: var(--rating-symbol-clip-path);
          clip-path: var(--rating-symbol-clip-path);
}

.m_1b3c8819 {
  --tooltip-radius: var(--mantine-radius-default);

  position: absolute;
  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-xs);
  pointer-events: none;
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  border-radius: var(--tooltip-radius);
}

  :where([data-mantine-color-scheme='light']) .m_1b3c8819 {
    background-color: var(--tooltip-bg, var(--mantine-color-gray-9));
    color: var(--tooltip-color, var(--mantine-color-white));
}

  :where([data-mantine-color-scheme='dark']) .m_1b3c8819 {
    background-color: var(--tooltip-bg, var(--mantine-color-gray-2));
    color: var(--tooltip-color, var(--mantine-color-black));
}

  .m_1b3c8819:where([data-multiline]) {
    white-space: normal;
  }

  .m_1b3c8819:where([data-fixed]) {
    position: fixed;
  }

.m_f898399f {
  background-color: inherit;
  border: 0;
  z-index: 1;
}

.m_b32e4812 {
  position: relative;
  width: var(--rp-size);
  height: var(--rp-size);
  min-width: var(--rp-size);
  min-height: var(--rp-size);
  --rp-transition-duration: 0ms;
}

.m_d43b5134 {
  width: var(--rp-size);
  height: var(--rp-size);
  min-width: var(--rp-size);
  min-height: var(--rp-size);
  transform: rotate(-90deg);
}

.m_b1ca1fbf {
  stroke: var(--curve-color, var(--rp-curve-root-color));
  transition:
    stroke-dashoffset var(--rp-transition-duration) ease,
    stroke-dasharray var(--rp-transition-duration) ease,
    stroke var(--rp-transition-duration);
}

[data-mantine-color-scheme='light'] .m_b1ca1fbf {
    --rp-curve-root-color: var(--mantine-color-gray-2);
}

[data-mantine-color-scheme='dark'] .m_b1ca1fbf {
    --rp-curve-root-color: var(--mantine-color-dark-4);
}

.m_b23f9dc4 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline: var(--rp-label-offset);
}

.m_cf365364 {
  --sc-padding-xs: calc(0.1875rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
  --sc-padding-sm: calc(0.3125rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
  --sc-padding-md: calc(0.4375rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
  --sc-padding-lg: calc(0.5625rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
  --sc-padding-xl: calc(0.75rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));

  --sc-transition-duration: 200ms;
  --sc-padding: var(--sc-padding-sm);
  --sc-transition-timing-function: ease;
  --sc-font-size: var(--mantine-font-size-sm);

  position: relative;
  display: inline-flex;
  flex-direction: row;
  width: auto;
  border-radius: var(--sc-radius, var(--mantine-radius-default));
  overflow: hidden;
  padding: calc(0.25rem * var(--mantine-scale));
}

  .m_cf365364:where([data-full-width]) {
    display: flex;
  }

  .m_cf365364:where([data-orientation='vertical']) {
    display: flex;
    flex-direction: column;
    width: max-content;
  }

  .m_cf365364:where([data-orientation='vertical']):where([data-full-width]) {
      width: auto;
    }

  :where([data-mantine-color-scheme='light']) .m_cf365364 {
    background-color: var(--mantine-color-gray-1);
}

  :where([data-mantine-color-scheme='dark']) .m_cf365364 {
    background-color: var(--mantine-color-dark-8);
}

.m_9e182ccd {
  position: absolute;
  display: block;
  z-index: 1;
  border-radius: var(--sc-radius, var(--mantine-radius-default));
}

:where([data-mantine-color-scheme='light']) .m_9e182ccd {
    box-shadow: var(--sc-shadow, none);
    background-color: var(--sc-color, var(--mantine-color-white));
}

:where([data-mantine-color-scheme='dark']) .m_9e182ccd {
    box-shadow: none;
    background-color: var(--sc-color, var(--mantine-color-dark-5));
}

.m_1738fcb2 {
  -webkit-tap-highlight-color: transparent;
  font-weight: 500;
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: var(--sc-radius, var(--mantine-radius-default));
  font-size: var(--sc-font-size);
  padding: var(--sc-padding);
  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
  cursor: pointer;

  /* outline is controlled by .input */
  outline: var(--segmented-control-outline, none);
}

:where([data-mantine-color-scheme='light']) .m_1738fcb2 {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_1738fcb2 {
    color: var(--mantine-color-dark-1);
}

.m_1738fcb2:where([data-read-only]) {
    cursor: default;
  }

fieldset:disabled .m_1738fcb2,
  .m_1738fcb2:where([data-disabled]) {
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2, :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-disabled]) {
      color: var(--mantine-color-gray-5);
}

:where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2, :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-disabled]) {
      color: var(--mantine-color-dark-3);
}

:where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active]) {
      color: var(--sc-label-color, var(--mantine-color-black));
}

:where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-active]) {
      color: var(--sc-label-color, var(--mantine-color-white));
}

.m_cf365364:where([data-initialized]) .m_1738fcb2:where([data-active])::before {
        display: none;
      }

.m_1738fcb2:where([data-active])::before {
      content: '';
      inset: 0;
      z-index: 0;
      position: absolute;
      border-radius: var(--sc-radius, var(--mantine-radius-default));
}

:where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {
        box-shadow: var(--sc-shadow, none);
        background-color: var(--sc-color, var(--mantine-color-white));
}

:where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-active])::before {
        box-shadow: none;
        background-color: var(--sc-color, var(--mantine-color-dark-5));
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
        color: var(--mantine-color-black);
  }

      :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
        color: var(--mantine-color-white);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):active {
        color: var(--mantine-color-black);
  }

      :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):active {
        color: var(--mantine-color-white);
  }
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2:hover {
        color: var(--mantine-color-gray-5) !important;
  }

      :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2:hover {
        color: var(--mantine-color-dark-3) !important;
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) fieldset:disabled .m_1738fcb2:active {
        color: var(--mantine-color-gray-5) !important;
  }

      :where([data-mantine-color-scheme='dark']) fieldset:disabled .m_1738fcb2:active {
        color: var(--mantine-color-dark-3) !important;
  }
}

.m_1714d588 {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
}

.m_1714d588[data-focus-ring='auto']:focus:focus-visible + .m_1738fcb2 {
        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);
      }

.m_1714d588[data-focus-ring='always']:focus + .m_1738fcb2 {
        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);
      }

.m_69686b9b {
  position: relative;
  flex: 1 1;
  z-index: 2;
  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);
}

.m_cf365364[data-with-items-borders] :where(.m_69686b9b)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    background-color: var(--separator-color);
    width: calc(0.0625rem * var(--mantine-scale));
    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);
  }

.m_69686b9b[data-orientation='vertical']::before {
      top: 0;
      inset-inline: 0;
      bottom: auto;
      height: calc(0.0625rem * var(--mantine-scale));
      width: auto;
    }

:where([data-mantine-color-scheme='light']) .m_69686b9b {
    --separator-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_69686b9b {
    --separator-color: var(--mantine-color-dark-4);
}

.m_69686b9b:first-of-type::before {
      --separator-color: transparent;
    }

[data-mantine-color-scheme] .m_69686b9b[data-active]::before, [data-mantine-color-scheme] .m_69686b9b[data-active] + .m_69686b9b::before {
          --separator-color: transparent;
        }

.m_78882f40 {
  position: relative;
  z-index: 2;
}

.m_fa528724 {
  --scp-filled-segment-color: var(--mantine-primary-color-filled);
  --scp-transition-duration: 0ms;
  --scp-thickness: calc(0.625rem * var(--mantine-scale));
}

  :where([data-mantine-color-scheme='light']) .m_fa528724 {
    --scp-empty-segment-color: var(--mantine-color-gray-2);
}

  :where([data-mantine-color-scheme='dark']) .m_fa528724 {
    --scp-empty-segment-color: var(--mantine-color-dark-4);
}

  .m_fa528724 {

  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

.m_62e9e7e2 {
  display: block;
  transform: var(--scp-rotation);
  overflow: hidden;
}

.m_c573fb6f {
  transition:
    stroke-dashoffset var(--scp-transition-duration) ease,
    stroke-dasharray var(--scp-transition-duration) ease,
    stroke var(--scp-transition-duration);
}

.m_4fa340f2 {
  position: absolute;
  margin: 0;
  padding: 0;
  inset-inline: 0;
  text-align: center;
  z-index: 1;
}

.m_4fa340f2:where([data-position='bottom']) {
    bottom: 0;
    padding-inline: calc(var(--scp-thickness) * 2);
  }

.m_4fa340f2:where([data-position='bottom']):where([data-orientation='down']) {
      bottom: auto;
      top: 0;
    }

.m_4fa340f2:where([data-position='center']) {
    top: 50%;
    padding-inline: calc(var(--scp-thickness) * 3);
  }

.m_925c2d2c {
  container: simple-grid / inline-size;
}

.m_2415a157 {
  display: grid;
  grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
  grid-gap: var(--sg-spacing-y) var(--sg-spacing-x);
  gap: var(--sg-spacing-y) var(--sg-spacing-x);
}

@keyframes m_299c329c {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.m_18320242 {
  height: var(--skeleton-height, auto);
  width: var(--skeleton-width, 100%);
  border-radius: var(--skeleton-radius, var(--mantine-radius-default));
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.m_18320242:where([data-animate])::after {
    animation: m_299c329c 1500ms linear infinite;
  }

.m_18320242:where([data-visible]) {
    overflow: hidden;
  }

.m_18320242:where([data-visible])::before {
      position: absolute;
      content: '';
      inset: 0;
      z-index: 10;
      background-color: var(--mantine-color-body);
    }

.m_18320242:where([data-visible])::after {
      position: absolute;
      content: '';
      inset: 0;
      z-index: 11;
    }

:where([data-mantine-color-scheme='light']) .m_18320242:where([data-visible])::after {
        background-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_18320242:where([data-visible])::after {
        background-color: var(--mantine-color-dark-4);
}

.m_dd36362e {
  --slider-size-xs: calc(0.25rem * var(--mantine-scale));
  --slider-size-sm: calc(0.375rem * var(--mantine-scale));
  --slider-size-md: calc(0.5rem * var(--mantine-scale));
  --slider-size-lg: calc(0.625rem * var(--mantine-scale));
  --slider-size-xl: calc(0.75rem * var(--mantine-scale));

  --slider-size: var(--slider-size-md);
  --slider-radius: calc(62.5rem * var(--mantine-scale));
  --slider-color: var(--mantine-primary-color-filled);

  -webkit-tap-highlight-color: transparent;
  outline: none;
  height: calc(var(--slider-size) * 2);
  padding-inline: var(--slider-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: none;
  position: relative;
}

  [data-mantine-color-scheme='light'] .m_dd36362e {
    --slider-track-bg: var(--mantine-color-gray-2);
    --slider-track-disabled-bg: var(--mantine-color-gray-4);
}

  [data-mantine-color-scheme='dark'] .m_dd36362e {
    --slider-track-bg: var(--mantine-color-dark-4);
    --slider-track-disabled-bg: var(--mantine-color-dark-3);
}

.m_c9357328 {
  position: absolute;
  top: calc(-2.25rem * var(--mantine-scale));
  font-size: var(--mantine-font-size-xs);
  color: var(--mantine-color-white);
  padding: calc(var(--mantine-spacing-xs) / 2);
  border-radius: var(--mantine-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

:where([data-mantine-color-scheme='light']) .m_c9357328 {
    background-color: var(--mantine-color-gray-9);
}

:where([data-mantine-color-scheme='dark']) .m_c9357328 {
    background-color: var(--mantine-color-dark-4);
}

.m_c9a9a60a {
  position: absolute;
  display: flex;
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border: calc(0.25rem * var(--mantine-scale)) solid;
  transform: translate(-50%, -50%);
  top: 50%;
  cursor: pointer;
  border-radius: var(--slider-radius);
  align-items: center;
  justify-content: center;
  transition:
    box-shadow 100ms ease,
    transform 100ms ease;
  z-index: 3;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  outline-offset: calc(0.125rem * var(--mantine-scale));
  left: var(--slider-thumb-offset);
}

:where([dir="rtl"]) .m_c9a9a60a {
    left: auto;
    right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));
}

fieldset:disabled .m_c9a9a60a,
  .m_c9a9a60a:where([data-disabled]) {
    display: none;
  }

.m_c9a9a60a:where([data-dragging]) {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: var(--mantine-shadow-sm);
  }

:where([data-mantine-color-scheme='light']) .m_c9a9a60a {
    color: var(--slider-color);
    border-color: var(--slider-color);
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_c9a9a60a {
    color: var(--mantine-color-white);
    border-color: var(--mantine-color-white);
    background-color: var(--slider-color);
}

.m_a8645c2 {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--slider-size) * 2);
  cursor: pointer;
}

fieldset:disabled .m_a8645c2,
  .m_a8645c2:where([data-disabled]) {
    cursor: not-allowed;
  }

.m_c9ade57f {
  position: relative;
  width: 100%;
  height: var(--slider-size);
}

.m_c9ade57f:where([data-inverted]:not([data-disabled])) {
    --track-bg: var(--slider-color);
  }

fieldset:disabled .m_c9ade57f:where([data-inverted]),
  .m_c9ade57f:where([data-inverted][data-disabled]) {
    --track-bg: var(--slider-track-disabled-bg);
  }

.m_c9ade57f::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--slider-radius);
    inset-inline: calc(var(--slider-size) * -1);
    background-color: var(--track-bg, var(--slider-track-bg));
    z-index: 0;
  }

.m_38aeed47 {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  background-color: var(--slider-color);
  border-radius: var(--slider-radius);
  width: var(--slider-bar-width);
  inset-inline-start: var(--slider-bar-offset);
}

.m_38aeed47:where([data-inverted]) {
    background-color: var(--slider-track-bg);
  }

:where([data-mantine-color-scheme='light']) fieldset:disabled .m_38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='light']) .m_38aeed47:where([data-disabled]:not([data-inverted])) {
      background-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) fieldset:disabled .m_38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='dark']) .m_38aeed47:where([data-disabled]:not([data-inverted])) {
      background-color: var(--mantine-color-dark-3);
}

.m_b7b0423a {
  position: absolute;
  inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);
  top: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

.m_dd33bc19 {
  border: calc(0.125rem * var(--mantine-scale)) solid;
  height: var(--slider-size);
  width: var(--slider-size);
  border-radius: calc(62.5rem * var(--mantine-scale));
  background-color: var(--mantine-color-white);
  pointer-events: none;
}

:where([data-mantine-color-scheme='light']) .m_dd33bc19 {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_dd33bc19 {
    border-color: var(--mantine-color-dark-4);
}

.m_dd33bc19:where([data-filled]) {
    border-color: var(--slider-color);
  }

:where([data-mantine-color-scheme='light']) .m_dd33bc19:where([data-filled]):where([data-disabled]) {
        border-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_dd33bc19:where([data-filled]):where([data-disabled]) {
        border-color: var(--mantine-color-dark-3);
}

.m_68c77a5b {
  transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:where([data-mantine-color-scheme='light']) .m_68c77a5b {
    color: var(--mantine-color-gray-6);
}

:where([data-mantine-color-scheme='dark']) .m_68c77a5b {
    color: var(--mantine-color-dark-2);
}

.m_559cce2d {
  position: relative;
}

  .m_559cce2d:where([data-has-spoiler]) {
    margin-bottom: calc(1.5rem * var(--mantine-scale));
  }

.m_b912df4e {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: max-height var(--spoiler-transition-duration, 200ms) ease;
}

.m_b9131032 {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  height: calc(1.5rem * var(--mantine-scale));
}

.m_6d731127 {
  display: flex;
  flex-direction: column;
  align-items: var(--stack-align, stretch);
  justify-content: var(--stack-justify, flex-start);
  gap: var(--stack-gap, var(--mantine-spacing-md));
}

.m_cbb4ea7e {
  --stepper-icon-size-xs: calc(2.125rem * var(--mantine-scale));
  --stepper-icon-size-sm: calc(2.25rem * var(--mantine-scale));
  --stepper-icon-size-md: calc(2.625rem * var(--mantine-scale));
  --stepper-icon-size-lg: calc(3rem * var(--mantine-scale));
  --stepper-icon-size-xl: calc(3.25rem * var(--mantine-scale));

  --stepper-icon-size: var(--stepper-icon-size-md);
  --stepper-color: var(--mantine-primary-color-filled);
  --stepper-content-padding: var(--mantine-spacing-md);
  --stepper-spacing: var(--mantine-spacing-md);
  --stepper-radius: calc(62.5rem * var(--mantine-scale));
  --stepper-fz: var(--mantine-font-size-md);
  --stepper-outline-thickness: calc(0.125rem * var(--mantine-scale));
}

  [data-mantine-color-scheme='light'] .m_cbb4ea7e {
    --stepper-outline-color: var(--mantine-color-gray-2);
}

  [data-mantine-color-scheme='dark'] .m_cbb4ea7e {
    --stepper-outline-color: var(--mantine-color-dark-5);
}

.m_aaf89d0b {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.m_aaf89d0b:where([data-wrap]) {
    flex-wrap: wrap;
    gap: var(--mantine-spacing-md) 0;
  }

.m_aaf89d0b:where([data-orientation='vertical']) {
    flex-direction: column;
  }

.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='left']) {
      align-items: flex-start;
    }

.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='right']) {
      align-items: flex-end;
    }

.m_aaf89d0b:where([data-orientation='horizontal']) {
    flex-direction: row;
  }

.m_2a371ac9 {
  transition: background-color 150ms ease;
  flex: 1 1;
  height: var(--stepper-outline-thickness);
  margin-inline: var(--mantine-spacing-md);
  background-color: var(--stepper-outline-color);
}

.m_2a371ac9:where([data-active]) {
    background-color: var(--stepper-color);
  }

.m_78da155d {
  padding-top: var(--stepper-content-padding);
}

.m_cbb57068 {
  --step-color: var(--stepper-color);

  display: flex;
  cursor: default;
}

.m_cbb57068:where([data-allow-click]) {
    cursor: pointer;
  }

.m_cbb57068:where([data-icon-position='left']) {
    flex-direction: row;
  }

.m_cbb57068:where([data-icon-position='right']) {
    flex-direction: row-reverse;
  }

.m_f56b1e2c {
  align-items: center;
}

.m_833edb7e {
  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);

  justify-content: flex-start;
  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));
  margin-top: var(--separator-spacing);
  overflow: hidden;
}

.m_833edb7e:where(:first-of-type) {
    margin-top: 0;
  }

.m_833edb7e:where(:last-of-type) {
    min-height: auto;
  }

.m_833edb7e:where(:last-of-type) .m_6496b3f3 {
      display: none;
    }

.m_818e70b {
  position: relative;
}

.m_6496b3f3 {
  top: calc(var(--stepper-icon-size) + var(--separator-spacing));
  inset-inline-start: calc(var(--stepper-icon-size) / 2);
  height: 100vh;
  position: absolute;
  -webkit-border-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
          border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
}

.m_6496b3f3:where([data-active]) {
    border-color: var(--stepper-color);
  }

.m_1959ad01 {
  height: var(--stepper-icon-size);
  width: var(--stepper-icon-size);
  min-height: var(--stepper-icon-size);
  min-width: var(--stepper-icon-size);
  border-radius: var(--stepper-radius);
  font-size: var(--stepper-fz);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: bold;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
  background-color: var(--stepper-outline-color);
}

:where([data-mantine-color-scheme='light']) .m_1959ad01 {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_1959ad01 {
    color: var(--mantine-color-dark-1);
}

.m_1959ad01:where([data-progress]) {
    border-color: var(--step-color);
  }

.m_1959ad01:where([data-completed]) {
    color: var(--stepper-icon-color, var(--mantine-color-white));
    background-color: var(--step-color);
    border-color: var(--step-color);
  }

.m_a79331dc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stepper-icon-color, var(--mantine-color-white));
}

.m_1956aa2a {
  display: flex;
  flex-direction: column;
}

.m_1956aa2a:where([data-icon-position='left']) {
    -webkit-margin-start: var(--mantine-spacing-sm);
            margin-inline-start: var(--mantine-spacing-sm);
  }

.m_1956aa2a:where([data-icon-position='right']) {
    text-align: right;
    -webkit-margin-end: var(--mantine-spacing-sm);
            margin-inline-end: var(--mantine-spacing-sm);
  }

:where([dir="rtl"]) .m_1956aa2a:where([data-icon-position='right']) {
      text-align: left;
}

.m_12051f6c {
  font-weight: 500;
  font-size: var(--stepper-fz);
  line-height: 1;
}

.m_164eea74 {
  margin-top: calc(var(--stepper-spacing) / 3);
  margin-bottom: calc(var(--stepper-spacing) / 3);
  font-size: calc(var(--stepper-fz) - calc(0.125rem * var(--mantine-scale)));
  line-height: 1;
  color: var(--mantine-color-dimmed);
}

.m_5f93f3bb {
  --switch-height-xs: calc(1rem * var(--mantine-scale));
  --switch-height-sm: calc(1.25rem * var(--mantine-scale));
  --switch-height-md: calc(1.5rem * var(--mantine-scale));
  --switch-height-lg: calc(1.875rem * var(--mantine-scale));
  --switch-height-xl: calc(2.25rem * var(--mantine-scale));

  --switch-width-xs: calc(2rem * var(--mantine-scale));
  --switch-width-sm: calc(2.375rem * var(--mantine-scale));
  --switch-width-md: calc(2.875rem * var(--mantine-scale));
  --switch-width-lg: calc(3.5rem * var(--mantine-scale));
  --switch-width-xl: calc(4.5rem * var(--mantine-scale));

  --switch-thumb-size-xs: calc(0.75rem * var(--mantine-scale));
  --switch-thumb-size-sm: calc(0.875rem * var(--mantine-scale));
  --switch-thumb-size-md: calc(1.125rem * var(--mantine-scale));
  --switch-thumb-size-lg: calc(1.375rem * var(--mantine-scale));
  --switch-thumb-size-xl: calc(1.75rem * var(--mantine-scale));

  --switch-label-font-size-xs: calc(0.3125rem * var(--mantine-scale));
  --switch-label-font-size-sm: calc(0.375rem * var(--mantine-scale));
  --switch-label-font-size-md: calc(0.4375rem * var(--mantine-scale));
  --switch-label-font-size-lg: calc(0.5625rem * var(--mantine-scale));
  --switch-label-font-size-xl: calc(0.6875rem * var(--mantine-scale));

  --switch-track-label-padding-xs: calc(0.0625rem * var(--mantine-scale));
  --switch-track-label-padding-sm: calc(0.125rem * var(--mantine-scale));
  --switch-track-label-padding-md: calc(0.125rem * var(--mantine-scale));
  --switch-track-label-padding-lg: calc(0.1875rem * var(--mantine-scale));
  --switch-track-label-padding-xl: calc(0.1875rem * var(--mantine-scale));

  --switch-height: var(--switch-height-sm);
  --switch-width: var(--switch-width-sm);
  --switch-thumb-size: var(--switch-thumb-size-sm);
  --switch-label-font-size: var(--switch-label-font-size-sm);
  --switch-track-label-padding: var(--switch-track-label-padding-sm);
  --switch-radius: calc(62.5rem * var(--mantine-scale));
  --switch-color: var(--mantine-primary-color-filled);

  position: relative;
}

.m_926b4011 {
  height: 0;
  width: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
}

.m_9307d992 {
  -webkit-tap-highlight-color: transparent;
  cursor: var(--switch-cursor, var(--mantine-cursor-type));
  overflow: hidden;
  position: relative;
  border-radius: var(--switch-radius);
  background-color: var(--switch-bg);
  border: 1px solid var(--switch-bd);
  height: var(--switch-height);
  min-width: var(--switch-width);
  margin: 0;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  font-size: var(--switch-label-font-size);
  font-weight: 600;
  order: var(--switch-order, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 0;
  line-height: 0;
  color: var(--switch-text-color);
}

.m_9307d992:where([data-without-labels]) {
    width: var(--switch-width);
  }

.m_926b4011:focus-visible + .m_9307d992 {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.m_926b4011:checked + .m_9307d992 {
    --switch-bg: var(--switch-color);
    --switch-bd: var(--switch-color);
    --switch-text-color: var(--mantine-color-white);
  }

.m_926b4011:disabled + .m_9307d992,
  .m_926b4011[data-disabled] + .m_9307d992 {
    --switch-bg: var(--switch-disabled-color);
    --switch-bd: var(--switch-disabled-color);
    --switch-cursor: not-allowed;
  }

[data-mantine-color-scheme='light'] .m_9307d992 {
    --switch-bg: var(--mantine-color-gray-2);
    --switch-bd: var(--mantine-color-gray-3);
    --switch-text-color: var(--mantine-color-gray-6);
    --switch-disabled-color: var(--mantine-color-gray-2);
}

[data-mantine-color-scheme='dark'] .m_9307d992 {
    --switch-bg: var(--mantine-color-dark-6);
    --switch-bd: var(--mantine-color-dark-4);
    --switch-text-color: var(--mantine-color-dark-1);
    --switch-disabled-color: var(--mantine-color-dark-4);
}

.m_9307d992[data-error] {
    --switch-bd: var(--mantine-color-error);
  }

.m_9307d992[data-label-position='left'] {
    --switch-order: 2;
  }

.m_93039a1d {
  position: absolute;
  z-index: 1;
  border-radius: var(--switch-radius);
  display: flex;
  background-color: var(--switch-thumb-bg, var(--mantine-color-white));
  height: var(--switch-thumb-size);
  width: var(--switch-thumb-size);
  border: 1px solid var(--switch-thumb-bd);
  inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
  transition: inset-inline-start 150ms ease;
}

.m_93039a1d > * {
    margin: auto;
  }

.m_926b4011:checked + * > .m_93039a1d {
    --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
    --switch-thumb-bd: var(--mantine-color-white);
  }

.m_926b4011:disabled + * > .m_93039a1d,
  .m_926b4011[data-disabled] + * > .m_93039a1d {
    --switch-thumb-bd: var(--switch-thumb-bg-disabled);
    --switch-thumb-bg: var(--switch-thumb-bg-disabled);
  }

[data-mantine-color-scheme='light'] .m_93039a1d {
    --switch-thumb-bd: var(--mantine-color-gray-3);
    --switch-thumb-bg-disabled: var(--mantine-color-gray-0);
}

[data-mantine-color-scheme='dark'] .m_93039a1d {
    --switch-thumb-bd: var(--mantine-color-white);
    --switch-thumb-bg-disabled: var(--mantine-color-dark-3);
}

.m_8277e082 {
  height: 100%;
  display: grid;
  place-content: center;
  min-width: calc(var(--switch-width) - var(--switch-thumb-size));
  padding-inline: var(--switch-track-label-padding);
  -webkit-margin-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
          margin-inline-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
  transition: margin 150ms ease;
}

.m_926b4011:checked + * > .m_8277e082 {
    -webkit-margin-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
            margin-inline-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }

.m_b23fa0ef {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  line-height: var(--mantine-line-height);
  font-size: var(--mantine-font-size-sm);
  table-layout: var(--table-layout, auto);
  caption-side: var(--table-caption-side, bottom);
  border: none;
}

  :where([data-mantine-color-scheme='light']) .m_b23fa0ef {
    --table-hover-color: var(--mantine-color-gray-1);
    --table-striped-color: var(--mantine-color-gray-0);
    --table-border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_b23fa0ef {
    --table-hover-color: var(--mantine-color-dark-5);
    --table-striped-color: var(--mantine-color-dark-6);
    --table-border-color: var(--mantine-color-dark-4);
}

  .m_b23fa0ef:where([data-with-table-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

  .m_b23fa0ef:where([data-tabular-nums]) {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }

  .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) {
    font-weight: 500;
  }

  :where([data-mantine-color-scheme='light']) .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) {
      background-color: var(--mantine-color-gray-0);
}

  :where([data-mantine-color-scheme='dark']) .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) {
      background-color: var(--mantine-color-dark-6);
}

.m_4e7aa4f3 {
  text-align: left;
}

:where([dir="rtl"]) .m_4e7aa4f3 {
    text-align: right;
}

.m_4e7aa4fd {
  border-bottom: none;
  background-color: transparent;
}

@media (hover: hover) {
    .m_4e7aa4fd:hover:where([data-hover]) {
      background-color: var(--tr-hover-bg);
    }
}

@media (hover: none) {
    .m_4e7aa4fd:active:where([data-hover]) {
      background-color: var(--tr-hover-bg);
    }
}

.m_4e7aa4fd:where([data-with-row-border]) {
    border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

.m_4e7aa4ef,
.m_4e7aa4f3 {
  padding: var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs));
}

.m_4e7aa4ef:where([data-with-column-border]:not(:last-child)), .m_4e7aa4f3:where([data-with-column-border]:not(:last-child)) {
    -webkit-border-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
            border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

.m_b2404537 > :where(tr):where([data-with-row-border]:last-of-type) {
      border-bottom: none;
    }

.m_b2404537 > :where(tr):where([data-striped='odd']:nth-of-type(odd)) {
      background-color: var(--table-striped-color);
    }

.m_b2404537 > :where(tr):where([data-striped='even']:nth-of-type(even)) {
      background-color: var(--table-striped-color);
    }

.m_b2404537 > :where(tr)[data-hover] {
      --tr-hover-bg: var(--table-highlight-on-hover-color, var(--table-hover-color));
    }

.m_b242d975 {
  top: var(--table-sticky-header-offset, 0);
  z-index: 3;
}

.m_b242d975:where([data-sticky]) {
    position: -webkit-sticky;
    position: sticky;
  }

.m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3) {
      position: -webkit-sticky;
      position: sticky;
      top: var(--table-sticky-header-offset, 0);
      background-color: var(--mantine-color-body);
    }

:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3 {
  top: initial;
}

.m_9e5a3ac7 {
  color: var(--mantine-color-dimmed);
}

.m_9e5a3ac7:where([data-side='top']) {
    margin-bottom: var(--mantine-spacing-xs);
  }

.m_9e5a3ac7:where([data-side='bottom']) {
    margin-top: var(--mantine-spacing-xs);
  }

.m_a100c15 {
  overflow-x: var(--table-overflow);
}

.m_62259741 {
  min-width: var(--table-min-width);
  max-height: var(--table-max-height);
}

.m_bcaa9990 {
  display: flex;
  flex-direction: column;
  --toc-depth-offset: 0.8em;
}

.m_375a65ef {
  display: block;
  padding: 0.3em 0.8em;
  font-size: var(--toc-size, var(--mantine-font-size-md));
  border-radius: var(--toc-radius, var(--mantine-radius-default));
  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-gray-1);
  }

      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-gray-1);
  }

      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-dark-5);
  }
}

.m_375a65ef:where([data-active]) {
    background-color: var(--toc-bg);
    color: var(--toc-color);
  }

.m_89d60db1 {
  display: var(--tabs-display);
  flex-direction: var(--tabs-flex-direction);

  --tab-justify: flex-start;
  --tabs-list-direction: row;
  --tabs-panel-grow: unset;
  --tabs-display: block;
  --tabs-flex-direction: row;
  --tabs-list-border-width: 0;
  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
  --tabs-list-gap: unset;

  --tabs-list-line-bottom: 0;
  --tabs-list-line-top: unset;
  --tabs-list-line-start: 0;
  --tabs-list-line-end: 0;

  --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0;
  --tab-border-width: 0 0 var(--tabs-list-border-width) 0;
}

  .m_89d60db1[data-inverted] {
    --tabs-list-line-bottom: unset;
    --tabs-list-line-top: 0;
    --tab-radius: 0 0 var(--tabs-radius) var(--tabs-radius);
    --tab-border-width: var(--tabs-list-border-width) 0 0 0;
  }

  .m_89d60db1[data-inverted] .m_576c9d4::before {
      top: 0;
      bottom: unset;
    }

  .m_89d60db1[data-orientation='vertical'] {
    --tabs-list-line-start: unset;
    --tabs-list-line-end: 0;
    --tabs-list-line-top: 0;
    --tabs-list-line-bottom: 0;
    --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;
    --tab-border-width: 0 var(--tabs-list-border-width) 0 0;
    --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
    --tabs-list-direction: column;
    --tabs-panel-grow: 1;
    --tabs-display: flex;
  }

  [dir="rtl"] .m_89d60db1[data-orientation='vertical'] {
      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);
      --tab-border-width: 0 0 0 var(--tabs-list-border-width);
      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;
}

  .m_89d60db1[data-orientation='vertical'][data-placement='right'] {
      --tabs-flex-direction: row-reverse;
      --tabs-list-line-start: 0;
      --tabs-list-line-end: unset;
      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);
      --tab-border-width: 0 0 0 var(--tabs-list-border-width);
      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;
    }

  [dir="rtl"] .m_89d60db1[data-orientation='vertical'][data-placement='right'] {
        --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;
        --tab-border-width: 0 var(--tabs-list-border-width) 0 0;
        --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
}

  [data-mantine-color-scheme='light'] .m_89d60db1 {
    --tab-border-color: var(--mantine-color-gray-3);
}

  [data-mantine-color-scheme='dark'] .m_89d60db1 {
    --tab-border-color: var(--mantine-color-dark-4);
}

  .m_89d60db1[data-orientation='horizontal'] {
    --tab-justify: center;
  }

  .m_89d60db1[data-variant='default'] {
    --tabs-list-border-width: calc(0.125rem * var(--mantine-scale));
  }

  [data-mantine-color-scheme='light'] .m_89d60db1[data-variant='default'] {
      --tab-hover-color: var(--mantine-color-gray-0);
}

  [data-mantine-color-scheme='dark'] .m_89d60db1[data-variant='default'] {
      --tab-hover-color: var(--mantine-color-dark-6);
}

  .m_89d60db1[data-variant='outline'] {
    --tabs-list-border-width: calc(0.0625rem * var(--mantine-scale));
  }

  .m_89d60db1[data-variant='pills'] {
    --tabs-list-gap: calc(var(--mantine-spacing-sm) / 2);
  }

  [data-mantine-color-scheme='light'] .m_89d60db1[data-variant='pills'] {
      --tab-hover-color: var(--mantine-color-gray-0);
}

  [data-mantine-color-scheme='dark'] .m_89d60db1[data-variant='pills'] {
      --tab-hover-color: var(--mantine-color-dark-6);
}

.m_89d33d6d {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--tabs-justify, flex-start);
  flex-direction: var(--tabs-list-direction);
  gap: var(--tabs-list-gap);

  --tab-grow: unset;
}

.m_89d33d6d[data-grow] {
    --tab-grow: 1;
  }

.m_b0c91715 {
  flex-grow: var(--tabs-panel-grow);
}

.m_4ec4dce6 {
  position: relative;
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  z-index: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-grow: var(--tab-grow);
  justify-content: var(--tab-justify);
}

.m_4ec4dce6:disabled,
  .m_4ec4dce6[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

.m_4ec4dce6:focus {
    z-index: 1;
  }

.m_fc420b1f {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--tab-section-margin-left, 0);
  margin-right: var(--tab-section-margin-right, 0);
}

.m_fc420b1f[data-position='left']:not(:only-child) {
      --tab-section-margin-right: var(--mantine-spacing-xs);
    }

[dir="rtl"] .m_fc420b1f[data-position='left']:not(:only-child) {
        --tab-section-margin-right: 0rem;
        --tab-section-margin-left: var(--mantine-spacing-xs);
}

.m_fc420b1f[data-position='right']:not(:only-child) {
      --tab-section-margin-left: var(--mantine-spacing-xs);
    }

[dir="rtl"] .m_fc420b1f[data-position='right']:not(:only-child) {
        --tab-section-margin-left: 0rem;
        --tab-section-margin-right: var(--mantine-spacing-xs);
}

/*************************************** default variant ***************************************/
.m_576c9d4 {
  position: relative;
}
.m_576c9d4::before {
    content: '';
    position: absolute;
    border-color: var(--tab-border-color);
    border-width: var(--tabs-list-border-size);
    border-style: solid;
    bottom: var(--tabs-list-line-bottom);
    inset-inline-start: var(--tabs-list-line-start);
    inset-inline-end: var(--tabs-list-line-end);
    top: var(--tabs-list-line-top);
  }

.m_539e827b {
  border-radius: var(--tab-radius);
  border-width: var(--tab-border-width);
  border-style: solid;
  border-color: transparent;
  background-color: var(--tab-bg);

  --tab-bg: transparent;
}

.m_539e827b:where([data-active]) {
    border-color: var(--tabs-color);
  }

@media (hover: hover) {

  .m_539e827b:hover {
    --tab-bg: var(--tab-hover-color);
  }

    .m_539e827b:hover:where(:not([data-active])) {
      border-color: var(--tab-border-color);
    }
}

@media (hover: none) {

  .m_539e827b:active {
    --tab-bg: var(--tab-hover-color);
  }

    .m_539e827b:active:where(:not([data-active])) {
      border-color: var(--tab-border-color);
    }
}

@media (hover: hover) {

  .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
      --tab-bg: transparent;
  }
}

@media (hover: none) {

  .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
      --tab-bg: transparent;
  }
}

/*************************************** outline variant ***************************************/
.m_6772fbd5 {
  position: relative;
}
.m_6772fbd5::before {
    content: '';
    position: absolute;
    border-color: var(--tab-border-color);
    border-width: var(--tabs-list-border-size);
    border-style: solid;
    bottom: var(--tabs-list-line-bottom);
    inset-inline-start: var(--tabs-list-line-start);
    inset-inline-end: var(--tabs-list-line-end);
    top: var(--tabs-list-line-top);
  }

.m_b59ab47c {
  border-top: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-bottom: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-right: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-left: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-top-color: var(--tab-border-top-color);
  border-bottom-color: var(--tab-border-bottom-color);
  border-radius: var(--tab-radius);
  position: relative;

  --tab-border-bottom-color: transparent;
  --tab-border-top-color: transparent;
  --tab-border-inline-end-color: transparent;
  --tab-border-inline-start-color: transparent;
}

.m_b59ab47c:where([data-active])::before {
      content: '';
      position: absolute;
      background-color: var(--tab-border-color);
      bottom: var(--tab-before-bottom, calc(-0.0625rem * var(--mantine-scale)));
      left: var(--tab-before-left, calc(-0.0625rem * var(--mantine-scale)));
      right: var(--tab-before-right, auto);
      top: var(--tab-before-top, auto);
      width: calc(0.0625rem * var(--mantine-scale));
      height: calc(0.0625rem * var(--mantine-scale));
    }

.m_b59ab47c:where([data-active])::after {
      content: '';
      position: absolute;
      background-color: var(--tab-border-color);
      bottom: var(--tab-after-bottom, calc(-0.0625rem * var(--mantine-scale)));
      right: var(--tab-after-right, calc(-0.0625rem * var(--mantine-scale)));
      left: var(--tab-after-left, auto);
      top: var(--tab-after-top, auto);
      width: calc(0.0625rem * var(--mantine-scale));
      height: calc(0.0625rem * var(--mantine-scale));
    }

.m_b59ab47c:where([data-active]) {

    border-top-color: var(--tab-border-top-color);
    border-bottom-color: var(--tab-border-bottom-color);
    border-inline-start-color: var(--tab-border-inline-start-color);
    border-inline-end-color: var(--tab-border-inline-end-color);

    --tab-border-top-color: var(--tab-border-color);
    --tab-border-inline-start-color: var(--tab-border-color);
    --tab-border-inline-end-color: var(--tab-border-color);
    --tab-border-bottom-color: var(--mantine-color-body);
}

.m_b59ab47c:where([data-active])[data-inverted] {
      --tab-border-bottom-color: var(--tab-border-color);
      --tab-border-top-color: var(--mantine-color-body);

      --tab-before-bottom: auto;
      --tab-before-top: calc(-0.0625rem * var(--mantine-scale));
      --tab-after-bottom: auto;
      --tab-after-top: calc(-0.0625rem * var(--mantine-scale));
    }

.m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='left'] {
        --tab-border-inline-end-color: var(--mantine-color-body);
        --tab-border-inline-start-color: var(--tab-border-color);
        --tab-border-bottom-color: var(--tab-border-color);

        --tab-before-right: calc(-0.0625rem * var(--mantine-scale));
        --tab-before-left: auto;
        --tab-before-bottom: auto;
        --tab-before-top: calc(-0.0625rem * var(--mantine-scale));
        --tab-after-left: auto;
        --tab-after-right: calc(-0.0625rem * var(--mantine-scale));
      }

[dir="rtl"] .m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='left'] {
          --tab-before-right: auto;
          --tab-before-left: calc(-0.0625rem * var(--mantine-scale));
          --tab-after-left: calc(-0.0625rem * var(--mantine-scale));
          --tab-after-right: auto;
}

.m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='right'] {
        --tab-border-inline-start-color: var(--mantine-color-body);
        --tab-border-inline-end-color: var(--tab-border-color);
        --tab-border-bottom-color: var(--tab-border-color);

        --tab-before-left: calc(-0.0625rem * var(--mantine-scale));
        --tab-before-right: auto;
        --tab-before-bottom: auto;
        --tab-before-top: calc(-0.0625rem * var(--mantine-scale));
        --tab-after-right: auto;
        --tab-after-left: calc(-0.0625rem * var(--mantine-scale));
      }

[dir="rtl"] .m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='right'] {
          --tab-before-left: auto;
          --tab-before-right: calc(-0.0625rem * var(--mantine-scale));
          --tab-after-right: calc(-0.0625rem * var(--mantine-scale));
          --tab-after-left: auto;
}

/*************************************** pills variant ***************************************/
.m_c3381914 {
  border-radius: var(--tabs-radius);
  background-color: var(--tab-bg);
  color: var(--tab-color);

  --tab-bg: transparent;
  --tab-color: inherit;
}
@media (hover: hover) {

  .m_c3381914:not([data-disabled]):hover {
      --tab-bg: var(--tab-hover-color);
  }
}
@media (hover: none) {

  .m_c3381914:not([data-disabled]):active {
      --tab-bg: var(--tab-hover-color);
  }
}
.m_c3381914[data-active][data-active] {
    --tab-bg: var(--tabs-color);
    --tab-color: var(--tabs-text-color, var(--mantine-color-white));
  }
@media (hover: hover) {

  .m_c3381914[data-active][data-active]:hover {
      --tab-bg: var(--tabs-color);
  }
}
@media (hover: none) {

  .m_c3381914[data-active][data-active]:active {
      --tab-bg: var(--tabs-color);
  }
}

.m_7341320d {
  --ti-size-xs: calc(1.125rem * var(--mantine-scale));
  --ti-size-sm: calc(1.375rem * var(--mantine-scale));
  --ti-size-md: calc(1.75rem * var(--mantine-scale));
  --ti-size-lg: calc(2.125rem * var(--mantine-scale));
  --ti-size-xl: calc(2.75rem * var(--mantine-scale));
  --ti-size: var(--ti-size-md);

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  width: var(--ti-size);
  height: var(--ti-size);
  min-width: var(--ti-size);
  min-height: var(--ti-size);
  border-radius: var(--ti-radius, var(--mantine-radius-default));
  background: var(--ti-bg, var(--mantine-primary-color-filled));
  color: var(--ti-color, var(--mantine-color-white));
  border: var(--ti-bd, 1px solid transparent);
}

.m_43657ece {
  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);
  --tl-bullet-size: calc(1.25rem * var(--mantine-scale));
  --tl-line-width: calc(0.25rem * var(--mantine-scale));
  --tl-radius: calc(62.5rem * var(--mantine-scale));
  --tl-color: var(--mantine-primary-color-filled);
}

  .m_43657ece:where([data-align='left']) {
    -webkit-padding-start: var(--offset);
            padding-inline-start: var(--offset);
  }

  .m_43657ece:where([data-align='right']) {
    -webkit-padding-end: var(--offset);
            padding-inline-end: var(--offset);
  }

.m_2ebe8099 {
  font-weight: 500;
  line-height: 1;
  margin-bottom: calc(var(--mantine-spacing-xs) / 2);
}

.m_436178ff {
  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);

  position: relative;
  color: var(--mantine-color-text);
}

.m_436178ff::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: var(--timeline-line-left, 0);
    right: var(--timeline-line-right, 0);
    bottom: calc(var(--mantine-spacing-xl) * -1);
    -webkit-border-start: var(--item-border);
            border-inline-start: var(--item-border);
    display: var(--timeline-line-display, none);
  }

.m_43657ece[data-align='left'] .m_436178ff::before {
      --timeline-line-left: calc(var(--tl-line-width) * -1);
      --timeline-line-right: auto;
    }

[dir="rtl"] .m_43657ece[data-align='left'] .m_436178ff::before {
        --timeline-line-left: auto;
        --timeline-line-right: calc(var(--tl-line-width) * -1);
}

.m_43657ece[data-align='right'] .m_436178ff::before {
      --timeline-line-left: auto;
      --timeline-line-right: calc(var(--tl-line-width) * -1);
    }

[dir="rtl"] .m_43657ece[data-align='right'] .m_436178ff::before {
        --timeline-line-left: calc(var(--tl-line-width) * -1);
        --timeline-line-right: auto;
}

.m_43657ece:where([data-align='left']) .m_436178ff {
    -webkit-padding-start: var(--offset);
            padding-inline-start: var(--offset);
    text-align: left;
  }

.m_43657ece:where([data-align='right']) .m_436178ff {
    -webkit-padding-end: var(--offset);
            padding-inline-end: var(--offset);
    text-align: right;
  }

:where([data-mantine-color-scheme='light']) .m_436178ff {
    --item-border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_436178ff {
    --item-border-color: var(--mantine-color-dark-4);
}

.m_436178ff:where([data-line-active])::before {
      border-color: var(--tli-color, var(--tl-color));
    }

.m_436178ff:where(:not(:last-of-type)) {
    --timeline-line-display: block;
  }

.m_436178ff:where(:not(:first-of-type)) {
    margin-top: var(--mantine-spacing-xl);
  }

.m_8affcee1 {
  width: var(--tl-bullet-size);
  height: var(--tl-bullet-size);
  border-radius: var(--tli-radius, var(--tl-radius));
  border: var(--tl-line-width) solid;
  background-color: var(--mantine-color-body);
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-text);
}

:where([data-mantine-color-scheme='light']) .m_8affcee1 {
    border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_8affcee1 {
    border-color: var(--mantine-color-dark-4);
}

.m_43657ece:where([data-align='left']) .m_8affcee1 {
    left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
    right: auto;
  }

:where([dir="rtl"]) .m_43657ece:where([data-align='left']) .m_8affcee1 {
      left: auto;
      right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
}

.m_43657ece:where([data-align='right']) .m_8affcee1 {
    left: auto;
    right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
  }

:where([dir="rtl"]) .m_43657ece:where([data-align='right']) .m_8affcee1 {
      left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
      right: auto;
}

.m_8affcee1:where([data-with-child]) {
    border-width: var(--tl-line-width);
  }

:where([data-mantine-color-scheme='light']) .m_8affcee1:where([data-with-child]) {
      background-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_8affcee1:where([data-with-child]) {
      background-color: var(--mantine-color-dark-4);
}

.m_8affcee1:where([data-active]) {
    border-color: var(--tli-color, var(--tl-color));
    background-color: var(--mantine-color-white);
    color: var(--tl-icon-color, var(--mantine-color-white));
  }

.m_8affcee1:where([data-active]):where([data-with-child]) {
      background-color: var(--tli-color, var(--tl-color));
      color: var(--tl-icon-color, var(--mantine-color-white));
    }

.m_43657ece:where([data-align='left']) .m_540e8f41 {
    -webkit-padding-start: var(--offset);
            padding-inline-start: var(--offset);
    text-align: left;
  }

:where([dir="rtl"]) .m_43657ece:where([data-align='left']) .m_540e8f41 {
      text-align: right;
}

.m_43657ece:where([data-align='right']) .m_540e8f41 {
    -webkit-padding-end: var(--offset);
            padding-inline-end: var(--offset);
    text-align: right;
  }

:where([dir="rtl"]) .m_43657ece:where([data-align='right']) .m_540e8f41 {
      text-align: left;
}

.m_8a5d1357 {
  margin: 0;
  font-weight: var(--title-fw);
  font-size: var(--title-fz);
  line-height: var(--title-lh);
  font-family: var(--mantine-font-family-headings);
  text-wrap: var(--title-text-wrap, var(--mantine-heading-text-wrap));
}

  .m_8a5d1357:where([data-line-clamp]) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--title-line-clamp);
    -webkit-box-orient: vertical;
  }

.m_f698e191 {
  --level-offset: var(--mantine-spacing-lg);
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.m_75f3ecf {
  margin: 0;
  padding: 0;
}

.m_f6970eb1 {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
  outline: 0;
}

.m_f6970eb1:focus-visible > .m_dc283425 {
      outline: 2px solid var(--mantine-primary-color-filled);
      outline-offset: calc(0.125rem * var(--mantine-scale));
    }

.m_dc283425 {
  -webkit-padding-start: var(--label-offset);
          padding-inline-start: var(--label-offset);
}

:where([data-mantine-color-scheme='light']) .m_dc283425:where([data-selected]) {
      background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
      background-color: var(--mantine-color-dark-5);
}

.m_d6493fad :first-child {
    margin-top: 0;
  }
  .m_d6493fad :last-child {
    margin-bottom: 0;
  }
  .m_d6493fad :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: var(--mantine-spacing-xs);
    text-wrap: var(--mantine-heading-text-wrap);
    font-family: var(--mantine-font-family-headings);
  }
  .m_d6493fad :where(h1) {
    margin-top: calc(1.5 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h1-font-size);
    line-height: var(--mantine-h1-line-height);
    font-weight: var(--mantine-h1-font-weight);
  }
  .m_d6493fad :where(h2) {
    margin-top: var(--mantine-spacing-xl);
    font-size: var(--mantine-h2-font-size);
    line-height: var(--mantine-h2-line-height);
    font-weight: var(--mantine-h2-font-weight);
  }
  .m_d6493fad :where(h3) {
    margin-top: calc(0.8 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h3-font-size);
    line-height: var(--mantine-h3-line-height);
    font-weight: var(--mantine-h3-font-weight);
  }
  .m_d6493fad :where(h4) {
    margin-top: calc(0.8 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h4-font-size);
    line-height: var(--mantine-h4-line-height);
    font-weight: var(--mantine-h4-font-weight);
  }
  .m_d6493fad :where(h5) {
    margin-top: calc(0.5 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h5-font-size);
    line-height: var(--mantine-h5-line-height);
    font-weight: var(--mantine-h5-font-weight);
  }
  .m_d6493fad :where(h6) {
    margin-top: calc(0.5 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h6-font-size);
    line-height: var(--mantine-h6-line-height);
    font-weight: var(--mantine-h6-font-weight);
  }
  .m_d6493fad :where(img) {
    max-width: 100%;
    margin-bottom: var(--mantine-spacing-xs);
  }
  .m_d6493fad :where(p) {
    margin-top: 0;
    margin-bottom: var(--mantine-spacing-lg);
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(mark) {
      background-color: var(--mantine-color-yellow-2);
      color: inherit;
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(mark) {
      background-color: var(--mantine-color-yellow-5);
      color: var(--mantine-color-black);
}
  .m_d6493fad :where(a) {
    color: var(--mantine-color-anchor);
    text-decoration: none;
  }
  @media (hover: hover) {
    .m_d6493fad :where(a):hover {
      text-decoration: underline;
    }
}
  @media (hover: none) {
    .m_d6493fad :where(a):active {
      text-decoration: underline;
    }
}
  .m_d6493fad :where(hr) {
    margin-top: var(--mantine-spacing-md);
    margin-bottom: var(--mantine-spacing-md);
    border: 0;
    border-top: calc(0.0625rem * var(--mantine-scale)) solid;
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(hr) {
      border-color: var(--mantine-color-gray-3);
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(hr) {
      border-color: var(--mantine-color-dark-3);
}
  .m_d6493fad :where(pre) {
    padding: var(--mantine-spacing-xs);
    line-height: var(--mantine-line-height);
    margin: 0;
    margin-top: var(--mantine-spacing-md);
    margin-bottom: var(--mantine-spacing-md);
    overflow-x: auto;
    font-family: var(--mantine-font-family-monospace);
    font-size: var(--mantine-font-size-xs);
    border-radius: var(--mantine-radius-sm);
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(pre) {
      background-color: var(--mantine-color-gray-0);
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(pre) {
      background-color: var(--mantine-color-dark-8);
}
  .m_d6493fad :where(pre) :where(code) {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      color: inherit;
      border: 0;
    }
  .m_d6493fad :where(kbd) {
    --kbd-fz: calc(0.75rem * var(--mantine-scale));
    --kbd-padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));

    font-family: var(--mantine-font-family-monospace);
    line-height: var(--mantine-line-height);
    font-weight: 700;
    padding: var(--kbd-padding);
    font-size: var(--kbd-fz);
    border-radius: var(--mantine-radius-sm);
    border: calc(0.0625rem * var(--mantine-scale)) solid;
    border-bottom-width: calc(0.1875rem * var(--mantine-scale));
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(kbd) {
      border-color: var(--mantine-color-gray-3);
      color: var(--mantine-color-gray-7);
      background-color: var(--mantine-color-gray-0);
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(kbd) {
      border-color: var(--mantine-color-dark-3);
      color: var(--mantine-color-dark-0);
      background-color: var(--mantine-color-dark-5);
}
  .m_d6493fad :where(code) {
    line-height: var(--mantine-line-height);
    padding: calc(0.0625rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
    border-radius: var(--mantine-radius-sm);
    font-family: var(--mantine-font-family-monospace);
    font-size: var(--mantine-font-size-xs);
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(code) {
      background-color: var(--mantine-color-gray-0);
      color: var(--mantine-color-black);
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(code) {
      background-color: var(--mantine-color-dark-5);
      color: var(--mantine-color-white);
}
  .m_d6493fad :where(ul, ol):not([data-type='taskList']) {
    margin-bottom: var(--mantine-spacing-md);
    -webkit-padding-start: var(--mantine-spacing-xl);
            padding-inline-start: var(--mantine-spacing-xl);
    list-style-position: outside;
  }
  .m_d6493fad :where(table) {
    width: 100%;
    border-collapse: collapse;
    caption-side: bottom;
    margin-bottom: var(--mantine-spacing-md);
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(table) {
      --table-border-color: var(--mantine-color-gray-3);
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(table) {
      --table-border-color: var(--mantine-color-dark-4);
}
  .m_d6493fad :where(table) :where(caption) {
      margin-top: var(--mantine-spacing-xs);
      font-size: var(--mantine-font-size-sm);
      color: var(--mantine-color-dimmed);
    }
  .m_d6493fad :where(table) :where(th) {
      text-align: left;
      font-weight: bold;
      font-size: var(--mantine-font-size-sm);
      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    }
  .m_d6493fad :where(table) :where(thead th) {
      border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
      border-color: var(--table-border-color);
    }
  .m_d6493fad :where(table) :where(tfoot th) {
      border-top: calc(0.0625rem * var(--mantine-scale)) solid;
      border-color: var(--table-border-color);
    }
  .m_d6493fad :where(table) :where(td) {
      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
      border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
      border-color: var(--table-border-color);
      font-size: var(--mantine-font-size-sm);
    }
  .m_d6493fad :where(table) :where(tr:last-of-type td) {
      border-bottom: 0;
    }
  .m_d6493fad :where(blockquote) {
    font-size: var(--mantine-font-size-lg);
    line-height: var(--mantine-line-height);
    margin: var(--mantine-spacing-md) 0;
    border-radius: var(--mantine-radius-sm);
    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
  }
  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(blockquote) {
      background-color: var(--mantine-color-gray-0);
}
  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(blockquote) {
      background-color: var(--mantine-color-dark-8);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!../../node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!../../node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/styles/legacy.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* The old site's web fonts, from the top of globals.scss: font rules cannot sit inside the selector legacy.scss scopes it under. */
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u-w4BMUTPHjxsIPx-mPCLQ7A.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u-w4BMUTPHjxsIPx-oPCI.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2_FQft1dw.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u_w4BMUTPHjxsI9w2_Gwft.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAXC-q.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AUi-qJCY.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHh30AXC-q.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPGQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Input colors */
/* Font sizes */
:where(body:has(.aor-legacy-page)) {
  /* Input colors */
  /* Font sizes */
}
:where(body:has(.aor-legacy-page)) html,
:where(body:has(.aor-legacy-page)) body {
  padding: 0;
  margin: 0;
}
:where(body:has(.aor-legacy-page)) body {
  background: linear-gradient(to bottom, black 0%, #111216 50%), #111216;
  background-attachment: fixed;
  font-size: 16px !important;
  font-family: Lato, "DM Mono", Calibri;
  color: #e8e6ee !important;
  height: 100vh;
}
:where(body:has(.aor-legacy-page)) .fake-background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9333333333) 0%, transparent 45%), url("/images/wood_bg.jpg");
  opacity: 0.8;
  background-size: cover;
}
:where(body:has(.aor-legacy-page)) h1 {
  font-size: 2em !important;
}
:where(body:has(.aor-legacy-page)) h1,
:where(body:has(.aor-legacy-page)) h2,
:where(body:has(.aor-legacy-page)) h3,
:where(body:has(.aor-legacy-page)) h4,
:where(body:has(.aor-legacy-page)) h5,
:where(body:has(.aor-legacy-page)) h6 {
  font-weight: 500 !important;
  margin: 0 !important;
  color: #f6f7fa;
}
:where(body:has(.aor-legacy-page)) a {
  color: inherit;
  text-decoration: none;
}
:where(body:has(.aor-legacy-page)) .padding {
  padding: 8px;
}
:where(body:has(.aor-legacy-page)) .padding-left {
  padding-left: 8px;
}
:where(body:has(.aor-legacy-page)) .padding-right {
  padding-right: 8px;
}
:where(body:has(.aor-legacy-page)) .padding-top {
  padding-top: 8px;
}
:where(body:has(.aor-legacy-page)) .padding-bottom {
  padding-bottom: 8px;
}
:where(body:has(.aor-legacy-page)) * {
  box-sizing: border-box;
}
:where(body:has(.aor-legacy-page)) .relative {
  position: relative;
}
:where(body:has(.aor-legacy-page)) .flex-row, :where(body:has(.aor-legacy-page)) .center-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
:where(body:has(.aor-legacy-page)) .flex-col {
  display: flex;
  flex-direction: column;
}
:where(body:has(.aor-legacy-page)) .justify-center, :where(body:has(.aor-legacy-page)) .center-flex {
  justify-content: center;
  -webkit-justify-content: center;
}
:where(body:has(.aor-legacy-page)) .justify-end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
:where(body:has(.aor-legacy-page)) .align-baseline {
  align-items: baseline;
}
:where(body:has(.aor-legacy-page)) .align-center, :where(body:has(.aor-legacy-page)) .center-flex {
  align-items: center;
}
:where(body:has(.aor-legacy-page)) .full-flex {
  flex: 1 1;
}
:where(body:has(.aor-legacy-page)) .full-height {
  height: 100%;
}
:where(body:has(.aor-legacy-page)) .full-width {
  width: 100%;
  box-sizing: border-box;
}
:where(body:has(.aor-legacy-page)) .row-gap {
  row-gap: 8px;
}
:where(body:has(.aor-legacy-page)) .row-gap-2 {
  row-gap: 16px;
}
:where(body:has(.aor-legacy-page)) .col-gap {
  column-gap: 8px;
}
:where(body:has(.aor-legacy-page)) .col-gap-2 {
  column-gap: 16px;
}
:where(body:has(.aor-legacy-page)) .layout {
  width: 90%;
  margin: 0 auto;
}
:where(body:has(.aor-legacy-page)) .radius {
  border-radius: 8px;
}
:where(body:has(.aor-legacy-page)) .margin-right {
  margin-right: 8px;
}
:where(body:has(.aor-legacy-page)) .margin-right-2 {
  margin-right: 16px;
}
:where(body:has(.aor-legacy-page)) .margin-left {
  margin-left: 8px;
}
:where(body:has(.aor-legacy-page)) .margin-top {
  margin-top: 8px;
}
:where(body:has(.aor-legacy-page)) .margin-top-2 {
  margin-top: 16px;
}
:where(body:has(.aor-legacy-page)) .margin-bottom {
  margin-bottom: 8px;
}
:where(body:has(.aor-legacy-page)) .margin-bottom-2 {
  margin-bottom: 16px;
}
:where(body:has(.aor-legacy-page)) .margin {
  margin: 8px;
}
:where(body:has(.aor-legacy-page)) .margin-2 {
  margin: 16px;
}
:where(body:has(.aor-legacy-page)) .noselect {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
:where(body:has(.aor-legacy-page)) {
  /** BUTTONS **/
}
:where(body:has(.aor-legacy-page)) button.empty {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
:where(body:has(.aor-legacy-page)) .pointer {
  cursor: pointer;
}
:where(body:has(.aor-legacy-page)) .wood-input-shadow {
  background: #170f09 !important;
  border: 1px solid #7c5645 !important;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6666666667);
}
:where(body:has(.aor-legacy-page)) select,
:where(body:has(.aor-legacy-page)) .mantine-Select-input,
:where(body:has(.aor-legacy-page)) .mantine-MultiSelect-input,
:where(body:has(.aor-legacy-page)) .mantine-Drawer-content {
  color: #fff !important;
  padding: 8px;
  border-radius: 4px !important;
  background: #170f09 !important;
  border: 1px solid #7c5645 !important;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6666666667);
  outline: none !important;
  font-size: 16px;
}
:where(body:has(.aor-legacy-page)) input {
  /** Force 16px otherwise iOS zooms in */
  font-size: 16px !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Drawer-header {
  background: transparent !important;
  border-bottom: 1px solid #7c5645;
}
:where(body:has(.aor-legacy-page)) .mantine-Tabs-tab[aria-selected=true] {
  border-color: orange;
  color: orange;
}
:where(body:has(.aor-legacy-page)) .mantine-Checkbox-input {
  background-color: #333 !important;
  border: 1px solid #555 !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Checkbox-label {
  cursor: pointer !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Checkbox-input:checked {
  background-color: #0a6 !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Checkbox-body {
  cursor: pointer !important;
}
:where(body:has(.aor-legacy-page)) .popover-option {
  border-radius: 8px;
}
:where(body:has(.aor-legacy-page)) .mantine-Combobox-option:hover,
:where(body:has(.aor-legacy-page)) .popover-option:hover {
  background-color: rgba(0, 170, 255, 0.3333333333);
}
:where(body:has(.aor-legacy-page)) .mantine-Popover-dropdown,
:where(body:has(.aor-legacy-page)) .mantine-Menu-dropdown {
  background: #170f09 !important;
  border: 1px solid #7c5645 !important;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6666666667);
  padding-left: 4px;
}
:where(body:has(.aor-legacy-page)) .mantine-Popover-dropdown .mantine-Select-option:hover,
:where(body:has(.aor-legacy-page)) .mantine-Menu-dropdown .mantine-Select-option:hover {
  background-color: rgba(0, 170, 255, 0.3333333333);
}
:where(body:has(.aor-legacy-page)) .mantine-Popover-dropdown .mantine-Select-option[data-checked=true],
:where(body:has(.aor-legacy-page)) .mantine-Menu-dropdown .mantine-Select-option[data-checked=true] {
  background-color: #262016;
}
:where(body:has(.aor-legacy-page)) .mantine-Popover-dropdown .mantine-Select-groupLabel,
:where(body:has(.aor-legacy-page)) .mantine-Menu-dropdown .mantine-Select-groupLabel {
  color: orange;
}
:where(body:has(.aor-legacy-page)) .mantine-Popover-dropdown .mantine-Select-groupLabel::after,
:where(body:has(.aor-legacy-page)) .mantine-Menu-dropdown .mantine-Select-groupLabel::after {
  background-color: #444;
}
:where(body:has(.aor-legacy-page)) .mantine-Popover-dropdown.color-picker-popover,
:where(body:has(.aor-legacy-page)) .mantine-Menu-dropdown.color-picker-popover {
  background: #170f09 !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6666666667);
}
:where(body:has(.aor-legacy-page)) .mantine-ColorSwatch-childrenOverlay {
  cursor: pointer;
}
:where(body:has(.aor-legacy-page)) .mantine-Switch-track {
  border: 1px solid #333 !important;
}
:where(body:has(.aor-legacy-page)) select:focus {
  border: 1px solid #0af;
}
:where(body:has(.aor-legacy-page)) option {
  padding: 8px;
}
:where(body:has(.aor-legacy-page)) select option {
  background-color: black !important;
  padding: 8px;
  border-radius: 0;
  font-size: 16px;
  height: 16px !important;
}
:where(body:has(.aor-legacy-page)) hr {
  background-color: #212629;
  height: 1px;
  border: 0;
  width: 100%;
  border-top: 2px solid black;
  text-align: left;
}
:where(body:has(.aor-legacy-page)) .page-title {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 300;
}
:where(body:has(.aor-legacy-page)) .text-center {
  text-align: center;
}
:where(body:has(.aor-legacy-page)) .capitalize {
  text-transform: capitalize;
}
:where(body:has(.aor-legacy-page)) .dark-text {
  color: #888 !important;
  text-shadow: 0px 0px 3px black;
}
:where(body:has(.aor-legacy-page)) .accent-text {
  color: orange;
}
:where(body:has(.aor-legacy-page)) .light-blue-accent {
  color: #76c1e7;
}
:where(body:has(.aor-legacy-page)) .blue-accent {
  color: #0af;
}
:where(body:has(.aor-legacy-page)) .red-accent {
  color: #f53900;
}
:where(body:has(.aor-legacy-page)) .dark-red-accent {
  color: maroon;
}
:where(body:has(.aor-legacy-page)) .orange-accent {
  color: orange;
}
:where(body:has(.aor-legacy-page)) .green-accent {
  color: #0a6;
}
:where(body:has(.aor-legacy-page)) .purple-accent {
  color: rgb(190, 106, 190);
}
:where(body:has(.aor-legacy-page)) .italic {
  font-style: italic;
}
:where(body:has(.aor-legacy-page)) .tooltip-text {
  color: #e8e6ee;
}
:where(body:has(.aor-legacy-page)) .content-section,
:where(body:has(.aor-legacy-page)) .content-section-no-header {
  background-color: rgba(4, 11, 13, 0.5333333333);
  padding: 8px;
  margin-top: 2rem;
  border-radius: 4px;
  color: rgba(204, 204, 204, 0.9333333333) !important;
  position: relative;
  border: 1px solid rgba(51, 51, 51, 0.5333333333);
  padding: 16px;
  padding-right: 8px;
}
:where(body:has(.aor-legacy-page)) .content-section > h1,
:where(body:has(.aor-legacy-page)) .content-section > h2,
:where(body:has(.aor-legacy-page)) .content-section > h3,
:where(body:has(.aor-legacy-page)) .content-section-no-header > h1,
:where(body:has(.aor-legacy-page)) .content-section-no-header > h2,
:where(body:has(.aor-legacy-page)) .content-section-no-header > h3 {
  color: orange;
}
:where(body:has(.aor-legacy-page)) .ad-unit {
  margin-top: 8px;
  margin-bottom: 8px;
}
:where(body:has(.aor-legacy-page)) .content-section > h1,
:where(body:has(.aor-legacy-page)) .content-section > h2,
:where(body:has(.aor-legacy-page)) .content-section > h3 {
  color: #0af;
  position: absolute;
  top: -16px;
  left: 8px;
}
:where(body:has(.aor-legacy-page)) .content-section > h1 {
  top: -28px;
}
:where(body:has(.aor-legacy-page)) {
  /** FORM **/
}
:where(body:has(.aor-legacy-page)) input,
:where(body:has(.aor-legacy-page)) .mantine-TextInput-root input,
:where(body:has(.aor-legacy-page)) .mantine-Input-input input,
:where(body:has(.aor-legacy-page)) .fake-input {
  padding: 0.75rem;
  padding-left: 32px;
  background-color: #170f09 !important;
  color: #e8e6ee;
  font: 16px Lato, "DM Mono";
  border: 0 !important;
  outline: 0;
  box-sizing: border-box;
  transition: all 0.25s ease;
  border-bottom: 1px solid #7c5645 !important;
}
:where(body:has(.aor-legacy-page)) .no-padding-left,
:where(body:has(.aor-legacy-page)) .no-padding-left input {
  padding-left: 0;
}
:where(body:has(.aor-legacy-page)) .fake-input {
  border-radius: 4px;
  padding: 0.5rem;
  padding-left: 8px;
  color: #c9c9c9 !important;
}
:where(body:has(.aor-legacy-page)) .darker input {
  background-color: #060402 !important;
}
:where(body:has(.aor-legacy-page)) input:focus {
  border-bottom: 1px solid orange;
}
:where(body:has(.aor-legacy-page)) {
  /** Mantine **/
}
:where(body:has(.aor-legacy-page)) .mantine-Modal-content {
  max-height: calc(100vh - (100vh - 100%)) !important;
  height: 100% !important;
  background-color: rgba(15, 21, 25, 0.8) !important;
  border: 1px solid rgba(51, 51, 51, 0.4666666667);
  width: 100%;
  border: 1px solid #1a252d !important;
  box-shadow: 0px 0px 16px 8px #000 !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Overlay-root {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
:where(body:has(.aor-legacy-page)) .mantine-InputWrapper-label {
  color: #777;
}
:where(body:has(.aor-legacy-page)) .mantine-InputWrapper-description {
  color: #666;
}
:where(body:has(.aor-legacy-page)) .custom-dropdown-input button {
  background: linear-gradient(to bottom, black, #333) !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Table-tr {
  border-bottom: 1px solid rgba(51, 51, 51, 0.4666666667) !important;
}
:where(body:has(.aor-legacy-page)) .mantine-Tooltip-tooltip {
  background-color: rgba(17, 17, 17, 0.9333333333) !important;
  color: #ccc !important;
  border: 1px solid rgba(51, 51, 51, 0.6666666667);
  box-shadow: 0px 0px 8px 2px #000 !important;
}
:where(body:has(.aor-legacy-page)) {
  /** Banner */
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner .ncmp__btn-border {
  background-color: #111 !important;
  color: #0af !important;
  border-color: #0af !important;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner .ncmp__language span {
  color: #aaa !important;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner p {
  color: #aaa !important;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner p strong {
  color: orange;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner {
  background-color: #222;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner .ncmp__banner-actions {
  background-color: #222;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner .ncmp__banner-info {
  background-color: #222;
}
:where(body:has(.aor-legacy-page)) .ncmp__banner-inner .ncmp__banner-info h2 {
  color: #0af;
}
:where(body:has(.aor-legacy-page)) {
  /* animations */
}
:where(body:has(.aor-legacy-page)) .logo-container {
  display: inline-block;
  transition: transform 0.3s ease;
  animation: none;
}
:where(body:has(.aor-legacy-page)) .logo-container:hover {
  animation: roll 8s ease-in-out infinite;
}
@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
:where(body:has(.aor-legacy-page)) {
  /** Ads */
}
:where(body:has(.aor-legacy-page)) .na-anchor-bottom {
  background: rgba(0, 0, 0, 0.9333333333) !important;
}
@media (max-width: 640px) {
  :where(body:has(.aor-legacy-page)) .partners {
    justify-content: center;
  }
  :where(body:has(.aor-legacy-page)) .logo-container > img {
    max-width: 280px !important;
  }
}

:where(body:has(.aor-legacy-page)) {
  font-size: 16px !important;
  font-family: Lato, "DM Mono", Calibri;
  color: #e8e6ee !important;
}