*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.static{position:static;}.grid{display:grid;}.block{display:block;}.inline-block{display:inline-block;}.hidden{display:none;}[size~="\31 5"]{width:3.75rem;height:3.75rem;}[size~="\31 7"]{width:4.25rem;height:4.25rem;}[size~="\32 0"]{width:5rem;height:5rem;}[size~="\36 0"]{width:15rem;height:15rem;}.h1{height:0.25rem;}.h2{height:0.5rem;}.h3{height:0.75rem;}.flex{display:flex;}.inline-flex{display:inline-flex;}.flex-shrink{flex-shrink:1;}.flex-wrap{flex-wrap:wrap;}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.b,.border{border-width:1px;}[stroke-width~="\31 \.5"]{stroke-width:1.5px;}.uppercase{text-transform:uppercase;}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}.underline{text-decoration-line:underline;}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgb(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgb(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);}.outline{outline-style:solid;}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.ease,.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
}

body {
  color: #ffffff;
  background: linear-gradient(180deg, #040b21 0%, #020615 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

:root {
  --el-color-primary: #7138f5;
  --el-color-primary-light-3: #8251f7;
  --el-color-primary-light-5: #9a5cf6;
  --el-color-primary-light-7: rgba(113, 56, 245, 0.32);
  --el-color-primary-light-8: rgba(113, 56, 245, 0.2);
  --el-color-primary-light-9: rgba(113, 56, 245, 0.12);
  --el-color-primary-dark-2: #5d2fd1;
  --el-bg-color: #0c1329;
  --el-bg-color-overlay: #0c1329;
  --el-border-color: rgba(255, 255, 255, 0.08);
  --el-border-color-light: rgba(255, 255, 255, 0.08);
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #d6dae5;
  --el-text-color-secondary: #8f97ac;
  --el-fill-color-blank: #10172d;
}

#app {
  isolation: isolate;
}

.el-loading-mask {
  --el-color-primary: #7138f5;
  --el-mask-color: rgba(4, 11, 33, 0.82);
}

#app .el-pagination {
  gap: 8px;
  padding-block: 12px;
  --el-color-primary: #7138f5;
  --el-pagination-bg-color: #10172d;
  --el-pagination-button-bg-color: #10172d;
  --el-pagination-button-color: #d6dae5;
  --el-pagination-hover-color: #9a5cf6;
  --el-pagination-button-disabled-color: #606a83;
  --el-pagination-button-disabled-bg-color: #081025;
  --el-disabled-bg-color: #081025;
  --el-text-color-placeholder: #606a83;
  --el-pagination-border-radius: 8px;
}
#app .el-pagination .el-pager {
  gap: 8px;
}
#app .el-pagination .btn-prev,
#app .el-pagination .btn-next,
#app .el-pagination .el-pager li {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 160ms, border-color 160ms, color 160ms;
}
#app .el-pagination .btn-prev:not(:disabled):not(.is-disabled):hover,
#app .el-pagination .btn-next:not(:disabled):not(.is-disabled):hover,
#app .el-pagination .el-pager li:not(.is-disabled):not(.is-active):hover {
  background-color: rgba(113, 56, 245, 0.14);
  border-color: rgba(154, 92, 246, 0.4);
}
#app .el-pagination .el-pager li.is-active:not(.is-disabled) {
  color: #ffffff;
  background-color: #7138f5;
  border-color: #7138f5;
}

#app .el-empty {
  --el-text-color-secondary: #8f97ac;
  --el-empty-fill-color-0: #10172d;
  --el-empty-fill-color-1: rgb(11.3882352941%, 10.8862745098%, 25.7254901961%);
  --el-empty-fill-color-2: rgb(14.7294117647%, 12.6039215686%, 30.5490196078%);
  --el-empty-fill-color-3: rgb(18.0705882353%, 14.3215686275%, 35.3725490196%);
  --el-empty-fill-color-4: rgb(13.6156862745%, 12.031372549%, 28.9411764706%);
  --el-empty-fill-color-5: rgb(21.4117647059%, 16.0392156863%, 40.1960784314%);
  --el-empty-fill-color-6: rgb(16.9568627451%, 13.7490196078%, 33.7647058824%);
  --el-empty-fill-color-7: rgb(24.7529411765%, 17.7568627451%, 45.0196078431%);
  --el-empty-fill-color-8: rgb(20.2980392157%, 15.4666666667%, 38.5882352941%);
  --el-empty-fill-color-9: rgb(28.0941176471%, 19.4745098039%, 49.8431372549%);
}
#app .el-empty .el-empty__description p {
  color: #8f97ac;
  line-height: 1.6;
}

#app .el-empty__bottom .el-button,
#app .app_sidebar_menu > .el-button,
#app .recharge_page__empty .el-button,
#app .account_profile__retry.el-button {
  min-height: 36px;
  padding: 0 20px;
  border: 1px solid rgba(154, 92, 246, 0.38);
  border-radius: 8px;
  background: rgba(113, 56, 245, 0.14);
  color: #d6dae5;
  transition: background-color 160ms, border-color 160ms, color 160ms;
}
#app .el-empty__bottom .el-button:not(.is-disabled):not(.is-loading):hover,
#app .app_sidebar_menu > .el-button:not(.is-disabled):not(.is-loading):hover,
#app .recharge_page__empty .el-button:not(.is-disabled):not(.is-loading):hover,
#app .account_profile__retry.el-button:not(.is-disabled):not(.is-loading):hover {
  border-color: #9a5cf6;
  background: rgba(113, 56, 245, 0.28);
  color: #ffffff;
}
#app .el-empty__bottom .el-button:focus-visible,
#app .app_sidebar_menu > .el-button:focus-visible,
#app .recharge_page__empty .el-button:focus-visible,
#app .account_profile__retry.el-button:focus-visible {
  outline: 2px solid #9a5cf6;
  outline-offset: 3px;
}
#app .el-empty__bottom .el-button.is-disabled,
#app .app_sidebar_menu > .el-button.is-disabled,
#app .recharge_page__empty .el-button.is-disabled,
#app .account_profile__retry.el-button.is-disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: #081025;
  color: #606a83;
}

::selection {
  color: #040b21;
  background: #7138f5;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid #7138f5;
  outline-offset: 3px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #040b21;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(96, 106, 131, 0.72);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #8f97ac;
  background-clip: content-box;
}

.community_panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #0c1329;
}

.community_button--primary.el-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  margin-left: 0;
  background: linear-gradient(90deg, #5b35df, #8a41f4);
  color: #ffffff;
  font-weight: 800;
}
.community_button--primary.el-button > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.catalog_page {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 24px;
  padding-bottom: 32px;
}

.catalog_page__hero {
  position: relative;
  display: grid;
  min-height: 150px;
  overflow: hidden;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-radius: 16px;
  padding: 24px 32px;
}
.catalog_page__hero::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.catalog_page__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 12px;
}
.catalog_page__icon svg {
  width: 30px;
  height: 30px;
}

.catalog_page__intro {
  position: relative;
  z-index: 1;
}
.catalog_page__intro span {
  font-size: 12px;
  font-weight: 700;
}
.catalog_page__intro h1 {
  margin-top: 4px;
  color: #ffffff;
  font-size: 32px;
}
.catalog_page__intro p {
  max-width: 620px;
  margin-top: 8px;
  color: #d6dae5;
  line-height: 1.55;
}

.catalog_page__count {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
}

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

.catalog_page__category.el-button {
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0 16px;
  margin-left: 0;
  background: #10172d;
  color: #d6dae5;
  transition: all 160ms ease;
}
.catalog_page__category.el-button:hover, .catalog_page__category.el-button:focus-visible, .catalog_page__category.el-button.is-active {
  color: #ffffff;
}

.catalog_page__toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 420px) 180px;
  gap: 12px;
}
.catalog_page__toolbar .el-input__wrapper,
.catalog_page__toolbar .el-select__wrapper {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #10172d;
  box-shadow: none;
}

@media (max-width: 768px) {
  .catalog_page__hero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 20px;
  }
  .catalog_page__intro h1 {
    font-size: 24px;
  }
  .catalog_page__count {
    grid-column: 1/-1;
    justify-self: start;
  }
  .catalog_page__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}