/* ═══ DESKTOP FIX v11 — по ТЗ от Светы ═══ */

/* ─── НАВИГАЦИЯ ─── */
@media (min-width: 700px) {
  header {
    position: relative !important;
    z-index: 50 !important;
    transition: transform 0.3s ease !important;
  }

  header.header-hidden {
    transform: translateY(-100%) !important;
  }

  header nav.sm\:flex {
    justify-content: flex-start !important;
    padding: 0 !important;
    background: linear-gradient(to bottom, rgba(9,27,35,0.9), rgba(9,27,35,0.5), transparent) !important;
    gap: 0 !important;
    align-items: center !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
    padding-left: max(72px, calc((100vw - 1280px) / 2 + 72px)) !important;
  }

  header nav.sm\:flex button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 14px !important;
    min-width: auto !important;
  }

  header nav.sm\:flex button img {
    display: none !important;
  }

  header nav.sm\:flex button span {
    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 200 !important;
    letter-spacing: 0.15em !important;
    color: rgba(213, 234, 237, 0.7) !important;
    transition: color 0.3s !important;
    text-transform: uppercase !important;
  }

  header nav.sm\:flex button:hover span {
    color: #D5EAED !important;
  }
}

/* ─── «КУДА ТЫ ПОПАЛ» ─── */
@media (min-width: 700px) {
  section[aria-labelledby="about-project-title"] {
    padding-top: 0 !important;
    padding-bottom: auto !important;
  }

  section[aria-labelledby="about-project-title"] > .container-padding-main {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 56px !important;
    padding-bottom: 46px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  #dropdownArrow {
    display: none !important;
  }

  #dropdownToggle {
    width: 100% !important;
    justify-content: center !important;
    cursor: default !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #dropdownContent {
  }

  #about-project-title {
    width: 100% !important;
    margin: 0 0 18px !important;
    text-align: center !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.92) !important;
  }

  section[aria-labelledby="about-project-title"] article {
    margin-top: 0 !important;
  }

  section[aria-labelledby="about-project-title"] article p {
    margin: 0 !important;
    text-align: center !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.70) !important;
  }
}

/* ─── ПЛЕЕРЫ — ТЗ пункт 4 ─── */
@media (min-width: 700px) {
  section[aria-labelledby="audio-messages-title"] {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    gap: 2.5rem !important;
  }

  .audio-player {
    box-shadow: none !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .audio-player .play-icon,
  .audio-player .pause-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .audio-player h3 {
    font-size: 1.1rem !important;
    color: #D5EAED !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player time {
    font-size: 14px !important;
    color: rgba(213, 234, 237, 0.6) !important;
  }
}

/* ─── КОНТЕЙНЕР ─── */
@media (min-width: 700px) {
  .container-padding-main {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ─── ФУТЕР ─── */
@media (min-width: 700px) {
  footer {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  footer p {
    font-size: 11px !important;
    color: rgba(213, 234, 237, 0.35) !important;
  }
}
@media (min-width: 700px) {
  .audio-player .ship {
    margin-top: -5px !important;
    margin-left: -3px !important;
  }
}
/* === ONLY MODAL BUTTONS: notifications / donate / forms === */

#subscriptions-modal a,
#donate-modal a,
#message-modal button[type="submit"],
#email-modal button[type="submit"] {
  background: #4D92A6 !important;
  color: #F3FAFC !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.14) !important;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.06s ease !important;
}

#subscriptions-modal a:hover,
#donate-modal a:hover,
#message-modal button[type="submit"]:hover,
#email-modal button[type="submit"]:hover {
  background: #8ABCC4 !important;
  box-shadow: none !important;
}

#subscriptions-modal a:active,
#donate-modal a:active,
#message-modal button[type="submit"]:active,
#email-modal button[type="submit"]:active {
  background: #45899A !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.22) !important;
  transform: translateY(1px) !important;
}

#message-modal button[type="submit"]:disabled,
#email-modal button[type="submit"]:disabled {
  background: #95AEB4 !important;
  color: rgba(243,250,252,0.88) !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* === FINAL CLEAN OVERRIDES 2026-04-11 === */

/* белые поля в письме */
#message-modal input[type="email"],
#message-modal textarea {
  background: #FFFFFF !important;
  border: 1px solid rgba(213, 234, 237, 0.28) !important;
  color: #0B1C26 !important;
  box-shadow: none !important;
}

#message-modal input[type="email"]::placeholder,
#message-modal textarea::placeholder {
  color: rgba(11, 28, 38, 0.42) !important;
}

#message-modal input[type="email"]:focus,
#message-modal textarea:focus {
  background: #FFFFFF !important;
  color: #0B1C26 !important;
  border-color: rgba(77, 146, 166, 0.75) !important;
  outline: none !important;
}

/* уведомления ближе к фигме */
#subscriptions-modal{
  width: 640px !important;
  max-width: 94vw !important;
  border-radius: 24px !important;
  padding: 34px 40px 30px !important;
  background: #071B26 !important;
  box-sizing: border-box !important;
}

#subscriptions-modal h2{
  margin: 6px 0 22px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 200 !important;
  letter-spacing: -0.005em !important;
  color: #D5EAED !important;
  text-align: center !important;
}

#subscriptions-modal p{
  max-width: 100% !important;
  margin: 0 auto 24px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 200 !important;
  color: rgba(213,234,237,0.92) !important;
  text-align: center !important;
}

#subscriptions-modal > div{
  max-width: 536px !important;
  margin: 0 auto !important;
  gap: 18px !important;
  padding: 0 !important;
}

#subscriptions-modal a{
  width: 100% !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 200 !important;
  letter-spacing: 0.02em !important;
}

/* блок "Куда ты попал" — финальный чистый вариант */
@media (min-width: 700px) {
  section[aria-labelledby="about-project-title"] {
    padding-top: 96px !important;
    padding-bottom: 48px !important;
  }

  section[aria-labelledby="about-project-title"] > .container-padding-main {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-bottom: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  #about-project-title {
    font-family: Inter, Arial, sans-serif !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 200 !important;
    letter-spacing: -0.02em !important;
    color: rgba(213, 234, 237, 0.82) !important;
    text-align: center !important;
    margin: 0 0 34px !important;
  }

  section[aria-labelledby="about-project-title"] article {
    margin-top: 0 !important;
  }

  section[aria-labelledby="about-project-title"] article p {
    max-width: 820px !important;
    margin: 0 auto !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
    font-weight: 200 !important;
    letter-spacing: -0.005em !important;
    color: rgba(213, 234, 237, 0.74) !important;
    text-align: center !important;
  }
}

/* === ABOUT WIDTH + WRAP RESTORE === */
@media (min-width: 700px) {
  section[aria-labelledby="about-project-title"] > .container-padding-main {
    max-width: 1040px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  section[aria-labelledby="about-project-title"] article p {
    max-width: 1022px !important;
    margin: 0 auto !important;
    font-size: 15px !important;
    line-height: 2 !important;
    white-space: normal !important;
  }

  section[aria-labelledby="about-project-title"] article p br {
    display: block !important;
  }
}

/* === PLAYER TO ABOUT TEXT ALIGN === */
@media (min-width: 700px) {
  /* ширина текстового блока "Здесь..." */
  :root {
    --about-text-width: 744px;
    --player-btn-width: 48px;
    --player-gap: 16px;
  }

  section[aria-labelledby="audio-messages-title"] {
    width: calc(var(--about-text-width) + var(--player-btn-width) + var(--player-gap)) !important;
    max-width: calc(var(--about-text-width) + var(--player-btn-width) + var(--player-gap)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .audio-player {
    width: 100% !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: var(--player-btn-width) var(--about-text-width) !important;
    gap: var(--player-gap) !important;
    justify-content: center !important;
  }

  .audio-player section.min-w-0 {
    width: var(--about-text-width) !important;
    min-width: var(--about-text-width) !important;
    max-width: var(--about-text-width) !important;
  }

  .audio-player header,
  .audio-player .relative.h-\[38px\],
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    width: var(--about-text-width) !important;
    max-width: var(--about-text-width) !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    justify-content: space-between !important;
    gap: 0 !important;
  }

  .audio-player .time-display {
    text-align: left !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .audio-player time {
    text-align: right !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }
}

/* === TOP NAV FONT SIZE UNIFY === */
@media (min-width: 700px) {
  header nav.sm\:flex button span {
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 200 !important;
    letter-spacing: 0.15em !important;
  }
}

/* === MODAL BODY TEXT UNIFY === */
#subscriptions-modal p,
#donate-modal p {
  font-family: Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 200 !important;
  color: rgba(213,234,237,0.82) !important;
}

/* DARK FIELDS removed - using FIGMA COLOR FIX */

/* 2. Подтекст "Место, где можно..." — крупнее */
@media (min-width: 700px) {
  section[aria-labelledby="about-project-title"] article p {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
}

/* 3. Больше воздуха между плеером и сноской */
@media (min-width: 700px) {
  footer {
    margin-top: 120px !important;
  }
}

/* 4. Больше воздуха между "Куда ты попал" и плеером */
@media (min-width: 700px) {
  section[aria-labelledby="audio-messages-title"] {
    margin-top: 60px !important;
  }
}

/* === GLOBAL UI TEXT +4PX === */
@media (min-width: 700px) {
  /* верхнее меню */
  header nav.sm\:flex button span {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* блок "Куда ты попал" */
  #about-project-title {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }

  section[aria-labelledby="about-project-title"] article p {
    font-size: 19px !important;
    line-height: 1.7 !important;
  }

  /* аудио */
  .audio-player h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* модалки */
  #subscriptions-modal h2,
  #donate-modal h2,
  #message-modal h2,
  #email-modal h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #subscriptions-modal p,
  #donate-modal p,
  #message-modal label,
  #email-modal label {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }

  #message-modal input,
  #message-modal textarea,
  #email-modal input,
  #email-modal textarea,
  #subscriptions-modal a,
  #donate-modal a,
  #message-modal button[type="submit"],
  #email-modal button {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  #message-modal input::placeholder,
  #message-modal textarea::placeholder,
  #email-modal input::placeholder,
  #email-modal textarea::placeholder {
    font-size: 19px !important;
  }

  /* футер */
  footer p {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* === RESTORE TOP NAV FONT SIZE === */
@media (min-width: 700px) {
  header nav.sm\:flex button span {
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 200 !important;
    letter-spacing: 0.15em !important;
  }
}

/* === ABOUT + PLAYER FIGMA TUNE === */
@media (min-width: 700px) {
  /* чуть больше воздуха между 2 строками текста */
  section[aria-labelledby="about-project-title"] article p {
    line-height: 1.95 !important;
  }

  /* плеер левее и длиннее */
  section[aria-labelledby="audio-messages-title"] {
    width: 1054px !important;
    max-width: calc(100vw - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: translateX(0) !important;
  }

  .audio-player {
    width: 100% !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
  }

  .audio-player .audio-toggle {
    justify-self: start !important;
    margin-left: 0 !important;
  }

  .audio-player section.min-w-0,
  .audio-player .relative.h-\[38px\],
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* === MESSAGE MODAL FIGMA COLOR FIX === */
#message-modal input[type="email"],
#message-modal textarea {
  background: #D5EAED !important;
  border: 1px solid rgba(9, 27, 35, 0.18) !important;
  color: #0B1C26 !important;
  box-shadow: none !important;
}

#message-modal input[type="email"]::placeholder,
#message-modal textarea::placeholder {
  color: rgba(11, 28, 38, 0.42) !important;
  opacity: 1 !important;
}

#message-modal input[type="email"]:focus,
#message-modal textarea:focus {
  background: #D5EAED !important;
  border: 1px solid rgba(9, 27, 35, 0.22) !important;
  color: #0B1C26 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* === CURSOR FIX: убираем grab со всего кроме audio seek === */
.fancybox__viewport,
.fancybox__track,
.fancybox__slide,
.fancybox__content,
.fancybox__backdrop,
.fancybox__container,
.fancybox__container *,
[data-fancybox],
#subscriptions-modal,
#donate-modal,
#message-modal,
#email-modal {
  cursor: default !important;
}

.fancybox__container a,
.fancybox__container button,
.fancybox__container [role="button"],
.fancybox__container input[type="submit"],
.fancybox__container label.checkbox-label,
#subscriptions-modal a,
#donate-modal a,
#message-modal button[type="submit"],
#message-modal a,
#email-modal button,
#email-modal a,
[data-fancybox-close] {
  cursor: pointer !important;
}

.fancybox__container input[type="email"],
.fancybox__container input[type="text"],
.fancybox__container textarea,
#message-modal input,
#message-modal textarea {
  cursor: text !important;
}

.audio-player .audio-seek {
  cursor: grab !important;
}

.audio-player .audio-seek:active {
  cursor: grabbing !important;
}

/* === TEXTAREA RESIZE HANDLE === */
#message-modal textarea {
  resize: vertical;
}

#message-modal textarea::-webkit-resizer {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cline x1='11' y1='1' x2='1' y2='11' stroke='%23708A92' stroke-width='1.5'/%3E%3Cline x1='11' y1='5' x2='5' y2='11' stroke='%23708A92' stroke-width='1.5'/%3E%3Cline x1='11' y1='9' x2='9' y2='11' stroke='%23708A92' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

/* === MESSAGE MODAL OLD DESIGN LAYOUT === */
#message-modal {
  width: 720px !important;
  max-width: 92vw !important;
  padding: 44px 52px 36px !important;
  border-radius: 24px !important;
}

#message-modal h2 {
  font-size: 26px !important;
  margin-bottom: 30px !important;
  font-weight: 200 !important;
  letter-spacing: 0.04em !important;
}

#message-modal .grid.gap-4 {
  gap: 20px !important;
  max-width: 100% !important;
}

#message-modal input[type="email"] {
  height: 62px !important;
  border-radius: 14px !important;
  padding: 0 22px !important;
  font-size: 18px !important;
}

#message-modal input[type="email"]::placeholder {
  font-size: 18px !important;
}

#message-modal textarea {
  min-height: 200px !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  font-size: 18px !important;
}

#message-modal textarea::placeholder {
  font-size: 18px !important;
}

#message-modal label {
  font-size: 16px !important;
}

#message-modal button[type="submit"] {
  height: 56px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
}

/* === PLAYER TITLE FIX v5 === */
@media (min-width: 700px) {
  .audio-player h3 {
    position: static !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    color: #D5EAED !important;
  }

  .audio-player .mb-8 {
    margin-bottom: 18px !important;
    position: static !important;
    transform: none !important;
  }
}

/* === HEADER FIXED GLASS === */
@media (min-width: 700px) {
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: rgba(1, 12, 17, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.75) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  header::before,
  header::after {
    content: none !important;
  }

  header nav.sm\:flex {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    margin: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  main {
    padding-top: 0 !important;
  }
}

/* ═══════════════════════════════════════════ */
/* === FINAL HERO SECTION (single source)  === */
/* ═══════════════════════════════════════════ */

#hero-section {
  display: block;
  width: 100%;
  background: #010C11;
  line-height: 0;
  position: relative;
}

#hero-section picture {
  display: block;
  width: 100%;
}

#hero-section img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

@media (min-width: 1001px) {
  #hero-section img {
    height: 600px;
    object-fit: cover;
    object-position: center;
  }
}

/* градиент снизу для плавного перехода */
#hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #0C1D27);
  pointer-events: none;
}

/* ═══════════════════════════════════════════ */
/* === HEADER: desktop glass / mobile plain === */
/* ═══════════════════════════════════════════ */

@media (min-width: 700px) {
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: rgba(1, 12, 17, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.75) !important;
    border: none !important;
    margin: 0 !important;
  }

  header::before,
  header::after {
    content: none !important;
  }

  header nav.sm\:flex {
    background: transparent !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    box-shadow: none !important;
    border: none !important;
  }
}

@media (max-width: 699px) {
  header {
    position: relative !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    z-index: 50 !important;
  }

  header::before,
  header::after {
    content: none !important;
    display: none !important;
  }

  header nav.sm\:flex {
    background: transparent !important;
  }
}

/* === TABLET FIX: use burger + cover hero === */
@media (min-width: 700px) and (max-width: 1000px) {
  /* верхний header только как мобильный */
  body > .relative > header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
  }

  body > .relative > header::before,
  body > .relative > header::after {
    content: none !important;
    display: none !important;
  }

  /* десктопный nav выключаем */
  body > .relative > header nav.sm\:flex {
    display: none !important;
  }

  /* мобильный бургер включаем */

  /* hero как нормальный cover-блок */
  #hero-section {
    position: relative !important;
    width: 100% !important;
    height: 760px !important;
    overflow: hidden !important;
    background: #010C11 !important;
    line-height: 0 !important;
  }

  #hero-section picture,
  #hero-section img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  #hero-section img {
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* === DESKTOP FOOTER 2 LINES RESTORE === */
@media (min-width: 1001px) {
  footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-bottom: 24px !important;
  }

  footer p {
    width: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }
}

/* ═══ MOBILE FIX — «Куда ты попал» ФИНАЛ ═══ */
@media (max-width: 699px) {
  /* Плавный градиент вместо резкой линии перехода */
  #hero-section::after {
    height: 160px !important;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(12, 29, 39, 0.25) 25%,
      rgba(12, 29, 39, 0.6) 55%,
      #0C1D27 100%
    ) !important;
  }

  section[aria-labelledby="about-project-title"] {
    padding-top: 0 !important;
    margin-top: -2px !important;
  }

  section[aria-labelledby="about-project-title"] > .container-padding-main {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }

  #about-project-title {
    font-size: 24px !important;
    font-weight: 300 !important;
    color: rgba(213, 234, 237, 0.82) !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.01em !important;
  }

  section[aria-labelledby="about-project-title"] > .container-padding-main article p {
    width: 295px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 18px !important;
    line-height: 2 !important;
    letter-spacing: -0.005em !important;
    color: rgba(213, 234, 237, 0.70) !important;
  }
}

/* ═══ MOBILE MENU — плашки как в Фигме ═══ */

/* === MOBILE MENU — размеры из Фигмы === */

/* === MOBILE MENU — позиция ниже + затемнение на весь экран === */

/* === MOBILE MENU — центрирование + полноэкранное затемнение === */

/* ═══ MOBILE MODALS — стилизация по Фигме ═══ */
@media (max-width: 699px) {
  /* Fancybox затемнение */
  .fancybox__backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  /* Убрать крестик на мобилке */
  #subscriptions-modal [data-fancybox-close],
  #donate-modal [data-fancybox-close],
  #message-modal [data-fancybox-close] {
    display: none !important;
  }

  /* --- УВЕДОМЛЕНИЯ --- */
  #subscriptions-modal {
    width: 92vw !important;
    max-width: 340px !important;
    border-radius: 16px !important;
    padding: 28px 24px 24px !important;
    background: #071B26 !important;
  }

  #subscriptions-modal h2 {
    font-size: 18px !important;
    margin: 0 0 14px !important;
    letter-spacing: 0.04em !important;
  }

  #subscriptions-modal p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 auto 20px !important;
    color: rgba(213, 234, 237, 0.72) !important;
  }

  #subscriptions-modal > div {
    gap: 12px !important;
    max-width: 100% !important;
  }

  #subscriptions-modal a {
    height: 38px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 200 !important;
    background: #5B9CAF !important;
  }

  /* --- ПОДДЕРЖАТЬ --- */
  #donate-modal {
    width: 92vw !important;
    max-width: 340px !important;
    border-radius: 16px !important;
    padding: 28px 24px 24px !important;
    background: #071B26 !important;
  }

  #donate-modal h2 {
    font-size: 18px !important;
    margin: 0 0 14px !important;
  }

  #donate-modal p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 0 20px !important;
  }

  #donate-modal a {
    height: 38px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: #5B9CAF !important;
  }

  /* --- ПИСЬМО --- */
  #message-modal {
    width: 92vw !important;
    max-width: 340px !important;
    border-radius: 16px !important;
    padding: 28px 24px 24px !important;
    background: #071B26 !important;
  }

  #message-modal h2 {
    font-size: 18px !important;
    margin: 0 0 14px !important;
  }

  #message-modal input[type="email"] {
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  #message-modal textarea {
    min-height: 120px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  #message-modal button[type="submit"] {
    height: 38px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }

  #message-modal label {
    font-size: 12px !important;
  }

  /* Закрытие по тапу на фон */
  .fancybox__slide {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === MOBILE: «Письмо» — высокое textarea + placeholder в 1 строку === */
@media (max-width: 699px) {
  #message-modal input[type="email"],
  #message-modal textarea {
    background: #D5EAED !important;
    border: 1px solid rgba(9, 27, 35, 0.18) !important;
    color: #0B1C26 !important;
  }

  #message-modal input[type="email"]::placeholder,
  #message-modal textarea::placeholder {
    color: rgba(11, 28, 38, 0.42) !important;
  }

  #message-modal textarea {
    min-height: 220px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  #message-modal textarea::placeholder {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
  }
}

/* === MOBILE: убрать принудительные переносы в модалках === */
@media (max-width: 699px) {
  #subscriptions-modal p br,
  #donate-modal p br {
    display: none !important;
  }
}

/* === MOBILE: перенос в уведомлениях после "воскресеньям." === */
@media (max-width: 699px) {
  #subscriptions-modal p br {
    display: inline !important;
  }
}

/* === MOBILE: «Поддержать» — ширина и переносы как в Фигме === */
@media (max-width: 699px) {
  #donate-modal {
    max-width: 92vw !important;
    padding: 28px 28px 24px !important;
  }

  #donate-modal p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  #donate-modal p br {
    display: inline !important;
  }
}

/* === MOBILE: «Поддержать» — шире текст === */
@media (max-width: 699px) {
  #donate-modal p {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  #donate-modal {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* === MOBILE: «Поддержать» — ФИНАЛ переносы === */
@media (max-width: 699px) {
  #donate-modal {
    max-width: 375px !important;
    width: 375px !important;
    padding: 28px 32px 24px !important;
  }

  #donate-modal p {
    font-size: 17px !important;
    line-height: 1.45 !important;
    padding: 0 !important;
    max-width: none !important;
  }
}

/* === MOBILE: «Поддержать» — вернуть нормальные отступы === */
@media (max-width: 699px) {
  #donate-modal {
    width: 92vw !important;
    max-width: 340px !important;
    padding: 28px 24px 24px !important;
  }
}

/* === MOBILE: «Куда ты попал» текст — ОКОНЧАТЕЛЬНО === */
@media (max-width: 699px) {
  section[aria-labelledby="about-project-title"] .container-padding-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  section[aria-labelledby="about-project-title"] article p,
  section[aria-labelledby="about-project-title"] > .container-padding-main article p,
  section[aria-labelledby="about-project-title"] > .container-padding-main > div > div > article p {
    width: 295px !important;
    max-width: 295px !important;
    min-width: 295px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 2 !important;
    letter-spacing: -0.005em !important;
    color: rgba(213, 234, 237, 0.70) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ═══ MOBILE: плеер + футер по Фигме ═══ */
@media (max-width: 699px) {
  /* кнопка play меньше */
  .audio-player .play-icon {
    height: 12px !important;
    width: auto !important;
    height: 36px !important;
  }

  .audio-player .pause-icon {
    height: 12px !important;
    width: auto !important;
    height: 36px !important;
  }

  /* сетка плеера — кнопка уже */
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* заголовок плеера */
  .audio-player h3 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .audio-player .mb-8 {
    margin-bottom: 10px !important;
  }

  /* время и дата */
  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 13px !important;
  }

  /* футер серый */
  footer p {
    color: rgba(213, 234, 237, 0.35) !important;
    font-size: 10px !important;
  }
}

/* === MOBILE: nav не блокирует клики когда закрыт === */

/* === MOBILE: кораблик выше === */
@media (max-width: 699px) {
}

/* ═══ MOBILE: плеер как в Фигме — ФИНАЛ ═══ */
@media (max-width: 699px) {
  /* меньше кнопка */
  .audio-player .audio-toggle {
    width: 32px !important;
    height: 32px !important;
  }

  .audio-player .play-icon {
    height: 12px !important;
    width: auto !important;
    height: 32px !important;
  }

  .audio-player .pause-icon {
    width: 24px !important;
    height: 12px !important;
  }

  /* сетка уже под кнопку */
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* заголовок */
  .audio-player .mb-8 {
    margin-bottom: 8px !important;
  }

  .audio-player h3 {
    font-size: 14px !important;
  }

  /* время/дата */
  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 12px !important;
  }

  /* между плеерами больше воздуха */
  section[aria-labelledby="audio-messages-title"] {
    gap: 2.5rem !important;
  }

  /* маяк чуть левее — не выходит за линию */
  .audio-player .lighthouse {
    margin-right: 3px !important;
  }
}

/* === MOBILE: #1 над play — просто === */
@media (max-width: 699px) {
  .audio-player h3 {
    margin-left: -40px !important;
  }
}

/* === MOBILE: h3 margin-left FORCE === */
@media (max-width: 699px) {
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin-left: -40px !important;
  }
}

/* === MOBILE: маяк чуть меньше === */
@media (max-width: 699px) {
  .audio-player .lighthouse {
  }
}

/* === MOBILE: маяк меньше через размер img === */
@media (max-width: 699px) {
  .audio-player .lighthouse img {
    height: 12px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* === MOBILE: play вровень с полоской === */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    margin-top: 19px !important;
  }
}

/* === MOBILE: кораблик меньше === */
@media (max-width: 699px) {
}

/* === MOBILE: плеер равные отступы === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* === MOBILE: «Куда ты попал» всегда открыт === */
@media (max-width: 699px) {
  #dropdownToggle {
    pointer-events: none !important;
    cursor: default !important;
  }

  #dropdownArrow {
    display: none !important;
  }

  #dropdownContent {
    grid-template-rows: 1fr !important;
  }
}

/* === MOBILE: nav — бургер fixed, остальное не мешает === */

/* ═══ MOBILE NAV — ЕДИНСТВЕННЫЙ БЛОК ═══ */

/* === MOBILE: бургер НИКОГДА не прячется === */

/* ═══ MOBILE: HEADER СКРЫТ, БУРГЕР FIXED — ФИНАЛ ═══ */

/* === MOBILE: новый fixed бургер, старый скрыт === */

/* === MOBILE NAV CLEAN FIX === */
@media (max-width: 699px) {
  body > .relative > header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body > .relative > header::before,
  body > .relative > header::after {
    content: none !important;
    display: none !important;
  }

  #mobile-nav {
    position: relative !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #mobile-nav > div {
    position: static !important;
    width: 100% !important;
    height: 0 !important;
    overflow: visible !important;
  }

  #mobile-nav nav {
    padding-top: 0 !important;
    margin: 0 !important;
  }

  #burger-menu-btn {
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  #burger-menu-btn img {
    display: block !important;
  }

  #mobile-menu-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 55 !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }

  #drop-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 65 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    width: auto !important;
  }

  #drop-menu button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 250px !important;
    max-width: 250px !important;
    height: 35px !important;
    border-radius: 5px !important;
    background: #458696 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #drop-menu button img {
    display: none !important;
  }

  #drop-menu button span {
    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 200 !important;
    letter-spacing: 0.05em !important;
    color: #D5EAED !important;
    text-transform: uppercase !important;
  }

  #drop-menu button:active {
    background: #3a7585 !important;
  }
}


/* === MOBILE DIRECT FIXED BURGER === */
@media (max-width: 699px) {
  #mobile-burger-fixed {
    display: block !important;
  }

  #burger-menu-btn {
    display: none !important;
  }
}

@media (min-width: 700px) {
  #mobile-burger-fixed {
    display: none !important;
  }
}

/* === MOBILE PLAYER: equal side paddings + slightly shorter track === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  .audio-player {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .audio-player .relative.h-\[38px\] > div:first-child {
    left: 8px !important;
    right: 8px !important;
  }

  .audio-player .audio-progress {
    left: 8px !important;
  }
.audio-player .lighthouse {
    right: 8px !important;
    margin-right: 3px !important;
  }

  .audio-player .audio-seek {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}

/* === MOBILE: burger hard-pin + tiny player rebalance === */
@media (max-width: 699px) {
  #mobile-burger-fixed {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    left: 18px !important;
    z-index: 2147483647 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateZ(0) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  #mobile-burger-fixed img {
    display: block !important;
  }

  /* чуть выравниваем плеер: слева было самую малость больше */
  .audio-player .relative.h-\[38px\] > div:first-child {
    left: 6px !important;
    right: 8px !important;
  }

  .audio-player .audio-progress {
    left: 6px !important;
  }
.audio-player .audio-seek {
    left: 6px !important;
    right: 8px !important;
    width: auto !important;
  }

  .audio-player .lighthouse {
    right: 8px !important;
    margin-right: 3px !important;
  }
}

/* === MOBILE: ship sits on the line + slightly bigger === */
@media (max-width: 699px) {
}

/* === MOBILE: ship moves again, but stays attached to the line === */
@media (max-width: 699px) {
}

/* === MOBILE: ship size restore === */
@media (max-width: 699px) {
  .audio-player .ship img {
    height: 32px !important;
    width: auto !important;
  }
}


/* === MOBILE: ship slightly lower === */
@media (max-width: 699px) {
  .audio-player .ship img {
    margin-top: 2px !important;
  }
}

/* === MOBILE: убрать горизонтальный скролл === */
@media (max-width: 699px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* === MOBILE: светлый backdrop модалок как на ПК === */
@media (max-width: 699px) {
  .fancybox__backdrop {
    background: rgba(255, 255, 255, 0.5) !important;
  }
}

/* === MOBILE: плеер по границам текста === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* === MOBILE: пауза = play размер + кораблик ниже === */
@media (max-width: 699px) {
  .audio-player .pause-icon {
    width: 28px !important;
    height: 32px !important;
  }

  .audio-player .ship {
    margin-top: 2px !important;
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
  }
}

/* === MOBILE: пауза больше + кораблик назад === */
@media (max-width: 699px) {
  .audio-player .pause-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .audio-player .ship {
    margin-top: 8px !important;
    top: auto !important;
    transform: none !important;
  }

  .audio-player .ship img {
    height: 18px !important;
    width: auto !important;
  }
}

/* === MOBILE: маяк меньше ФИНАЛ === */
@media (max-width: 699px) {
  .audio-player .lighthouse img {
    height: 32px !important;
    width: auto !important;
  }
}


/* === MOBILE: маяк позиция FORCE === */
@media (max-width: 699px) {
  .audio-player .lighthouse {
    padding-top: 31px !important;
    padding-right: 7px !important;
    right: 8px !important;
    margin-right: 3px !important;
  }

  .audio-player .lighthouse img {
    height: 36px !important;
    width: auto !important;
  }
}



/* === MOBILE: модалка Письмо — равные отступы === */
@media (max-width: 699px) {
  #message-modal {
    padding: 24px 24px 24px !important;
    max-width: 340px !important;
  }

  #message-modal h2 {
    font-size: 18px !important;
    margin: 0 0 18px !important;
  }

  #message-modal input[type="email"] {
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
  }

  #message-modal input[type="email"]::placeholder {
    font-size: 15px !important;
  }

  #message-modal textarea {
    min-height: 160px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
  }

  #message-modal textarea::placeholder {
    font-size: 15px !important;
  }

  #message-modal button[type="submit"] {
    height: 42px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  #message-modal .grid.gap-4 {
    gap: 14px !important;
  }

  #message-modal label {
    font-size: 12px !important;
  }
}



/* === MOBILE STANDALONE MENU === */
@media (max-width: 699px) {
  #mobile-standalone-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }

  #mobile-standalone-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10001 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #mobile-standalone-menu button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 250px !important;
    height: 35px !important;
    border: none !important;
    border-radius: 5px !important;
    background: #458696 !important;
    color: #D5EAED !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 200 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

@media (max-width: 699px) {
  .lighthouse {
    margin-right: 4px !important;
  }
}

/* final mobile about top padding override */
@media (max-width: 699px) {
  section[aria-labelledby="about-project-title"] > .container-padding-main {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 699px) {
  section[aria-labelledby="about-project-title"] > .container-padding-main {
    padding-top: 100px !important;
    padding-bottom: 12px !important;
  }
}

/* === MOBILE PLAYER TZ FROM FIGMA === */
@media (max-width: 699px) {
  /* 1. Пауза левее — на уровне play */
  .audio-player .pause-icon {
    width: 36px !important;
    height: 36px !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  /* 3. Отступы между палками паузы больше */
  .audio-player .pause-icon path:first-child {
    transform: translateX(-1px) !important;
  }

  .audio-player .pause-icon path:last-child {
    transform: translateX(1px) !important;
  }

  /* 4. Цвет цифр и текста — серый как "Куда ты попал" */
  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    color: rgba(213, 234, 237, 0.70) !important;
    font-size: 14px !important;
  }

  /* 5. #1 — цифра записи больше */
  .audio-player h3 {
    font-size: 20px !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.85) !important;
  }

  /* 1. Время под линией проигрывания */
  .audio-player .mt-3.flex {
    margin-top: 6px !important;
  }
}

/* === MOBILE PLAYER FIGMA FINAL: CSS only, HTML/JS untouched === */
@media (max-width: 699px) {
  .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .audio-player .audio-toggle {
    width: 42px !important;
    height: 42px !important;
    margin-top: 18px !important;
    align-self: start !important;
    justify-self: center !important;
  }

  .audio-player .play-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
  }

  .audio-player .pause-icon {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    transform: scaleX(1.16) !important;
    transform-origin: center !important;
  }

  .audio-player section.min-w-0 {
    min-width: 0 !important;
    width: 100% !important;
  }

  .audio-player header {
    width: calc(100% + 52px) !important;
    margin-left: -52px !important;
    margin-bottom: 12px !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.85) !important;
    text-align: left !important;
  }

  .audio-player .relative.h-\[38px\] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    width: calc(100% + 52px) !important;
    max-width: calc(100% + 52px) !important;
    margin-left: -52px !important;
    margin-top: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .audio-player .duration-separator {
    display: inline !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: rgba(213, 234, 237, 0.70) !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    margin-left: auto !important;
    text-align: right !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }
}


/* === MOBILE PLAYER FIGMA SPACING FIX === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .audio-player header,
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    width: calc(100% + 56px) !important;
    max-width: calc(100% + 56px) !important;
    margin-left: -56px !important;
  }

  .audio-player .relative.h-\[38px\] {
    width: 100% !important;
  }

  .audio-player .audio-toggle {
    margin-top: 16px !important;
  }
}


/* === MOBILE PLAYER: smaller play + title higher === */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    width: 34px !important;
    height: 34px !important;
    margin-top: 12px !important;
  }

  .audio-player .play-icon {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
  }

  .audio-player .pause-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    transform: scaleX(1.14) !important;
  }

  .audio-player header {
    margin-bottom: 8px !important;
    transform: translateY(-4px) !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    font-size: 21px !important;
    line-height: 1.1 !important;
  }
}


/* === MOBILE PLAYER: lower play/pause + equal size === */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    width: 38px !important;
    height: 38px !important;
    margin-top: 20px !important;
    align-self: start !important;
    justify-self: center !important;
  }

  .audio-player .play-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
  }

  .audio-player .pause-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    transform: scaleX(1.08) !important;
    transform-origin: center !important;
  }
}


/* === MOBILE PLAYER FIGMA STABLE GRID RESET === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-areas:
      "title title"
      "button track"
      "meta meta" !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    align-items: center !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: start !important;
  }

  .audio-player .play-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
  }

  .audio-player .pause-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    transform: scaleX(1.12) !important;
    transform-origin: center !important;
  }

  .audio-player section.min-w-0 {
    display: contents !important;
  }

  .audio-player header {
    grid-area: title !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.85) !important;
    text-align: left !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .audio-player .duration-separator {
    display: inline !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: rgba(213, 234, 237, 0.70) !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    margin-left: auto !important;
    text-align: right !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }
}


/* === MOBILE PLAYER: title/play/track one line + time under track === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    display: grid !important;
    grid-template-columns: 34px 34px minmax(0, 1fr) !important;
    grid-template-areas:
      "title button track"
      ".     .      meta" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
  }

  .audio-player section.min-w-0 {
    display: contents !important;
  }

  .audio-player header {
    grid-area: title !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    line-height: 34px !important;
    font-weight: 200 !important;
    color: rgba(213,234,237,0.85) !important;
    white-space: nowrap !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .audio-player .play-icon,
  .audio-player .pause-icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .audio-player .pause-icon {
    transform: scaleX(1.08) !important;
    transform-origin: center !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    height: 34px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .audio-player .duration-separator {
    display: inline !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: rgba(213,234,237,0.70) !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    margin-left: auto !important;
    text-align: right !important;
  }

  html,
  body {
    overflow-x: hidden !important;
  }
}


/* === MOBILE PLAYER: left vertical column + track/date right === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "title ."
      "button track"
      "time date" !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    align-items: center !important;
  }

  .audio-player section.min-w-0,
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    display: contents !important;
  }

  .audio-player header {
    grid-area: title !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1 !important;
    color: rgba(213,234,237,0.85) !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .audio-player .play-icon,
  .audio-player .pause-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .audio-player .pause-icon {
    transform: scaleX(1.08) !important;
    transform-origin: center !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    height: 38px !important;
    min-width: 0 !important;
  }

  .audio-player .time-display {
    grid-area: time !important;
    display: block !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    grid-area: date !important;
    display: block !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .audio-player .duration-separator,
  .audio-player .total-time {
    display: inline !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: rgba(213,234,237,0.70) !important;
  }
}


/* === MOBILE FINAL MICRO FIX === */
@media (max-width: 699px) {

  /* 1. ВРЕМЯ СТРОГО ПОД ПОЛОСКУ */
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    margin-top: 10px !important;
    padding-left: 50px !important; /* отступ под кнопку */
  }

  /* 2. ПАУЗА ЧУТЬ ВЛЕВО (НЕ ТРОГАЕМ PLAY) */
  .audio-player .pause-icon {
    transform: translateX(-3px) scaleX(1.08) !important;
    transform-origin: center !important;
  }

  /* 3. ВЫРАВНИВАЕМ КНОПКУ ПО ВЕРТИКАЛИ С #1 */
  .audio-player .audio-toggle {
    margin-top: 6px !important;
  }

}


/* === MOBILE: time under track + pause align final === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
    column-gap: 16px !important;
    row-gap: 7px !important;
    align-items: center !important;
  }

  .audio-player section.min-w-0 {
    display: contents !important;
  }

  .audio-player header {
    grid-area: title !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .audio-player .play-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    transform: none !important;
  }

  .audio-player .pause-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    transform: translateX(-7px) scaleX(1.12) !important;
    transform-origin: center !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    height: 38px !important;
    min-width: 0 !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: -2px 0 0 0 !important;
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .audio-player .duration-separator,
  .audio-player .total-time {
    display: inline !important;
  }
}



/* === MOBILE PLAYER: symmetric final alignment === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 38px !important;
    padding-right: 38px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
    column-gap: 16px !important;
    row-gap: 7px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .audio-player section.min-w-0 {
    display: contents !important;
  }

  .audio-player header {
    grid-area: title !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-self: start !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .audio-player .play-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    transform: none !important;
  }

  .audio-player .pause-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    transform: translateX(-4px) scaleX(1.12) !important;
    transform-origin: center !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: -2px 0 0 0 !important;
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .audio-player .time-display {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}


/* === MOBILE PLAYER: longer track, 24px from play/pause === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  .audio-player .relative.h-\[38px\] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* === MOBILE: time-display padding left === */
@media (max-width: 699px) {
  .audio-player .time-display.tabular-nums.text-white\/70 {
    padding-left: 5px !important;
  }
}


/* === MOBILE: move pause left under #1, keep play untouched === */
@media (max-width: 699px) {
  .audio-player .pause-icon {
    transform: translateX(-4px) scaleX(1.12) !important;
    transform-origin: center !important;
  }
}


/* === MOBILE: pause further left + longer track === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 22px !important;
  }

  .audio-player .audio-toggle {
    justify-self: start !important;
  }

  .audio-player .pause-icon {
    transform: translateX(-9px) scaleX(1.12) !important;
    transform-origin: center !important;
  }

  .audio-player .relative.h-\[38px\],
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* === DESKTOP: restore play alignment with track === */
@media (min-width: 700px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
  }

  .audio-player .audio-toggle {
    width: 64px !important;
    height: 64px !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .audio-player .play-icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    transform: translateX(8px) !important;
  }

  .audio-player .pause-icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    transform: translateX(8px) scaleX(1.08) !important;
  }
}


/* === DESKTOP: restore play size, adjust position only === */
@media (min-width: 700px) {
  .audio-player .audio-toggle {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
  }

  .audio-player .play-icon {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    transform: translateX(24px) !important;
  }

  .audio-player .pause-icon {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    transform: translateX(24px) scaleX(1.08) !important;
  }
}


/* === DESKTOP: play/pause position final === */
@media (min-width: 700px) {
  .audio-player .audio-toggle {
    margin-top: 30px !important;
    margin-right: 20px !important;
  }

  .audio-player .play-icon,
  .audio-player .pause-icon {
    transform: none !important;
  }
}


/* === MOBILE: move #1 title up === */
@media (max-width: 699px) {
  .audio-player header {
    transform: translateY(-12px) !important;
  }
}


/* === MOBILE: don't crop #1 + put time into track column === */
@media (max-width: 699px) {
  .audio-player,
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\],
  .audio-player header {
    overflow: visible !important;
  }

  .audio-player header {
    transform: translateY(-8px) !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    margin-top: -8px !important;
    padding-left: 0 !important;
  }

  .audio-player .time-display {
    padding-left: 0 !important;
    text-align: left !important;
  }
}


/* === MOBILE: title not cropped + time under track === */
@media (max-width: 699px) {
  .audio-player {
    padding-top: 14px !important;
    overflow: visible !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    overflow: visible !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
    column-gap: 22px !important;
    row-gap: 4px !important;
  }

  .audio-player header {
    grid-area: title !important;
    overflow: visible !important;
    transform: none !important;
    margin-top: -10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    margin-top: -6px !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .audio-player .time-display {
    padding-left: 0 !important;
    text-align: left !important;
  }

  .audio-player time {
    text-align: right !important;
  }
}


/* === MOBILE: #1 margin + time under play/pause === */
@media (max-width: 699px) {
  .audio-player header {
    margin-bottom: 15px !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-areas:
      "title ."
      "button track"
      "meta ." !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: -2px 0 0 0 !important;
    padding: 0 !important;
  }

  .audio-player .time-display {
    display: block !important;
    padding-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    display: none !important;
  }
}


/* === FINAL MOBILE PLAYER CLEAN OVERRIDE === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .audio-player {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-areas:
      "title ."
      "button track"
      "meta date" !important;
    column-gap: 22px !important;
    row-gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .audio-player section.min-w-0 {
    display: contents !important;
  }

  .audio-player header {
    grid-area: title !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.85) !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .audio-player .play-icon,
  .audio-player .pause-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .audio-player .play-icon {
    transform: none !important;
  }

  .audio-player .pause-icon {
    transform: translateX(-9px) scaleX(1.12) !important;
    transform-origin: center !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    display: contents !important;
  }

  .audio-player .time-display {
    grid-area: meta !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding-left: 5px !important;
    overflow: visible !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    grid-area: date !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .audio-player .duration-separator,
  .audio-player .total-time {
    display: inline !important;
  }

  .audio-player .current-time,
  .audio-player .total-time,
  .audio-player .duration-separator,
  .audio-player .time-display,
  .audio-player time {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: rgba(213, 234, 237, 0.70) !important;
  }
}


/* === MOBILE PLAYER: repair track + #1/time spacing === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "title ."
      "button track"
      "meta date" !important;
    column-gap: 22px !important;
    row-gap: 0 !important;
  }

  .audio-player header {
    margin: 0 0 15px 0 !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    height: 38px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .audio-player .relative.h-\[38px\] > div:first-child {
    left: 0 !important;
    right: 0 !important;
  }

  .audio-player .audio-progress {
    left: 0 !important;
  }

  .audio-player .audio-seek {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }

  .audio-player .lighthouse {
    right: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .audio-player .time-display {
    padding-left: 5px !important;
    margin-top: 10px !important;
  }

  .audio-player time {
    margin-top: 10px !important;
  }
}


/* === MOBILE: track longer + correct vertical spacing === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 26px !important;
    grid-template-areas:
      "title ."
      "button track"
      "meta date" !important;
    row-gap: 0 !important;
  }

  .audio-player header {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .audio-player .audio-toggle {
    grid-area: button !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .audio-player .relative.h-\[38px\] {
    grid-area: track !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .audio-player .relative.h-\[38px\] > div:first-child {
    left: 0 !important;
    right: 0 !important;
  }

  .audio-player .audio-progress {
    left: 0 !important;
  }

  .audio-player .audio-seek {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }

  .audio-player .lighthouse {
    right: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    display: contents !important;
  }

  .audio-player .time-display {
    grid-area: meta !important;
    margin-top: 10px !important;
    padding-left: 5px !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    grid-area: date !important;
    margin-top: 10px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}


/* === MOBILE: #1 margin-bottom + time/date under track === */
@media (max-width: 699px) {
  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.85) !important;
    text-align: left !important;
    white-space: nowrap !important;
    margin-bottom: 15px !important;
  }

  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .audio-player .time-display {
    display: block !important;
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    display: block !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .audio-player .duration-separator,
  .audio-player .total-time {
    display: inline !important;
  }
}


/* === MOBILE: time/date closer under track and aligned to track edges === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .audio-player .time-display {
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .audio-player time {
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .audio-player .relative.h-\[38px\] > div:first-child {
    left: 0 !important;
    right: 0 !important;
  }

  .audio-player .audio-progress {
    left: 0 !important;
  }

  .audio-player .audio-seek {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
}


/* === MOBILE: time/date tight under track, exactly by track edges === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-areas:
      "title ."
      "button track"
      ". meta" !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    grid-area: meta !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: -4px 0 0 0 !important;
    padding: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  .audio-player .time-display {
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    justify-self: start !important;
  }

  .audio-player time {
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }
}


/* === MOBILE: align time/date exactly to track edges === */
@media (max-width: 699px) {
  .audio-player .time-display {
    transform: translateX(-4px) !important;
  }

  .audio-player time {
    transform: translateX(20px) !important;
  }
}


/* === MOBILE: align time/date to visible track edges, prevent date clipping === */
@media (max-width: 699px) {
  .audio-player .relative.h-\[38px\] > div:first-child {
    left: 0 !important;
    right: 14px !important;
  }

  .audio-player .audio-progress {
    left: 0 !important;
    max-width: calc(100% - 14px) !important;
  }

  .audio-player .audio-seek {
    left: 0 !important;
    right: 14px !important;
    width: auto !important;
  }

  .audio-player .lighthouse {
    right: 14px !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .audio-player time {
    padding-right: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
}


/* === MOBILE: lighthouse slight right margin === */
@media (max-width: 699px) {
  .audio-player .lighthouse {
    margin-right: 6px !important;
  }
}


/* === MOBILE: prevent date clipping slightly === */
@media (max-width: 699px) {
  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    padding-right: 4px !important;
  }

  .audio-player time {
    transform: translateX(-2px) !important;
  }
}


/* === MOBILE: move date left a bit more === */
@media (max-width: 699px) {
  .audio-player time {
    transform: translateX(-7px) !important;
  }
}


/* === MOBILE: title and play/pause +8px left offset === */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    grid-area: button !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
    margin-left: 20px !important;
  }

  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 200 !important;
    color: rgba(213, 234, 237, 0.85) !important;
    text-align: left !important;
    white-space: nowrap !important;
    margin-bottom: 15px !important;
    margin-left: 26px !important;
  }
}


/* === MOBILE: move playback time under play/pause only === */
@media (max-width: 699px) {
  .audio-player .grid-cols-\[72px_minmax\(0\,1fr\)\] {
    grid-template-areas:
      "title ."
      "button track"
      "meta date" !important;
  }

  .audio-player .mt-3.flex.items-center.justify-between.gap-4.text-sm {
    display: contents !important;
  }

  .audio-player .time-display {
    grid-area: meta !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
    margin-top: 12px !important;
    padding-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transform: none !important;
  }

  .audio-player time {
    grid-area: date !important;
    display: block !important;
    margin-top: 12px !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .audio-player .duration-separator,
  .audio-player .total-time {
    display: inline !important;
  }
}


/* === MOBILE: fine tune time/date position === */
@media (max-width: 699px) {
  .audio-player .time-display {
    transform: translateX(20px) !important;
  }

  .audio-player time {
    transform: translateX(-20px) !important;
  }
}


/* === MOBILE: softer time/date position === */
@media (max-width: 699px) {
  .audio-player .time-display {
    transform: translateX(6px) !important;
  }

  .audio-player time {
    transform: translateX(-10px) !important;
  }
}


/* === MOBILE: tiny extra time/date nudge === */
@media (max-width: 699px) {
  .audio-player .time-display {
    transform: translateX(9px) !important;
  }

  .audio-player time {
    transform: translateX(-14px) !important;
  }
}


/* === MOBILE: move time slightly left, keep date unchanged === */
@media (max-width: 699px) {
  .audio-player .time-display {
    transform: translateX(3px) !important;
  }

  .audio-player time {
    transform: translateX(-14px) !important;
  }
}

/* === HERO → CONTENT smooth color transition === */
#hero-section::after {
  height: 220px !important;
  background: linear-gradient(
    to bottom,
    rgba(1, 12, 17, 0) 0%,
    rgba(4, 18, 25, 0.18) 22%,
    rgba(8, 24, 33, 0.45) 48%,
    rgba(12, 29, 39, 0.78) 72%,
    #0C1D27 100%
  ) !important;
}

section[aria-labelledby="about-project-title"] {
  background: linear-gradient(
    to bottom,
    #0C1D27 0%,
    #0A1921 42%,
    #07141B 74%,
    #010C11 100%
  ) !important;
}

@media (max-width: 699px) {
  #hero-section::after {
    height: 240px !important;
    background: linear-gradient(
      to bottom,
      rgba(1, 12, 17, 0) 0%,
      rgba(4, 18, 25, 0.16) 20%,
      rgba(8, 24, 33, 0.44) 46%,
      rgba(12, 29, 39, 0.78) 72%,
      #0C1D27 100%
    ) !important;
  }
}


/* === HERO → CONTENT softer smooth transition === */
#hero-section::after {
  height: 320px !important;
  background: linear-gradient(
    to bottom,
    rgba(1, 12, 17, 0) 0%,
    rgba(1, 12, 17, 0.08) 28%,
    rgba(4, 16, 22, 0.22) 48%,
    rgba(7, 20, 27, 0.42) 68%,
    rgba(10, 24, 32, 0.66) 84%,
    #0C1D27 100%
  ) !important;
}

section[aria-labelledby="about-project-title"] {
  background: linear-gradient(
    to bottom,
    #0C1D27 0%,
    #0B1C25 30%,
    #081820 62%,
    #06131A 82%,
    #010C11 100%
  ) !important;
}

@media (max-width: 699px) {
  #hero-section::after {
    height: 300px !important;
    background: linear-gradient(
      to bottom,
      rgba(1, 12, 17, 0) 0%,
      rgba(1, 12, 17, 0.08) 26%,
      rgba(4, 16, 22, 0.22) 48%,
      rgba(7, 20, 27, 0.42) 68%,
      rgba(10, 24, 32, 0.66) 84%,
      #0C1D27 100%
    ) !important;
  }
}

/* === MOBILE: play smaller === */
@media (max-width: 699px) {
  .audio-player .play-icon {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
  }
}

/* === MOBILE: time nudge to align with #1 === */
@media (max-width: 699px) {
  .audio-player .time-display {
    transform: translateX(20px) !important;
  }
}

/* === MOBILE: #1 lower + pause right === */
@media (max-width: 699px) {
  .audio-player h3,
  .audio-player header h3.text-xl.font-medium.text-\[\#D5EAED\] {
    margin-top: 8px !important;
  }

  .audio-player .pause-icon {
    transform: translateX(-2px) scaleX(1.12) !important;
  }
}

/* === MOBILE: pause 2px left === */
@media (max-width: 699px) {
  .audio-player .pause-icon {
    transform: translateX(-4px) scaleX(1.12) !important;
  }
}

/* === MOBILE MODALS: text size + spacing fix === */
@media (max-width: 699px) {
  /* УВЕДОМЛЕНИЯ */
  #subscriptions-modal h2 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  #subscriptions-modal p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  #subscriptions-modal > div {
    gap: 14px !important;
  }

  #subscriptions-modal a {
    height: 42px !important;
    font-size: 15px !important;
  }

  /* ПОДДЕРЖАТЬ */
  #donate-modal h2 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  #donate-modal p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  #donate-modal a {
    height: 42px !important;
    font-size: 15px !important;
  }
}

/* === MOBILE MODALS: унифицированный размер текста === */
@media (max-width: 699px) {
  #subscriptions-modal p,
  #donate-modal p {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  #subscriptions-modal h2,
  #donate-modal h2 {
    font-size: 22px !important;
  }
}

/* === MOBILE: УВЕДОМЛЕНИЯ финал === */
@media (max-width: 699px) {
  #subscriptions-modal h2 {
    font-size: 22px !important;
    margin-bottom: 18px !important;
  }

  #subscriptions-modal p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }

  #subscriptions-modal a {
    height: 44px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  #subscriptions-modal > div {
    gap: 14px !important;
  }
}

/* === MOBILE: перенос в уведомлениях после "— я" === */
@media (max-width: 699px) {
  .mobile-br::before {
    content: "\A" !important;
    white-space: pre !important;
  }
}

@media (min-width: 700px) {
  .mobile-br {
    display: none !important;
  }
}

/* === MOBILE: br только на мобилке === */
br.mobile-br {
  display: none !important;
}

@media (max-width: 699px) {
  br.mobile-br {
    display: block !important;
  }
}

/* === MOBILE: уведомления — шрифт как в поддержать === */
@media (max-width: 699px) {
  #subscriptions-modal p {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
}

/* === MOBILE: ширина кнопок под ширину текста === */
@media (max-width: 699px) {
  #subscriptions-modal > div {
    width: auto !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  #subscriptions-modal a {
    width: 100% !important;
  }
}

/* === MOBILE: кнопки по ширине текста === */
@media (max-width: 699px) {
  #subscriptions-modal > div {
    width: fit-content !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #subscriptions-modal a {
    width: 280px !important;
  }
}

/* === MOBILE: кнопки 258px === */
@media (max-width: 699px) {
  #subscriptions-modal a {
    width: 258px !important;
  }
}

/* === MOBILE: Boosty кнопка по ширине текста === */
@media (max-width: 699px) {
  #donate-modal > div {
    width: fit-content !important;
    margin: 0 auto !important;
  }

  #donate-modal a {
    width: 258px !important;
  }
}

/* === MOBILE: Boosty кнопка по самой широкой строке === */
@media (max-width: 699px) {
  #donate-modal a {
    width: 290px !important;
  }
}

/* === MOBILE: Boosty по тексту === */
@media (max-width: 699px) {
  #donate-modal a {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    align-self: center !important;
  }

  #donate-modal > div > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* === MOBILE: Boosty ширина по тексту финал === */
@media (max-width: 699px) {
  #donate-modal a {
    width: 270px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: unset !important;
  }
}


/* === DESKTOP: header светлее === */
@media (min-width: 700px) {
  header {
    background: rgba(1, 12, 17, 0.55) !important;
  }
}

/* === DESKTOP: убрать outline везде === */
@media (min-width: 700px) {
  header nav button,
  header nav button:focus,
  header nav button:focus-visible,
  header nav button:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* === DESKTOP: #1 серый как остальной текст === */
@media (min-width: 700px) {
  .audio-player h3 {
    color: rgba(213, 234, 237, 0.70) !important;
}

}

/* === DESKTOP: пауза размер + позиция === */
@media (min-width: 700px) {
  .audio-player svg.pause-icon.h-12.w-12 {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    translate: -5px;
  }
}

}

/* === DESKTOP: курсор pointer на крестик в модалках === */
@media (min-width: 700px) {
  [data-fancybox-close] {
    cursor: pointer !important;
  }
}

/* === DESKTOP: крестик pointer — высокая специфичность === */
#subscriptions-modal [data-fancybox-close],
#donate-modal [data-fancybox-close],
#message-modal [data-fancybox-close],
#email-modal [data-fancybox-close] {
  cursor: pointer !important;
}

/* === DESKTOP: крестик pointer — максимальная специфичность === */
.fancybox__container button[data-fancybox-close],
.fancybox__container [data-fancybox-close],
.fancybox__slide [data-fancybox-close],
.fancybox__content [data-fancybox-close] {
  cursor: pointer !important;
}

/* === CURSOR: крестик всегда pointer === */
button[data-fancybox-close] {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* === GLOBAL: Inter ExtraLight 200 для основного текста === */
section[aria-labelledby="about-project-title"] article p {
  font-weight: 200 !important;
}

/* === GLOBAL: Inter ExtraLight 200 для всего текста === */
body, p, span, h1, h2, h3, h4, h5, h6, a, button, input, textarea, time, label {
  font-weight: 200 !important;
}

/* === GLOBAL: font-weight 200 везде force === */
* {
  font-weight: 200 !important;
}

/* === MOBILE: #1 серый как остальной текст === */
@media (max-width: 699px) {
  .audio-player h3 {
    color: rgba(213, 234, 237, 0.70) !important;
  }
}

/* === DESKTOP: pointer на крестик и кнопки плеера === */
button[data-fancybox-close],
.fancybox__content button[data-fancybox-close],
.audio-player .audio-toggle {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* === resize handle финал === */
#message-modal textarea::-webkit-resizer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cline x1='11' y1='1' x2='1' y2='11' stroke='%234D92A6' stroke-width='2'/%3E%3Cline x1='11' y1='5' x2='5' y2='11' stroke='%234D92A6' stroke-width='2'/%3E%3Cline x1='11' y1='9' x2='9' y2='11' stroke='%234D92A6' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: bottom right !important;
  background-repeat: no-repeat !important;
}

/* === resize handle серый крупнее === */
#message-modal textarea::-webkit-resizer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cline x1='14' y1='1' x2='1' y2='14' stroke='%23556B72' stroke-width='1.5'/%3E%3Cline x1='14' y1='6' x2='6' y2='14' stroke='%23556B72' stroke-width='1.5'/%3E%3Cline x1='14' y1='11' x2='11' y2='14' stroke='%23556B72' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
}

/* === resize: убрать закругление только у правого нижнего угла === */
#message-modal textarea {
  border-bottom-right-radius: 4px !important;
}

/* === resize handle оригинал === */
#message-modal textarea {
  resize: vertical !important;
  border-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  overflow: hidden !important;
}

#message-modal textarea::-webkit-resizer {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cline x1='11' y1='1' x2='1' y2='11' stroke='%23708A92' stroke-width='1.5'/%3E%3Cline x1='11' y1='5' x2='5' y2='11' stroke='%23708A92' stroke-width='1.5'/%3E%3Cline x1='11' y1='9' x2='9' y2='11' stroke='%23708A92' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: bottom right !important;
  background-repeat: no-repeat !important;
}

/* === resize handle серый + крупнее финал === */
#message-modal textarea::-webkit-resizer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cline x1='13' y1='1' x2='1' y2='13' stroke='%23556B72' stroke-width='1.8'/%3E%3Cline x1='13' y1='6' x2='6' y2='13' stroke='%23556B72' stroke-width='1.8'/%3E%3Cline x1='13' y1='11' x2='11' y2='13' stroke='%23556B72' stroke-width='1.8'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
}

/* === resize handle серый оригинальный размер === */
#message-modal textarea::-webkit-resizer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cline x1='11' y1='1' x2='1' y2='11' stroke='%23556B72' stroke-width='1.5'/%3E%3Cline x1='11' y1='5' x2='5' y2='11' stroke='%23556B72' stroke-width='1.5'/%3E%3Cline x1='11' y1='9' x2='9' y2='11' stroke='%23556B72' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
}

/* === DESKTOP: равные отступы плеера === */
@media (min-width: 700px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 64px !important;
    padding-right: 64px !important;
    width: 100% !important;
    max-width: 1054px !important;
    box-sizing: border-box !important;
  }
}

/* === MOBILE: равные отступы плеера === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    padding-left: 28px !important;
    padding-right: 48px !important;
  }
}

/* === DESKTOP: header ещё светлее === */
@media (min-width: 700px) {
  header {
    background: rgba(1, 12, 17, 0.38) !important;
  }
}

/* === DESKTOP: отступ между плеерами больше === */
@media (min-width: 700px) {
  section[aria-labelledby="audio-messages-title"] {
    gap: 4rem !important;
  }
}

/* === DESKTOP: отступ между плеерами 5.5rem === */
@media (min-width: 700px) {
  section[aria-labelledby="audio-messages-title"] {
    gap: 5.5rem !important;
  }
}

/* === MOBILE: отступ между плеерами больше === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    gap: 3.5rem !important;
  }
}

/* === отступ между плеерами x1.4 === */
@media (min-width: 700px) {
  section[aria-labelledby="audio-messages-title"] {
    gap: 7.7rem !important;
  }
}

@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    gap: 4.9rem !important;
  }
}

/* === MOBILE: убрать отдельный скролл на секции плееров === */
@media (max-width: 699px) {
  section[aria-labelledby="audio-messages-title"] {
    overflow: visible !important;
    overflow-x: visible !important;
  }
}

/* === MOBILE: кнопки уведомлений по длинной строке === */
@media (max-width: 699px) {
  #subscriptions-modal a {
    width: 272px !important;
  }
}

/* === MOBILE: кнопки уведомлений шире — финал === */
@media (max-width: 699px) {
  #subscriptions-modal > div > a {
    width: 272px !important;
    min-width: 272px !important;
  }
}

/* === MOBILE: кнопки финал === */
@media (max-width: 699px) {
  #subscriptions-modal > div > a {
    width: 276px !important;
    min-width: 276px !important;
  }

  #donate-modal a {
    width: 265px !important;
  }
}

/* === кнопки уведомлений финал 2 === */
@media (max-width: 699px) {
  #subscriptions-modal > div > a {
    width: 282px !important;
    min-width: 282px !important;
  }
}

@media (min-width: 700px) {
  #subscriptions-modal a {
    width: 80% !important;
  }
}

/* === кнопки уведомлений финал 3 === */
@media (max-width: 699px) {
  #subscriptions-modal > div > a {
    width: 288px !important;
    min-width: 288px !important;
  }
}

@media (min-width: 700px) {
  #subscriptions-modal a {
    width: 70% !important;
  }
}

/* === ПК кнопки уведомлений фикс === */
@media (min-width: 700px) {
  #subscriptions-modal a {
    width: 100% !important;
  }
}

/* === ПК кнопки уведомлений финал === */
@media (min-width: 700px) {
  #subscriptions-modal a {
    width: 520px !important;
    margin-left: 10px !important;
  }
}

/* === MOBILE: хитбокс play/pause по размеру иконки === */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
  }
}

/* === DESKTOP: хитбокс play/pause по размеру иконки === */
@media (min-width: 700px) {
  .audio-player .audio-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
}

/* === MOBILE: хитбокс play меньше === */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    width: 22px !important;
    height: 22px !important;
  }
}

/* === MOBILE: play img меньше === */
@media (max-width: 699px) {
  .audio-player .play-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
  }
}

/* === MOBILE: футер ниже === */
@media (max-width: 699px) {
  footer {
    margin-top: 60px !important;
  }
}

/* === MOBILE: убрать padding-bottom у футера === */
@media (max-width: 699px) {
  footer p {
    padding-bottom: 0 !important;
  }
}

/* ============================================= */
/* === MOBILE PLAYER: ЕДИНСТВЕННЫЙ ФИНАЛ      === */
/* === Перебивает все ~70 конфликтов выше     === */
/* ============================================= */
@media (max-width: 699px) {
  .audio-player .audio-toggle {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .audio-player .play-icon {
    width: 40px !important;
    height: 40px !important;
    max-width: 22px !important;
    margin-left: 13px !important;
    transform: none !important;
  }

  .audio-player .pause-icon {
    width: 40px !important;
    height: 40px !important;
    max-width: 22px !important;
    margin-left: 13px !important;
    transform: none !important;
  }
}

/* === MOBILE: play margin-left fix === */
@media (max-width: 699px) {
  .audio-player .play-icon {
    margin-left: 36px !important;
  }
}

/* === MOBILE: pause bigger, play untouched === */
@media (max-width: 699px) {
  .audio-player .pause-icon {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    margin-left: 9px !important;
    transform: none !important;
  }
}

/* === MOBILE: pause transform fix === */
@media (max-width: 699px) {
  .audio-player .pause-icon {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    margin-left: 9px !important;
    transform: translate(7px) !important;
  }
}