*,:after,:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

:root {
  background-color: rgb(var(--theme-background));
  interpolate-size: allow-keywords;
  -webkit-tap-highlight-color: transparent;
  font-family: Poppins,sans-serif;
  --top-margin: .5rem;
  --side-margin: 1rem;
  --bottom-margin: 2rem;
  --header-height: 3.5rem;
  --bottom-header-height: 0px;
  --bottom-header-padding: env(safe-area-inset-bottom,16px);
  --bottom-nav-area: calc(var(--bottom-header-padding) + var(--bottom-header-height));
  --banner-height: 13.5rem;
  --banner-filter: none;
  --banner-overlay-gradient: none;
  --drawer-menu-width: 256px;
  --drawer-menu-min-width: 256px;
  --drawer-profile-width: 320px;
  --drawer-profile-min-width: 256px;
  --drawer-reader-width: 312px;
  --drawer-reader-min-width: 256px
}

:root {
  --banner-recruitment-img: url(./images/Absolved-Will-Be-The-Seekers.png);
}

:root.mobile {
  --side-margin: 1rem;
  --top-margin: 1rem;
  --header-height: 3.5rem;
  --bottom-margin: 1.5rem;
  --bottom-header-height: 4rem;
  --banner-overlap: calc(var(--header-height) + var(--top-margin))!important
}

:root:not(.custom) {
  color: rgb(var(--color));
  color-scheme: dark light;
  --theme-primary: 255, 103, 64;
  --theme-primary-10: 230, 97, 62;
  --theme-primary-20: 188, 85, 59;
  --theme-status-red: 255, 64, 64;
  --theme-status-green: 4, 208, 0;
  --theme-status-yellow: 218, 117, 0;
  --theme-status-blue: 0, 201, 245;
  --theme-status-grey: 196, 196, 196;
  --theme-status-purple: 125, 64, 255;
  --theme-indication-blue: 75, 152, 241;
  --theme-danger: 255, 64, 64;
  --theme-danger-10: 219, 49, 49;
  --theme-danger-20: 191, 33, 33;
}

.dracula:not(.custom) {
  color-scheme: dark;
  --color: 255 255 255;
  --theme-background: 40 42 54;
  --theme-accent: 52 55 70;
  --theme-accent-hover: 66 70 91;
  --theme-accent-active: 43 45 57;
  --theme-accent-10: 47 51 59;
  --theme-accent-10-hover: 57 62 72;
  --theme-accent-10-active: 39 42 48;
  --theme-accent-20: 56 62 72;
  --theme-accent-20-hover: 73 81 96;
  --theme-accent-20-active: 49 54 62;
  --theme-accent-30: 64 71 84;
  --theme-accent-30-hover: 93 103 122;
  --theme-accent-30-active: 54 60 69;
  --theme-accent-40: 70 79 95;
  --theme-accent-40-hover: 112 128 155;
  --theme-accent-40-active: 61 68 81;
  --theme-accent-50: 78 89 108;
  --theme-accent-50-hover: 137 157 192;
  --theme-accent-50-active: 67 76 91;
  --theme-midTone: 126 144 172;
  --theme-contrast-1: 79 84 111;
  --theme-scrollbar-thumb: var(--theme-accent-20);
  --theme-scrollbar-thumb-hover: var(--theme-accent-30);
  --theme-button-accent: var(--theme-accent-20);
  --theme-button-accent-alt: var(--theme-accent);
  --theme-primary: 161 121 192;
  --theme-primary-10: 134 96 164;
  --theme-primary-20: 116 85 140;
  --theme-status-red: 255 85 85;
  --theme-status-yellow: 255 184 108;
  --theme-status-blue: 139 233 253;
  --theme-status-green: 80 250 123;
}

@media (any-pointer: fine) and (min-width:640px) {
  body {
      overflow-y:scroll!important
  }

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

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

  ::-webkit-scrollbar-thumb {
      background-color: rgb(var(--theme-scrollbar-thumb));
      border-radius: 2rem
  }

  ::-webkit-scrollbar-thumb:hover {
      background-color: rgb(var(--theme-scrollbar-thumb-hover));
  }
}


*,:after,:before {
  border: 0 solid #e5e7eb;
  box-sizing: border-box
}

:host,html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent
}

html, body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

body {
  line-height: inherit;
  margin: 0
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0
}

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

button,input,optgroup,select,textarea {
  color: inherit;
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-variation-settings: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0
}

button {
  background-color: transparent;
  background-image: none;
}

nav {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-accent);
  height: 100%;
  z-index: 7;
}

nav .shade {
  background-color: #222;
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  opacity: .46;
  transition: opacity .2s ease;
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0px;
}

header {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  --nav-anim-attr: .15s ease-in-out;
  transition: margin var(--nav-anim-attr), transform 75ms ease-out;
  width: 100%;
  z-index: 6;
}

header .header-main {
  max-height: var(--header-height);
  min-height: var(--header-height);
  display: flex;
  justify-content: center;
}

header .header-main .header {
  width: 100%;
  max-width: 1440px;
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
  z-index: 1;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
}

header .header-main .header-background {
  background-color: rgb(var(--theme-background));
  border-bottom: 1px solid rgb(var(--theme-primary));
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.header-sentinel {
  content: "";
  display: block;
  height: var(--header-height);
  width: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
  visibility: hidden;
}

hr {
  border-top-width: 1px;
  color: inherit;
  height: 0
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
  font-size: inherit;
  font-weight: inherit
}

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

b,strong {
  font-weight: bolder
}

code,kbd,pre,samp {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-feature-settings: normal;
  font-size: 1em;
  font-variation-settings: normal
}

small {
  font-size: 80%
}

#content {
  display: flex;
  flex-grow: 1;
  color: var(--color);
}

#view {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.header-logo {
  min-width: fit-content;
  display: flex;
  margin-right: auto;
}

#content[data-drawer-active="true"] .header-logo{
  display: none;
}

.btn {
  --opacity: 1;
  display: flex;
  align-items: center; 
  overflow: hidden;
  border-radius: .25rem;
  cursor: pointer;
  position: relative;
  min-height: 2.5rem;
  min-width: 2.5rem;
  transition: filter .1s ease-out,color .1s ease-out,min-width .2s ease-out;
}

.btn-header {
  margin-right: .5rem;
}



#content[data-drawer-active="false"] nav .shade {
  display: none;
}


.drawer {
  background-color: rgb(var(--theme-accent));
  box-shadow: inset -25px 0 9px -25px #0000001a;
  flex-grow: 1;
  flex-shrink: 0;
  height: 100vh;
  left: 0;
  max-width: var(--drawer-menu-width);
  min-width: 256px;
  position: fixed;
  top: 0;
  width: var(--drawer-menu-width);
  margin-left: calc(-1 * var(--drawer-menu-width));
  transition: margin-left 150ms ease-in-out;
}

#content[data-drawer-active="true"] .drawer {
  margin-left: 0;
}

#content[data-skip-transition] .drawer {
  transition: none;
}

@media (min-width: 48rem) {
  .shade {
    height: 100%;
  }
  .drawer {
    height: 100%;
  }
}

@media (min-width: 64rem) {
  #content[data-drawer-active="true"] header {
    max-width: calc(100% - var(--drawer-menu-width));
  }
  nav {
    z-index: auto;
  }
  .shade {
    display: none;
  }
  .drawer {
    height: auto;
    position: static;
  }
}

.drawer-contain {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  margin: 0 1rem;
  padding: .5rem 0;

}

@media (min-width: 64rem) {
  .drawer-contain {
    position: sticky;
    top: 0;
  }
}

.header-height {
  height: var(--header-height);
}

.content {
  flex-grow: 1;
}

.content > * {
  margin-bottom: 2rem;
  margin-bottom: calc(var(--bottom-nav-area) + var(--bottom-margin));
  margin-top: 0;
  margin-top: var(--top-margin);
  padding-left: var(--side-margin);
  padding-right: var(--side-margin)
}

.layout-container {
  --banner-overlap: calc(var(--header-height) + var(--top-margin));
  --banner-top: calc(var(--banner-overlap)*-1);
  display: grid;
  position: relative;
}

.layout-container.recruitment {
  --banner-overlay-gradient: linear-gradient(to bottom, rgb(var(--theme-background)/ .8) 0%, rgb(var(--theme-background)) 100%);
  gap: .75rem 1rem;
  grid-template-areas:
  "title"
  "tags"
  "operators";
  grid-template-columns: auto;
}

@media (min-width: 40rem) {
  .layout-container.recruitment {
    --banner-filter: blur(4px);
    --banner-overlay-gradient: linear-gradient(67.81deg,rgba(0,0,0,.64) 35.51%,transparent);
    gap: 1rem;
    grid-template-areas:
    "left title right"
    "left tags right"
    "left padding right"
    "left operators right";
    grid-template-columns: 1fr minmax(0, calc(1240px - 3.5rem)) 1fr;
  }
}

.layout-container .banner-background {
  --tw-blur: blur(24px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  background: radial-gradient(circle at top, rgba(var(--theme-background) / 0.8), rgba(var(--theme-background)) 75%), no-repeat top 35% center / 100% var(--banner-recruitment-img);
  width: 100%;
  height: 640px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}

.banner-container {
  clip: rect(0,auto,auto,0);
  clip-path: inset(0 0);
  left: 0;
  position: absolute;
  right: 0;
  top: var(--banner-top);
  width: auto;
  z-index: -1
}

.banner-container, .banner-image {
  height: calc(var(--banner-height) + var(--banner-overlap));
}

.banner-image {
  background-image: var(--banner-recruitment-img);
  width: calc(100% - 256px);
  background-position: center 25%;
  background-size: cover;
  position: fixed;
  transition: width .15s ease-in-out;
  width: 100%
}

.banner-container > .banner-shade {
  backdrop-filter: var(--banner-filter);
  background: var(--banner-overlay-gradient);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.layout-container .title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  height: var(--banner-height);
  position: relative;
}

@media (min-width: 40rem) {
  .layout-container .title {
    padding-bottom: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1));
    justify-content: flex-end;
  }
}

.layout-container .title>.subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
  display: inline-block;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (min-width: 40rem) {
  .layout-container .title>.subtitle {
    font-size: 1.25rem;
    line-height: 1.75rem; 
  }
}


.layout-container .title>.input, .layout-container .title>.tags {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: .5rem;
}

.layout-container .title>.gap {
  flex-grow: 1;
  display: none;
}

.layout-container .title>.input {
  flex-wrap: wrap;
}

.layout-container .title>.tags {
  margin-top: .5rem;
}

@media (min-width: 40rem) {
  .layout-container .title>.gap {
    display: block;
  }
}

@media (min-width: 48rem) {
  .layout-container .title>.input {
    flex-wrap: nowrap;
  }
  .layout-container .title>.input>.recruitment-search {
    width: 40%;
  }
}

.tag {
  background-color: rgb(var(--theme-accent));
  border-radius: .25rem;
  display: inline-block;
  font-size: .75rem; 
  font-weight: 700;
  line-height: 1.5em;
  margin-bottom: auto;
  margin-top: auto;
  padding: 0 .375rem;
  text-transform: uppercase;
  min-width: unset;
  min-height: unset;
}

@media (min-width: 40rem) {
  .title>.tags>.tag {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.layout-container p {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1em;
  overflow-wrap: break-word;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 2px 4px;
  text-wrap: balance;
  margin-bottom: .25rem;
}

.layout-container .recruitment-search {
  --search-anim-attr: .1s ease-out;
  font-size: 16px;
  position: relative;
  min-width: 300px;
  width: 100%;
  transition: flex-grow var(--search-anim-attr);
  display: flex;
  flex-grow: 0;
}

.recruitment-search:focus-within {
  flex-grow: 2;
}

.layout-container .recruitment-buttons {
  grid-area: title;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: .5rem;
  margin-left: auto;
}

.recruitment-buttons .checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  gap: .5rem;
  white-space: nowrap;
}

.checkbox:focus-visible {
  outline: 2px solid rgb(var(--theme-primary));
  outline-offset: 2px;
  border-radius: 4px;
}

.checkbox .icon {
  align-items: center;
  display: inline-flex;
}

.layout-container .tag-selection {
  grid-area: tags;
  background: rgb(var(--theme-accent));
  padding: .5rem 1rem;
  min-height: 3.5rem;
}

.tag-selection > *:not(:first-child) {
  margin-top: calc(1rem * (1 - 0));
}

.tag-category > *:not(:first-child) {
  margin-top: calc(.25rem * (1 - 0));
}

.tag-category .tag-category-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.tag-category .tag-category-name {
  text-transform: capitalize;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.tag-category .tag-category-divider {
  margin: 1rem 0;
  flex-grow: 1;
  border-color: rgb(var(--theme-accent-20));
}

.tag-category .tag-list {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.tag-category .tag-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: .25rem;
  border-radius: .375rem;
  border-width: 1px;
  border-color: transparent;
  background-color: rgb(var(--theme-background));
  padding: 0 .25rem;
  color: rgb(var(--color));
  transition-duration: .15s;
  transition-property: opacity, color, border-color;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.disabled {
  pointer-events: none;
  opacity: .2;
}

.tag-category .tag-item:has(.checkbox-input:checked) {
  background-color: rgb(var(--theme-primary));
}

.tag-item.highlighted {
  border-color: rgb(var(--theme-primary-20));
  border-style: dashed;
}

.tag-item.active-highlight {
  border-color: rgb(var(--theme-primary));
  border-style: solid;
}

.tag-category .tag-item-container {
  margin: auto 0;
  padding: 0 .25rem;
  text-align: center;
}

.tag-category .tag-item-name {
  position: relative;
  bottom: 1px;
  margin: auto 0;
  font-size: .75rem;
  line-height: 1rem;
}

.layout-container .recruitment-list {
  grid-area: operators;
  max-width: 80rem;
  flex-grow: 1;
}

.recruitment-list-container {
  display: contents;
}

.operator-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: .3rem;
}

.operator-section:not(:last-of-type) {
  margin-bottom: 1.5rem;
}

.operator-section .section-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  cursor: pointer;
  margin-bottom: .5rem;
}

.operator-section .section-header > div {
  grid-column: span 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.operator-section .section-header > div:first-of-type {
  grid-column: span 9;
  justify-content: flex-start;

  gap: .5rem;
}

.operator-section .section-header > div:last-of-type {
  justify-content: right;
}

.operator-section[data-section-open="true"] .section-header .icon {
  transform: rotate(180deg);
}

.operator-section .tag {
  background-color: rgb(var(--theme-accent));
  border-radius: .25rem;
  display: inline-block;
  font-size: .75rem; 
  font-weight: 700;
  line-height: 1.5em;
  margin-bottom: auto;
  margin-top: auto;
  padding: 0 .375rem;
  text-transform: uppercase;
  min-width: unset;
  min-height: unset;
}

.operator-section .section-content {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5rem .1rem;
  height: 0;
  transition: height .25s cubic-bezier(0,1,1,1);;
  overflow-y: clip;
  will-change: height;
}

.operator-section[data-section-open="true"] .section-content {
  height: auto;
  height: calc-size(min-content, size);;
}

.section-content .operator {
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  position: relative;
  padding: 0 .3rem .3rem;
}

.operator-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: .25rem;
  box-shadow: 0.125rem 0.125rem 0.3rem rgba(0, 0, 0, 0.1);
  height: auto;
  width: 5.2rem;
  aspect-ratio: 1 / 1.6;
  position: relative;
  overflow: hidden;
}

.operator-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(25deg, rgb(var(--theme-accent)) 0%, rgb(var(--theme-accent)) 15%, rgb(var(--rarity-color)) 15%, rgb(var(--rarity-color)) 100%);
}

.operator-svg {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0; 
  width: 100%;
  height: auto;
}

.operator[data-rarity="6"] {
  --rarity-color: 255 200 0;
}

.operator[data-rarity="5"] {
  --rarity-color: 255 255 169;
}

.operator[data-rarity="4"] {
  --rarity-color: 214 197 214;
}

.operator[data-rarity="3"] {
  --rarity-color: 0 170 238;
}

.operator[data-rarity="2"] {
  --rarity-color: 220 220 0;
}

.operator[data-rarity="1"] {
  --rarity-color: 160 160 160;
}

.operator-box img {
  position: relative;
  object-position: top;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
  height: auto;
  border-radius: .25rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%, 0 85%);
}

.operator-box .gap {
  flex-grow: 1;
}

.profession-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--prof-icon);

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.profession-icon.sub::before {
  background-image: var(--prof-sub-icon);
}

.warrior {
  --prof-icon: url("arknights/profession/icon_profession_warrior.png");
}

.sniper {
  --prof-icon: url("arknights/profession/icon_profession_sniper.png");
}

.tank {
  --prof-icon: url("arknights/profession/icon_profession_tank.png");
}

.medic {
  --prof-icon: url("arknights/profession/icon_profession_medic.png");
}

.support {
  --prof-icon: url("arknights/profession/icon_profession_support.png");
}

.caster {
  --prof-icon: url("arknights/profession/icon_profession_caster.png");
}

.special {
  --prof-icon: url("arknights/profession/icon_profession_special.png");
}

.pioneer {
  --prof-icon: url("arknights/profession/icon_profession_pioneer.png");
}

/* Guard (Warrior) Sub Professions */
.artsfghter {
  --prof-sub-icon: url("arknights/sub_profession/sub_artsfghter_icon.png");
}

.centurion {
  --prof-sub-icon: url("arknights/sub_profession/sub_centurion_icon.png");
}

.crusher {
  --prof-sub-icon: url("arknights/sub_profession/sub_crusher_icon.png");
}

.earthshaker {
  --prof-sub-icon: url("arknights/sub_profession/sub_earthshaker_icon.png");
}

.fearless {
  --prof-sub-icon: url("arknights/sub_profession/sub_fearless_icon.png");
}

.fighter {
  --prof-sub-icon: url("arknights/sub_profession/sub_fighter_icon.png");
}

.instructor {
  --prof-sub-icon: url("arknights/sub_profession/sub_instructor_icon.png");
}

.liberator {
  --prof-sub-icon: url("arknights/sub_profession/sub_liberator_icon.png");
}

.lord {
  --prof-sub-icon: url("arknights/sub_profession/sub_lord_icon.png");
}

.musha {
  --prof-sub-icon: url("arknights/sub_profession/sub_musha_icon.png");
}

.reaper {
  --prof-sub-icon: url("arknights/sub_profession/sub_reaper_icon.png");
}

.sword {
  --prof-sub-icon: url("arknights/sub_profession/sub_sword_icon.png");
}

/* Sniper (Sniper) Sub Professions */
.aoesniper {
  --prof-sub-icon: url("arknights/sub_profession/sub_aoesniper_icon.png");
}

.bombarder {
  --prof-sub-icon: url("arknights/sub_profession/sub_bombarder_icon.png");
}

.closerange {
  --prof-sub-icon: url("arknights/sub_profession/sub_closerange_icon.png");
}

.fastshot {
  --prof-sub-icon: url("arknights/sub_profession/sub_fastshot_icon.png");
}

.hunter {
  --prof-sub-icon: url("arknights/sub_profession/sub_hunter_icon.png");
}

.longrange {
  --prof-sub-icon: url("arknights/sub_profession/sub_longrange_icon.png");
}

.loopshooter {
  --prof-sub-icon: url("arknights/sub_profession/sub_loopshooter_icon.png");
}

.reaperrange {
  --prof-sub-icon: url("arknights/sub_profession/sub_reaperrange_icon.png");
}

.siegesniper {
  --prof-sub-icon: url("arknights/sub_profession/sub_siegesniper_icon.png");
}

/* Defender (Tank) Sub Professions */
.artsprotector {
  --prof-sub-icon: url("arknights/sub_profession/sub_artsprotector_icon.png");
}

.duelist {
  --prof-sub-icon: url("arknights/sub_profession/sub_duelist_icon.png");
}

.fortress {
  --prof-sub-icon: url("arknights/sub_profession/sub_fortress_icon.png");
}

.guardian {
  --prof-sub-icon: url("arknights/sub_profession/sub_guardian_icon.png");
}

.primprotector {
  --prof-sub-icon: url("arknights/sub_profession/sub_primprotector_icon.png");
}

.protector {
  --prof-sub-icon: url("arknights/sub_profession/sub_protector_icon.png");
}

.shotprotector {
  --prof-sub-icon: url("arknights/sub_profession/sub_shotprotector_icon.png");
}

.unyield {
  --prof-sub-icon: url("arknights/sub_profession/sub_unyield_icon.png");
}

/* Supporter (Support) Sub Professions */
.bard {
  --prof-sub-icon: url("arknights/sub_profession/sub_bard_icon.png");
}

.icon-tags {
  position: absolute;
  bottom: 22px;
  left: 1px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: .25rem;
  z-index: 2;
}

.icon-tags .icon {
  width: 1rem;
  height: 1rem;
}

.icon-tags .icon.large {
  width: 1.25rem;
  height: 1.25rem;
}

.operator-name {
  font-size: .5rem;
  font-weight: 700;
  position: relative;
  width: 100%;
  text-wrap: balance;
  text-align: right;
  z-index: 2;
}

@media (min-width: 40rem) {
  .operator-box {
    width: 6.5rem;
  }
  .operator-name {
    font-size: .6rem;
  }
  .icon-tags {
    bottom: 27px;
    left: 1px;
  }
  .icon-tags .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .icon-tags .icon.large {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.input-form {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: .5rem;
  box-sizing: border-box;
  color: inherit;
  margin-bottom: auto;
  margin-top: auto;
  position: relative;
  width: 100%;
}

.recruitment-input {
  --input-filter: 1.1;
  --input-opacity: 0.65;
}

.input-form::after {
  filter: brightness(var(--input-filter));
  opacity: var(--input-opacity);
  background-color: rgb(var(--theme-accent));
  border-radius: .5rem;
  content: " ";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all var(--search-anim-attr);
  width: 100%;
  z-index: -1;
}

.input-form input {
  color: currentColor;
  background: none;
  border-radius: inherit;
  padding: .25rem 1rem;
  position: relative;
  width: 100%;
  z-index: 12;
}

.input-form input::placeholder {
  color: var(--color);
}

.input-form .input-border {
  border-radius: inherit;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  transition: all var(--search-anim-attr);
  width: 100%;
}

.search-icon {
  position: absolute;
  height: 1.5rem;
  right: .5rem;
  top: .25rem;
  width: 1.5rem;
  align-items: center;
  border-radius: .25rem;
  display: flex;
  justify-content: center;
}

.icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.5rem;
  width: 1.5rem;
  justify-content: center;
  line-height: 1;
  text-indent: 0;
  transition: color .3s cubic-bezier(.25,.8,.5,1), transform 0.25s ease-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.icon.hidden {
  display: none;
}

.icon.small {
  height: 1rem;
  width: 1rem;
}

.icon.large {
  height: 2rem;
  width: 2rem;
}

.search-hint {
  display: none;
  gap: .25rem;
  opacity: .75;
  position: absolute;
  top: 50%;
  right: 2.5rem;
  transform: translateY(-50%);

  transition: opacity var(--nav-search-anim-attr);
}

@media (min-width: 48rem) {
  .search-hint {
    display: flex;
  }
}

.search-hint .hint-icon {
  background-color: rgb(var(--theme-accent-20));
  border-radius: .25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  padding-left: .25rem;
  padding-right: .25rem;
}

.btn-accent {
  --main-color: rgb(var(--theme-accent-20) / var(--opacity));
  --text-color: rgb(var(--color));
}

.recruitment-buttons .btn {
  color: var(--text-color);
  padding: 0 .75rem;
  min-width: 0rem;
}


.btn::before, .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: all .1s ease-out;
}

.recruitment-buttons .btn::before {
  background-color: var(--main-color);
}

.recruitment-buttons .btn::after {
  background: black;
  opacity: 0;
}

.recruitment-buttons .btn:hover::after {
  opacity: .2;
}

.recruitment-buttons .btn:active::after {
  opacity: .4;
}

.btn-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  width: 100%;
  pointer-events: none;
}

/* Base toast container */
.toast-notifications {
  --toast-gap: 0.5rem;
  --toast-width: min(calc(100vw - 2rem), 20rem);
  
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--toast-gap);
}

/* Toast containers for different positions */
.toast-container {
  display: flex;
  flex-direction: column;
  gap: var(--toast-gap);
  align-items: center;
  max-height: 100vh;
  overflow: hidden;
}

.toast-container[data-toast-position="top"] {
  grid-row: 1;
  padding-top: var(--header-height);
}

.toast-container[data-toast-position="bottom"] {
  grid-row: 3;
}

/* Base toast message styles */
.toast-message {
  --enter-duration: 300ms;
  --exit-duration: 200ms;
  --dismiss-time: 5000ms;
  
  pointer-events: none;
  width: var(--toast-width);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: rgb(var(--theme-accent-20));
  color: rgb(var(--color));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
}

/* Toast types */
.toast-message[data-type="info"] { background: rgb(var(--theme-status-blue)); }
.toast-message[data-type="success"] { background: rgb(var(--theme-status-green)); }
.toast-message[data-type="warning"] { background: rgb(var(--theme-status-yellow)); }
.toast-message[data-type="error"] { background: rgb(var(--theme-status-red)); }

/* Mobile animations (vertical) */
.toast-container[data-toast-position="top"] .toast-message {
  transform: translateY(-100%);
  animation: toast-enter-vertical var(--enter-duration) ease forwards;
}

.toast-container[data-toast-position="bottom"] .toast-message {
  transform: translateY(100%);
  animation: toast-enter-vertical var(--enter-duration) ease forwards;
}

.toast-container[data-toast-position="top"] .toast-message.exit {
  animation: toast-exit-vertical-top var(--exit-duration) ease forwards;
}

.toast-container[data-toast-position="bottom"] .toast-message.exit {
  animation: toast-exit-vertical-bottom var(--exit-duration) ease forwards;
}

/* Progress bar */
.toast-message[data-dismissible]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform-origin: left;
  animation: toast-progress linear forwards;
  animation-duration: var(--dismiss-time);
}

/* Interactive states */
.toast-message[data-dismissible] {
  pointer-events: auto;
  cursor: pointer;
}

.toast-message[data-pausable]:hover::after {
  animation-play-state: paused;
}

/* Desktop styles */
@media (min-width: 64rem) {
  .toast-notifications {
      --toast-width: 24rem;
  }

  .toast-container {
      align-items: flex-end;
      padding-right: 1rem;
  }

  /* Horizontal animation only for top toasts on desktop */
  .toast-container[data-toast-position="top"] .toast-message {
      transform: translateX(100%);
      animation: toast-enter-horizontal var(--enter-duration) ease forwards;
  }

  .toast-container[data-toast-position="top"] .toast-message.exit {
      animation: toast-exit-horizontal var(--exit-duration) ease forwards;
  }
}

/* Animations */
@keyframes toast-enter-vertical {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes toast-exit-vertical-top {
  from {
      opacity: 1;
      transform: translateY(0);
  }
  to {
      opacity: 0;
      transform: translateY(-100%);
  }
}

@keyframes toast-exit-vertical-bottom {
  from {
      opacity: 1;
      transform: translateY(0);
  }
  to {
      opacity: 0;
      transform: translateY(100%);
  }
}

@keyframes toast-enter-horizontal {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes toast-exit-horizontal {
  from {
      opacity: 1;
      transform: translateX(0);
  }
  to {
      opacity: 0;
      transform: translateX(100%);
  }
}

@keyframes toast-progress {
  to { transform: scaleX(0); }
}