/* ── react-datepicker@9.1.0 — node_modules/react-datepicker/dist/react-datepicker.css ── */
@charset "UTF-8";
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
  border-top: 1px solid #aeaeae;
  border-radius: 0;
  margin-top: 4px;
}
.react-datepicker__header--bottom {
  border-bottom: none;
  border-top: 1px solid #aeaeae;
  border-radius: 0 0 0.3rem 0.3rem;
}

.react-datepicker__header-wrapper {
  position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 2px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
  background-color: transparent;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-top: 5px;
  padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
  outline: auto 1px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.375em;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 2.125em / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
  color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.625em;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__children-container {
  width: 17.25em;
  margin: 0.5em;
  padding-right: 0.25em;
  padding-left: 0.25em;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.react-datepicker-popper-offset {
  margin-top: -0.7em;
}


.invite-datepicker-popper {
  z-index: 50;
}

.react-datepicker-wrapper,
.react-datepicker__input-container {
  display: block;
  width: 100%;
}

.invite-datepicker-popper .react-datepicker {
  overflow: hidden;
  border: 1px solid rgba(116, 139, 180, 0.25);
  border-radius: 12px;
  background: #0d162b;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.invite-datepicker-popper .react-datepicker__header {
  border-bottom: 1px solid rgba(116, 139, 180, 0.18);
  background: #141f38;
}

.invite-datepicker-popper .react-datepicker__current-month,
.invite-datepicker-popper .react-datepicker-time__header,
.invite-datepicker-popper .react-datepicker-year-header {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.invite-datepicker-popper .react-datepicker__day-name,
.invite-datepicker-popper .react-datepicker__day {
  color: #a9b8d3;
  font-weight: 800;
}

.invite-datepicker-popper .react-datepicker__day:hover {
  border-radius: 8px;
  background: rgba(31, 144, 241, 0.18);
  color: #fff;
}

.invite-datepicker-popper .react-datepicker__day--selected,
.invite-datepicker-popper .react-datepicker__day--keyboard-selected {
  border-radius: 8px;
  background: linear-gradient(180deg, #2aa0ff, #147edb);
  color: #fff;
}

.invite-datepicker-popper .react-datepicker__day--outside-month {
  color: rgba(137, 153, 185, 0.32);
}

.invite-datepicker-popper .react-datepicker__navigation-icon::before {
  border-color: #a9b8d3;
}

.invite-datepicker-popper .react-datepicker__triangle {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fx-page {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--page);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fx-page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.deposit-page,
.withdraw-page {
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.deposit-page::-webkit-scrollbar,
.withdraw-page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.fx-phone {
  position: relative;
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 18px 66px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    var(--phone);
  overflow: visible;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0 -18px 8px;
  padding: 0 18px 1px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    var(--phone);
  box-shadow: 0 10px 22px rgba(5, 11, 24, 0.2);
}

.sticky-header .site-header {
  margin-bottom: 8px;
}

.install-banner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 88px 80px 34px;
  align-items: center;
  gap: 9px;
  height: 62px;
  margin: 0 -18px 8px;
  padding: 7px 20px;
  background: #182137;
}

.install-banner img {
  border-radius: 9px;
}

.install-banner strong {
  color: #fff;
  font-size: 14px;
  line-height: 18px;
}

.gift-box {
  display: grid;
  place-items: center;
  height: 48px;
  color: #ffcf31;
  background:
    radial-gradient(circle at 48% 50%, rgba(255, 212, 52, 0.22), transparent 28%),
    radial-gradient(circle, rgba(0, 139, 255, 0.38), transparent 62%);
}

.install-banner > button:not(.install-banner-close) {
  height: 32px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(#2fa9ff, #1479d5);
  font-weight: 700;
}

.install-banner-close {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.035);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.install-banner-close:hover {
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.install-banner-close:active {
  transform: scale(0.94);
}

.install-banner-close svg {
  display: block;
}

.app-install-prompt-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 22px 14px;
  overflow-y: auto;
  background: rgba(3, 7, 15, 0.78);
  backdrop-filter: blur(4px);
}

.app-install-prompt {
  position: relative;
  width: min(100%, 486px);
  overflow: hidden;
  border-radius: 18px;
  color: #05070b;
  background: #fff;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.44);
}

.app-install-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #2f343d;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.app-install-hero {
  position: relative;
  display: grid;
  min-height: 144px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 245, 190, 0.98), transparent 35%),
    radial-gradient(circle at 83% 35%, rgba(255, 184, 48, 0.55), transparent 22%),
    radial-gradient(circle at 19% 60%, rgba(255, 220, 85, 0.48), transparent 23%),
    linear-gradient(180deg, #fff7d8, #fff);
}

.app-install-hero::before,
.app-install-hero::after {
  position: absolute;
  content: "";
  border-radius: 999px;
  background: rgba(255, 195, 50, 0.72);
  box-shadow:
    72px 28px 0 rgba(255, 214, 77, 0.65),
    136px -10px 0 rgba(255, 182, 47, 0.46),
    236px 24px 0 rgba(255, 213, 90, 0.54);
}

.app-install-hero::before {
  left: 24px;
  bottom: 24px;
  width: 28px;
  height: 28px;
}

.app-install-hero::after {
  right: 54px;
  top: 28px;
  width: 18px;
  height: 18px;
  transform: rotate(12deg);
}

.app-install-hero span {
  position: absolute;
  top: 15px;
  left: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: #ffd98a;
  font-size: 18px;
  font-weight: 900;
}

.app-install-hero img {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  transform: translateY(14px) scale(1.12);
}

.app-install-body {
  position: relative;
  z-index: 2;
  padding: 26px 30px 34px;
  background: #fff;
}

.app-install-body h3 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}

.app-install-body > p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 22px;
}

.app-install-body > p strong {
  color: #ff8a00;
}

.app-install-product {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  margin-bottom: 20px;
  padding: 7px 10px;
  border-radius: 7px;
  background: #f1f1f1;
}

.app-install-product img {
  border-radius: 13px;
}

.app-install-product span {
  font-size: 20px;
  line-height: 24px;
}

.app-install-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.app-install-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}

.app-install-actions button:first-child {
  gap: clamp(42px, 16vw, 92px);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #64c72c, #27820d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 5px 10px rgba(24, 110, 7, 0.36);
  font-size: 16px;
  font-weight: 900;
}

.app-install-actions button:last-child {
  border-radius: 50%;
  color: #6a6d75;
  background: #f3f3f3;
}

.app-install-actions button:last-child svg {
  color: #6a6d75;
}

.app-install-copy h4 {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 22px;
}

.app-install-copy ol {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 20px;
}

.app-install-warning {
  padding: 9px 13px;
  border-radius: 6px;
  background: #f2f2f2;
}

.app-install-warning strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.app-install-warning strong::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  border-radius: 50%;
  color: #fff;
  background: #05070b;
  font-size: 10px;
}

.app-install-warning p {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.site-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  height: 55px;
  margin-bottom: 8px;
}

.hamburger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: transparent;
}

.site-logo {
  width: 210px;
  height: auto;
  object-fit: contain;
}

.site-logo-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  text-decoration: none;
}

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

.header-actions button {
  height: 30px;
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.login {
  width: 67px;
  background: linear-gradient(#28a9ff, #0972ca);
}

.register {
  width: 80px;
  background: var(--green);
}

/* Ações do header quando o jogador está logado */
.header-deposit {
  display: grid;
  place-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: var(--green);
  text-decoration: none;
}

.header-profile {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  color: #fff;
  text-decoration: none;
}

.search {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  color: #fff;
  background: transparent;
  text-decoration: none;
}

.home-sidebar-layer {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

.home-sidebar-layer.is-open {
  pointer-events: auto;
}

.home-sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 18, 0.56);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 180ms ease;
  visibility: hidden;
}

.home-sidebar-layer.is-open .home-sidebar-backdrop {
  opacity: 1;
  visibility: visible;
}

.home-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - 520px) / 2));
  width: min(260px, 82vw);
  padding: 17px 12px 26px;
  overflow-y: auto;
  color: #fff;
  background:
    radial-gradient(circle at 34% 0%, rgba(31, 144, 241, 0.14), transparent 28%),
    linear-gradient(180deg, #071225, #050b18);
  box-shadow: 18px 0 34px rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(calc(-100% - 24px), 0, 0);
  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: none;
}

.home-sidebar::-webkit-scrollbar {
  display: none;
}

.home-sidebar-layer.is-open .home-sidebar {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.home-sidebar-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.home-sidebar-top button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.home-sidebar-top img {
  width: 142px;
  height: auto;
  object-fit: contain;
}

.home-sidebar-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-sidebar-categories button,
.home-sidebar-categories a {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 70px;
  padding: 8px 4px;
  border-radius: 10px;
  color: #8b98ae;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  background: #151d31;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 18px rgba(0, 0, 0, 0.12);
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.home-sidebar-categories button:hover,
.home-sidebar-categories a:hover {
  color: #fff;
  background: #1b263f;
  transform: translateY(-1px);
}

.home-sidebar-categories button svg,
.home-sidebar-categories a svg {
  color: #fff;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}

.home-sidebar-categories a img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.home-sidebar-categories .home-sidebar-category-emoji {
  font-size: 24px;
  line-height: 1;
}

.home-sidebar-language {
  grid-column: 1 / -1;
}

.home-sidebar-categories .language {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  justify-items: start;
  min-height: 48px;
  padding: 0 13px;
  color: #d7e6ff;
  background: linear-gradient(180deg, #1c7fd2, #126dba);
}

.home-sidebar-categories .language strong {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.16);
}

.home-sidebar-records {
  display: grid;
  place-items: center;
  min-height: 52px;
  margin: 10px 2px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, #2fa8ff, #1481d9);
  box-shadow: 0 10px 20px rgba(20, 129, 217, 0.2);
}

.home-sidebar-promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.home-sidebar-promos button,
.home-sidebar-promos a {
  position: relative;
  display: block;
  min-height: 94px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 0.98;
  text-align: center;
  text-decoration: none;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.42),
    0 3px 8px rgba(0, 0, 0, 0.32);
  background: linear-gradient(135deg, #ffb035, #f04f4f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 9px 15px rgba(0, 0, 0, 0.18);
  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.home-sidebar-promos button::after,
.home-sidebar-promos a::after {
  display: none;
}

.home-sidebar-promo-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 180ms ease;
}

.home-sidebar-promos span {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 28px;
  padding: 3px 4px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(8, 13, 28, 0), rgba(8, 13, 28, 0.62));
}

.home-sidebar-promos button::before,
.home-sidebar-promos a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%),
    linear-gradient(180deg, transparent 48%, rgba(3, 8, 20, 0.62) 100%);
}

.home-sidebar-promos button:hover,
.home-sidebar-promos a:hover {
  transform: translateY(-1px);
}

.home-sidebar-promos button:hover .home-sidebar-promo-art,
.home-sidebar-promos a:hover .home-sidebar-promo-art {
  transform: scale(1.08);
}

.home-sidebar-promos .emerald {
  background: linear-gradient(135deg, #3cc3bd, #177b55);
}

.home-sidebar-promos .gold {
  background: linear-gradient(135deg, #ffe16a, #ff6c28);
}

.home-sidebar-promos .green {
  background: linear-gradient(135deg, #64d96a, #07884a);
}

.home-sidebar-promos .blue {
  background: linear-gradient(135deg, #128cff, #063c8f);
}

.home-sidebar-promos .orange {
  background: linear-gradient(135deg, #ffda4a, #f06724);
}

.home-sidebar-support {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 21px 4px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.home-sidebar-support svg {
  color: #fff;
}

.home-sidebar-support small {
  position: absolute;
  top: 0;
  left: 23px;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  background: #ff1f2f;
}

.home-sidebar-wallet {
  display: grid;
  grid-template-columns: 24px 1fr 24px 24px;
  gap: 8px;
  align-items: center;
  margin: 0 4px;
  padding: 10px;
  border-radius: 10px;
  color: #91a0ba;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.04);
}

.home-language-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 24px;
}

.home-language-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(7px);
}

.home-language-modal {
  position: relative;
  z-index: 1;
  width: min(414px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  color: #fff;
  background: #232323;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.46);
}

.home-language-modal h2 {
  margin: 0;
  padding: 17px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.home-language-options {
  padding: 0 14px;
}

.home-language-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  width: 100%;
  min-height: 55px;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-align: left;
  background: transparent;
}

.home-language-options button:last-child {
  border-bottom: 0;
}

.home-language-options button:hover {
  background: rgba(255, 255, 255, 0.04);
}

.home-language-options svg {
  color: #ff2935;
  filter: drop-shadow(0 2px 5px rgba(255, 35, 51, 0.34));
}

.home-language-options i {
  display: block;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.home-language-modal-close {
  position: absolute;
  z-index: 2;
  top: calc(50% + 116px);
  left: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: rgba(35, 35, 35, 0.62);
  transform: translateX(-50%);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.home-language-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: 136px;
  background: rgba(3, 8, 18, 0.76);
  backdrop-filter: blur(8px);
}

.auth-modal-bar {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 16px;
  width: min(calc(100% - 64px), 444px);
  height: 44px;
  transform: translateX(-50%);
}

.auth-logo {
  display: block;
  width: 154px;
  height: auto;
  justify-self: start;
  object-fit: contain;
}

.auth-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
    rgba(11, 18, 32, 0.58);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.32);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.auth-close:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)),
    rgba(20, 30, 48, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 28px rgba(0, 0, 0, 0.38);
}

.auth-close:active {
  transform: scale(0.94);
}

.auth-close svg {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.register-modal {
  width: min(calc(100% - 36px), 500px);
  max-height: calc(100vh - 136px);
  padding: 22px 20px 28px;
  overflow-y: auto;
  border-top: 1px solid #138df2;
  border-radius: 24px 24px 0 0;
  background: #0f172b;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.4);
}

/*
 * Barra de rolagem do modal de autenticação.
 *
 * Mesmo vocabulário do seletor de país (.casino-country-options), que vive
 * dentro deste mesmo diálogo — duas barras visíveis ao mesmo tempo com
 * estilos diferentes seria incoerente. Muda só o que o contexto pede: aqui
 * ela percorre um modal alto, então vem mais estreita e sem trilho, para não
 * desenhar uma segunda linha vertical ao lado da borda azul do topo, que é a
 * assinatura do modal.
 */
.register-modal {
  scrollbar-color: rgba(109, 120, 144, 0.6) transparent;
  scrollbar-width: thin;
}

.register-modal::-webkit-scrollbar {
  width: 10px;
}

.register-modal::-webkit-scrollbar-track {
  background: transparent;
  /* Livra o canto arredondado de 24px do topo. */
  margin: 24px 0 12px;
}

.register-modal::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(109, 120, 144, 0.6);
  /* Afina o polegar sem estreitar a área de clique. */
  background-clip: padding-box;
  transition: background-color 160ms ease;
}

.register-modal::-webkit-scrollbar-thumb:hover {
  background: #6d7890;
  background-clip: padding-box;
}

.register-modal-head {
  margin-bottom: 26px;
}

.login-modal .register-modal-head {
  margin-bottom: 62px;
}

.register-modal-head h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 36px;
  line-height: 40px;
}

.register-modal-head p {
  margin: 0;
  color: #79859b;
  font-size: 18px;
  font-weight: 700;
}

.register-modal-head button,
.terms-row button {
  color: #ffc526;
  background: transparent;
  font: inherit;
  font-weight: 800;
}

.register-form {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 0 18px;
  border: 1px solid rgba(83, 104, 143, 0.35);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.field.invalid {
  border-color: rgba(255, 83, 94, 0.58);
}

.field.auth-field-error {
  border-color: rgba(255, 83, 94, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 83, 94, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.field:has(.casino-phone-number) {
  gap: 0;
  padding: 0;
}

.field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 18px;
}

.field input::placeholder {
  color: #5f6a80;
}

.casino-phone-number.PhoneInput {
  --PhoneInput-color--focus: #2c9dff;
  --PhoneInputCountryFlag-height: 18px;
  --PhoneInputCountryFlag-borderColor: rgba(255, 255, 255, 0.2);
  --PhoneInputCountrySelectArrow-color: #91a0bb;
  --PhoneInputCountrySelectArrow-opacity: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  width: 100%;
  height: 64px;
  min-height: 64px;
  align-items: stretch;
  color: #fff;
  font-family: inherit;
}

.casino-country-cell {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  min-height: 64px;
  border-right: 1px solid rgba(83, 104, 143, 0.38);
}

.casino-country-trigger {
  display: grid;
  grid-template-columns: 22px auto 10px;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
  width: 100%;
  height: 100%;
  min-height: 64px;
  padding: 0 8px;
  color: #fff;
  background: transparent;
  line-height: 16px;
  transition: background 150ms ease;
}

.casino-country-trigger:hover,
.casino-country-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.045);
}

.casino-country-trigger .PhoneInputCountryIcon,
.casino-country-options .PhoneInputCountryIcon {
  align-self: center;
  overflow: hidden;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  box-shadow: none;
}

.casino-country-trigger .PhoneInputCountryIconImg,
.casino-country-options .PhoneInputCountryIconImg {
  display: block;
  width: 100%;
  height: 100%;
}

.casino-country-trigger span {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 16px;
  transform: translateY(1px);
}

.casino-country-trigger svg {
  display: block;
  align-self: center;
  color: #91a0bb;
  transform: translateY(1px);
}

.casino-phone-number .PhoneInputInput {
  display: block;
  width: 100%;
  min-width: 0;
  height: 64px;
  border: 0;
  outline: 0;
  padding: 1px 16px 0;
  color: #fff;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 64px;
}

.casino-phone-number .PhoneInputInput::placeholder {
  color: #5f6a80;
  font-weight: 500;
}

.casino-country-dialog {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 24px;
  background: rgba(3, 8, 18, 0.48);
  backdrop-filter: blur(2px);
}

.casino-country-card {
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 48px));
  max-height: min(460px, calc(100vh - 96px));
  padding: 10px;
  border: 1px solid rgba(86, 113, 159, 0.44);
  border-radius: 14px;
  background: linear-gradient(180deg, #162139, #0b1224);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.casino-country-search {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(86, 113, 159, 0.45);
  border-radius: 9px;
  outline: 0;
  padding: 0 12px;
  color: #fff;
  background: rgba(7, 13, 28, 0.9);
  font-size: 14px;
  font-weight: 700;
}

.casino-country-search::placeholder {
  color: #71809c;
}

.casino-country-options {
  display: grid;
  gap: 2px;
  max-height: min(360px, calc(100vh - 180px));
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-color: #6d7890 rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

.casino-country-options::-webkit-scrollbar {
  width: 8px;
}

.casino-country-options::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.casino-country-options::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #6d7890;
}

.casino-country-options button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #ecf4ff;
  background: transparent;
  text-align: left;
  transition:
    background 140ms ease,
    transform 140ms ease;
}

.casino-country-options button:hover,
.casino-country-options button.selected {
  background: rgba(55, 126, 210, 0.25);
}

.casino-country-options button:active {
  transform: scale(0.99);
}

.casino-country-options button span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.casino-country-options button strong {
  color: #8dc3ff;
  font-size: 13px;
  font-weight: 900;
}

.field-eye {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #8994aa;
  background: transparent;
}

.auth-error-notice {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: fit-content;
  max-width: min(100%, 320px);
  margin: -4px 0 -2px;
  padding: 13px 16px 14px;
  border-radius: 6px;
  color: #f4f6fb;
  background: rgba(25, 27, 33, 0.98);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}

.auth-error-notice::before {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  content: "";
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 30px;
  color: #8c96aa;
  font-size: 14px;
  font-weight: 800;
}

.login-options label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.login-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2b9dff;
}

.login-options span {
  white-space: nowrap;
}

.login-options button {
  min-width: 0;
  color: #8c96aa;
  background: transparent;
  font: inherit;
  text-align: right;
  white-space: nowrap;
}

.forgot-password-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 58px 20px 24px;
  border-radius: inherit;
  background: rgba(3, 7, 16, 0.68);
}

.forgot-password-card {
  width: min(100%, 406px);
  padding: 18px 20px 24px;
  border-radius: 12px;
  color: #fff;
  background: #11182d;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.38);
}

.forgot-password-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: start;
  gap: 16px;
}

.forgot-password-head h3 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 28px;
}

.forgot-password-head p,
.forgot-step-panel p {
  margin: 0;
  color: #8d96ab;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
}

.forgot-password-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: transparent;
}

.forgot-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  width: min(100%, 296px);
  margin: 48px auto 42px;
}

.forgot-steps > div {
  position: relative;
  display: grid;
  place-items: center;
}

.forgot-steps > div:not(:first-child)::before {
  position: absolute;
  right: 50%;
  width: 100%;
  height: 2px;
  content: "";
  background: #7d8597;
}

.forgot-steps > div.active:not(:first-child)::before,
.forgot-steps > div.complete:not(:first-child)::before {
  background: #2c97f5;
}

.forgot-steps span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #8a93a7;
  border-radius: 50%;
  color: #fff;
  background: #11182d;
  font-size: 16px;
  font-weight: 800;
}

.forgot-steps .active span,
.forgot-steps .complete span {
  border-color: transparent;
  background: linear-gradient(180deg, #38a9ff, #147bd5);
}

.forgot-step-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 36px;
}

.forgot-step-panel strong {
  color: #e6ebf5;
  font-size: 16px;
  line-height: 20px;
}

.forgot-step-panel .field {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.06);
}

.forgot-step-panel .casino-phone-number.PhoneInput,
.forgot-step-panel .casino-country-cell,
.forgot-step-panel .casino-country-trigger,
.forgot-step-panel .casino-phone-number .PhoneInputInput {
  height: 56px;
  min-height: 56px;
}

.forgot-code-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(83, 104, 143, 0.35);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.forgot-code-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 15px;
  color: #fff;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
}

.forgot-code-field input::placeholder {
  color: #717b91;
}

.forgot-code-field button {
  margin: 6px;
  border-radius: 5px;
  color: #fff;
  background: #1f82df;
  font-size: 16px;
  font-weight: 900;
}

.forgot-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #3298ec, #237bd1);
  font-size: 16px;
  font-weight: 900;
}

.forgot-confirm:disabled {
  cursor: not-allowed;
  color: rgba(210, 224, 244, 0.62);
  background: rgba(33, 103, 166, 0.62);
}

.register-form > small {
  margin-top: -7px;
  color: #ff6570;
  font-size: 12px;
}

.cloudflare-placeholder {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  margin: 2px 0 6px;
  padding: 12px 16px;
  color: #16233a;
  background: #fff;
}

.cloudflare-placeholder svg {
  color: #16a34a;
}

.cloudflare-placeholder strong {
  color: #101827;
  font-size: 16px;
}

.cloudflare-placeholder span {
  color: #ef7b20;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.terms-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 2px;
  color: #f3f7ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.terms-row input {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: #56b5ff;
}

.terms-row span {
  display: block;
  max-width: 100%;
}

.terms-row button {
  display: inline-flex;
  margin-left: 4px;
  color: #ffd33e;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.register-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
  min-height: 66px;
  margin-top: 24px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(105, 200, 255, 0.36);
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0, rgba(125, 238, 118, 0.55), transparent 34%),
    linear-gradient(145deg, #72f329 0%, #0eb8ef 58%, #0876d9 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    inset 0 -4px 0 rgba(0, 56, 130, 0.22),
    0 12px 28px rgba(5, 118, 217, 0.28);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  transition:
    filter 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.register-submit::before {
  position: absolute;
  inset: 5px;
  content: "";
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: inherit;
}

.register-submit:not(:disabled):hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -4px 0 rgba(0, 56, 130, 0.24),
    0 14px 32px rgba(5, 118, 217, 0.38);
}

.register-submit:not(:disabled):active {
  transform: translateY(1px);
}

.register-submit:disabled {
  cursor: not-allowed;
  color: rgba(188, 208, 238, 0.62);
  border-color: rgba(65, 116, 169, 0.36);
  background:
    linear-gradient(180deg, rgba(22, 72, 116, 0.92), rgba(15, 47, 82, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(4, 12, 28, 0.22);
}

.register-submit:disabled::before {
  opacity: 0;
}

.agreement-modal {
  position: fixed;
  top: 25vh;
  z-index: 4;
  width: min(calc(100% - 72px), 440px);
  padding: 24px 20px 26px;
  border-radius: 10px;
  color: #fff;
  background: #10182e;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.agreement-modal h3 {
  margin: 0 0 24px;
  font-size: 18px;
  text-align: center;
}

.agreement-copy {
  max-height: 330px;
  overflow-y: auto;
  padding-right: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.agreement-copy p {
  margin: 0 0 18px;
}

.agreement-modal > button:not(.agreement-close) {
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(#2fa9ff, #1479d5);
  font-size: 17px;
  font-weight: 900;
}

.agreement-close {
  position: absolute;
  right: 50%;
  bottom: -58px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.32);
  transform: translateX(50%);
}

.promo-stack {
  display: grid;
  gap: 9px;
  margin: 0 -12px;
  padding: 18px 8px 16px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    rgba(7, 16, 34, 0.75);
}

.promo-stack article {
  overflow: hidden;
  border-radius: 9px;
}

.promo-carousel {
  width: 100%;
  overflow: hidden;
  border-radius: 9px;
}

.promo-carousel .swiper-pagination {
  right: 12px;
  bottom: 7px;
  left: auto;
  width: auto;
}

.promo-carousel .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 3px !important;
  background: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.promo-carousel .swiper-pagination-bullet-active {
  width: 17px;
  border-radius: 999px;
  background: #ffdc52;
}

.brand-banner-carousel {
  padding: 10px 12px 0;
}

.brand-banner-link {
  display: block;
}

.brand-banner-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  object-fit: cover;
}

.telegram-promo {
  position: relative;
  min-height: 149px;
  padding: 23px 22px;
  background:
    radial-gradient(circle at 70% 45%, rgba(255, 232, 92, 0.36), transparent 19%),
    repeating-radial-gradient(circle at 25% 55%, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 6px),
    linear-gradient(110deg, #073a99, #071d65 45%, #0e65d9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.promo-theme-daily {
  background:
    radial-gradient(circle at 70% 45%, rgba(255, 232, 92, 0.34), transparent 19%),
    repeating-radial-gradient(circle at 25% 55%, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 6px),
    linear-gradient(110deg, #083987, #051955 45%, #005cc7);
}

.promo-theme-invite {
  background:
    radial-gradient(circle at 72% 52%, rgba(255, 211, 80, 0.38), transparent 22%),
    repeating-radial-gradient(circle at 25% 55%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 6px),
    linear-gradient(110deg, #1b3f9a, #0a246f 48%, #1f8aff);
}

.telegram-promo strong {
  display: block;
  max-width: 190px;
  color: #fff;
  font-size: 26px;
  line-height: 26px;
  text-shadow: 0 3px 0 rgba(15, 54, 140, 0.8);
}

.telegram-promo p {
  max-width: 230px;
  margin: 7px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
}

.promo-wheel {
  position: absolute;
  top: 7px;
  right: 91px;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border: 8px solid #ffd65c;
  border-radius: 50%;
  background:
    conic-gradient(#e63931 0 16%, #15a96d 16% 32%, #f1bd28 32% 48%, #e63931 48% 64%, #14a1da 64% 80%, #f1bd28 80% 100%);
  box-shadow: 0 0 18px rgba(255, 214, 92, 0.58);
}

.promo-wheel::before {
  position: absolute;
  inset: 32px;
  content: "";
  border-radius: 50%;
  background: #e73d2c;
  border: 5px solid #ffdc62;
}

.promo-wheel span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}

.promo-mascot {
  position: absolute;
  right: 16px;
  bottom: 8px;
  width: 98px;
  height: 112px;
  border-radius: 50% 50% 20% 20%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 67% 28%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 52% 55%, #ffdf72 0 22%, transparent 23%),
    linear-gradient(145deg, #fff, #ff8c33 70%);
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.35));
}

.promo-theme-daily .promo-mascot {
  background:
    radial-gradient(circle at 34% 28%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 67% 28%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 52% 55%, #ffdf72 0 22%, transparent 23%),
    linear-gradient(145deg, #fff, #c4a16c 58%, #f24f42 70%);
}

.promo-theme-invite .promo-mascot {
  background:
    radial-gradient(circle at 34% 28%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 67% 28%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 52% 55%, #ffe15f 0 22%, transparent 23%),
    linear-gradient(145deg, #fff, #38d67f 58%, #ff9b2f 70%);
}

.mini-promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.mini-promos article {
  position: relative;
  min-height: 61px;
  padding: 7px 11px;
  background:
    radial-gradient(circle at 82% 50%, rgba(255, 197, 34, 0.72), transparent 31%),
    linear-gradient(115deg, #16368f, #071950);
  box-shadow: inset 0 0 0 2px rgba(48, 134, 255, 0.65);
}

.mini-promos article svg {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #ffd34a;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}

.mini-promo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255, 255, 255, 0.24) 45%, transparent 56%);
  opacity: 0.7;
}

.mini-promos span {
  display: block;
  color: #fff;
  max-width: 112px;
  font-size: 13px;
  font-weight: 800;
  line-height: 15px;
  text-transform: uppercase;
}

.mini-promos strong {
  display: block;
  color: #ffdf38;
  font-size: 27px;
  line-height: 25px;
  text-shadow: 0 2px 0 #003c90;
}

.competition-promo {
  min-height: 58px;
  padding: 8px 16px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 58%, rgba(255, 255, 255, 0.85) 0 5%, transparent 18%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 9px),
    linear-gradient(90deg, #ff8d16, #ffdf25 32%, #e81876 62%, #ffcc24);
}

.competition-promo strong,
.competition-promo span {
  display: inline-block;
  color: #ffec48;
  font-size: 21px;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #a40025;
  text-shadow: 0 2px 0 #a40025;
}

.competition-promo span {
  margin-left: 14px;
}

.sound-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  margin: 0 -4px 16px;
  padding: 0 8px;
  border-radius: 2px;
  background: var(--panel);
  color: #fff;
}

.music-toggle {
  position: relative;
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 28px;
  padding: 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  background: transparent;
}

.music-toggle-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.music-toggle svg {
  position: relative;
  z-index: 4;
}

.music-orbit {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(103, 185, 255, 0.58);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
}

.music-wave {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(85, 191, 255, 0.38);
  border-radius: 50%;
  opacity: 0;
}

.music-bars {
  position: absolute;
  right: -7px;
  bottom: 3px;
  z-index: 3;
  display: inline-flex;
  align-items: end;
  gap: 1px;
  height: 13px;
}

.music-bars span {
  display: block;
  width: 2px;
  height: 4px;
  border-radius: 999px;
  background: #55bfff;
  box-shadow: 0 0 5px rgba(85, 191, 255, 0.8);
  transform-origin: center bottom;
}

.music-toggle.is-playing .music-toggle-icon {
  animation: music-icon-float 1150ms ease-in-out infinite;
}

.music-toggle.is-playing .music-orbit {
  opacity: 1;
  animation: music-orbit 1450ms linear infinite;
}

.music-toggle.is-playing .music-wave-one {
  animation: music-wave 1300ms ease-out infinite;
}

.music-toggle.is-playing .music-wave-two {
  animation: music-wave 1300ms ease-out 520ms infinite;
}

.music-toggle.is-playing .music-bars span {
  animation: music-bars 680ms ease-in-out infinite;
}

.music-toggle.is-playing .music-bars span:nth-child(2) {
  animation-delay: 90ms;
}

.music-toggle.is-playing .music-bars span:nth-child(3) {
  animation-delay: 180ms;
}

.music-toggle.is-playing .music-bars span:nth-child(4) {
  animation-delay: 270ms;
}

.music-toggle.is-playing .music-bars span:nth-child(5) {
  animation-delay: 360ms;
}

.music-toggle.is-paused {
  color: #8b96ad;
}

.music-toggle.is-paused .music-bars {
  opacity: 0.35;
}

.sound-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sound-marquee-track {
  width: 100%;
}

.sound-marquee-track span {
  display: inline-block;
  margin: 0;
  color: #e6eefb;
  font-size: 14px;
  font-weight: 700;
  line-height: 31px;
  white-space: nowrap;
  animation: sound-marquee 15s linear infinite;
  will-change: transform;
}

.sound-message-link {
  position: relative;
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 31px;
  color: #cfd8e8;
  text-decoration: none;
  border-radius: 8px;
  transition:
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.sound-message-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.sound-message-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #dbe6f7;
}

.sound-message-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ff2323;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 15px;
  font-style: normal;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.profile-page {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 58px 18px 118px;
  color: #fff;
}

.profile-hero-card,
.profile-vip-card,
.profile-menu {
  border: 1px solid rgba(88, 107, 150, 0.26);
  border-radius: 8px;
  background: #151e34;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.profile-hero-card {
  padding: 16px;
}

.profile-hero-top {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
  background: #0f172a;
}

.profile-user-info {
  min-width: 0;
}

.profile-user-info p,
.profile-user-info span,
.profile-user-info strong {
  display: flex;
  align-items: center;
  margin: 0;
  color: #f8fbff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.profile-user-info p {
  gap: 5px;
}

.profile-user-info span {
  color: #eef4ff;
}

.profile-user-info strong {
  gap: 11px;
  margin-top: 2px;
  font-size: 25px;
  line-height: 1;
}

.profile-user-info button,
.profile-mail {
  display: grid;
  place-items: center;
  border: 0;
  color: #dce7f8;
  cursor: pointer;
  background: transparent;
}

.profile-vip-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto;
  color: #aeb9cc !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.profile-vip-chip svg {
  color: #c7d2e6;
  font-size: 24px;
}

.profile-mail {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  text-decoration: none;
}

.profile-mail span {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid #151e34;
  border-radius: 999px;
  background: #ff2323;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 17px;
}

.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 32px;
}

.profile-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 49px;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.profile-actions .withdraw {
  background: #2b3556;
}

.profile-actions .deposit {
  background: linear-gradient(180deg, #19c86d, #18a95e);
}

.profile-vip-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 20px 14px;
  color: #fff;
  text-decoration: none;
}

.profile-vip-rank {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 82px;
  color: #c6cfdf;
}

.profile-vip-rank svg {
  font-size: 56px;
}

.profile-vip-rank span {
  position: absolute;
  right: 6px;
  bottom: 21px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #e8edf6;
  color: #63718a;
  font-size: 11px;
  font-weight: 900;
}

.profile-vip-content p {
  margin: 0 0 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.profile-vip-content b,
.profile-vip-content strong {
  color: #ffa51f;
}

.profile-vip-content div {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 9px 12px;
  align-items: center;
}

.profile-vip-content div span {
  grid-row: span 2;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.profile-vip-content i {
  display: block;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #596174;
}

.profile-vip-content i em {
  display: block;
  width: 1%;
  height: 100%;
  border-radius: inherit;
  background: #1d9bf0;
}

.profile-vip-content small {
  margin-top: -22px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.profile-menu {
  margin-top: 18px;
  padding: 6px 0;
}

.profile-menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(92px, auto) 1fr auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 11px 16px;
  border: 0;
  color: #fff;
  text-align: left;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

.profile-menu-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
}

.profile-menu-icon.orange {
  background: linear-gradient(135deg, #ffb17e, #bd6d56);
}

.profile-menu-icon.peach {
  background: linear-gradient(135deg, #ffb491, #d27567);
}

.profile-menu-icon.pink {
  background: linear-gradient(135deg, #ff5b98, #b72d6b);
}

.profile-menu-icon.purple {
  background: linear-gradient(135deg, #a47bff, #5d43a9);
}

.profile-menu-icon.green {
  background: linear-gradient(135deg, #78df7a, #2f9e55);
}

.profile-menu-icon.red {
  background: linear-gradient(135deg, #ff987d, #cf5a48);
}

.profile-menu-item strong {
  color: #f7fbff;
  font-size: 15px;
  font-weight: 900;
}

.profile-menu-item small {
  color: #98a6be;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.profile-menu-item b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #ff2323;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.profile-menu-chevron {
  color: #9ca9bf;
}

@media (max-width: 420px) {
  .profile-page {
    padding-inline: 12px;
  }

  .profile-hero-top {
    grid-template-columns: 76px 1fr;
  }

  .profile-avatar {
    width: 76px;
    height: 76px;
  }

  .profile-user-info p,
  .profile-user-info span {
    font-size: 14px;
  }

  .profile-user-info strong {
    font-size: 22px;
  }

  .profile-menu-item {
    grid-template-columns: 38px 84px 1fr auto auto;
    padding-inline: 12px;
  }
}

@keyframes sound-marquee {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes music-icon-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.04);
  }
}

@keyframes music-orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes music-wave {
  0% {
    opacity: 0.6;
    transform: scale(0.72);
  }

  100% {
    opacity: 0;
    transform: scale(1.62);
  }
}

@keyframes music-bars {
  0%,
  100% {
    transform: scaleY(0.4);
  }

  50% {
    transform: scaleY(1.8);
  }
}

.category-tabs {
  position: sticky;
  top: var(--sticky-header-height, 134px);
  z-index: 55;
  margin-bottom: 21px;
  border-radius: 0 0 7px 7px;
  background: var(--panel-2);
  overflow: hidden;
}

.category-tabs-swiper {
  width: 100%;
  user-select: none;
}

.category-tabs-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(127, 141, 166, 0.32);
  border-radius: 50%;
  color: #d8e2f4;
  background: rgba(16, 23, 39, 0.78);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.category-tabs-nav::before {
  position: absolute;
  top: -18px;
  bottom: -18px;
  width: 42px;
  content: "";
  pointer-events: none;
}

.category-tabs-nav-prev {
  left: 6px;
}

.category-tabs-nav-prev::before {
  left: -7px;
  background: linear-gradient(90deg, var(--panel-2), rgba(17, 24, 41, 0));
}

.category-tabs-nav-next {
  right: 6px;
}

.category-tabs-nav-next::before {
  right: -7px;
  background: linear-gradient(270deg, var(--panel-2), rgba(17, 24, 41, 0));
}

.category-tabs-nav:hover {
  border-color: rgba(166, 190, 230, 0.52);
  background: rgba(30, 42, 67, 0.86);
}

.category-tabs-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.category-tabs-nav svg {
  position: relative;
  z-index: 1;
}

.category-tabs .swiper-slide {
  width: 20%;
  min-width: 76px;
  max-width: 94px;
}

.category-tab-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 72px;
  padding: 9px 4px 8px;
  color: #f7f9ff;
  font-weight: 700;
  text-decoration: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.category-tab-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

.category-tab-card:active {
  cursor: grabbing;
}

.category-tab-icon {
  display: block;
  width: 100%;
  height: 23px;
  color: inherit;
  font-size: 22px;
  line-height: 23px;
  text-align: center;
}

.category-tab-asset {
  display: block;
  width: auto;
  max-width: 38px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}

.category-tab-label {
  display: block;
  max-width: 100%;
  color: inherit;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-section,
.sport-section {
  margin-bottom: 36px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 15px;
}

.section-name {
  display: flex;
  align-items: center;
  gap: 13px;
}

.section-name span {
  min-width: 50px;
  text-align: center;
  color: #189af3;
  font-size: 28px;
  font-weight: 900;
}

.section-name h2 {
  margin: 0;
  color: #f1f5fb;
  font-size: 20px;
  font-weight: 700;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.section-actions button {
  display: inline-grid;
  place-items: center;
  height: 36px;
  border: 1px solid rgba(124, 145, 184, 0.12);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 5px 12px rgba(0, 0, 0, 0.16);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.section-actions button:hover {
  border-color: rgba(244, 162, 29, 0.26);
  background: #1a2338;
}

.section-actions button:disabled {
  cursor: not-allowed;
  color: #3f4c64;
  border-color: rgba(124, 145, 184, 0.06);
  background: rgba(18, 25, 42, 0.72);
  box-shadow: none;
  opacity: 0.68;
}

.section-actions button:disabled:hover {
  border-color: rgba(124, 145, 184, 0.06);
  background: rgba(18, 25, 42, 0.72);
}

.section-actions button:focus-visible {
  outline: 2px solid rgba(244, 162, 29, 0.72);
  outline-offset: 2px;
}

.section-actions button:active {
  transform: translateY(1px);
}

.section-view-all {
  min-width: 112px;
  padding: 0 14px;
  color: var(--orange);
  background: #151c2f;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.section-arrow {
  width: 36px;
  color: #8392ad;
  background: #141b2e;
}

.section-arrow:hover {
  color: #d8e6ff;
}

.game-grid-shell {
  position: relative;
  min-height: 378px;
  overflow: hidden;
}

.game-grid-shell.is-loading .game-grid {
  pointer-events: none;
}

.game-grid-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(7, 16, 34, 0.5);
  backdrop-filter: blur(2px);
}

/* A lobby usa sempre 3 colunas — o grid não muda quando os dados chegam. */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.casino-game-card {
  position: relative;
  height: 181px;
  overflow: hidden;
  border-radius: 13px;
  background: #213050;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.casino-game-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.88), transparent 8%),
    radial-gradient(circle at 32% 58%, rgba(255, 231, 84, 0.95), transparent 22%),
    radial-gradient(circle at 72% 34%, rgba(255, 80, 185, 0.7), transparent 25%);
  opacity: 0.88;
}

.game-provider {
  position: absolute;
  top: 9px;
  right: 39px;
  z-index: 2;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.game-star {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border-radius: 50%;
  color: #9c6b2f;
  background: rgba(255, 255, 255, 0.88);
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.game-star:hover {
  transform: scale(1.08);
}

.game-star:focus-visible {
  outline: 2px solid #ffdc52;
  outline-offset: 2px;
}

.game-star.is-favorite {
  color: #fff;
  background: linear-gradient(180deg, #ffdd55, #f59e0b);
}

.game-star.is-favorite svg {
  fill: currentColor;
}

.game-figure {
  position: absolute;
  right: 10px;
  bottom: 34px;
  width: 58px;
  height: 58px;
  border-radius: 45% 55% 48% 52%;
  object-fit: cover;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

/* Jogo sem arte: o card usa um degradê derivado da cor primária do tema do
   tenant (sem o overlay de brilhos), e a capa reserva desenha moldura, gema
   e nome por cima. */
.game-tone-muted {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary) 55%, #1a2133),
    color-mix(in srgb, var(--color-primary) 24%, #131928) 78%
  );
}

.game-tone-muted::before {
  display: none;
}

.game-cover-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 14px 16px;
  text-align: center;
}

.game-cover-fallback::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  pointer-events: none;
}

.game-cover-fallback-gem {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.45);
}

.game-cover-fallback-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  color: rgba(222, 229, 243, 0.75);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.game-tone-1 { background: linear-gradient(145deg, #ffec48, #e02623 70%); }
.game-tone-2 { background: linear-gradient(145deg, #c62fff, #3312a2 72%); }
.game-tone-3 { background: linear-gradient(145deg, #81fbff, #d02cff 70%); }
.game-tone-4 { background: linear-gradient(145deg, #ffef55, #803dff 65%); }
.game-tone-5 { background: linear-gradient(145deg, #00e5ff, #ff8a00 70%); }
.game-tone-6 { background: linear-gradient(145deg, #f9ff38, #d22323 70%); }
.game-tone-7 { background: linear-gradient(145deg, #ffba26, #ce1d70 72%); }
.game-tone-8 { background: linear-gradient(145deg, #3120a8, #ef9b15 72%); }
.game-tone-9 { background: linear-gradient(145deg, #ff81d8, #b832ff 72%); }
.game-tone-10 { background: linear-gradient(145deg, #87521b, #2c1510 72%); }
.game-tone-11 { background: linear-gradient(145deg, #ffd852, #e17b12 70%); }
.game-tone-12 { background: linear-gradient(145deg, #d9ba75, #7f230c 72%); }

.sport-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 148px;
  padding: 22px 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 50%, rgba(255, 255, 255, 0.25), transparent 18%),
    linear-gradient(105deg, #46ad11, #0f6c08);
}

.sport-card strong {
  display: block;
  margin-bottom: 24px;
  color: #fff;
  font-size: 31px;
}

.sport-card p {
  max-width: 285px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
}

.sport-card span {
  font-size: 82px;
}

.download-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.app-download-button {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  min-height: 58px;
  padding: 8px 16px;
  border: 1px solid rgba(119, 140, 180, 0.3);
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 45%),
    rgba(12, 20, 38, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: left;
  font-weight: 700;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.app-download-button:hover {
  border-color: rgba(63, 171, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(63, 171, 255, 0.08), transparent 46%),
    rgba(12, 20, 38, 0.42);
}

.app-download-button:active {
  transform: translateY(1px);
}

.app-download-button svg {
  justify-self: center;
  color: #fff;
}

.app-download-button:nth-child(2) svg {
  color: #59d77a;
  transform: translateY(2px);
}

.app-download-button span {
  display: grid;
  gap: 3px;
}

.app-download-button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.app-download-button strong {
  color: #fff;
  font-size: 15px;
}

.provider-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 18px 12px;
  min-height: 116px;
  padding: 2px 8px 24px;
  color: #fff;
  text-align: center;
}

.provider-logo {
  display: grid;
  place-items: center;
  min-height: 32px;
  color: #fff;
}

.provider-logo span {
  display: inline-block;
  max-width: 100%;
  font-size: 14px;
  font-weight: 900;
  line-height: 15px;
  letter-spacing: 0;
  text-wrap: balance;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}

.provider-logo-cyan { color: #52f4e8; }
.provider-logo-blue { color: #5aa7ff; }
.provider-logo-red { color: #ff3b56; }
.provider-logo-yellow { color: #ff9e24; }

.social-section,
.payment-cloud,
.legal-footer {
  border-top: 1px solid var(--line);
}

.social-section {
  margin-top: 28px;
  padding: 19px 0 25px;
  text-align: center;
}

.social-section p {
  margin: 0 0 20px;
  color: #29364f;
  font-size: 13px;
}

.social-section div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 0 21px;
}

.social-button {
  position: relative;
  display: grid;
  place-items: center;
  height: 35px;
  overflow: hidden;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(#7df1ff, #0a8be8 48%, #1e68c7);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  font-weight: 800;
  text-decoration: none;
  transition:
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.social-button::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.36) 46%, transparent 58%);
  opacity: 0;
  transform: translateX(-110%);
  transition:
    opacity 180ms ease,
    transform 520ms ease;
}

.social-button svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32));
  transition: transform 180ms ease;
}

.social-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.social-button:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.42),
    0 8px 16px rgba(6, 125, 210, 0.2);
  transform: translateY(-1px);
}

.social-button:hover::before {
  opacity: 1;
  transform: translateX(110%);
}

.social-button:hover svg {
  transform: translateY(-1px) scale(1.08);
}

.social-button:active {
  transform: translateY(1px) scale(0.98);
}

.social-button-whatsapp {
  background: linear-gradient(#51f57d, #08a73f);
}

.social-button-instagram {
  background: linear-gradient(135deg, #ffab28, #ff2fd1 55%, #6432ff);
}

.payment-cloud {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 16px;
  align-items: center;
  justify-items: center;
  padding: 25px clamp(30px, 14vw, 90px) 30px;
  color: #d9e4f7;
  font-size: 18px;
  text-align: center;
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.payment-badge-pix {
  color: #19d6c7;
}

.payment-badge-age {
  display: inline-flex;
  min-width: 42px;
  color: #ff3f4d;
}

.age-restriction-icon {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 7px rgba(255, 63, 77, 0.24));
}

.legal-footer {
  padding: 24px 19px 86px;
  color: #61708e;
}

.legal-footer h2 {
  margin: 0 0 18px;
  color: #7a86a1;
  font-size: 21px;
  text-align: center;
}

.legal-footer p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}

.legal-footer span {
  display: block;
  margin-top: 23px;
  text-align: center;
  font-size: 14px;
}

.legal-footer .legal-footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 18px;
  text-align: center;
}

.legal-footer .legal-footer-contacts a {
  color: #7a86a1;
  font-size: 14px;
  text-decoration: none;
}

.legal-footer .legal-footer-contacts a:hover,
.legal-footer .legal-footer-contacts a:focus-visible {
  color: #a7b3cd;
  text-decoration: underline;
}

.support-float {
  position: fixed;
  bottom: 80px;
  left: calc(50% - 235px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 4px solid rgba(174, 220, 255, 0.95);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.36), transparent 22%),
    linear-gradient(180deg, #28b5ff, #137fe6);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 0 0 0 rgba(40, 181, 255, 0.38);
  font-size: 25px;
  text-decoration: none;
  animation: support-breathe 1800ms ease-in-out infinite;
}

.support-float::before,
.support-float::after {
  position: absolute;
  inset: -7px;
  content: "";
  border: 1px solid rgba(63, 180, 255, 0.42);
  border-radius: inherit;
  opacity: 0;
  animation: support-ring 2100ms ease-out infinite;
}

.support-float::after {
  animation-delay: 760ms;
}

.support-float span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 180ms ease;
}

.support-float:hover span {
  transform: rotate(-8deg) scale(1.06);
}

.support-float:active {
  transform: translateY(1px) scale(0.98);
}

.invite-float {
  position: fixed;
  right: calc(50% - 243px);
  bottom: 177px;
  z-index: 25;
  display: grid;
  place-items: center;
  width: 96px;
  height: 74px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 44%, #ffef6b, transparent 35%),
    linear-gradient(#f18400, #144fc0);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  transform: rotate(-2deg);
}

.invite-float button {
  position: absolute;
  top: -24px;
  right: -5px;
  color: #fff;
  background: transparent;
  font-size: 25px;
  font-weight: 900;
}

.invite-float span {
  color: #fff35a;
  font-size: 17px;
}

.top-float {
  position: fixed;
  right: calc(50% - 236px);
  bottom: 88px;
  z-index: 45;
  display: grid;
  grid-template-rows: 31px 13px;
  align-content: start;
  justify-items: center;
  gap: 4px;
  width: 54px;
  height: 66px;
  padding: 8px 5px 12px;
  border: 1px solid rgba(92, 170, 255, 0.32);
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 20%, rgba(78, 181, 255, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(30, 43, 72, 0.98), rgba(14, 22, 39, 0.98));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.92);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.top-float.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.top-float:hover {
  border-color: rgba(92, 170, 255, 0.62);
  background:
    radial-gradient(circle at 50% 20%, rgba(78, 181, 255, 0.48), transparent 44%),
    linear-gradient(180deg, rgba(35, 52, 87, 0.98), rgba(15, 25, 45, 0.98));
}

.top-float:active {
  transform: translateY(1px) scale(0.98);
}

.top-float svg {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 6px;
  border-radius: 50%;
  background: #188fee;
  box-shadow: 0 0 14px rgba(24, 143, 238, 0.48);
}

.top-float span {
  font-size: 12px;
  font-weight: 900;
  line-height: 13px;
}

@keyframes support-breathe {
  0%,
  100% {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.32),
      0 0 0 0 rgba(40, 181, 255, 0.32);
  }

  50% {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.32),
      0 0 0 8px rgba(40, 181, 255, 0);
  }
}

@keyframes support-ring {
  0% {
    opacity: 0.68;
    transform: scale(0.82);
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 5px 10px 7px;
  /* Token do layout, sobrescrevível pelo colorOverrides da brand. O valor
     padrão (o gradiente que era o fallback aqui) vive em lib/themes/default. */
  background: var(--bottom-nav);
  border-top: 1px solid rgba(104, 126, 166, 0.24);
  box-shadow:
    0 -12px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  height: 56px;
}

.bottom-nav a {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: #71809d;
  line-height: 1;
  text-decoration: none;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.bottom-nav a::before {
  position: absolute;
  top: 4px;
  width: 22px;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: transparent;
  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}

.bottom-nav a:hover {
  color: #d4e4ff;
  background: rgba(255, 255, 255, 0.035);
}

.bottom-nav a:active {
  transform: translateY(1px) scale(0.98);
}

.bottom-nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border-radius: 9px;
  color: inherit;
  transition:
    color 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.bottom-nav-dot {
  position: absolute;
  top: 2px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff1d2d;
  box-shadow: 0 0 0 2px rgba(17, 24, 41, 0.98);
}

.bottom-nav span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.bottom-nav .active {
  color: #fff;
  background: linear-gradient(180deg, rgba(35, 48, 78, 0.85), rgba(23, 31, 51, 0.2));
}

.bottom-nav .active::before {
  background: #4aa8ff;
  box-shadow: 0 0 12px rgba(74, 168, 255, 0.8);
}

.bottom-nav .active .bottom-nav-icon {
  color: #fff;
  filter: drop-shadow(0 0 7px rgba(74, 168, 255, 0.55));
  transform: translateY(-1px);
}

.bottom-nav .active span:last-child {
  font-weight: 800;
}

.deposit-page {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 36px 100px;
  color: #f7fbff;
  background: #071022;
}

.deposit-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 62px;
  margin: 0 -6px 22px;
}

.deposit-header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: transparent;
}

.deposit-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

.deposit-form,
.deposit-qr-view,
.deposit-history {
  display: grid;
}

.deposit-tabs {
  border-bottom: 1px solid rgba(96, 119, 158, 0.3);
}

.deposit-tabs button {
  position: relative;
  min-width: 133px;
  height: 38px;
  color: #fff;
  background: transparent;
  font-weight: 900;
}

.deposit-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: #1b9cff;
}

.deposit-method {
  padding: 19px 0;
  border-bottom: 1px solid rgba(96, 119, 158, 0.3);
}

.deposit-method button {
  position: relative;
  width: 137px;
  height: 49px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #2da6ff, #087bd4);
  font-size: 20px;
}

.deposit-method small {
  position: absolute;
  top: -7px;
  right: -1px;
  padding: 2px 4px;
  border-radius: 4px 4px 4px 0;
  background: #ff3a2f;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.deposit-promo {
  margin: 15px 0 22px;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 25px;
}

.deposit-amount-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  height: 63px;
  margin-bottom: 22px;
  padding: 0 13px;
  border-radius: 7px;
  background: #10182d;
}

.deposit-amount-field span,
.deposit-amount-field input::placeholder {
  color: #7e8aa3;
}

.deposit-amount-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 18px;
  font-weight: 900;
}

.deposit-amount-field button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #172033;
  background: #9aa3b4;
}

.deposit-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px 12px;
}

.deposit-amount-grid button {
  height: 50px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #7f8aa3;
  background: #19223b;
  font-size: 19px;
  font-weight: 900;
}

.deposit-amount-grid button.selected {
  color: #fff;
  border-color: #2b9fff;
  background: #162038;
}

.deposit-primary,
.deposit-copy {
  justify-self: center;
  width: min(100%, 349px);
  height: 50px;
  margin-top: 39px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
  font-size: 18px;
  font-weight: 900;
}

.deposit-primary:disabled {
  cursor: not-allowed;
  color: rgba(211, 224, 244, 0.6);
  background: #143b65;
}

.deposit-instructions {
  display: grid;
  gap: 24px;
  margin: 0 0 28px;
  padding: 0 22px;
  color: #6f7788;
  font-weight: 800;
  line-height: 22px;
}

.deposit-instructions li::marker {
  color: #6f7788;
}

.deposit-instructions .highlight {
  color: #0c9dff;
}

.deposit-instructions .highlight::marker {
  color: #0c9dff;
}

.deposit-payment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #ffa51d;
}

.deposit-payment strong {
  font-size: 23px;
  line-height: 28px;
}

.deposit-payment button,
.deposit-address button,
.deposit-summary button {
  display: inline-grid;
  place-items: center;
  color: #ffa51d;
  background: transparent;
}

.deposit-qr {
  display: grid;
  grid-template-columns: repeat(29, 1fr);
  width: 188px;
  height: 188px;
  margin: 0 auto;
  padding: 7px;
  background: #fff;
}

.deposit-qr span {
  background: #fff;
}

.deposit-qr span.active {
  background: #050505;
}

.deposit-copy {
  width: 166px;
  margin-top: 10px;
  border-radius: 4px;
  font-size: 16px;
}

.deposit-address,
.deposit-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #6f7788;
  font-weight: 900;
}

.deposit-address {
  margin: 27px 0 28px;
}

.deposit-time {
  margin: 0 0 30px;
}

.deposit-time strong {
  color: #d8deeb;
}

.deposit-summary {
  display: grid;
  gap: 17px;
  margin: 0;
}

.deposit-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
}

.deposit-summary dt {
  color: #697386;
  font-weight: 900;
}

.deposit-summary dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #f2f6ff;
  font-weight: 900;
  text-align: right;
}

.deposit-summary .pending {
  color: #ffa51d;
}

.deposit-history-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 19px 0 13px;
}

.deposit-history-tools button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #53607a;
  border-radius: 5px;
  color: #fff;
  background: transparent;
  font-weight: 900;
}

.deposit-history-tools strong {
  justify-self: end;
  color: #fff;
}

.deposit-history-tools span {
  color: #13df91;
}

.deposit-history-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  min-height: 133px;
  padding: 16px 12px;
  border-radius: 6px;
  color: #fff;
  background: #10182d;
  text-align: left;
}

.deposit-history-card span,
.deposit-history-card strong {
  font-size: 17px;
  font-weight: 900;
}

.deposit-history-card time,
.deposit-history-card small {
  color: #94a0ba;
  font-size: 15px;
  font-weight: 700;
}

.deposit-history-card small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.deposit-history-card em {
  align-self: end;
  color: #ffa51d;
  font-size: 12px;
  font-style: normal;
}

.deposit-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.76);
}

.deposit-detail-modal {
  position: relative;
  width: min(100%, 456px);
  padding: 24px 15px 30px;
  border-radius: 12px;
  background: #11182d;
  text-align: center;
}

.deposit-detail-modal > button {
  position: absolute;
  top: 20px;
  right: 15px;
  color: #fff;
  background: transparent;
}

.deposit-detail-modal h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.deposit-detail-clock {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  border-radius: 50%;
  color: #fff;
  background: #ffa629;
}

.deposit-detail-status {
  margin: 0 0 4px;
  color: #ffa629;
  font-weight: 900;
}

.deposit-detail-time {
  margin: 0 0 16px;
  color: #7d879c;
}

.deposit-detail-time strong {
  color: #ff3d3d;
}

.deposit-detail-amount {
  display: block;
  margin-bottom: 22px;
  font-size: 23px;
}

.deposit-detail-modal dl {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
  padding: 10px 0 12px;
  border-top: 1px dashed rgba(104, 124, 165, 0.22);
  border-bottom: 1px dashed rgba(104, 124, 165, 0.22);
}

.deposit-detail-modal dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  text-align: left;
}

.deposit-detail-modal dt {
  color: #7e889e;
  font-weight: 900;
}

.deposit-detail-modal dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-weight: 900;
  text-align: right;
}

.deposit-detail-modal dd svg {
  color: #238deb;
}

.deposit-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.deposit-detail-actions button {
  height: 59px;
  border-radius: 6px;
  color: #fff;
  background: #192136;
  font-size: 16px;
  font-weight: 900;
}

.deposit-detail-actions button:last-child {
  background: #207fdb;
}

.search-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 32px 80px;
  background: #071022;
}

.support-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 32px 92px;
  background:
    radial-gradient(circle at 50% 0, rgba(40, 92, 160, 0.12), transparent 36%),
    #071022;
}

.search-header {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 42px;
  margin-bottom: 20px;
}

.search-header a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  text-decoration: none;
}

.search-header h1 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  text-align: center;
}

.support-section {
  margin-top: 26px;
}

.message-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(90, 113, 154, 0.3);
}

.message-tabs button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
  color: #697892;
  font-size: 16px;
  font-weight: 900;
  background: transparent;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.message-tabs button:hover {
  color: #fff;
  background: rgba(31, 144, 241, 0.05);
}

.message-tabs button.active {
  color: #fff;
}

.message-tabs button.active::after {
  position: absolute;
  right: 10%;
  bottom: -1px;
  left: 10%;
  height: 2px;
  border-radius: 999px;
  background: #19a2ff;
  box-shadow: 0 0 18px rgba(25, 162, 255, 0.42);
  content: "";
}

.message-tabs small {
  position: absolute;
  top: 7px;
  right: 18%;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: #ff242f;
}

nav.messages-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  width: 100%;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(90, 113, 154, 0.3);
}

nav.messages-tabs-bar button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  color: #697892;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  background: transparent;
  white-space: nowrap;
  transition:
    color 160ms ease,
    background 160ms ease;
}

nav.messages-tabs-bar button:hover {
  color: #fff;
  background: rgba(31, 144, 241, 0.06);
}

nav.messages-tabs-bar button.active {
  color: #fff;
}

nav.messages-tabs-bar button.active::after {
  position: absolute;
  right: 8%;
  bottom: -1px;
  left: 8%;
  height: 2px;
  border-radius: 999px;
  background: #19a2ff;
  box-shadow: 0 0 18px rgba(25, 162, 255, 0.42);
  content: "";
}

nav.messages-tabs-bar small {
  position: absolute;
  top: 7px;
  right: 16%;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: #ff242f;
}

.support-tabs {
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(90, 113, 154, 0.3);
}

.support-tabs h2 {
  display: inline-flex;
  align-items: center;
  min-width: 116px;
  margin: 0;
  padding: 0 0 13px;
  border-bottom: 2px solid #37a9ff;
  color: #f7f9ff;
  font-size: 16px;
  font-weight: 800;
}

.support-list {
  display: grid;
  gap: 12px;
}

.support-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(89, 111, 151, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%),
    #10172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.support-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(67, 163, 255, 0.08), transparent);
  opacity: 0;
  transform: translateX(-70%);
  transition:
    opacity 180ms ease,
    transform 500ms ease;
}

.support-card:hover::before {
  opacity: 1;
  transform: translateX(70%);
}

.support-card.featured {
  grid-template-columns: 68px 1fr;
  min-height: 142px;
  padding: 18px;
}

.support-card.featured .support-contact {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
}

.support-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.4), transparent 24%),
    linear-gradient(145deg, #33c5ff, #147fe6);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.support-card.featured .support-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.46), transparent 24%),
    linear-gradient(145deg, #f4c9aa, #8a5c49 68%, #18243f);
}

.support-copy {
  min-width: 0;
}

.support-copy h3 {
  margin: 0 0 7px;
  color: #f8fbff;
  font-size: 18px;
  line-height: 22px;
}

.support-copy p {
  margin: 0;
  color: #8996ae;
  font-size: 14px;
  line-height: 21px;
}

.support-contact {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 108px;
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #24aaff, #0878d6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 16px rgba(7, 120, 214, 0.2);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.support-contact:hover {
  filter: brightness(1.08);
}

.support-contact:active {
  transform: translateY(1px);
}

.notification-panel {
  display: grid;
  justify-items: stretch;
  gap: 18px;
}

.messages-notification-panel {
  display: grid;
  justify-items: stretch;
  gap: 18px;
}

.messages-notification-panel time {
  justify-self: center;
  color: #78869f;
  font-size: 14px;
  font-weight: 500;
}

.read-all-button {
  justify-self: end;
  display: inline-grid;
  grid-template-columns: 24px auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: #1c2743;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.messages-read-all-button {
  justify-self: end;
  display: inline-grid;
  grid-template-columns: 24px auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: #1c2743;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.messages-read-all-button svg {
  color: #189dff;
}

.messages-read-all-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.read-all-button svg {
  color: #189dff;
}

.read-all-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.notification-panel time {
  justify-self: center;
  color: #78869f;
  font-size: 14px;
  font-weight: 500;
}

.notification-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 104px;
  padding: 17px 44px 16px 16px;
  border-radius: 7px;
  color: inherit;
  text-align: left;
  background: #11182d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.notification-card:hover {
  background: #151e36;
  box-shadow:
    inset 0 0 0 1px rgba(31, 144, 241, 0.18),
    0 14px 26px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.notification-card strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.notification-card strong svg {
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 3px;
  color: #fff;
  background: #55ca83;
}

.notification-card small {
  display: block;
  margin-top: 12px;
  color: #7f8da8;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.notification-card p {
  margin: 7px 0 0;
  color: #7f8da8;
  font-size: 14px;
  font-weight: 500;
}

.notification-dot {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff1f2f;
  box-shadow: 0 0 0 3px rgba(255, 31, 47, 0.08);
}

.announcement-card {
  min-height: 96px;
}

.message-detail {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  margin: 28px auto 0;
}

.message-detail > h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
}

.message-detail > h2 svg {
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 3px;
  color: #fff;
  background: #55ca83;
}

.message-detail-card {
  overflow: hidden;
  padding: 28px 24px 26px;
  border: 2px solid #ff9a87;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #fff, #f3ffff);
  color: #1f2431;
}

.message-detail-card header {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 38px;
}

.message-detail-card header strong {
  padding: 2px 10px;
  color: #4b215d;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  background: #080808;
}

.message-detail-card header span {
  padding: 2px 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: #080808;
}

.message-promo {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 124px;
  margin-bottom: 64px;
  padding: 18px 150px 18px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 50%, rgba(255, 199, 61, 0.95), transparent 0 17%, transparent 18%),
    radial-gradient(circle at 91% 50%, rgba(255, 143, 44, 0.95), transparent 0 22%, transparent 23%),
    linear-gradient(135deg, #0a57c7, #053295 58%, #021c68);
}

.message-promo::after {
  position: absolute;
  right: 28px;
  bottom: 8px;
  color: rgba(255, 210, 76, 0.92);
  font-size: 66px;
  font-weight: 900;
  content: "1%";
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.message-promo b {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.message-promo span {
  margin-top: 5px;
  color: #ffe83f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.promo-two::after {
  content: "100";
}

.promo-three::after {
  content: "777";
}

.message-detail-card > p {
  margin: 18px 0 0;
  padding: 18px 16px;
  border: 1px solid rgba(255, 173, 32, 0.52);
  border-radius: 14px;
  color: #444;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  background: #fff7db;
}

.search-input-wrap {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  height: 53px;
  margin: 0 6px 20px;
  border: 1px solid rgba(77, 101, 151, 0.45);
  border-radius: 7px;
  background: #10172b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.search-input-wrap:focus-within {
  border-color: rgba(58, 167, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(58, 167, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.search-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 15px;
  color: #fff;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}

.search-input-wrap input::placeholder {
  color: #5d687d;
  font-weight: 400;
}

.search-input-wrap svg {
  color: #fff;
}

.search-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin: 0 -2px 10px;
  border-bottom: 1px solid rgba(94, 117, 160, 0.28);
}

.search-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 52px;
  color: #727e95;
  background: transparent;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}

.search-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: #38a7ff;
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.search-tabs button.active {
  color: #fff;
  font-weight: 800;
}

.search-tabs button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.search-tabs span {
  display: grid;
  place-items: center;
  color: inherit;
}

.search-results {
  position: relative;
  min-height: 620px;
  padding-top: 10px;
}

.search-loading {
  display: grid;
  place-items: center;
  min-height: 320px;
}

.search-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.search-game-grid .casino-game-card {
  height: 200px;
  border-radius: 12px;
}

.empty-search {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 470px;
  color: #6e7890;
}

.empty-search strong {
  margin-top: 15px;
  font-size: 16px;
}

.empty-illustration {
  position: relative;
  width: 190px;
  height: 166px;
  display: grid;
  place-items: center;
  color: #555d6e;
}

.empty-illustration svg:first-child {
  opacity: 0.9;
}

.empty-illustration svg:last-child {
  position: absolute;
  top: 14px;
  right: 34px;
  color: #6d7483;
  transform: rotate(-12deg);
}

@media (max-width: 430px) {
  .fx-phone {
    padding-inline: 12px;
  }

  .install-banner {
    grid-template-columns: 42px minmax(0, 1fr) 42px 70px 20px;
    gap: 7px;
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .install-banner strong {
    font-size: 13px;
    line-height: 17px;
  }

  .gift-box {
    font-size: 22px;
  }

  .install-banner button {
    width: 72px;
  }

  .site-header {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 7px;
    height: 55px;
  }

  .site-logo {
    width: 160px;
  }

  .header-actions {
    grid-column: auto;
    justify-self: auto;
    margin-top: 0;
    gap: 7px;
  }

  .login {
    width: 58px;
  }

  .register {
    width: 72px;
  }

  .search {
    width: 32px;
  }

  .promo-stack {
    margin-inline: -8px;
    padding: 12px 4px 13px;
  }

  .telegram-promo {
    min-height: 132px;
    padding: 20px 13px;
  }

  .promo-carousel {
    border-radius: 9px;
  }

  .telegram-promo strong {
    max-width: 145px;
    font-size: 22px;
    line-height: 23px;
  }

  .telegram-promo p {
    max-width: 158px;
    font-size: 12px;
    line-height: 17px;
  }

  .promo-wheel {
    top: 18px;
    right: 57px;
    width: 92px;
    height: 92px;
    border-width: 6px;
  }

  .promo-wheel::before {
    inset: 22px;
  }

  .promo-mascot {
    right: 6px;
    bottom: 8px;
    width: 68px;
    height: 82px;
  }

  .competition-promo strong,
  .competition-promo span {
    font-size: 16px;
  }

  .sound-bar {
    margin-inline: -4px;
  }

  .game-grid,
  .game-grid.compact {
    grid-template-columns: repeat(3, 1fr);
  }

  .game-grid {
    gap: 15px;
  }

  .casino-game-card {
    height: 137px;
  }

  .game-grid.compact .casino-game-card {
    height: 156px;
  }

  .support-float {
    left: 16px;
  }

  .invite-float,
  .top-float {
    right: 16px;
  }

  .top-float {
    bottom: 86px;
  }

  .search-shell {
    padding: 16px 20px 72px;
  }

  .search-header h1 {
    font-size: 24px;
  }

  .search-tabs {
    gap: 4px;
  }

  .search-tabs button {
    font-size: 14px;
  }

  .search-game-grid {
    gap: 10px;
  }

  .search-game-grid .casino-game-card {
    height: 176px;
  }
}

/* ── ex-lib/layouts/chinesa-v1/components/deposit/deposit-flow.module.css ─────────────────────────── */
.deposit-page {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 36px 100px;
  color: #f7fbff;
  background: #071022;
}

.deposit-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 62px;
  margin: 0 -6px 22px;
}

.deposit-header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: transparent;
}

.deposit-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

.deposit-form,
.deposit-qr-view,
.deposit-history {
  display: grid;
}

.deposit-qr-view {
  gap: 22px;
}

.deposit-tabs {
  border-bottom: 1px solid rgba(96, 119, 158, 0.3);
}

.deposit-tabs button {
  position: relative;
  min-width: 133px;
  height: 38px;
  color: #fff;
  background: transparent;
  font-weight: 900;
}

.deposit-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: #1b9cff;
}

.deposit-method {
  padding: 19px 0;
  border-bottom: 1px solid rgba(96, 119, 158, 0.3);
}

.deposit-method button {
  position: relative;
  width: 137px;
  height: 49px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #2da6ff, #087bd4);
  box-shadow: 0 12px 24px rgba(8, 123, 216, 0.2);
  font-size: 20px;
  font-weight: 800;
}

.deposit-method small {
  position: absolute;
  top: -7px;
  right: -1px;
  padding: 2px 4px;
  border-radius: 4px 4px 4px 0;
  background: #ff3a2f;
  font-size: 9px;
  font-style: italic;
  font-weight: 900;
}

.deposit-promo {
  display: grid;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 14px;
  border: 1px solid rgba(255, 165, 29, 0.18);
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 165, 29, 0.08), rgba(29, 156, 255, 0.04)),
    #0d1629;
  font-size: 15px;
  font-weight: 900;
  line-height: 21px;
}

.deposit-promo span {
  display: block;
}

.deposit-amount-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  height: 63px;
  margin-bottom: 22px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #10182d;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.deposit-amount-field:focus-within {
  border-color: rgba(43, 159, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(43, 159, 255, 0.08);
}

.deposit-amount-field span,
.deposit-amount-field input::placeholder {
  color: #7e8aa3;
}

.deposit-amount-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 18px;
  font-weight: 900;
}

.deposit-amount-field button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #172033;
  background: #9aa3b4;
}

.deposit-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px 12px;
}

.deposit-amount-grid button {
  height: 50px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #7f8aa3;
  background: #19223b;
  font-size: 19px;
  font-weight: 900;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.deposit-amount-grid button:hover {
  color: #cbd6ec;
  background: #1e2a48;
}

.deposit-amount-grid button.selected {
  color: #fff;
  border-color: #2b9fff;
  background: #162038;
}

.deposit-amount-grid button:active {
  transform: translateY(1px);
}

.deposit-primary,
.deposit-copy {
  justify-self: center;
  width: min(100%, 349px);
  height: 50px;
  margin-top: 39px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
  box-shadow: 0 12px 28px rgba(8, 123, 216, 0.25);
  font-size: 18px;
  font-weight: 900;
  transition:
    filter 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.deposit-primary:not(:disabled:hover) {
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(8, 123, 216, 0.32);
}

.deposit-primary:not(:disabled:active) {
  transform: translateY(1px);
}

.deposit-primary:disabled {
  cursor: not-allowed;
  color: rgba(211, 224, 244, 0.6);
  background: #143b65;
  box-shadow: none;
}

.deposit-instructions {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: #8e9abc;
  font-weight: 800;
  list-style: none;
  line-height: 22px;
}

.deposit-instructions li {
  position: relative;
  padding-left: 18px;
}

.deposit-instructions li::before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #748097;
}

.deposit-instructions .highlight {
  color: #0c9dff;
}

.deposit-instructions .highlight::before {
  background: #0c9dff;
}

.deposit-payment-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(88, 119, 168, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    #0d1629;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.18);
}

.deposit-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 12px;
  border: 1px solid rgba(255, 165, 29, 0.22);
  border-radius: 12px;
  color: #ffae26;
  background: rgba(255, 165, 29, 0.08);
}

.deposit-payment span {
  color: #8f9bb8;
  font-size: 13px;
  font-weight: 900;
}

.deposit-payment strong {
  font-size: 23px;
  line-height: 28px;
  white-space: nowrap;
}

.deposit-payment button,
.deposit-address button,
.deposit-summary button {
  display: inline-grid;
  place-items: center;
  color: #ffa51d;
  background: transparent;
}

.deposit-qr-frame {
  display: grid;
  place-items: center;
  width: 204px;
  height: 204px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 0 8px rgba(255, 255, 255, 0.035);
}

.deposit-qr-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.deposit-copy {
  width: 184px;
  margin-top: 0;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 10px 22px rgba(8, 123, 216, 0.22);
}

.deposit-address,
.deposit-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #6f7788;
  font-weight: 900;
}

.deposit-address {
  justify-self: center;
  max-width: 100%;
  margin: 0;
  padding: 0 4px;
  text-align: center;
}

.deposit-time {
  margin: -2px 0 0;
}

.deposit-time strong {
  color: #d8deeb;
}

.deposit-summary {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(88, 119, 168, 0.16);
  border-radius: 14px;
  background: rgba(13, 22, 41, 0.54);
}

.deposit-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
}

.deposit-summary dt {
  color: #697386;
  font-weight: 900;
}

.deposit-summary dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #f2f6ff;
  font-weight: 900;
  text-align: right;
}

.deposit-summary .pending {
  color: #ffa51d;
}

.deposit-history-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 64px;
  margin: 19px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(84, 110, 154, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #0b1427;
}

.deposit-history-tools > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #53607a;
  border-radius: 5px;
  color: #fff;
  background: transparent;
  font-weight: 900;
}

.deposit-period-filter {
  position: relative;
  width: 136px;
}

.deposit-period-filter > button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #53607a;
  border-radius: 8px;
  color: #fff;
  background: #10182d;
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
  text-align: left;
}

.deposit-period-filter > div {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 3;
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(84, 110, 154, 0.22);
  border-radius: 10px;
  background: #151d32;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.deposit-period-filter > div button {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  color: #8e99b2;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.deposit-period-filter > div button:not(:last-child) {
  border-bottom: 1px solid rgba(84, 110, 154, 0.14);
}

.deposit-period-filter > div button:hover,
.deposit-period-filter > div button.selected {
  color: #fff;
  background: #152742;
}

.deposit-history-tools strong {
  justify-self: end;
  color: #fff;
  display: grid;
  gap: 3px;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
}

.deposit-history-tools span {
  color: #13df91;
  font-size: 16px;
}

.deposit-history-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 18px;
  min-height: 128px;
  padding: 17px 14px;
  border: 1px solid rgba(84, 110, 154, 0.12);
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.055), transparent 46%),
    #10182d;
  text-align: left;
  cursor: pointer;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.deposit-history-card:hover {
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.08), transparent 46%),
    #141e35;
}

.deposit-history-card:active {
  transform: translateY(1px);
}

.deposit-history-card span,
.deposit-history-card strong {
  font-size: 17px;
  font-weight: 900;
}

.deposit-history-card strong {
  color: #fff;
}

.deposit-history-card time,
.deposit-history-card small {
  color: #94a0ba;
  font-size: 13px;
  font-weight: 700;
}

.deposit-history-card small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.deposit-history-card small button,
.deposit-detail-modal dd button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #7a8aa8;
  background: transparent;
}

.deposit-history-card small button:hover,
.deposit-detail-modal dd button:hover {
  color: #ffa51d;
  background: rgba(255, 165, 29, 0.08);
}

.deposit-history-card em {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  align-self: end;
  min-width: 70px;
  height: 24px;
  border-radius: 999px;
  color: #ffa51d;
  background: rgba(255, 165, 29, 0.1);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.deposit-history-hint {
  margin: 14px 0 0;
  color: #68748c;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.deposit-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}

.deposit-detail-modal {
  position: relative;
  width: min(100%, 456px);
  padding: 26px 18px 28px;
  overflow: hidden;
  border: 1px solid rgba(84, 110, 154, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 166, 41, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #11182d;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  text-align: center;
}

.deposit-detail-modal > button {
  position: absolute;
  top: 16px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.deposit-detail-modal > button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.deposit-detail-modal h2 {
  margin: 0 42px 16px;
  font-size: 22px;
  line-height: 28px;
}

.deposit-detail-clock {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #fff;
  background: #ffa629;
  box-shadow:
    0 0 0 10px rgba(255, 166, 41, 0.08),
    0 16px 28px rgba(255, 166, 41, 0.16);
}

.deposit-detail-status {
  margin: 0 0 6px;
  color: #ffa629;
  font-weight: 900;
}

.deposit-detail-time {
  margin: 0 0 16px;
  color: #7d879c;
}

.deposit-detail-time strong {
  color: #ff3d3d;
}

.deposit-detail-amount {
  display: block;
  width: fit-content;
  margin: 18px auto 22px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 165, 29, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 165, 29, 0.08);
  font-size: 24px;
}

.deposit-detail-modal dl {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px;
  border: 1px solid rgba(84, 110, 154, 0.14);
  border-top: 1px dashed rgba(104, 124, 165, 0.22);
  border-bottom: 1px dashed rgba(104, 124, 165, 0.22);
  border-radius: 14px;
  background: rgba(9, 16, 31, 0.3);
}

.deposit-detail-modal dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 32px;
  align-items: center;
  text-align: left;
}

.deposit-detail-modal dt {
  color: #7e889e;
  font-weight: 900;
}

.deposit-detail-modal dd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-weight: 900;
  text-align: right;
  word-break: break-word;
}

.deposit-detail-modal dd svg {
  color: #238deb;
}

.deposit-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.deposit-detail-actions button {
  height: 59px;
  border-radius: 10px;
  color: #fff;
  background: #192136;
  font-size: 16px;
  font-weight: 900;
  transition:
    filter 150ms ease,
    transform 150ms ease,
    background 150ms ease;
}

.deposit-detail-actions button:last-child {
  background: #207fdb;
}

.deposit-detail-actions button:hover {
  filter: brightness(1.05);
}

.deposit-detail-actions button:active {
  transform: translateY(1px);
}


/* ── ex-lib/layouts/chinesa-v1/components/withdraw/withdraw.module.css ─────────────────────────── */
.withdraw-page {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 36px 100px;
  color: #f7fbff;
  background: #071022;
}

.withdraw-header,
.withdraw-record-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid rgba(68, 91, 130, 0.16);
}

.withdraw-header button,
.withdraw-record-header > button:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: transparent;
}

.withdraw-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}

.withdraw-form {
  display: grid;
  padding-top: 22px;
}

.withdraw-balance-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid rgba(84, 110, 154, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #0b1427;
}

.withdraw-balance-card span {
  color: #dce6f8;
  font-size: 14px;
  font-weight: 900;
}

.withdraw-balance-card strong,
.withdraw-audit-tools span {
  color: #ffa51d;
}

.withdraw-pix {
  grid-column: 1 / -1;
  width: 139px;
  height: 44px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
  font-size: 18px;
  font-weight: 900;
}

.withdraw-form h2 {
  margin: 16px 0 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(82, 105, 146, 0.32);
  font-size: 18px;
}

.withdraw-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 15px;
}

.withdraw-amount-grid button {
  height: 49px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #7f8aa3;
  background: #19223b;
  font-size: 19px;
  font-weight: 900;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.withdraw-amount-grid button:hover {
  color: #cbd6ec;
  background: #1e2a48;
}

.withdraw-amount-grid button.selected {
  color: #fff;
  border-color: #2b9fff;
  background: #162038;
}

.withdraw-amount-grid button:active {
  transform: translateY(1px);
}

.withdraw-fee {
  margin: 26px 0 12px;
  color: #149bff;
  font-size: 14px;
}

.withdraw-amount-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  height: 50px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #10182d;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.withdraw-amount-field:focus-within {
  border-color: rgba(43, 159, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(43, 159, 255, 0.08);
}

.withdraw-amount-field input,
.withdraw-line-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 17px;
  font-weight: 800;
}

.withdraw-amount-field input::placeholder,
.withdraw-line-field input::placeholder {
  color: #59647a;
}

.withdraw-amount-field button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #172033;
  background: #9aa3b4;
}

.withdraw-method {
  width: 100px;
  height: 42px;
  margin-bottom: 25px;
  border: 1px solid #1d9cff;
  border-radius: 6px;
  color: #7f8aa3;
  background: #10182d;
  font-size: 16px;
  font-weight: 900;
}

.withdraw-line-field {
  display: grid;
  gap: 12px;
  margin-bottom: 29px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(82, 105, 146, 0.32);
}

.withdraw-line-field span {
  color: #f3f7ff;
  font-weight: 900;
}

.withdraw-line-field input {
  height: 34px;
}

.withdraw-clear-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
}

.withdraw-clear-field button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #9aa3b4;
  background: transparent;
}

.withdraw-clear-field button:hover {
  color: #fff;
}

.withdraw-primary {
  position: static;
  justify-self: center;
  width: min(100%, 348px);
  height: 52px;
  margin: 20px 0 18px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
  box-shadow: 0 12px 28px rgba(8, 123, 216, 0.28);
  font-size: 18px;
  font-weight: 900;
}

.withdraw-guard-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 7, 16, 0.72);
  backdrop-filter: blur(3px);
}

.withdraw-guard-card {
  width: min(100%, 425px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  color: #636363;
  text-align: center;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.36);
}

.withdraw-guard-hero {
  display: grid;
  place-items: center;
  min-height: 126px;
  background:
    radial-gradient(circle at 50% 80%, rgba(255, 211, 68, 0.6), transparent 28%),
    linear-gradient(135deg, #61d9ff, #bd8dff);
}

.withdraw-guard-hero img {
  width: 118px;
  height: 118px;
  border-radius: 28px;
  transform: translateY(22px) scale(1.18);
}

.withdraw-guard-card p {
  margin: 32px auto 26px;
  max-width: 315px;
  font-size: 18px;
  line-height: 25px;
}

.withdraw-guard-confirm {
  display: inline-grid;
  place-items: center;
  width: 137px;
  height: 44px;
  margin-bottom: 29px;
  border-radius: 6px;
  color: #fff;
  background: #ffa62a;
  font-weight: 900;
  text-decoration: none;
}

.withdraw-password-form {
  display: grid;
  width: min(100%, 448px);
  margin: 26px auto 0;
  padding: 22px 20px 26px;
  border: 1px solid rgba(84, 110, 154, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #0b1427;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.18);
}

.withdraw-password-form h2 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
}

.withdraw-pin-row {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  cursor: text;
}

.withdraw-pin-row > span {
  color: #96a3c0;
  font-weight: 900;
  line-height: 20px;
}

.withdraw-pin-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.withdraw-pin-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
}

.withdraw-pin-boxes i {
  position: relative;
  display: grid;
  place-items: center;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #19223b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.12);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.withdraw-pin-boxes i.filled::after {
  width: 10px;
  height: 10px;
  content: "";
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.34);
}

.withdraw-pin-row:focus-within .withdraw-pin-boxes i.active {
  border-color: #1d9cff;
  background: #17233d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(29, 156, 255, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.withdraw-pin-row:focus-within .withdraw-pin-boxes i.active::before {
  width: 2px;
  height: 18px;
  content: "";
  border-radius: 999px;
  background: #fff;
  animation: withdraw-caret 900ms steps(2, start) infinite;
}

.withdraw-password-form p {
  margin: 0 0 30px;
  color: #778198;
  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
}

.withdraw-password-form button,
.withdraw-success-actions a {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 326px);
  height: 52px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
  box-shadow: 0 12px 26px rgba(8, 123, 216, 0.22);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition:
    filter 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.withdraw-password-form button:not(:disabled:hover),
.withdraw-success-actions a:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(8, 123, 216, 0.3);
}

.withdraw-password-form button:not(:disabled:active),
.withdraw-success-actions a:active {
  transform: translateY(1px);
}

.withdraw-password-form button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.withdraw-success {
  display: grid;
  justify-items: center;
  width: min(100%, 448px);
  margin: 74px auto 0;
  text-align: center;
}

.withdraw-success-card {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 34px 26px 30px;
  border: 1px solid rgba(84, 110, 154, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(43, 209, 140, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #0b1427;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.18);
}

.withdraw-success-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: #fff;
  background: #2bd18c;
  box-shadow:
    0 0 0 10px rgba(43, 209, 140, 0.08),
    0 16px 32px rgba(43, 209, 140, 0.18);
}

.withdraw-success h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 22px;
  line-height: 28px;
}

.withdraw-success p {
  max-width: 340px;
  margin: 0;
  color: #a4afc8;
  font-size: 15px;
  font-weight: 900;
  line-height: 23px;
}

.withdraw-success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  margin-top: 24px;
}

.withdraw-success-actions a {
  width: 100%;
  min-width: 0;
  height: 52px;
  grid-auto-flow: column;
  gap: 9px;
  padding: 0 16px;
  border-radius: 12px;
  white-space: nowrap;
}

.withdraw-success-actions a span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.withdraw-success-actions a:last-child {
  border: 1px solid rgba(84, 110, 154, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.withdraw-success-actions a:last-child:hover {
  border-color: rgba(64, 162, 255, 0.58);
  background: rgba(29, 156, 255, 0.08);
}

.withdraw-success-actions a svg {
  flex: 0 0 auto;
}

@media (max-width: 430px) {
  .withdraw-success-actions {
    grid-template-columns: 1fr;
  }
}

.withdraw-record-header {
  grid-template-columns: 36px 1fr 1fr;
  gap: 8px;
  padding: 0;
  margin: 0 -2px;
}

.withdraw-record-header button:not(:first-child) {
  position: relative;
  height: 70px;
  color: #758097;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.withdraw-record-header button.active {
  color: #fff;
}

.withdraw-record-header button.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: #1d9cff;
}

.withdraw-records {
  display: grid;
  padding-top: 18px;
}

.withdraw-record-tools,
.withdraw-audit-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 64px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(84, 110, 154, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #0b1427;
}

.withdraw-record-tools > button,
.withdraw-period-filter > button,
.withdraw-filter > button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 73px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #53607a;
  border-radius: 8px;
  color: #fff;
  background: #10182d;
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
  text-align: left;
}

.withdraw-period-filter {
  position: relative;
  width: 136px;
}

.withdraw-period-filter > button,
.withdraw-filter > button {
  width: 100%;
}

.withdraw-period-filter > div {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 3;
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(84, 110, 154, 0.22);
  border-radius: 10px;
  background: #151d32;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.withdraw-period-filter > div button {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  color: #8e99b2;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.withdraw-period-filter > div button:not(:last-child) {
  border-bottom: 1px solid rgba(84, 110, 154, 0.14);
}

.withdraw-period-filter > div button:hover,
.withdraw-period-filter > div button.selected {
  color: #fff;
  background: #152742;
}

.withdraw-record-tools strong {
  display: grid;
  gap: 3px;
  justify-self: end;
  color: #fff;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
}

.withdraw-record-tools span {
  color: #13df91;
  font-size: 16px;
}

.withdraw-audit-tools strong {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #fff;
  font-size: 13px;
  line-height: 16px;
}

.withdraw-audit-tools span {
  font-size: 16px;
}

.withdraw-filter {
  position: relative;
  justify-self: end;
  width: 138px;
}

.withdraw-filter > button {
  height: 40px;
}

.withdraw-filter > div {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(84, 110, 154, 0.22);
  border-radius: 10px;
  background: #151d32;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.withdraw-filter > div button {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  color: #8e99b2;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.withdraw-filter > div button:not(:last-child) {
  border-bottom: 1px solid rgba(84, 110, 154, 0.14);
}

.withdraw-filter > div button:hover,
.withdraw-filter > div button.selected {
  color: #fff;
  background: #152742;
}

.withdraw-empty {
  display: grid;
  justify-items: center;
  margin: 130px auto 0;
  width: min(100%, 240px);
  padding: 24px 18px;
  border-radius: 18px;
  color: rgba(116, 126, 148, 0.32);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(29, 156, 255, 0.08), transparent 44%),
    rgba(16, 24, 45, 0.22);
}

.withdraw-empty svg {
  width: 78px;
  height: 78px;
}

.withdraw-empty p {
  margin: 14px 0 0;
  color: rgba(151, 160, 176, 0.5);
  font-size: 18px;
  font-weight: 700;
}

.withdraw-mini-loader {
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 2px solid rgba(29, 156, 255, 0.22);
  border-top-color: #1d9cff;
  border-radius: 50%;
  animation: withdraw-spin 700ms linear infinite;
}

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

@keyframes withdraw-caret {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

.withdraw-pix-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.withdraw-pix-type-tabs button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(84, 110, 154, 0.32);
  border-radius: 6px;
  color: #7f8aa3;
  background: #10182d;
  font-size: 13px;
  font-weight: 800;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.withdraw-pix-type-tabs button.active {
  color: #fff;
  border-color: #2b9fff;
  background: #162038;
}


/* ── ex-lib/layouts/chinesa-v1/components/promo/promo-events.module.css ─────────────────────────── */
.promo-page {
  width: min(100%, 520px);
  min-height: 100%;
  margin: 0 auto;
  padding: 22px 20px 88px;
  color: #f7fbff;
  background: #071022;
}

.promo-tabs-shell {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -2px 10px;
  background: #071022;
}

.promo-tabs {
  display: flex;
  gap: 26px;
  padding: 0 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.promo-tabs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.promo-tabs::-webkit-scrollbar {
  display: none;
}

.promo-tabs button {
  position: relative;
  flex: 0 0 auto;
  height: 50px;
  outline: 0;
  color: #758097;
  background: transparent;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

.promo-tabs button:focus-visible {
  color: #fff;
}

.promo-tabs button:focus-visible::before {
  position: absolute;
  inset: 10px -8px;
  content: "";
  border: 1px solid rgba(29, 156, 255, 0.5);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(29, 156, 255, 0.16);
}

.promo-tabs button.active {
  color: #fff;
}

.promo-tabs button.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: #1d9cff;
  box-shadow: 0 0 10px rgba(29, 156, 255, 0.55);
}

.promo-tabs-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(118, 132, 162, 0.18);
  border-radius: 50%;
  color: #dfe8ff;
  background: rgba(18, 26, 43, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  transform: translateY(-50%);
}

.promo-tabs-nav.prev {
  left: -9px;
}

.promo-tabs-nav.next {
  right: -9px;
}

.promo-tabs-shell::before,
.promo-tabs-shell::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 34px;
  content: "";
  pointer-events: none;
}

.promo-tabs-shell::before {
  left: 0;
  background: linear-gradient(90deg, #071022, transparent);
}

.promo-tabs-shell::after {
  right: 0;
  background: linear-gradient(270deg, #071022, transparent);
}

.promo-event-list {
  display: grid;
  gap: 15px;
}

.promo-event-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  align-items: center;
  width: 100%;
  min-height: 152px;
  overflow: hidden;
  padding: 18px 18px 16px 28px;
  border-radius: 9px;
  color: #fff;
  background:
    radial-gradient(circle at 83% 50%, rgba(255, 212, 70, 0.28), transparent 29%),
    linear-gradient(120deg, #036cd2, #0a2c91 62%, #051c60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.promo-event-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 34% 50%, rgba(6, 16, 88, 0.46), transparent 33%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 22%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px);
  pointer-events: none;
}

.promo-event-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  max-width: 250px;
  text-transform: uppercase;
}

.promo-event-copy small,
.promo-event-copy em {
  color: #fff;
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  line-height: 24px;
  text-shadow: 0 2px 0 rgba(0, 27, 104, 0.58);
}

.promo-event-copy strong {
  margin: 1px 0;
  color: #ffe72e;
  font-size: 34px;
  font-weight: 900;
  line-height: 36px;
  text-shadow:
    0 3px 0 rgba(0, 37, 119, 0.72),
    0 0 12px rgba(255, 240, 70, 0.24);
}

.promo-event-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 170px;
  height: 116px;
}

.promo-event-art::before,
.promo-event-art::after {
  position: absolute;
  content: "";
}

.promo-event-art::before {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background:
    conic-gradient(from -20deg, #ff3d3d 0 24%, #ffd63c 24% 48%, #27bd64 48% 72%, #ff3d3d 72% 100%);
  box-shadow:
    inset 0 0 0 9px rgba(255, 227, 86, 0.92),
    0 9px 20px rgba(0, 0, 0, 0.22);
}

.promo-event-art::after {
  right: 8px;
  bottom: 0;
  width: 76px;
  height: 92px;
  border-radius: 48% 48% 16px 16px;
  background:
    radial-gradient(circle at 35% 26%, #fff 0 12px, transparent 13px),
    radial-gradient(circle at 70% 26%, #fff 0 12px, transparent 13px),
    radial-gradient(circle at 54% 56%, #ffe36d 0 17px, transparent 18px),
    linear-gradient(180deg, #ffd3b9, #ff971f);
  box-shadow: -22px 18px 0 rgba(255, 220, 71, 0.18);
}

.promo-event-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f6072c;
  box-shadow: 0 0 0 4px rgba(246, 7, 44, 0.1);
}

.theme-pink {
  background:
    radial-gradient(circle at 70% 45%, rgba(255, 255, 255, 0.8), transparent 24%),
    linear-gradient(120deg, #ffeaff, #ff8bd8 52%, #ff3f8e);
}

.theme-pink .promo-event-copy small,
.theme-pink .promo-event-copy em {
  color: #ffeaff;
  text-shadow: 0 2px 0 rgba(159, 0, 93, 0.7);
}

.theme-pink .promo-event-copy strong {
  color: #ff51cf;
  font-size: 56px;
  line-height: 58px;
  -webkit-text-stroke: 2px #fff0a6;
  text-shadow:
    0 4px 0 rgba(142, 0, 112, 0.55),
    0 0 18px rgba(255, 255, 255, 0.4);
}

.theme-agent .promo-event-art::before,
.theme-commission .promo-event-art::before,
.theme-vip .promo-event-art::before,
.theme-treasure .promo-event-art::before {
  width: 118px;
  height: 82px;
  border-radius: 16px 16px 34px 34px;
  background:
    radial-gradient(circle at 51% 35%, #fff1a0 0 11px, transparent 12px),
    linear-gradient(180deg, #ffc74a, #cb6611);
  box-shadow:
    inset 0 0 0 8px rgba(255, 245, 174, 0.28),
    24px 24px 0 rgba(255, 199, 74, 0.28);
}

.theme-agent .promo-event-art::after,
.theme-commission .promo-event-art::after,
.theme-vip .promo-event-art::after,
.theme-treasure .promo-event-art::after {
  right: 8px;
  bottom: 18px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, #fff5c6 0 12px, transparent 13px),
    linear-gradient(180deg, #ffdd62, #f08a18);
  box-shadow: -72px 18px 0 rgba(255, 220, 76, 0.28);
}

.theme-checkin .promo-event-art::before {
  width: 108px;
  height: 112px;
  border-radius: 22px;
  background:
    linear-gradient(#91d4ff 0 18px, transparent 18px),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(21, 114, 210, 0.28) 20px 26px),
    repeating-linear-gradient(180deg, transparent 0 24px, rgba(21, 114, 210, 0.22) 24px 30px),
    #d9f0ff;
  box-shadow: -44px 22px 0 rgba(255, 217, 42, 0.28);
  transform: rotate(7deg);
}

.theme-checkin .promo-event-art::after,
.theme-bonus .promo-event-art::after,
.theme-slot .promo-event-art::after {
  right: 98px;
  bottom: 8px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff8bd 0 12px, transparent 13px), #f2a229;
}

.theme-mystery .promo-event-art::before,
.theme-bonus .promo-event-art::before,
.theme-slot .promo-event-art::before {
  width: 118px;
  height: 118px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 30%, #efb2ff 0 11px, transparent 12px),
    radial-gradient(circle at 72% 28%, #79e4ff 0 9px, transparent 10px),
    linear-gradient(135deg, #7236ff, #ffb32b);
  box-shadow: 0 0 28px rgba(122, 102, 255, 0.28);
  transform: rotate(11deg);
}

.theme-cashback .promo-event-art::before,
.theme-robot .promo-event-art::before {
  width: 126px;
  height: 98px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 26% 42%, #dbf5ff 0 20px, transparent 21px),
    radial-gradient(circle at 72% 42%, #dbf5ff 0 20px, transparent 21px),
    linear-gradient(180deg, #36d6ff, #164ddc);
  box-shadow:
    inset 0 -8px 0 rgba(5, 20, 83, 0.18),
    -44px 24px 0 rgba(255, 207, 40, 0.22);
}

.theme-cashback .promo-event-art::after,
.theme-robot .promo-event-art::after {
  right: 22px;
  bottom: 4px;
  width: 82px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd83c, #f28b17);
}

.promo-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  color: #77839a;
  text-align: center;
}

.promo-empty strong {
  color: #fff;
  font-size: 20px;
}

.promo-task {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  padding-top: 10px;
}

.promo-task-sidebar {
  display: grid;
  justify-items: center;
  align-content: start;
}

.promo-task-rank {
  display: grid;
  justify-items: center;
  gap: 9px;
  width: 108px;
  min-height: 84px;
  padding: 14px 10px 12px;
  border: 1px solid rgba(84, 110, 154, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0, rgba(29, 156, 255, 0.13), transparent 48%),
    #10182d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.promo-task-rank span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #071022;
  background: linear-gradient(180deg, #36aaff, #0786e5);
  box-shadow: 0 8px 16px rgba(8, 134, 229, 0.2);
  font-size: 18px;
  font-weight: 900;
}

.promo-task-rank strong {
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}

.promo-task-rank small {
  color: #ffa51d;
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
}

.promo-task-sidebar i {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, rgba(118, 130, 154, 0.32), rgba(118, 130, 154, 0.08));
}

.promo-task-sidebar i::after {
  display: block;
  width: 8px;
  height: 8px;
  margin: 23px 0 0 -3px;
  border: 1px solid rgba(151, 161, 181, 0.58);
  content: "";
  transform: rotate(45deg);
}

.promo-task-sidebar button {
  width: 112px;
  height: 36px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.promo-task-sidebar .claim {
  color: #ffcf28;
  background: linear-gradient(180deg, #926d09, #7c650c);
  border: 2px solid #ffcf28;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 14px rgba(255, 207, 40, 0.22);
}

.promo-task-sidebar .claim.is-ready {
  color: #fff;
  background: linear-gradient(180deg, #ffbd2a, #db8d05);
  border-color: #ffd43a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 18px rgba(255, 207, 40, 0.34);
}

.promo-task-sidebar .claim.is-pending {
  color: rgba(255, 207, 40, 0.72);
}

.promo-task-sidebar .history {
  margin-top: 26px;
  color: #58d57d;
  background: linear-gradient(180deg, #256f45, #1d6a44);
  border: 2px solid #49ed95;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 14px rgba(73, 237, 149, 0.22);
}

.promo-task-rules {
  min-width: 0;
  padding: 20px 0 24px;
  color: rgba(151, 162, 184, 0.72);
}

.promo-task-rules h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
}

.promo-task-current {
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 13px 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(84, 110, 154, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(29, 156, 255, 0.14), transparent 34%),
    #0b1427;
}

.promo-task-current span {
  color: #74829b;
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
}

.promo-task-current strong {
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}

.promo-task-current em {
  color: #99a7c0;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.promo-task-current i {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d9cff, #46ee94);
  box-shadow: 0 0 12px rgba(29, 156, 255, 0.34);
}

.promo-task-current::after {
  position: absolute;
  right: 14px;
  bottom: 16px;
  left: 14px;
  z-index: 0;
  height: 4px;
  border-radius: 999px;
  content: "";
  background: rgba(84, 110, 154, 0.22);
}

.promo-task-current > * {
  position: relative;
  z-index: 1;
}

.promo-task-rules p {
  position: relative;
  margin: 0 0 10px;
  padding: 12px 12px 12px 34px;
  border: 1px solid rgba(84, 110, 154, 0.12);
  border-radius: 10px;
  background: rgba(16, 24, 45, 0.36);
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
}

.promo-task-rules p b {
  color: #46a9ff;
  font-size: 18px;
  font-weight: 900;
}

.promo-task-rules p::before {
  position: absolute;
  top: 13px;
  left: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  content: "";
  background: rgba(29, 156, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(29, 156, 255, 0.42);
}

.promo-history {
  display: grid;
  padding-top: 10px;
}

.promo-history-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid rgba(84, 110, 154, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #0b1427;
}

.promo-history-tools strong {
  display: grid;
  gap: 3px;
  justify-self: end;
  color: #f7fbff;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
}

.promo-history-tools strong span {
  color: #ffa51d;
  font-size: 16px;
}

.promo-history-tools > span {
  min-height: 40px;
}

.promo-period-filter {
  position: relative;
  width: 136px;
}

.promo-period-filter > button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #53607a;
  border-radius: 8px;
  color: #fff;
  background: #10182d;
  font-size: 12px;
  font-weight: 900;
  line-height: 14px;
  text-align: left;
}

.promo-period-filter > div {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 4;
  display: grid;
  width: 138px;
  overflow: hidden;
  border: 1px solid rgba(84, 110, 154, 0.22);
  border-radius: 10px;
  background: #151d32;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.promo-period-filter > div button {
  height: 38px;
  padding: 0 11px;
  color: #8e99b2;
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.promo-period-filter > div button:not(:last-child) {
  border-bottom: 1px solid rgba(84, 110, 154, 0.14);
}

.promo-period-filter > div button:hover,
.promo-period-filter > div button.selected {
  color: #fff;
  background: #152742;
}

.promo-history-head {
  display: grid;
  grid-template-columns: 0.86fr 1.02fr 1.24fr 0.7fr;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 12px;
  border: 1px solid rgba(84, 110, 154, 0.12);
  border-radius: 12px;
  color: #dfe7f8;
  background: rgba(16, 24, 45, 0.42);
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.promo-history-empty {
  display: grid;
  justify-items: center;
  margin: 132px auto 0;
  width: min(100%, 240px);
  padding: 24px 18px;
  border-radius: 18px;
  color: rgba(116, 126, 148, 0.28);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(29, 156, 255, 0.08), transparent 44%),
    rgba(16, 24, 45, 0.18);
}

.promo-history-empty svg {
  width: 78px;
  height: 78px;
}

.promo-history-empty p {
  margin: 14px 0 0;
  color: rgba(151, 160, 176, 0.55);
  font-size: 18px;
  font-weight: 700;
}

.promo-history-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.promo-history-row {
  display: grid;
  grid-template-columns: 0.86fr 1.02fr 1.24fr 0.7fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(84, 110, 154, 0.12);
  border-radius: 12px;
  color: #99a7c0;
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.045), transparent 48%),
    #10182d;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.promo-history-row strong {
  color: #ffa51d;
}

.promo-history-row em {
  color: #46ee94;
  font-style: normal;
}

.pending-claim-bar {
  position: sticky;
  bottom: 68px;
  z-index: 4;
  display: grid;
  place-items: center;
  margin: 190px -20px -88px;
  padding: 24px 20px;
  border-top: 1px solid rgba(84, 110, 154, 0.14);
  background: rgba(24, 32, 52, 0.98);
}

.pending-claim-bar button {
  width: min(100%, 218px);
  height: 50px;
  border-radius: 6px;
  color: #fff;
  background: #707070;
  font-size: 16px;
  font-weight: 900;
}

.rebate-page {
  display: grid;
  padding-top: 10px;
}

.rebate-available {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: #f5f8ff;
  font-size: 14px;
  font-weight: 900;
}

.rebate-available span {
  color: #ffa51d;
}

.rebate-layout {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
}

.rebate-sidebar {
  display: grid;
  align-content: start;
  gap: 6px;
}

.rebate-sidebar button {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 74px;
  border-radius: 8px;
  color: #7d879d;
  background: #10182d;
  font-size: 16px;
  line-height: 18px;
}

.rebate-sidebar button span {
  color: #9aa7c2;
  font-size: 25px;
  font-weight: 900;
  line-height: 28px;
}

.rebate-sidebar button.active {
  color: #fff;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 165, 29, 0.14), transparent 45%),
    #151d33;
}

.rebate-sidebar button.active span {
  color: #ffb329;
}

.rebate-sidebar .receive,
.rebate-sidebar .history {
  min-height: 28px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.rebate-sidebar .receive {
  margin-top: 6px;
  background: #777;
}

.rebate-sidebar .history {
  color: #fff;
  background: linear-gradient(180deg, #ffbd35, #ff9618);
}

.rebate-cards {
  display: grid;
  gap: 10px;
}

.rebate-cards > button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(118px, auto) 20px;
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 12px 10px;
  border: 1px solid rgba(84, 110, 154, 0.08);
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.035), transparent 45%),
    #10182d;
  text-align: left;
}

.rebate-cards > button:hover {
  border-color: rgba(29, 156, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.06), transparent 45%),
    #141d33;
}

.rebate-card-logo {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.rebate-card-main,
.rebate-card-values {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.rebate-card-main em {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.rebate-card-main small,
.rebate-card-values small,
.rebate-card-values em {
  color: #7b8498;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 14px;
}

.rebate-card-main i {
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  color: #f5f8ff;
  background: rgba(125, 135, 157, 0.42);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 12px;
  white-space: nowrap;
}

.rebate-card-main b,
.rebate-card-values b,
.rebate-card-values strong {
  color: #ffa51d;
}

.rebate-card-values {
  justify-items: end;
  text-align: right;
}

.rebate-card-values strong {
  color: #f5f8ff;
  font-size: 13px;
}

.rebate-rates {
  display: grid;
}

.rebate-rate-tools {
  display: grid;
  grid-template-columns: 1fr 1fr 0.74fr 0.9fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(84, 110, 154, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #0b1427;
}

.rebate-filter {
  position: relative;
}

.rebate-filter > button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #69748c;
  border-radius: 10px;
  color: #fff;
  background: #071022;
  font-size: 14px;
  font-weight: 900;
}

.rebate-rate-tools > strong {
  color: #f5f8ff;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
}

.rebate-option-grid {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  width: 454px;
  max-width: calc(100vw - 48px);
  padding: 12px;
  border: 1px solid rgba(84, 110, 154, 0.16);
  border-radius: 12px;
  background: #10182d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.rebate-option-grid.providers {
  grid-template-columns: repeat(4, 1fr);
  left: -120px;
}

.rebate-option-grid button {
  height: 50px;
  border: 1px solid rgba(84, 110, 154, 0.32);
  border-radius: 8px;
  color: #7f8aa3;
  background: #10182d;
  font-weight: 900;
}

.rebate-option-grid button.selected {
  color: #fff;
  border-color: #1d9cff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
}

.rebate-rate-table {
  display: grid;
  gap: 9px;
}

.rebate-rate-table div {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.9fr;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid rgba(84, 110, 154, 0.1);
  border-radius: 12px;
  color: #f5f8ff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.04), transparent 45%),
    #10182d;
}

.rebate-rate-table div:nth-child(odd) {
  background:
    linear-gradient(135deg, rgba(29, 156, 255, 0.055), transparent 45%),
    #10182d;
}

.rebate-rate-table div:nth-child(even) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 45%),
    #0b1427;
}

.rebate-rate-table div strong:last-child {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  min-width: 58px;
  height: 28px;
  border-radius: 999px;
  color: #ffa51d;
  background: rgba(255, 165, 29, 0.1);
}

.rebate-history .promo-history-empty {
  margin-top: 170px;
}

.vip-page {
  display: grid;
  padding-top: 8px;
}

.vip-status-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 104px;
  grid-template-rows: auto auto;
  gap: 10px 14px;
  align-items: center;
  min-height: 100px;
  margin-bottom: 18px;
  padding: 18px 12px 14px;
  border: 1px solid rgba(84, 110, 154, 0.14);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 165, 29, 0.12), transparent 34%),
    #151d32;
}

.vip-current-badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 5px;
  border-radius: 4px 4px 4px 0;
  color: #fff;
  background: #ff3c55;
  font-size: 12px;
  font-weight: 900;
  transform: translateY(-1px);
}

.vip-status-card > .vip-crown {
  grid-row: 1 / span 2;
  align-self: center;
}

.vip-status-card > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #8e99b2;
  font-size: 16px;
}

.vip-status-card > div b,
.vip-status-card > div em {
  color: #ffa51d;
  font-style: normal;
}

.vip-status-card > div strong {
  color: #8e99b2;
  font-size: 15px;
  line-height: 20px;
}

.vip-status-card button {
  grid-column: 3;
  height: 38px;
  border-radius: 7px;
  color: #fff;
  background: #777;
  font-size: 14px;
  font-weight: 900;
}

.vip-status-card button:last-child {
  grid-row: 2;
  background: linear-gradient(180deg, #ffbd35, #ff9618);
}

.vip-title {
  margin: 0 0 12px;
  color: #fff;
  font-size: 20px;
  line-height: 26px;
}

.vip-tabs {
  display: flex;
  gap: 26px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vip-tabs::-webkit-scrollbar {
  display: none;
}

.vip-tabs button {
  position: relative;
  flex: 0 0 auto;
  height: 42px;
  color: #758097;
  background: transparent;
  font-size: 14px;
  white-space: nowrap;
}

.vip-tabs button.active {
  color: #fff;
}

.vip-tabs button.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: #1d9cff;
}

.vip-table {
  display: grid;
  padding-bottom: 8px;
}

.vip-table-head,
.vip-level-row {
  display: grid;
  grid-template-columns: 1fr 1.45fr 0.9fr;
  align-items: center;
  text-align: center;
}

.vip-table.reward-only .vip-table-head,
.vip-table.reward-only .vip-level-row {
  grid-template-columns: 1fr 1fr;
}

.vip-table-head {
  min-height: 70px;
  color: #8da0c0;
  background: #1a243d;
  font-size: 14px;
}

.vip-level-row {
  min-height: 74px;
  color: #8da0c0;
  font-size: 12px;
  font-weight: 800;
}

.vip-level-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.075);
}

.vip-level-row strong {
  color: #ffa51d;
  font-size: 12px;
}

.vip-level-row small {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 7px;
  color: #fff;
  font-size: 12px;
}

.vip-level-row small i {
  display: block;
  width: 138px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #738096 0 18%, rgba(115, 128, 150, 0.55) 18%);
}

.vip-crown {
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-self: center;
  min-width: 58px;
  color: #d4dce9;
  line-height: 1;
}

.vip-crown svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.vip-crown b {
  position: absolute;
  right: 0;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  color: #667188;
  background: #e7edf7;
  font-size: 9px;
  line-height: 12px;
}

.vip-crown.tier-gold {
  color: #f5aa44;
}

.vip-crown.tier-purple {
  color: #b989ff;
}

.vip-crown.tier-blue {
  color: #3aa8ff;
}

.vip-crown.tier-pink {
  color: #ff67c8;
}

.vip-crown.tier-red {
  color: #ff4e36;
}

.vip-crown.tier-gold b {
  color: #d37a19;
  background: #ffe1bb;
}

.vip-crown.tier-purple b {
  color: #8c58d8;
  background: #eadbff;
}

.vip-crown.tier-blue b {
  color: #167fe8;
  background: #d7ecff;
}

.vip-crown.tier-pink b {
  color: #de3ca2;
  background: #ffe0f5;
}

.vip-crown.tier-red b {
  color: #d92618;
  background: #ffe0dd;
}

.vip-rules {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding: 0 12px 10px;
  color: rgba(151, 162, 184, 0.62);
}

.vip-rules h3 {
  margin: 0 0 4px;
  color: rgba(151, 162, 184, 0.68);
  font-size: 16px;
}

.vip-rules p {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 18px;
}

.vip-claim-bar {
  position: sticky;
  bottom: 68px;
  z-index: 4;
  display: grid;
  place-items: center;
  margin: 18px -20px -88px;
  padding: 24px 20px;
  border-top: 1px solid rgba(84, 110, 154, 0.14);
  background: rgba(24, 32, 52, 0.98);
}

.vip-claim-bar button {
  width: min(100%, 348px);
  height: 50px;
  border-radius: 7px;
  color: #fff;
  background: #707070;
  font-size: 16px;
  font-weight: 900;
}

.redeem-page {
  display: grid;
  gap: 26px;
  padding: 14px 2px 20px;
}

.redeem-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  min-height: 150px;
  overflow: hidden;
  padding: 20px 18px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 78% 24%, rgba(53, 234, 121, 0.5), transparent 12%),
    radial-gradient(circle at 90% 32%, rgba(255, 49, 155, 0.52), transparent 10%),
    radial-gradient(circle at 68% 56%, rgba(44, 155, 255, 0.58), transparent 13%),
    linear-gradient(120deg, #0a46da, #062a91 60%, #061955);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.redeem-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 22% 50%, rgba(0, 10, 90, 0.48), transparent 35%),
    repeating-radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px);
}

.redeem-hero div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  text-transform: uppercase;
}

.redeem-hero span {
  color: #ffe85f;
  font-size: 22px;
  font-weight: 900;
  line-height: 24px;
  text-shadow: 0 2px 0 rgba(0, 32, 114, 0.7);
}

.redeem-hero strong {
  color: #fff;
  max-width: 260px;
  font-size: 15px;
  line-height: 19px;
  text-shadow: 0 2px 0 rgba(0, 32, 114, 0.7);
}

.redeem-hero em {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.redeem-hero em::first-letter {
  color: #ffe85f;
}

.redeem-hero i {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 82px;
  height: 128px;
  border: 5px solid #eef5ff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, #2ca9ff 0 24px, transparent 25px),
    linear-gradient(180deg, #fff, #d9ebff);
  box-shadow:
    -60px 42px 0 -22px rgba(255, 195, 37, 0.75),
    -34px 62px 0 -18px rgba(255, 158, 29, 0.7),
    0 12px 22px rgba(0, 0, 0, 0.32);
  transform: rotate(-12deg);
}

.redeem-hero i::before,
.redeem-hero i::after {
  position: absolute;
  content: "";
}

.redeem-hero i::before {
  top: 44px;
  left: 26px;
  border-right: 15px solid transparent;
  border-bottom: 24px solid #fff;
  border-left: 15px solid transparent;
  transform: rotate(90deg);
}

.redeem-hero i::after {
  right: -38px;
  bottom: 18px;
  width: 64px;
  height: 72px;
  border-radius: 48% 48% 16px 16px;
  background:
    radial-gradient(circle at 35% 26%, #fff 0 10px, transparent 11px),
    radial-gradient(circle at 70% 26%, #fff 0 10px, transparent 11px),
    radial-gradient(circle at 54% 56%, #ffe36d 0 14px, transparent 15px),
    linear-gradient(180deg, #9bf58a, #25b456);
}

.redeem-form-card {
  display: grid;
  gap: 28px;
}

.redeem-form-card h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 26px;
}

.redeem-form-card label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  height: 60px;
  padding: 0 14px;
  border: 1px solid rgba(84, 110, 154, 0.45);
  border-radius: 8px;
  background: #071022;
}

.redeem-form-card input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-size: 18px;
  font-weight: 800;
}

.redeem-form-card input::placeholder {
  color: #7f889a;
}

.redeem-form-card label button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #9aa3b4;
  background: transparent;
}

.redeem-form-card > button {
  height: 50px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(180deg, #31a7fa, #087bd8);
  box-shadow: 0 12px 28px rgba(8, 123, 216, 0.24);
  font-size: 16px;
  font-weight: 900;
}

.redeem-provider-cloud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px 17px;
  align-items: center;
  padding: 20px 16px 4px;
  text-align: center;
}

.redeem-provider-cloud span {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 16px;
}

.redeem-provider-cloud span:nth-child(2),
.redeem-provider-cloud span:nth-child(3),
.redeem-provider-cloud span:nth-child(4) {
  color: #ff9d18;
  font-size: 22px;
}

.redeem-provider-cloud span:nth-child(6),
.redeem-provider-cloud span:nth-child(7) {
  color: #83f4eb;
}

.redeem-socials {
  display: grid;
  gap: 14px;
  padding-top: 10px;
  text-align: center;
}

.redeem-socials p {
  margin: 0;
  color: #44506a;
  font-size: 12px;
}

.redeem-socials div {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  justify-content: center;
  gap: 24px;
}

.redeem-social {
  display: grid;
  place-items: center;
  height: 33px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 7px 16px rgba(0, 0, 0, 0.24);
}

.redeem-social.telegram,
.redeem-social.facebook {
  background: linear-gradient(180deg, #70e2ff, #0875e7);
}

.redeem-social.whatsapp {
  background: linear-gradient(180deg, #60ef65, #0a9f2f);
}

.redeem-social.instagram {
  background: linear-gradient(135deg, #ffba35, #fb2b77 52%, #7e42ff);
}

.redeem-rules {
  margin: 8px 4px 0;
  padding: 22px 0 0 18px;
  border-top: 1px solid rgba(84, 110, 154, 0.2);
  color: rgba(151, 162, 184, 0.6);
  font-size: 14px;
  font-weight: 800;
  line-height: 19px;
}

@media (max-width: 430px) {
  .promo-page {
    padding-inline: 12px;
  }

  .promo-tabs {
    gap: 20px;
  }

  .promo-event-card {
    grid-template-columns: minmax(0, 1fr) 142px;
    min-height: 132px;
    padding: 14px 14px 14px 18px;
  }

  .promo-event-copy small,
  .promo-event-copy em {
    font-size: 17px;
    line-height: 20px;
  }

  .promo-event-copy strong {
    font-size: 29px;
    line-height: 31px;
  }

  .theme-pink .promo-event-copy strong {
    font-size: 42px;
    line-height: 45px;
  }

  .promo-task {
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 12px;
  }

  .promo-task-rank,
  .promo-task-sidebar button {
    width: 102px;
  }

  .promo-task-rules p {
    padding: 11px 10px 11px 30px;
    font-size: 12px;
    line-height: 19px;
  }

  .promo-history-empty {
    margin-top: 110px;
  }

  .rebate-layout {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .rebate-cards > button {
    grid-template-columns: 34px minmax(0, 1fr) 96px 16px;
    gap: 6px;
    padding-inline: 8px;
  }

  .rebate-card-main small,
  .rebate-card-values small,
  .rebate-card-values em,
  .rebate-card-main i {
    font-size: 11px;
  }

  .rebate-option-grid {
    width: 396px;
  }

  .rebate-option-grid.providers {
    grid-template-columns: repeat(3, 1fr);
    left: -98px;
  }

  .vip-status-card {
    grid-template-columns: 72px minmax(0, 1fr) 92px;
    gap: 9px;
  }

  .vip-tabs {
    gap: 22px;
  }

  .vip-claim-bar {
    margin-inline: -12px;
  }

  .pending-claim-bar {
    margin-inline: -12px;
  }

  .redeem-page {
    gap: 24px;
  }

  .redeem-hero {
    grid-template-columns: minmax(0, 1fr) 124px;
    min-height: 136px;
    padding-inline: 14px;
  }

  .redeem-hero span {
    font-size: 18px;
    line-height: 21px;
  }

  .redeem-hero strong {
    font-size: 13px;
    line-height: 17px;
  }

  .redeem-hero i {
    width: 72px;
    height: 112px;
  }

  .redeem-provider-cloud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .redeem-socials div {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}


/* ── ex-lib/layouts/chinesa-v1/components/support/support-tickets.module.css ── */
.cn-support-tickets-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.cn-support-tickets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cn-support-tickets-header strong {
  font-size: 15px;
  font-weight: 800;
}

.cn-support-tickets-newButton {
  padding: 8px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  background: var(--blue);
  transition: filter 160ms ease;
}

.cn-support-tickets-newButton:hover {
  filter: brightness(1.12);
}

.cn-support-tickets-newButton:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cn-support-tickets-ticketCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 12px;
  background: var(--panel-2);
  transition: border-color 160ms ease;
}

.cn-support-tickets-ticketCard:hover {
  border-color: var(--blue);
}

.cn-support-tickets-ticketCard:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cn-support-tickets-ticketCard:has(.cn-support-tickets-open) {
  border-left-color: var(--blue);
}

.cn-support-tickets-ticketCard:has(.cn-support-tickets-pending) {
  border-left-color: var(--orange);
}

.cn-support-tickets-ticketCard:has(.cn-support-tickets-resolved),
.cn-support-tickets-ticketCard:has(.cn-support-tickets-closed) {
  border-left-color: var(--green);
}

.cn-support-tickets-ticketCard strong {
  color: var(--text);
  font-size: 14px;
}

.cn-support-tickets-ticketCard small {
  color: var(--muted);
  font-size: 12px;
}

.cn-support-tickets-statusChip {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.cn-support-tickets-statusChip.cn-support-tickets-open {
  color: var(--blue);
  background: rgba(22, 136, 233, 0.14);
}

.cn-support-tickets-statusChip.cn-support-tickets-pending {
  color: var(--orange);
  background: rgba(244, 162, 29, 0.14);
}

.cn-support-tickets-statusChip.cn-support-tickets-resolved,
.cn-support-tickets-statusChip.cn-support-tickets-closed {
  color: var(--green);
  background: rgba(15, 188, 105, 0.14);
}

.cn-support-tickets-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cn-support-tickets-form input,
.cn-support-tickets-form select,
.cn-support-tickets-form textarea {
  padding: 11px 12px;
  color: var(--text);
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--page);
}

.cn-support-tickets-form textarea {
  min-height: 90px;
  resize: vertical;
}

.cn-support-tickets-form input:focus-visible,
.cn-support-tickets-form select:focus-visible,
.cn-support-tickets-form textarea:focus-visible {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 136, 233, 0.22);
}

.cn-support-tickets-submitButton {
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border-radius: 10px;
  background: var(--blue);
  transition: filter 160ms ease;
}

.cn-support-tickets-submitButton:hover {
  filter: brightness(1.12);
}

.cn-support-tickets-submitButton:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cn-support-tickets-submitButton:disabled {
  opacity: 0.55;
}

.cn-support-tickets-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cn-support-tickets-message {
  max-width: 85%;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 12px;
}

.cn-support-tickets-message time {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cn-support-tickets-playerMessage {
  align-self: flex-end;
  color: #fff;
  background: var(--blue);
  border-bottom-right-radius: 4px;
}

.cn-support-tickets-agentMessage {
  align-self: flex-start;
  color: var(--text);
  background: var(--panel);
  border-bottom-left-radius: 4px;
}

.cn-support-tickets-backLink {
  align-self: flex-start;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  background: transparent;
}

.cn-support-tickets-backLink:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cn-support-tickets-empty {
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ── ex-lib/layouts/chinesa-v1/components/ui/page-header.module.css ── */
.cn-page-header-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  min-height: 62px;
  margin: 0 -6px 22px;
}

.cn-page-header-header.cn-page-header-divided {
  border-bottom: 1px solid rgba(68, 91, 130, 0.16);
}

.cn-page-header-back,
.cn-page-header-action,
.cn-page-header-placeholder {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
}

.cn-page-header-back,
.cn-page-header-action {
  color: #fff;
  background: transparent;
}

.cn-page-header-action > button,
.cn-page-header-action > a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: inherit;
  background: transparent;
}

.cn-page-header-title {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/colecao/slot-games.module.css ── */
.cn-slot-games-page {
  position: relative;
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 20px 96px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 50% 9%, rgba(34, 144, 255, 0.1), transparent 21rem),
    linear-gradient(180deg, #071020 0%, #071020 100%);
}

.cn-slot-games-searchBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  min-height: 50px;
  margin-bottom: 14px;
  overflow: hidden;
  color: #f8fbff;
  background: #10182b;
  border: 1px solid rgba(135, 157, 203, 0.08);
  border-radius: 6px;
}

.cn-slot-games-searchBoxHasValue {
  grid-template-columns: minmax(0, 1fr) auto 54px;
}

.cn-slot-games-searchBox input {
  min-width: 0;
  height: 50px;
  padding: 0 15px;
  color: #f8fbff;
  font-size: 16px;
  font-weight: 800;
  background: transparent;
  border: 0;
  outline: none;
}

.cn-slot-games-searchBox input::placeholder {
  color: #8c96aa;
}

.cn-slot-games-searchBox svg {
  justify-self: center;
}

.cn-slot-games-clearSearch {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #aebbd5;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.cn-slot-games-clearSearch:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.cn-slot-games-browser {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.cn-slot-games-providerRail {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 0 0 8px 3px;
  scrollbar-width: none;
}

.cn-slot-games-providerRail::-webkit-scrollbar {
  display: none;
}

.cn-slot-games-providerRail button {
  display: grid;
  width: 92px;
  min-height: 76px;
  place-items: center;
  gap: 6px;
  padding: 9px 5px 8px;
  color: #f8fbff;
  background: #181f32;
  border: 1px solid rgba(137, 160, 207, 0.08);
  border-radius: 7px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.cn-slot-games-providerRail button:hover {
  transform: translateY(-1px);
}

.cn-slot-games-providerRail span {
  display: grid;
  width: 54px;
  min-height: 28px;
  place-items: center;
  color: #7e879a;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.24));
}

.cn-slot-games-providerRail b {
  font-size: 14px;
  line-height: 1.05;
}

.cn-slot-games-activeProvider {
  background: linear-gradient(180deg, #24a9ff, #137bd7) !important;
  border-color: rgba(141, 220, 255, 0.5) !important;
  box-shadow: 0 10px 18px rgba(19, 123, 215, 0.22);
}

.cn-slot-games-activeProvider span {
  color: #fff;
}

.cn-slot-games-resultsPane {
  min-width: 0;
}

.cn-slot-games-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cn-slot-games-tabs button {
  min-width: 0;
  min-height: 35px;
  padding: 0 8px;
  color: #f8fbff;
  font-size: 13px;
  font-weight: 850;
  background: transparent;
  border: 1px solid rgba(57, 83, 127, 0.72);
  border-radius: 6px;
}

.cn-slot-games-activeTab {
  background: linear-gradient(180deg, #1d93ec, #137bd7) !important;
  border-color: rgba(97, 188, 255, 0.42) !important;
}

.cn-slot-games-gameGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cn-slot-games-gameGrid .casino-game-card {
  height: 154px;
  border-radius: 9px;
}

.cn-slot-games-loadMore {
  display: grid;
  min-height: 74px;
  place-items: center;
}

.cn-slot-games-loadMore span {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: #2da7ff;
  border-radius: 50%;
  animation: cn-slot-games-spin 0.85s linear infinite;
}

.cn-slot-games-emptyState {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
}

.cn-slot-games-emptyArt {
  position: relative;
  width: 150px;
  height: 132px;
  color: #4b5569;
}

.cn-slot-games-emptyArt svg:first-child {
  position: absolute;
  left: 10px;
  top: 18px;
}

.cn-slot-games-emptyArt svg:last-child {
  position: absolute;
  right: 10px;
  top: 0;
  transform: rotate(-12deg);
}

.cn-slot-games-emptyState strong {
  font-size: 18px;
  font-weight: 900;
}

@keyframes cn-slot-games-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Capa da categoria (/categoria/[slug]) — banner de topo acima da busca. */
.cn-slot-games-categoryBanner {
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(57, 83, 127, 0.72);
}

.cn-slot-games-categoryBanner img {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
}

/* Fileira de chips das categorias da plataforma, acima das abas. */
.cn-slot-games-categoryChips {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cn-slot-games-categoryChips::-webkit-scrollbar {
  display: none;
}

.cn-slot-games-categoryChips button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 13px;
  color: #b9c6dd;
  font-size: 12px;
  font-weight: 800;
  background: rgba(16, 33, 62, 0.85);
  border: 1px solid rgba(57, 83, 127, 0.72);
  border-radius: 999px;
}

.cn-slot-games-categoryChips button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.cn-slot-games-categoryChips button svg {
  color: #f4a21d;
}

.cn-slot-games-activeCategoryChip {
  color: #fff !important;
  background: linear-gradient(180deg, #1d93ec, #137bd7) !important;
  border-color: rgba(97, 188, 255, 0.42) !important;
}

.cn-slot-games-activeCategoryChip svg {
  color: #fff !important;
}

@media (max-width: 430px) {
  .cn-slot-games-page {
    padding-inline: 12px;
  }

  .cn-slot-games-categoryChips {
    gap: 6px;
  }

  .cn-slot-games-categoryChips button {
    font-size: 11px;
    padding-inline: 10px;
  }

  .cn-slot-games-browser {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 9px;
  }

  .cn-slot-games-tabs {
    gap: 7px;
  }

  .cn-slot-games-tabs button {
    font-size: 12px;
    padding-inline: 5px;
  }

  .cn-slot-games-gameGrid {
    gap: 10px;
  }

  .cn-slot-games-gameGrid .casino-game-card {
    height: 136px;
  }
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/convidar/invite-page.module.css ── */
.cn-invite-page-invitePage {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 24px 34px;
  color: #fff;
  background: #071022;
}

.cn-invite-page-tabs {
  display: flex;
  gap: 9px;
  margin: -4px 0 16px;
  padding-bottom: 1px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cn-invite-page-tabs::-webkit-scrollbar {
  display: none;
}

.cn-invite-page-tabs button {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: #101828;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cn-invite-page-tabs button:hover {
  color: #fff;
  background: #17233d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.cn-invite-page-tabs .cn-invite-page-activeTab {
  background: linear-gradient(180deg, #2da5ff, #127bd7);
  box-shadow: 0 8px 18px rgba(18, 123, 215, 0.18);
}

.cn-invite-page-tabs .cn-invite-page-activeTab:hover {
  background: linear-gradient(180deg, #38adff, #1687eb);
}

.cn-invite-page-statusCard,
.cn-invite-page-referenceCard,
.cn-invite-page-infoCard {
  border: 1px solid rgba(78, 99, 142, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(21, 30, 52, 0.98), rgba(16, 24, 43, 0.98));
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cn-invite-page-statusCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: 16px;
  padding: 16px 14px;
}

.cn-invite-page-statusInfo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
}

.cn-invite-page-statusInfo div {
  min-width: 0;
}

.cn-invite-page-statusInfo span {
  display: block;
  margin-bottom: 4px;
  color: #8fa1bf;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.cn-invite-page-statusInfo strong,
.cn-invite-page-statusInfo b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-invite-page-statusInfo b {
  color: #ffad20;
}

.cn-invite-page-statusInfo small {
  grid-column: 1 / 4;
  display: block;
  margin-top: 4px;
  color: #8b98ae;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.cn-invite-page-statusActions {
  display: grid;
  align-content: start;
  gap: 12px;
}

.cn-invite-page-statusCard button {
  height: 38px;
  border-radius: 7px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  background: #9a9a98;
}

.cn-invite-page-statusCard button:last-child {
  background: #ffad63;
}

.cn-invite-page-referenceCard {
  margin-top: 14px;
  padding: 16px 16px 18px;
}

.cn-invite-page-referenceCard h2,
.cn-invite-page-infoCard h2 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.cn-invite-page-referenceCard h2 {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(115, 133, 169, 0.2);
}

.cn-invite-page-referenceBody {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.cn-invite-page-qrBox {
  overflow: hidden;
  border-radius: 8px;
  background: #1d8fe9;
}

.cn-invite-page-qrBox div {
  display: grid;
  place-items: center;
  padding: 5px;
  background: #fff;
}

.cn-invite-page-qrBox button {
  width: 100%;
  height: 31px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: #1c94ed;
}

.cn-invite-page-linkBox {
  min-width: 0;
}

.cn-invite-page-linkBox strong {
  display: block;
  margin: 0 0 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.cn-invite-page-linkBox div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  min-height: 104px;
  padding: 10px 10px;
  border: 1px solid rgba(68, 91, 130, 0.32);
  border-radius: 8px;
  background: rgba(9, 16, 31, 0.24);
}

.cn-invite-page-linkBox span {
  align-self: start;
  min-width: 0;
  overflow: hidden;
  color: #9fc8ff;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-invite-page-linkBox button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #dce8f8;
  background: transparent;
}

.cn-invite-page-linkBox button:first-of-type {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.cn-invite-page-linkBox button:last-of-type {
  grid-column: 2;
  grid-row: 2;
}

.cn-invite-page-socialList {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cn-invite-page-socialList::-webkit-scrollbar {
  display: none;
}

.cn-invite-page-socialList button {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.cn-invite-page-facebook {
  background: #1877f2;
}

.cn-invite-page-whatsapp {
  background: #28c84b;
}

.cn-invite-page-telegram {
  background: #2ca5e0;
}

.cn-invite-page-mail {
  background: #3fa2ee;
}

.cn-invite-page-instagram {
  background: radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 62%, #285aeb 100%);
}

.cn-invite-page-tiktok {
  background: #05070b;
}

.cn-invite-page-youtube {
  background: #ff1d1d;
}

.cn-invite-page-infoCard {
  margin-top: 14px;
  padding: 15px 18px 4px;
}

.cn-invite-page-infoCard header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(115, 133, 169, 0.24);
}

.cn-invite-page-infoCard header button {
  color: #158df7;
  font-size: 14px;
  font-weight: 800;
  background: transparent;
}

.cn-invite-page-infoCard div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 43px;
  border-bottom: 1px solid rgba(115, 133, 169, 0.18);
}

.cn-invite-page-infoCard div:last-child {
  border-bottom: 0;
}

.cn-invite-page-infoCard span {
  color: #acc1e4;
  font-size: 15px;
  font-weight: 500;
}

.cn-invite-page-infoCard strong {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.cn-invite-page-infoCard:first-of-type strong {
  color: #ffa51f;
}

.cn-invite-page-networkPage {
  display: grid;
  gap: 16px;
}

.cn-invite-page-networkHero,
.cn-invite-page-networkMap,
.cn-invite-page-networkRules {
  border: 1px solid rgba(88, 111, 154, 0.35);
  border-radius: 12px;
  background:
    radial-gradient(circle at 24% 0%, rgba(31, 144, 241, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(20, 30, 54, 0.98), rgba(13, 22, 41, 0.98));
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cn-invite-page-networkHero {
  display: grid;
  gap: 18px;
  padding: 16px;
}

.cn-invite-page-agentOverview {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.cn-invite-page-agentAvatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto;
  border: 2px solid #ffca41;
  border-radius: 50%;
  color: #182238;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff4d5, #f2a95b);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.cn-invite-page-agentAvatar::after {
  content: "A";
  position: absolute;
  right: -5px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  background: #ffab1f;
}

.cn-invite-page-agentOverview span {
  display: block;
  color: #8fa8d0;
  font-size: 12px;
  font-weight: 900;
}

.cn-invite-page-agentOverview strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.cn-invite-page-agentOverview p {
  margin: 5px 0 0;
  color: #8fa1bf;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.cn-invite-page-summaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cn-invite-page-summaryGrid article {
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid rgba(82, 105, 151, 0.22);
  border-radius: 9px;
  background: rgba(7, 15, 30, 0.45);
}

.cn-invite-page-summaryGrid span {
  display: block;
  overflow: hidden;
  color: #8799bb;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-invite-page-summaryGrid strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.cn-invite-page-summaryGrid .cn-invite-page-goldValue {
  color: #ffa51f;
}

.cn-invite-page-networkMap {
  display: grid;
  gap: 14px;
  padding: 15px;
}

.cn-invite-page-networkMap > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(115, 133, 169, 0.18);
}

.cn-invite-page-networkMap > header span {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.cn-invite-page-networkMap > header strong {
  padding: 5px 9px;
  border-radius: 999px;
  color: #24a4ff;
  font-size: 11px;
  font-weight: 900;
  background: rgba(31, 144, 241, 0.12);
}

.cn-invite-page-networkTier {
  display: grid;
  gap: 9px;
}

.cn-invite-page-networkTier > p {
  margin: 0;
  color: #8fa8d0;
  font-size: 12px;
  font-weight: 900;
}

.cn-invite-page-networkTier > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.cn-invite-page-networkNode {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px 8px 10px;
  border: 1px solid rgba(83, 105, 148, 0.34);
  border-radius: 9px;
  text-align: center;
  background: rgba(8, 16, 31, 0.72);
}

.cn-invite-page-nodeAvatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #111b2c;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffe0b0 0 45%, #6b422b 46% 63%, #edf6ff 64%);
  box-shadow: 0 9px 16px rgba(0, 0, 0, 0.2);
}

.cn-invite-page-nodeAvatar.cn-invite-page-man {
  background: linear-gradient(180deg, #ffe0b0 0 45%, #6b422b 46% 63%, #edf6ff 64%);
}

.cn-invite-page-nodeAvatar.cn-invite-page-woman,
.cn-invite-page-nodeAvatar.cn-invite-page-woman2 {
  background: linear-gradient(180deg, #ffd9ae 0 45%, #3a2734 46% 63%, #edf6ff 64%);
}

.cn-invite-page-nodeAvatar.cn-invite-page-man2,
.cn-invite-page-nodeAvatar.cn-invite-page-woman2 {
  border-color: #cde7ff;
}

.cn-invite-page-networkNode strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-invite-page-networkNode p {
  margin: 3px 0 0;
  color: #8fa1bf;
  font-size: 11px;
  font-weight: 900;
}

.cn-invite-page-networkNode b {
  color: #ffa51f;
}

.cn-invite-page-networkNode small {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.cn-invite-page-treeDivider {
  position: relative;
  height: 22px;
}

.cn-invite-page-treeDivider::before,
.cn-invite-page-treeDivider::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cn-invite-page-treeDivider::before {
  top: 0;
  width: 2px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #279cff, #27d95d);
}

.cn-invite-page-treeDivider::after {
  top: 8px;
  width: 64%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39, 217, 93, 0.75), rgba(39, 156, 255, 0.75), transparent);
}

.cn-invite-page-networkRules {
  padding: 15px;
}

.cn-invite-page-networkRules h2 {
  margin: 0 0 10px;
  color: #9fc8ff;
  font-size: 14px;
  font-weight: 900;
}

.cn-invite-page-networkRules p {
  margin: 0 0 8px;
  color: #8fa1bf;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.cn-invite-page-networkRules p:last-child {
  margin-bottom: 0;
}

.cn-invite-page-networkRules strong {
  color: #9fb7dd;
}

.cn-invite-page-performancePage,
.cn-invite-page-commissionPage {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: calc(100vh - 190px);
}

.cn-invite-page-performanceFilters,
.cn-invite-page-commissionFilters {
  display: grid;
  grid-template-columns: 134px minmax(0, 1fr);
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(78, 99, 142, 0.16);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(31, 144, 241, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(18, 27, 48, 0.98), rgba(13, 22, 41, 0.98));
}

.cn-invite-page-commissionFilters {
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 12px 12px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.12);
}

.cn-invite-page-dateControl,
.cn-invite-page-searchControl,
.cn-invite-page-rangeControl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  height: 40px;
  min-width: 0;
  padding: 0 9px 0 12px;
  border-radius: 8px;
  background: rgba(5, 12, 26, 0.74);
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.cn-invite-page-dateControl,
.cn-invite-page-rangeControl {
  position: relative;
  display: block;
  padding: 0 34px 0 12px;
}

.cn-invite-page-datePickerWrapper {
  display: block;
  min-width: 0;
}

.cn-invite-page-datePickerWrapper > div {
  display: block;
}

.cn-invite-page-datePickerWrapper input,
.cn-invite-page-searchControl input {
  display: block;
  width: 100%;
  height: 40px;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: transparent;
}

.cn-invite-page-searchControl input::placeholder {
  color: #7585a2;
}

.cn-invite-page-dateControl svg,
.cn-invite-page-searchControl svg,
.cn-invite-page-rangeControl svg {
  color: #9badcb;
}

.cn-invite-page-dateControl:hover,
.cn-invite-page-searchControl:hover,
.cn-invite-page-rangeControl:hover,
.cn-invite-page-selectControl > button:hover {
  background: rgba(8, 18, 38, 0.95);
  box-shadow: inset 0 0 0 1px rgba(31, 144, 241, 0.36);
}

.cn-invite-page-dateControl svg,
.cn-invite-page-rangeControl svg {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.cn-invite-page-selectControl {
  position: relative;
  min-width: 0;
}

.cn-invite-page-selectControl > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 11px 0 14px;
  border-radius: 8px;
  color: #9fc8ff;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  background: rgba(5, 12, 26, 0.74);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.cn-invite-page-selectControl > button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-invite-page-selectControl > button svg {
  color: #9badcb;
}

.cn-invite-page-selectMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 100%;
  min-width: 150px;
  overflow: hidden;
  border: 1px solid rgba(99, 119, 158, 0.32);
  border-radius: 10px;
  background: linear-gradient(180deg, #121d35, #0a1327);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cn-invite-page-selectMenu button {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #8fa1bf;
  font-size: 12px;
  font-weight: 900;
  background: transparent;
  transition:
    background 140ms ease,
    color 140ms ease;
}

.cn-invite-page-selectMenu button + button {
  border-top: 1px solid rgba(115, 133, 169, 0.1);
}

.cn-invite-page-selectMenu .cn-invite-page-selectedOption {
  color: #1c9bff;
  background: rgba(54, 73, 107, 0.72);
}

.cn-invite-page-selectMenu button:hover {
  color: #fff;
  background: rgba(31, 144, 241, 0.18);
}

.cn-invite-page-selectMenu .cn-invite-page-selectedOption:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(31, 144, 241, 0.55), rgba(31, 144, 241, 0.2));
}

.cn-invite-page-performanceTable,
.cn-invite-page-commissionTable {
  overflow-x: auto;
  border: 1px solid rgba(78, 99, 142, 0.16);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(10, 18, 34, 0.92);
  scrollbar-width: none;
}

.cn-invite-page-commissionTable {
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(15, 24, 43, 0.94), rgba(9, 17, 33, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cn-invite-page-performanceTable::-webkit-scrollbar,
.cn-invite-page-commissionTable::-webkit-scrollbar {
  display: none;
}

.cn-invite-page-performanceTable header,
.cn-invite-page-commissionTable header {
  display: grid;
  min-width: 500px;
  background: #18223d;
}

.cn-invite-page-performanceTable header {
  grid-template-columns: 1.2fr 1fr 1fr 0.9fr 1fr;
}

.cn-invite-page-commissionTable header {
  grid-template-columns: 1.5fr 0.9fr 0.9fr 0.8fr 1fr;
  min-width: 540px;
}

.cn-invite-page-performanceTable .cn-invite-page-tableRow,
.cn-invite-page-commissionTable .cn-invite-page-tableRow {
  display: grid;
  min-width: 500px;
  border-top: 1px solid rgba(78, 99, 142, 0.14);
}

.cn-invite-page-performanceTable .cn-invite-page-tableRow {
  grid-template-columns: 1.2fr 1fr 1fr 0.9fr 1fr;
}

.cn-invite-page-commissionTable .cn-invite-page-tableRow {
  grid-template-columns: 1.5fr 0.9fr 0.9fr 0.8fr 1fr;
  min-width: 540px;
}

.cn-invite-page-performanceTable .cn-invite-page-tableRow span,
.cn-invite-page-commissionTable .cn-invite-page-tableRow span {
  color: #b9c5de;
  font-weight: 600;
}

.cn-invite-page-performanceTable span,
.cn-invite-page-commissionTable span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.cn-invite-page-commissionTable span {
  min-height: 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.cn-invite-page-bonusPage {
  min-height: calc(100vh - 156px);
  padding: 16px 18px 28px;
  border: 1px solid rgba(78, 99, 142, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 0%, rgba(31, 144, 241, 0.12), transparent 33%),
    linear-gradient(180deg, rgba(17, 26, 47, 0.98), rgba(10, 18, 34, 0.98));
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cn-invite-page-bonusTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid rgba(115, 133, 169, 0.13);
}

.cn-invite-page-bonusTabs button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 42px;
  color: #7787a3;
  font-size: 14px;
  font-weight: 800;
  background: transparent;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.cn-invite-page-bonusTabs button:hover {
  color: #fff;
  background: rgba(31, 144, 241, 0.08);
}

.cn-invite-page-bonusTabs .cn-invite-page-activeBonusTab {
  color: #fff;
}

.cn-invite-page-bonusTabs .cn-invite-page-activeBonusTab::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: -1px;
  left: 12%;
  height: 2px;
  border-radius: 999px;
  background: #169eff;
  box-shadow: 0 0 16px rgba(22, 158, 255, 0.45);
}

.cn-invite-page-bonusTable {
  margin-top: 10px;
  overflow: hidden;
}

.cn-invite-page-bonusTable header,
.cn-invite-page-bonusTable article {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1.3fr;
  align-items: center;
}

.cn-invite-page-bonusTable header {
  min-height: 50px;
  background: #1a243f;
}

.cn-invite-page-bonusTable header span {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 0 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.cn-invite-page-bonusTable article {
  min-height: 50px;
  color: #7f91b4;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.cn-invite-page-bonusTable article:nth-child(odd) {
  background: rgba(255, 255, 255, 0.035);
}

.cn-invite-page-bonusTable article span,
.cn-invite-page-bonusTable article strong {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 0 8px;
}

.cn-invite-page-bonusTable article strong {
  color: #ffa51f;
  font-weight: 900;
}

.cn-invite-page-emptyState {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 410px;
  color: rgba(125, 139, 166, 0.5);
}

.cn-invite-page-emptyState svg {
  margin-bottom: 14px;
  color: rgba(65, 78, 106, 0.62);
  stroke-width: 1.5;
}

.cn-invite-page-emptyState p {
  margin: 0;
  color: #6f7d94;
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 430px) {
  .cn-invite-page-invitePage {
    padding-inline: 14px;
  }

  .cn-invite-page-statusCard {
    grid-template-columns: 1fr;
  }

  .cn-invite-page-statusActions {
    grid-template-columns: 1fr 1fr;
  }

  .cn-invite-page-statusInfo {
    grid-template-columns: 1fr 1fr;
  }

  .cn-invite-page-statusInfo small {
    grid-column: 1 / 3;
  }

  .cn-invite-page-networkHero {
    padding: 16px 12px;
  }

  .cn-invite-page-summaryGrid {
    grid-template-columns: 1fr 1fr;
  }

  .cn-invite-page-networkMap {
    padding: 12px;
  }

  .cn-invite-page-networkTier > div {
    grid-template-columns: 1fr;
  }

  .cn-invite-page-networkNode {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    text-align: left;
  }

  .cn-invite-page-nodeAvatar {
    margin: 0;
  }

  .cn-invite-page-treeDivider::after {
    width: 46%;
  }

  .cn-invite-page-performanceFilters {
    grid-template-columns: 1fr;
  }

  .cn-invite-page-commissionFilters {
    grid-template-columns: 1fr;
  }

  .cn-invite-page-bonusPage {
    padding: 12px 10px 24px;
  }

  .cn-invite-page-bonusTabs button {
    font-size: 12px;
  }

  .cn-invite-page-bonusTable header,
  .cn-invite-page-bonusTable article {
    grid-template-columns: 0.7fr 1.45fr 1.3fr;
  }

  .cn-invite-page-emptyState {
    min-height: 330px;
  }
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/jogo/game-frame.module.css ── */
.cn-game-frame-page {
  position: relative;
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 18%, rgba(45, 167, 255, 0.14), transparent 18rem),
    #050b18;
}

.cn-game-frame-frame {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: #000;
  border: 0;
}

.cn-game-frame-frameOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 26px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(45, 167, 255, 0.18), transparent 14rem),
    rgba(5, 11, 24, 0.9);
  backdrop-filter: blur(4px);
}

.cn-game-frame-frameOverlay strong {
  font-size: 24px;
  line-height: 1.1;
}

.cn-game-frame-frameOverlay p {
  max-width: 330px;
  margin: 0;
  color: #9aabc9;
  font-size: 15px;
  line-height: 1.4;
}

.cn-game-frame-loader {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.13);
  border-top-color: #2da7ff;
  border-radius: 50%;
  animation: cn-game-frame-spin 0.8s linear infinite;
}

.cn-game-frame-errorActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.cn-game-frame-errorActions button {
  min-width: 136px;
  min-height: 44px;
  padding: 0 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  background: linear-gradient(180deg, #2fa8ff, #137bd7);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 22px rgba(19, 123, 215, 0.24);
}

.cn-game-frame-errorActions button + button {
  color: #dfeaff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.cn-game-frame-lobbyButton {
  position: fixed;
  top: max(26px, env(safe-area-inset-top));
  left: max(18px, calc((100vw - 560px) / 2 + 18px));
  z-index: 20;
  display: inline-grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 7px;
  min-width: 104px;
  min-height: 48px;
  padding: 6px 13px 6px 7px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(42, 55, 87, 0.94), rgba(16, 25, 48, 0.94)),
    rgba(16, 25, 48, 0.9);
  border: 1px solid rgba(194, 214, 255, 0.24);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(44, 155, 255, 0.06);
  backdrop-filter: blur(10px);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.cn-game-frame-lobbyButton svg {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 8px;
  color: #f7fbff;
  background: linear-gradient(180deg, #2fa8ff, #137bd7);
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24), 0 0 13px rgba(45, 167, 255, 0.22);
}

.cn-game-frame-lobbyButton span {
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.cn-game-frame-lobbyButton:hover {
  border-color: rgba(93, 188, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 30px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(45, 167, 255, 0.18);
  transform: translateY(-1px);
}

.cn-game-frame-lobbyButton:active {
  transform: translateY(0) scale(0.98);
}

.cn-game-frame-loginGate {
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.cn-game-frame-loginGate strong {
  font-size: 28px;
  line-height: 1.1;
}

.cn-game-frame-loginGate p {
  max-width: 320px;
  margin: 0;
  color: #9aabc9;
  font-size: 15px;
  line-height: 1.4;
}

.cn-game-frame-loginGate button {
  min-width: 150px;
  min-height: 46px;
  margin-top: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  background: linear-gradient(180deg, #2fa8ff, #137bd7);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 22px rgba(19, 123, 215, 0.26);
}

@keyframes cn-game-frame-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/messages/support-page.module.css ── */
.cn-support-page-messageTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  width: 100%;
  margin: 0 0 24px;
  border-bottom: 1px solid rgba(90, 113, 154, 0.3);
}

.cn-support-page-messageTabs button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  color: #697892;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  background: transparent;
  white-space: nowrap;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.cn-support-page-messageTabs button:hover {
  color: #fff;
  background: rgba(31, 144, 241, 0.06);
}

.cn-support-page-messageTabs button.cn-support-page-active {
  color: #fff;
}

.cn-support-page-messageTabs button.cn-support-page-active::after {
  position: absolute;
  right: 8%;
  bottom: -1px;
  left: 8%;
  height: 2px;
  border-radius: 999px;
  background: #19a2ff;
  box-shadow: 0 0 18px rgba(25, 162, 255, 0.42);
  content: "";
}

.cn-support-page-tabLabel {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.cn-support-page-tabLabel small {
  position: absolute;
  top: -9px;
  left: 100%;
  display: grid;
  place-items: center;
  width: 15px;
  min-width: 15px;
  height: 16px;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: #ff242f;
  transform: translateX(4px);
}

.cn-support-page-notificationPanel {
  display: grid;
  justify-items: stretch;
  gap: 18px;
}

.cn-support-page-notificationPanel time {
  justify-self: center;
  color: #78869f;
  font-size: 14px;
  font-weight: 500;
}

.cn-support-page-readAllButton {
  justify-self: end;
  display: inline-grid;
  grid-template-columns: 24px auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  background: #1c2743;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.18);
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.cn-support-page-readAllButton svg {
  color: #189dff;
}

.cn-support-page-readAllButton:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cn-support-page-notificationCard {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 104px;
  padding: 17px 44px 16px 16px;
  border-radius: 7px;
  color: inherit;
  text-align: left;
  background: #11182d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cn-support-page-notificationCard:hover {
  background: #151e36;
  box-shadow:
    inset 0 0 0 1px rgba(31, 144, 241, 0.18),
    0 14px 26px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.cn-support-page-notificationCard strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.cn-support-page-notificationCard strong svg {
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 3px;
  color: #fff;
  background: #55ca83;
}

.cn-support-page-notificationCard small {
  display: block;
  margin-top: 12px;
  color: #7f8da8;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.cn-support-page-notificationCard p {
  margin: 7px 0 0;
  color: #7f8da8;
  font-size: 14px;
  font-weight: 500;
}

.cn-support-page-notificationDot {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff1f2f;
  box-shadow: 0 0 0 3px rgba(255, 31, 47, 0.08);
}

.cn-support-page-announcementCard {
  min-height: 96px;
}

.cn-support-page-messageDetail {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  margin: 28px auto 0;
}

.cn-support-page-messageDetail>h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
}

.cn-support-page-messageDetail>h2 svg {
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 3px;
  color: #fff;
  background: #55ca83;
}

.cn-support-page-messageDetailCard {
  overflow: hidden;
  padding: 28px 24px 26px;
  border: 2px solid #ff9a87;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #fff, #f3ffff);
  color: #1f2431;
}

.cn-support-page-messageDetailCard header {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 38px;
}

.cn-support-page-messageDetailCard header strong {
  padding: 2px 10px;
  color: #4b215d;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  background: #080808;
}

.cn-support-page-messageDetailCard header span {
  padding: 2px 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: #080808;
}

.cn-support-page-messagePromo {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 124px;
  margin-bottom: 64px;
  padding: 18px 150px 18px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 50%, rgba(255, 199, 61, 0.95), transparent 0 17%, transparent 18%),
    radial-gradient(circle at 91% 50%, rgba(255, 143, 44, 0.95), transparent 0 22%, transparent 23%),
    linear-gradient(135deg, #0a57c7, #053295 58%, #021c68);
}

.cn-support-page-messagePromo::after {
  position: absolute;
  right: 28px;
  bottom: 8px;
  color: rgba(255, 210, 76, 0.92);
  font-size: 66px;
  font-weight: 900;
  content: "1%";
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.cn-support-page-messagePromo b {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.cn-support-page-messagePromo span {
  margin-top: 5px;
  color: #ffe83f;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.cn-support-page-promoTwo::after {
  content: "100";
}

.cn-support-page-promoThree::after {
  content: "777";
}

.cn-support-page-messageDetailCard>p {
  margin: 18px 0 0;
  padding: 18px 16px;
  border: 1px solid rgba(255, 173, 32, 0.52);
  border-radius: 14px;
  color: #444;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  background: #fff7db;
}

.cn-support-page-announcementDetail {
  display: grid;
  gap: 18px;
  width: min(100%, 446px);
  margin: 28px auto 0;
}

.cn-support-page-announcementDetail h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.cn-support-page-announcementDetail>p {
  margin: 0;
  color: #7f8da8;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.cn-support-page-announcementDetail>p strong {
  color: #22a8ff;
}

.cn-support-page-doubleBonusHero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 298px;
  padding: 66px 20px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 86%, rgba(255, 212, 61, 0.85), transparent 0 10%, transparent 11%),
    radial-gradient(circle at 91% 20%, rgba(255, 197, 42, 0.95), transparent 0 13%, transparent 14%),
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.75), transparent 0 13%, transparent 14%),
    linear-gradient(135deg, #ffb033, #e6472f 42%, #121b36 43%, #0b1228);
}

.cn-support-page-doubleBonusHero::before {
  position: absolute;
  top: 16px;
  left: 50%;
  padding: 4px 28px;
  border-radius: 999px;
  color: #8ffd74;
  font-size: 27px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.92);
  content: "Plataforma";
  transform: translateX(-50%);
}

.cn-support-page-doubleBonusHero::after {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-shadow:
    2px 2px 0 #1a1021,
    0 4px 12px rgba(0, 0, 0, 0.45);
  content: "A sorte chegou e os prêmios em dobro não podem ser perdidos!";
}

.cn-support-page-doubleBonusHero div {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: 172px;
  padding: 12px 8px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(12, 25, 50, 0.08), rgba(6, 12, 24, 0.82)),
    #111a31;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.25);
}

.cn-support-page-doubleBonusHero div::before {
  position: absolute;
  top: 52%;
  right: -19px;
  z-index: 1;
  width: 38px;
  height: 18px;
  border-radius: 999px;
  background: #eb312f;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.28);
  content: "";
}

.cn-support-page-doubleBonusHero div:last-child::before {
  display: none;
}

.cn-support-page-doubleBonusHero span {
  color: #cbd8f2;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.cn-support-page-doubleBonusHero b {
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  background: #ec3c6f;
}

.cn-support-page-announcementSteps {
  display: grid;
  gap: 26px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.cn-support-page-announcementSteps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0;
  color: #6f7d94;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.65;
}

.cn-support-page-announcementSteps li>span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  border-radius: 50%;
  color: #071022;
  font-size: 10px;
  background: #7f8da8;
}

.cn-support-page-announcementSteps p {
  margin: 0;
}

.cn-support-page-announcementSteps strong {
  color: #22a8ff;
}

@media (max-width: 430px) {
  .cn-support-page-messageTabs button {
    font-size: 14px;
  }

  .cn-support-page-messagePromo {
    min-height: 104px;
    margin-bottom: 38px;
    padding: 16px 118px 16px 18px;
  }

  .cn-support-page-messagePromo b {
    font-size: 19px;
  }

  .cn-support-page-messagePromo span {
    font-size: 14px;
  }

  .cn-support-page-messagePromo::after {
    right: 18px;
    font-size: 48px;
  }

  .cn-support-page-announcementDetail {
    margin-top: 20px;
  }

  .cn-support-page-doubleBonusHero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 420px;
    padding-top: 74px;
  }

  .cn-support-page-doubleBonusHero div:nth-child(2)::before {
    display: none;
  }
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/perfil/profile-page.module.css ── */
.cn-profile-page-profileScope {
  width: min(100%, 500px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 34px 20px 118px;
  color: #fff;
}

.cn-profile-page-profileScope .profile-hero-card,
.cn-profile-page-profileScope .profile-vip-card,
.cn-profile-page-profileScope .profile-menu {
  border: 1px solid rgba(88, 107, 150, 0.26);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(33, 45, 75, 0.86), rgba(21, 30, 52, 0.98));
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.cn-profile-page-profileScope .profile-hero-card {
  position: relative;
  overflow: hidden;
  padding: 17px 17px 18px;
}

.cn-profile-page-profileScope .profile-hero-card::before {
  position: absolute;
  top: -80px;
  right: -62px;
  width: 180px;
  height: 180px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 154, 255, 0.18), transparent 66%);
  pointer-events: none;
}

.cn-profile-page-profileScope .profile-hero-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-right: 38px;
}

.cn-profile-page-profileScope .profile-avatar {
  width: 92px;
  height: 92px;
  border: 1px solid rgba(88, 169, 255, 0.32);
  border-radius: 12px;
  object-fit: cover;
  background: #0f172a;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.24),
    0 0 0 4px rgba(255, 255, 255, 0.025);
}

.cn-profile-page-profileScope .profile-user-info {
  min-width: 0;
}

.cn-profile-page-profileScope .profile-id-row,
.cn-profile-page-profileScope .profile-account,
.cn-profile-page-profileScope .profile-user-info strong {
  display: flex;
  align-items: center;
  margin: 0;
  color: #f8fbff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.28;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.cn-profile-page-profileScope .profile-id-row {
  gap: 5px;
}

.cn-profile-page-profileScope .profile-id-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cn-profile-page-profileScope .profile-account {
  color: #eef4ff;
}

.cn-profile-page-profileScope .profile-balance-label {
  display: block;
  margin-top: 7px;
  color: #7f90ad;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.cn-profile-page-profileScope .profile-user-info strong {
  position: relative;
  gap: 11px;
  margin-top: 4px;
  color: #fff;
  font-size: 29px;
  line-height: 1;
  width: fit-content;
  overflow: hidden;
  border-radius: 7px;
}

.cn-profile-page-profileScope .profile-user-info button,
.cn-profile-page-profileScope .profile-mail {
  display: grid;
  place-items: center;
  border: 0;
  color: #dce7f8;
  cursor: pointer;
  background: transparent;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.cn-profile-page-profileScope .profile-user-info button:hover,
.cn-profile-page-profileScope .profile-mail:hover {
  color: #fff;
  transform: translateY(-1px);
}

.cn-profile-page-profileScope .profile-user-info strong.is-refreshing {
  animation: cn-profile-page-balance-pulse 850ms ease-in-out;
}

.cn-profile-page-profileScope .profile-user-info strong.is-refreshing::after {
  position: absolute;
  inset: -6px;
  content: "";
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 48%, transparent 76%);
  transform: translateX(-120%);
  animation: cn-profile-page-balance-shimmer 850ms ease-in-out;
  pointer-events: none;
}

.cn-profile-page-profileScope .profile-user-info button.is-spinning svg {
  animation: cn-profile-page-balance-spin 850ms linear infinite;
}

.cn-profile-page-profileScope .profile-vip-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto;
  color: #aeb9cc !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.cn-profile-page-profileScope .profile-vip-chip svg {
  color: #c7d2e6;
  font-size: 24px;
}

.cn-profile-page-profileScope .profile-mail {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.035);
}

.cn-profile-page-profileScope .profile-mail span {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid #151e34;
  border-radius: 999px;
  background: #ff2323;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 17px;
}

.cn-profile-page-profileScope .profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 28px;
}

.cn-profile-page-profileScope .profile-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.cn-profile-page-profileScope .profile-actions .withdraw {
  background: linear-gradient(180deg, #303b61, #273254);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.cn-profile-page-profileScope .profile-actions .deposit {
  background: linear-gradient(180deg, #19c86d, #18a95e);
  box-shadow: 0 10px 18px rgba(24, 188, 105, 0.16);
}

.cn-profile-page-profileScope .profile-actions a:active {
  transform: scale(0.98);
}

.cn-profile-page-profileScope .profile-vip-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 18px 14px 18px 17px;
  color: #fff;
  text-decoration: none;
}

.cn-profile-page-profileScope .profile-vip-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 12% 50%, rgba(100, 172, 255, 0.09), transparent 30%),
    linear-gradient(90deg, rgba(255, 172, 32, 0.05), transparent 48%);
  pointer-events: none;
}

.cn-profile-page-profileScope .profile-vip-rank {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 82px;
  color: #c6cfdf;
}

.cn-profile-page-profileScope .profile-vip-rank svg {
  font-size: 58px;
}

.cn-profile-page-profileScope .profile-vip-rank span {
  position: absolute;
  right: 6px;
  bottom: 21px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #e8edf6;
  color: #63718a;
  font-size: 11px;
  font-weight: 900;
}

.cn-profile-page-profileScope .profile-vip-content p {
  margin: 2px 0 13px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.cn-profile-page-profileScope .profile-vip-eyebrow {
  display: inline-flex;
  margin: 0 0 2px;
  color: #7e91b3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cn-profile-page-profileScope .profile-vip-content b,
.cn-profile-page-profileScope .profile-vip-content strong {
  color: #ffa51f;
}

.cn-profile-page-profileScope .profile-vip-content {
  position: relative;
  z-index: 1;
}

.cn-profile-page-profileScope .profile-vip-card > svg {
  position: relative;
  z-index: 1;
  color: #d9e6fb;
}

.cn-profile-page-profileScope .profile-vip-content div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 9px 12px;
  align-items: center;
}

.cn-profile-page-profileScope .profile-vip-content div span {
  grid-row: span 2;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.cn-profile-page-profileScope .profile-vip-content i {
  display: block;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(123, 136, 163, 0.82);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.cn-profile-page-profileScope .profile-vip-content i em {
  display: block;
  width: 1%;
  height: 100%;
  border-radius: inherit;
  background: #1d9bf0;
}

.cn-profile-page-profileScope .profile-vip-content small {
  margin-top: -22px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.cn-profile-page-profileScope .profile-menu {
  margin-top: 18px;
  padding: 12px 0 10px;
}

.cn-profile-page-profileScope .profile-menu-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 17px 8px;
}

.cn-profile-page-profileScope .profile-menu-title span {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.cn-profile-page-profileScope .profile-menu-title small {
  color: #7f90ad;
  font-size: 11px;
  font-weight: 800;
}

.cn-profile-page-profileScope .profile-menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(130px, auto) minmax(0, 1fr) 24px 16px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 11px 17px;
  border: 0;
  color: #fff;
  text-align: left;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.cn-profile-page-profileScope .profile-menu-item + .profile-menu-item::before {
  position: absolute;
  top: 0;
  right: 17px;
  left: 69px;
  height: 1px;
  content: "";
  background: rgba(125, 143, 176, 0.08);
}

.cn-profile-page-profileScope .profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.025);
}

.cn-profile-page-profileScope .profile-menu-item:active {
  transform: scale(0.995);
}

.cn-profile-page-profileScope .profile-menu-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.cn-profile-page-profileScope .profile-menu-icon.orange {
  background: linear-gradient(135deg, #ffb17e, #bd6d56);
}

.cn-profile-page-profileScope .profile-menu-icon.peach {
  background: linear-gradient(135deg, #ffb491, #d27567);
}

.cn-profile-page-profileScope .profile-menu-icon.pink {
  background: linear-gradient(135deg, #ff5b98, #b72d6b);
}

.cn-profile-page-profileScope .profile-menu-icon.purple {
  background: linear-gradient(135deg, #a47bff, #5d43a9);
}

.cn-profile-page-profileScope .profile-menu-icon.green {
  background: linear-gradient(135deg, #78df7a, #2f9e55);
}

.cn-profile-page-profileScope .profile-menu-icon.red {
  background: linear-gradient(135deg, #ff987d, #cf5a48);
}

.cn-profile-page-profileScope .profile-menu-item strong {
  color: #f7fbff;
  font-size: 16px;
  font-weight: 900;
}

.cn-profile-page-profileScope .profile-menu-item small {
  justify-self: end;
  max-width: 210px;
  color: #a4b4d1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
}

.cn-profile-page-profileScope .profile-menu-item b {
  display: grid;
  justify-self: end;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: #ff2323;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.cn-profile-page-profileScope .profile-menu-chevron {
  justify-self: end;
  color: #9ca9bf;
}

@media (max-width: 420px) {
  .cn-profile-page-profileScope {
    padding: 26px 12px 112px;
  }

  .cn-profile-page-profileScope .profile-hero-top {
    grid-template-columns: 76px 1fr;
  }

  .cn-profile-page-profileScope .profile-avatar {
    width: 76px;
    height: 76px;
  }

  .cn-profile-page-profileScope .profile-user-info p,
  .cn-profile-page-profileScope .profile-account {
    font-size: 14px;
  }

  .cn-profile-page-profileScope .profile-user-info strong {
    font-size: 22px;
  }

  .cn-profile-page-profileScope .profile-menu-item {
    grid-template-columns: 38px minmax(102px, auto) minmax(0, 1fr) 24px 16px;
    padding-inline: 12px;
  }

  .cn-profile-page-profileScope .profile-menu-item small {
    max-width: 170px;
    font-size: 11px;
  }
}

@keyframes cn-profile-page-balance-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cn-profile-page-balance-pulse {
  0%,
  100% {
    color: #fff;
    transform: scale(1);
  }

  45% {
    color: #6dc1ff;
    transform: scale(1.025);
  }
}

@keyframes cn-profile-page-balance-shimmer {
  to {
    transform: translateX(120%);
  }
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/relatorios/reports-page.module.css ── */
.cn-reports-page-reportsPage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 38px 18px;
  color: #fff;
  background: #071022;
}

.cn-reports-page-tabs {
  display: flex;
  gap: 22px;
  min-height: 52px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(63, 84, 123, 0.2);
  scrollbar-width: none;
}

.cn-reports-page-tabs::-webkit-scrollbar {
  display: none;
}

.cn-reports-page-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  color: #8f9bb1;
  font-size: 14px;
  font-weight: 800;
  background: transparent;
  white-space: nowrap;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.cn-reports-page-tabs button:active {
  transform: translateY(1px);
}

.cn-reports-page-tabs .cn-reports-page-activeTab {
  color: #15a8ff;
}

.cn-reports-page-tabs .cn-reports-page-activeTab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: #15a8ff;
  box-shadow: 0 0 12px rgba(21, 168, 255, 0.55);
}

.cn-reports-page-filters {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(68, 91, 130, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(20, 30, 52, 0.82), rgba(13, 20, 37, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.cn-reports-page-filtersGrid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cn-reports-page-filterGroup {
  position: relative;
  min-width: 0;
}

.cn-reports-page-filterGroup > button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 84px;
  width: max-content;
  max-width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(132, 151, 190, 0.62);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  background: rgba(13, 20, 37, 0.72);
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.cn-reports-page-filterGroup:nth-child(2) > button {
  min-width: 128px;
}

.cn-reports-page-filters:not(.cn-reports-page-filtersGrid) .cn-reports-page-filterGroup:nth-child(2) {
  margin-left: 8px;
}

.cn-reports-page-filterGroup:nth-child(3) > button {
  min-width: 174px;
}

.cn-reports-page-filterGroup:nth-child(4) > button {
  min-width: 132px;
}

.cn-reports-page-filterGroup > button svg {
  color: #7f8da6;
  transition: transform 160ms ease;
}

.cn-reports-page-filterGroup > button.cn-reports-page-open {
  border-color: rgba(235, 243, 255, 0.92);
  background: #0c1426;
}

.cn-reports-page-filterGroup > button.cn-reports-page-open svg {
  transform: rotate(180deg);
}

.cn-reports-page-filterPanel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  display: grid;
  width: 100%;
  min-width: 100%;
  max-height: 298px;
  overflow: hidden auto;
  padding: 0;
  border: 1px solid rgba(84, 110, 154, 0.22);
  border-radius: 10px;
  background: #151d32;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  scrollbar-width: none;
}

.cn-reports-page-filterPanel::-webkit-scrollbar {
  display: none;
}

.cn-reports-page-filterPanel button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  color: #8e99b2;
  font-size: 13px;
  font-weight: 900;
  line-height: 15px;
  text-align: left;
  background: transparent;
  transition:
    color 160ms ease,
    background 160ms ease;
}

.cn-reports-page-filterPanel button:not(:last-child) {
  border-bottom: 1px solid rgba(84, 110, 154, 0.14);
}

.cn-reports-page-filterPanel button:hover {
  color: #fff;
  background: #152742;
}

.cn-reports-page-filterPanel .cn-reports-page-selectedOption {
  color: #fff;
  background: #152742;
}

.cn-reports-page-emptyState {
  display: grid;
  flex: 1;
  place-items: center;
  align-content: center;
  width: min(100%, 260px);
  min-height: 360px;
  margin: 18px auto 16px;
  padding-bottom: 18px;
  border-radius: 14px;
  color: #263148;
  background:
    radial-gradient(circle at 50% 44%, rgba(42, 57, 89, 0.2), transparent 48%),
    linear-gradient(180deg, rgba(13, 20, 37, 0), rgba(13, 20, 37, 0.24), rgba(13, 20, 37, 0));
}

.cn-reports-page-emptyState svg {
  opacity: 0.78;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.cn-reports-page-emptyState p {
  margin: 16px 0 0;
  color: #7d899d;
  font-size: 20px;
  font-weight: 600;
}

.cn-reports-page-summary {
  margin: auto 0 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(71, 92, 135, 0.16);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(29, 40, 68, 0.96), rgba(25, 35, 61, 0.98));
  box-shadow:
    0 -10px 32px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.cn-reports-page-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 43px;
}

.cn-reports-page-summary span {
  color: #9fb0d3;
  font-size: 15px;
  font-weight: 600;
}

.cn-reports-page-summary strong {
  font-size: 15px;
  font-weight: 900;
}

.cn-reports-page-deposit {
  color: #00e49f;
}

.cn-reports-page-withdraw {
  color: #ff374c;
}

.cn-reports-page-discount {
  color: #ffae19;
}

@media (max-width: 560px) {
  .cn-reports-page-reportsPage {
    padding-inline: 20px;
  }

  .cn-reports-page-tabs {
    gap: 18px;
  }

  .cn-reports-page-summary {
    margin-inline: 0;
  }
}

.cn-reports-page-records {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.cn-reports-page-recordRow {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.cn-reports-page-recordRow > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cn-reports-page-recordRow > div:last-child {
  align-items: flex-end;
}

.cn-reports-page-recordRow strong {
  font-size: 14px;
  font-weight: 800;
}

.cn-reports-page-recordRow span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

/* ── ex-lib/layouts/chinesa-v1/surfaces/seguranca/security-page.module.css ── */
.cn-security-page-securityPage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: var(--text);
  background: var(--page);
}

.cn-security-page-intro {
  margin: 2px 0 26px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Trilho de proteção ─────────────────────────────────────────────── */

.cn-security-page-rail {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-security-page-step {
  position: relative;
  padding: 0 0 30px 30px;
}

.cn-security-page-step::before {
  position: absolute;
  top: 20px;
  bottom: 2px;
  left: 7px;
  width: 2px;
  content: "";
  background: var(--line);
}

.cn-security-page-step:last-child {
  padding-bottom: 0;
}

.cn-security-page-step:last-child::before {
  display: none;
}

.cn-security-page-node {
  position: absolute;
  top: 3px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  background: var(--page);
}

.cn-security-page-step[data-state="ok"] .cn-security-page-node {
  border-color: var(--green);
  background: rgba(15, 188, 105, 0.22);
}

.cn-security-page-step[data-state="pending"] .cn-security-page-node {
  border-color: var(--orange);
  background: rgba(244, 162, 29, 0.22);
}

.cn-security-page-step[data-state="alert"] .cn-security-page-node {
  border-color: var(--color-error);
  background: rgba(233, 79, 26, 0.22);
}

.cn-security-page-stepHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  margin-bottom: 4px;
}

.cn-security-page-eyebrow {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cn-security-page-stepHeader h2 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 800;
}

.cn-security-page-stepHint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ── Chips de estado ────────────────────────────────────────────────── */

.cn-security-page-statusChip {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.cn-security-page-statusChip.cn-security-page-pending {
  color: var(--orange);
  background: rgba(244, 162, 29, 0.14);
}

.cn-security-page-statusChip.cn-security-page-approved {
  color: var(--green);
  background: rgba(15, 188, 105, 0.14);
}

.cn-security-page-statusChip.cn-security-page-rejected {
  color: var(--color-error);
  background: rgba(233, 79, 26, 0.14);
}

/* ── Linhas de dados ────────────────────────────────────────────────── */

.cn-security-page-rows {
  margin-top: 10px;
}

.cn-security-page-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.cn-security-page-rows .cn-security-page-row:last-child {
  border-bottom: none;
}

.cn-security-page-rowLabel {
  color: var(--text);
  font-weight: 700;
}

.cn-security-page-rowValue {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.cn-security-page-rowMeta {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.cn-security-page-meter {
  flex: 1 1 100%;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel);
}

.cn-security-page-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}

.cn-security-page-meter[data-hot="true"] i {
  background: var(--orange);
}

.cn-security-page-empty {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ── Formulários e ações ────────────────────────────────────────────── */

.cn-security-page-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.cn-security-page-form select,
.cn-security-page-form input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 11px 12px;
  color: var(--text);
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--page);
}

.cn-security-page-form select:focus-visible,
.cn-security-page-form input:focus-visible {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 136, 233, 0.22);
}

.cn-security-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.cn-security-page-primaryButton {
  flex: 1 1 100%;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border-radius: 10px;
  background: var(--blue);
  transition: filter 160ms ease, transform 160ms ease;
}

.cn-security-page-primaryButton:hover {
  filter: brightness(1.12);
}

.cn-security-page-primaryButton:active {
  transform: translateY(1px);
}

.cn-security-page-primaryButton:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cn-security-page-primaryButton:disabled {
  filter: grayscale(0.5);
  opacity: 0.55;
}

.cn-security-page-ghostButton,
.cn-security-page-dangerButton {
  flex: 1 1 auto;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  background: transparent;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.cn-security-page-ghostButton {
  color: var(--text);
  border: 1px solid var(--line);
}

.cn-security-page-ghostButton:hover {
  border-color: var(--blue);
}

.cn-security-page-dangerButton {
  color: var(--color-error);
  border: 1px solid rgba(233, 79, 26, 0.45);
}

.cn-security-page-dangerButton:hover {
  background: rgba(233, 79, 26, 0.1);
}

.cn-security-page-ghostButton:active,
.cn-security-page-dangerButton:active {
  transform: translateY(1px);
}

.cn-security-page-ghostButton:focus-visible,
.cn-security-page-dangerButton:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.cn-security-page-exclusionNotice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 14px;
  color: var(--orange);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid rgba(244, 162, 29, 0.4);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  background: rgba(244, 162, 29, 0.08);
}

.cn-security-page-loginPrompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 0;
  color: var(--muted);
  text-align: center;
}

/*
 * Recurso desligado pelo operador. Deliberadamente sóbrio: não é erro do
 * jogador nem falha do site, então nada de alarme — só o que aconteceu e a
 * saída de volta.
 */
.feature-unavailable {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 520px;
  margin: 0 auto;
  padding: 64px 20px 96px;
  color: #f8fbff;
}

.feature-unavailable h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.feature-unavailable p {
  margin: 0;
  color: #9aa7bd;
  font-size: 14px;
  line-height: 1.55;
}

.feature-unavailable-back {
  margin-top: 6px;
  padding: 11px 20px;
  border-radius: 10px;
  background: #138df2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.feature-unavailable-back:hover {
  background: #0f76ce;
}

/* Links institucionais do rodapé — bloco próprio, antes dos contatos. */
.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin-block: 0.75rem 0.35rem;
}

.legal-footer-links a {
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-footer-links a:hover { color: var(--color-text, #e2e8f0); }

.legal-footer-links a:focus-visible {
  outline: 2px solid var(--color-primary, #f4a21d);
  outline-offset: 2px;
  border-radius: 2px;
}