@font-face{font-family:Golos Text;font-style:normal;font-display:swap;font-weight:400;src:url(/axion/assets/golos-text-cyrillic-400-normal-C7us6pn1.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos Text;font-style:normal;font-display:swap;font-weight:400;src:url(/axion/assets/golos-text-latin-400-normal-Coi1FYaD.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Golos Text;font-style:normal;font-display:swap;font-weight:500;src:url(/axion/assets/golos-text-cyrillic-500-normal-BSLQUuP1.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos Text;font-style:normal;font-display:swap;font-weight:500;src:url(/axion/assets/golos-text-latin-500-normal-BznAvurO.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Golos Text;font-style:normal;font-display:swap;font-weight:600;src:url(/axion/assets/golos-text-cyrillic-600-normal-lpQ9rVRR.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Golos Text;font-style:normal;font-display:swap;font-weight:600;src:url(/axion/assets/golos-text-latin-600-normal-Bhk8uV1U.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/axion/assets/pt-serif-cyrillic-400-normal-B-euljER.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/axion/assets/pt-serif-latin-400-normal-Cx0mQj7e.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:normal;font-display:swap;font-weight:700;src:url(/axion/assets/pt-serif-cyrillic-700-normal-DvVvs_4R.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:normal;font-display:swap;font-weight:700;src:url(/axion/assets/pt-serif-latin-700-normal-Bsuo9jes.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --wine: #6b1028;
  --wine-deep: #4a0b1c;
  --gold: #cc9220;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --side-w: 268px;
  color-scheme: dark;
  font-family: "Golos Text", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-color: #ffffff52 transparent; }
body {
  background: #6b1028;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.landing-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
  pointer-events: none;
  background: #6b1028;
}
/* Реакцию фона на курсор отключает data-pause-shader в сцене #shader
   на стороне лендинга: перекрытие через ::after здесь не нужно — iframe
   с псевдоэлементом рендерится серым.

   Градиент под iframe — запасной вариант: шейдер построен на WebGPU, и если
   браузер его не поддерживает, канвас остаётся пустым и пользователь видит
   серое. Фон за iframe виден всегда и повторяет фирменную гамму. */
.landing-bg {
  background:
    radial-gradient(120% 90% at 12% 8%, #8a1836 0%, rgba(138, 24, 54, 0) 55%),
    radial-gradient(100% 80% at 88% 92%, #4a0a1c 0%, rgba(74, 10, 28, 0) 58%),
    linear-gradient(160deg, #6b1028 0%, #3f0816 55%, #2a050f 100%);
}
.login-page, .shell { position: relative; z-index: 1; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

@keyframes fade-up {
  0% { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-appear {
  0% { opacity: 0; filter: blur(10px); transform: translateY(16px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes hero-rule-in {
  0% { opacity: 0; transform: scaleX(.12); }
  to { opacity: 1; transform: scaleX(1); }
}

.glass {
  background: linear-gradient(165deg, #ffffff24 0%, #ffffff0f 46%, #2a0c1614 100%);
  border: 1px solid #ffffff38;
  box-shadow: 0 28px 70px -40px #000000a6, inset 0 1px #ffffff47;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(420px, 100%);
  border-radius: 24px;
  padding: 32px 28px 26px;
  animation: hero-appear .95s var(--ease) both;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #ffffff73;
  background: #ffffff1a;
  display: grid;
  place-items: center;
  flex: none;
}
.mark svg { display: block; }
.brand-name {
  font-family: "Golos Text", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.login-card h1, .top h1, .row h2 {
  font-family: "PT Serif", Georgia, serif;
  font-weight: 700;
}
.login-card h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.03em;
}
.login-card h1::after, .top h1.in::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 12px;
  background: var(--gold);
  transform-origin: left;
  animation: hero-rule-in .85s var(--ease) both;
}
.login-card p.lead { margin: 16px 0 20px; color: #ffffffb3; font-size: 14px; }
.field { display: block; min-width: 0; }
.field > span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
input[type="password"], input[type="text"], input[type="date"], input[type="url"], select, textarea {
  width: 100%;
  color: #fff;
  background: #ffffff1c;
  border: 1px solid #ffffff38;
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  box-shadow: inset 0 1px #ffffff47;
  backdrop-filter: blur(18px) saturate(1.4);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
textarea { min-height: 120px; resize: vertical; }
.rich { display: flex; flex-direction: column; gap: 8px; }
.rich-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rich-bar select,
.rich-bar button {
  width: auto;
  height: 34px;
  border-radius: 999px;
  padding: 0 10px;
  background: #ffffff18;
  border: 1px solid #ffffff38;
  color: #fff;
  box-shadow: none;
}
.rich-bar select { max-width: 120px; }
.rich-bar button { font-size: 13px; }
.rich-bar button:hover,
.rich-bar select:hover { background: #ffffff2e; }
.rich-edit {
  min-height: 150px;
  max-height: 420px;
  overflow: auto;
  border-radius: 16px;
  padding: 12px 14px;
  background: #ffffff1c;
  border: 1px solid #ffffff38;
  box-shadow: inset 0 1px #ffffff47;
  line-height: 1.55;
}
.rich-edit:focus {
  outline: none;
  background: #ffffff38;
  border-color: #ffffff94;
}
.rich-edit p,
.rich-edit div { margin: 0 0 8px; }
.rich-edit ul,
.rich-edit ol { margin: 6px 0 8px 1.2em; padding: 0; }
.rich-edit ul { list-style: disc; }
.rich-edit ol { list-style: decimal; }
.rich-edit mark,
.rich-edit span[style*="background"] {
  background: #f0d48a;
  color: #3a0814;
  border-radius: 2px;
  padding: 0 2px;
}
input:focus, select:focus, textarea:focus {
  background: #ffffff4d;
  border-color: #ffffff94;
  box-shadow: inset 0 1px #ffffff57, 0 0 0 2px #ffffff2e;
}
input::placeholder, textarea::placeholder { color: #ffffff99; }
select option { background: var(--wine-deep); color: #fff; }
input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-out;
  box-shadow: inset 0 0 0 1000px #6b102873;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: #fff;
  color: var(--wine);
  font-weight: 600;
  transition: transform .35s var(--ease), background-color .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); background: #fff; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.block { width: 100%; margin-top: 16px; }
.btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff52;
}
.btn.ghost:hover { background: #ffffff1a; }
.err { min-height: 18px; margin: 10px 0 0; color: #ffb4b4; font-size: 13px; }

.shell { min-height: 100vh; display: flex; }
.sidebar {
  width: var(--side-w);
  flex: none;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, #12060c73 0%, #0c040880 100%);
  border-right: 1px solid #ffffff24;
  backdrop-filter: blur(24px) saturate(1.4);
}
.side-head { padding: 22px 18px 6px; }
.side-head .brand-lockup { margin-bottom: 0; }
.side-scroll { flex: 1; overflow: auto; padding: 8px 0 16px; }
.group-label {
  margin: 18px 22px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav-btn {
  width: calc(100% - 20px);
  margin: 2px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 12px;
  color: #ffffffd9;
  transition: background-color .25s var(--ease), color .25s;
}
.nav-btn svg { flex: none; color: #ffffffb3; }
.nav-btn:hover { background: #ffffff1a; }
.nav-btn.active {
  background: #fff;
  color: var(--wine);
  font-weight: 600;
}
.nav-btn.active svg { color: var(--wine); }
.nav-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #3a0814;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-btn.active .nav-count { background: var(--wine); color: #fff; }
.side-foot { border-top: 1px solid #ffffff24; padding: 12px; }
.logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 12px;
  color: #ffffffd9;
  transition: background-color .25s var(--ease);
}
.logout:hover { background: #ffffff1a; }

.main { flex: 1; min-width: 0; padding: 28px 32px 56px; }
.top { margin-bottom: 8px; }
.top h1 { margin: 0; font-size: 34px; letter-spacing: -0.03em; }
.status { margin: 8px 0 0; min-height: 18px; color: #ffffffa6; font-size: 13px; }
.status.bad { color: #ffb4b4; }
.status.ok { color: #f0d48a; }
.menu-btn { display: none; color: #fff; }

.toolbar { display: none; }
.filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin: 18px 0 14px;
}
.filters.apps { flex-wrap: wrap; }
.filters.apps .filter-search { flex: 1 1 240px; max-width: 460px; }
.filters.apps .filter-count { margin-left: 0; }
.filter-search { flex: 1 1 auto; min-width: 180px; }
.filter:not(.filter-search) { flex: 0 0 auto; }
.filters .filter-search input,
.filters .drop-btn,
.filters .filter-reset,
.filters .filter-add,
.filters .filter-count {
  height: 42px;
  box-sizing: border-box;
}
.filters .filter-search input {
  border-radius: 999px;
  padding: 0 16px;
  line-height: 40px;
  background: #ffffff14;
  box-shadow: inset 0 1px #ffffff2e;
}
.filter-add {
  align-self: flex-end;
  flex: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 18px;
}
.filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.drop { position: relative; }
.drop-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 148px;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  padding: 0 14px 0 16px;
  background: #ffffff14;
  color: #fff;
  box-shadow: inset 0 1px #ffffff2e;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.drop-btn svg { flex: none; opacity: .75; transition: transform .35s var(--ease); }
.drop.open .drop-btn { border-color: #ffffff73; background: #ffffff1f; }
.drop.open .drop-btn svg { transform: rotate(180deg); }
.drop-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(360px, 70vw);
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid #ffffff3d;
  background: linear-gradient(165deg, #5a1830f2 0%, #2a0a16f7 100%);
  box-shadow: 0 24px 60px -28px #000000d0, inset 0 1px #ffffff47;
  backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transform-origin: top center;
  transition: opacity .22s var(--ease), transform .32s var(--ease);
}
.drop.open .drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.drop-opt {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 9px 12px;
  line-height: 1.3;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.drop-opt:hover { background: #ffffff1c; }
.drop-opt.is-on { background: #fff; color: var(--wine); font-weight: 600; }
.filter-reset {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 8px;
}
.filter-count {
  align-self: flex-end;
  display: flex;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0 2px;
  color: #ffffff80;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hint { margin: 14px 0 0; color: #ffffffb3; font-size: 13px; }

.card {
  border-radius: 22px;
  overflow: hidden;
}
#list.card { overflow: visible; }
.form-card { padding: 18px; margin-bottom: 14px; overflow: visible; animation: hero-appear .7s var(--ease) both; }
.field .drop-btn { width: 100%; max-width: none; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; margin-top: 14px; }
/* Блок удаления заявки: отделён линией, чтобы не спутать с действиями контента. */
.app-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #ffffff24;
}

.row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid #ffffff24;
  transition: background-color .25s var(--ease);
}
.row:first-child { border-top: 0; }
.row:hover { background: #ffffff0f; }
.row.off { opacity: .45; }
.row h2 { margin: 0; font-size: 18px; letter-spacing: -0.02em; }
.meta {
  margin: 5px 0 0;
  color: #ffffff8c;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.note {
  margin: 6px 0 0;
  color: #ffffffc7;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.person { border-top: 1px solid #ffffff24; }
.person:first-child { border-top: 0; }
.person.off .person-head { opacity: .45; }
.person-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 15px 18px;
}
.person-head h2 { margin: 0; font-size: 18px; }
.person-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.person-main h2, .person-main .meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill {
  flex: none;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--gold);
  color: #3a0814;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin-bottom: 8px;
}
.facts span, .block-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.facts b { display: block; margin-top: 4px; font-weight: 500; overflow-wrap: anywhere; }
.block-text { white-space: pre-wrap; margin: 6px 0 14px; overflow-wrap: anywhere; }
.files { list-style: none; margin: 0 0 8px; padding: 0; }
.files li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #ffffff24;
}
.files a { color: #fff; }
.person-head .chev { flex: none; opacity: .7; transition: transform .32s var(--ease); }
.person.open .person-head .chev { transform: rotate(180deg); }
.person-head:hover { background: #ffffff0f; }
.person-fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .48s cubic-bezier(.16, 1, .3, 1);
}
.person.open .person-fold { grid-template-rows: 1fr; }
.person-fold-in { min-height: 0; overflow: hidden; }
.person.open .person-fold-in { overflow: visible; transition: overflow 0s linear .48s; }
.person-body { padding: 2px 18px 16px; }
.person.open .person-body { animation: fade-up .42s cubic-bezier(.16, 1, .3, 1) both; }
.person-body .grid {
  align-items: end;
  gap: 12px 14px;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
}
.person-body .span-2 { grid-column: span 2; }
.person-body input:not([type="checkbox"]):not([type="hidden"]),
.person-body .drop-btn {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  padding: 0 16px;
}
.person-body input[type="hidden"] { display: none; }
.person-body .form-actions { align-items: center; margin-top: 16px; }
.person-body .check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 0;
}
.person-body .check input { width: 16px; height: 16px; margin: 0; }
.person-body .check span { margin: 0; letter-spacing: 0.08em; }
.ops { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; }
.text-btn, .icon-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 10px;
  color: #ffffffd1;
  transition: background-color .2s;
}
.text-btn:hover, .icon-btn:hover { background: #ffffff1a; }
.text-btn.danger { color: #ffb4b4; }
.text-btn:disabled, .icon-btn:disabled { opacity: .35; cursor: default; }
.empty { padding: 32px 16px; color: #ffffffa6; text-align: center; }
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #ffffff24;
  color: #ffffffb3;
  font-size: 13px;
}
/* Появление строк только при первой отрисовке раздела: класс .enter вешается
   один раз за сессию, иначе каждое перерисовывание запускает анимацию заново
   и старые строки визуально накладываются на новые. */
#list.enter .row {
  animation: fade-up .62s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 36ms);
}
/* При переключении вкладок список пересобирается целиком — плавное появление
   здесь не нужно, оно и было причиной наложения. */
#list:not(.enter) .row { animation: none; }
.backdrop { display: none; }

@media (max-width: 860px) {
  .menu-btn { display: inline-flex; margin-right: 8px; }
  .sidebar {
    position: fixed;
    z-index: 30;
    transform: translateX(-105%);
    transition: transform .45s var(--ease);
  }
  .sidebar.open { transform: none; }
  .backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: #3f0816a6;
    z-index: 25;
  }
  .main { padding: 18px 16px 40px; }
  .top h1, .login-card h1 { font-size: 28px; }
  .grid, .person-body .grid { grid-template-columns: 1fr 1fr; }
  .grid .wide, .person-body .span-2 { grid-column: span 2; }
  .toolbar { flex-wrap: wrap; }
  .filters { flex-wrap: wrap; }
  .drop-btn { max-width: none; width: 100%; }
  .filter, .filter-search { flex: 1 1 160px; }
  .filter-count { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}