/* =========================================================
   Evolve Fast Audio UX
   فقط برای صفحه audio-evolve.html
   ========================================================= */

.evolve-audio-page{
  background:
    radial-gradient(circle at 12% 7%, rgba(142,216,232,.12), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f6fbfd 52%, #ffffff 100%);
}

.evolve-ux-intro{
  width: min(100%, 850px);
  margin: 0 auto 22px;
  text-align: center;
}

.evolve-fast-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  margin-bottom: 12px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(200,229,239,.96);
  font-size: 13px;
  font-weight: 950;
  direction: ltr;
}

.evolve-ux-intro h2{
  margin: 0 0 10px;
  color: #0f2740;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.45;
  font-weight: 950;
  letter-spacing: -.035em;
}

.evolve-ux-intro p{
  margin: 0 auto;
  color: #5f758b;
  font-size: 15.5px;
  line-height: 2.05;
  font-weight: 650;
}

.evolve-command-panel{
  position: sticky;
  top: 82px;
  z-index: 18;
  width: min(100%, 1120px);
  margin: 0 auto 18px;
  padding: 14px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,251,254,.88));
  border: 1px solid rgba(190,226,238,.86);
  box-shadow:
    0 18px 48px rgba(8,34,58,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
}

.evolve-search-box{
  display: grid;
  gap: 8px;
}

.evolve-search-box label{
  color: #123f61;
  font-size: 13px;
  font-weight: 950;
}

.evolve-search-field{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 12px 6px 6px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(190,226,238,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

.evolve-search-field::before{
  content: "⌕";
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  font-size: 20px;
  font-weight: 900;
}

.evolve-search-field input{
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #0f2740;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
}

.evolve-search-field input::placeholder{
  color: rgba(95,117,139,.78);
  font-weight: 650;
}

.evolve-search-field button{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  color: #5f758b;
  background: rgba(15,39,64,.07);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.evolve-search-field button:hover,
.evolve-search-field button:focus-visible{
  color: #ffffff;
  background: #123f61;
}

.evolve-filter-row{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.evolve-book-tab{
  min-width: 150px;
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(190,226,238,.95);
  border-radius: 20px;
  color: #123f61;
  background: #ffffff;
  font-family: inherit;
  text-align: right;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 28px rgba(8,34,58,.06);
}

.evolve-book-tab strong{
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 950;
  direction: ltr;
}

.evolve-book-tab span{
  color: #5f758b;
  font-size: 12px;
  font-weight: 800;
}

.evolve-book-tab[aria-pressed="true"]{
  color: #ffffff;
  background:
    radial-gradient(circle at 0 0, rgba(142,216,232,.32), transparent 36%),
    linear-gradient(135deg, #123f61, #061626);
  border-color: rgba(18,63,97,.42);
  box-shadow: 0 16px 38px rgba(18,63,97,.22);
}

.evolve-book-tab[aria-pressed="true"] span{
  color: rgba(255,255,255,.76);
}

.evolve-mini-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}

.evolve-mini-actions a{
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.9);
  font-size: 12.5px;
  font-weight: 950;
  text-decoration: none;
}

.evolve-mini-actions a:hover,
.evolve-mini-actions a:focus-visible{
  color: #ffffff;
  background: #123f61;
}

.evolve-manifest-status,
.evolve-empty-state,
.evolve-active-summary{
  width: min(100%, 1120px);
  margin: 0 auto 16px;
  padding: 14px 18px;
  border-radius: 20px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(200,229,239,.96);
  font-size: 14px;
  font-weight: 900;
}

.evolve-manifest-status{
  text-align: center;
}

.evolve-manifest-status.is-success{
  color: #315000;
  background: rgba(183,214,11,.12);
  border-color: rgba(183,214,11,.36);
}

.evolve-manifest-status.is-error{
  color: #7a1e1e;
  background: rgba(255,238,238,.95);
  border-color: rgba(255,190,190,.9);
}

.evolve-active-summary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
}

.evolve-active-summary strong{
  color: #0f2740;
  font-weight: 950;
}

.evolve-active-summary span,
.evolve-active-summary em{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #315000;
  background: rgba(183,214,11,.12);
  border: 1px solid rgba(183,214,11,.26);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 950;
}

.evolve-active-summary em{
  color: #123f61;
  background: rgba(237,248,252,.96);
  border-color: rgba(190,226,238,.9);
}

.evolve-sticky-nav{
  position: sticky;
  top: 244px;
  z-index: 15;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: min(100%, 1120px);
  margin: 0 auto 22px;
  padding: 10px;
  overflow-x: auto;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(190,226,238,.76);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(8,34,58,.08);
  scrollbar-width: thin;
}

.evolve-sticky-nav a{
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.92);
  font-size: 12.5px;
  font-weight: 950;
  text-decoration: none;
  direction: ltr;
}

.evolve-sticky-nav a[aria-current="true"],
.evolve-sticky-nav a:hover,
.evolve-sticky-nav a:focus-visible{
  color: #ffffff;
  background: #123f61;
  border-color: #123f61;
}

.evolve-ux-mount{
  width: min(100%, 1120px);
  margin: 0 auto;
}

.evolve-cd-panel{
  scroll-margin-top: 310px;
  margin: 0 0 18px;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(142,216,232,.14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(246,252,255,.95));
  border: 1px solid rgba(190,226,238,.92);
  box-shadow:
    0 18px 48px rgba(8,34,58,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.evolve-cd-toggle,
.evolve-unit-toggle{
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
}

.evolve-cd-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  color: #0f2740;
  background: transparent;
}

.evolve-cd-toggle::after,
.evolve-unit-toggle::after{
  content: "⌄";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.86);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.evolve-cd-toggle[aria-expanded="true"]::after,
.evolve-unit-toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
  color: #ffffff;
  background: #123f61;
}

.evolve-cd-title-wrap{
  display: grid;
  gap: 5px;
}

.evolve-cd-book{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #315000;
  background: rgba(183,214,11,.13);
  border: 1px solid rgba(183,214,11,.30);
  font-size: 12px;
  font-weight: 950;
  direction: ltr;
}

.evolve-cd-title-wrap strong{
  color: #0f2740;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  font-weight: 950;
  direction: ltr;
}

.evolve-cd-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.evolve-cd-meta em{
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.86);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.evolve-cd-content{
  padding: 0 18px 18px;
}

.evolve-ux-note{
  margin: 0 0 14px;
}

.evolve-unit-accordion{
  margin-top: 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(190,226,238,.70);
}

.evolve-unit-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: #0f2740;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,252,255,.82));
}

.evolve-unit-toggle span{
  display: grid;
  gap: 3px;
}

.evolve-unit-toggle strong{
  color: #0f2740;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 950;
  direction: ltr;
}

.evolve-unit-toggle small{
  color: #5f758b;
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
}

.evolve-unit-toggle em{
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #315000;
  background: rgba(183,214,11,.13);
  border: 1px solid rgba(183,214,11,.30);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.evolve-unit-content{
  padding: 12px;
}

.evolve-compact-grid{
  display: grid;
  gap: 12px;
}

.evolve-compact-track{
  grid-template-columns: minmax(190px,.85fr) minmax(280px,1.25fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 20px;
}

.evolve-track-info{
  display: grid;
  gap: 4px;
}

.evolve-track-badge{
  width: fit-content;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.82);
  font-size: 11px;
  font-weight: 950;
  direction: ltr;
}

.evolve-track-card .audio-track-info small,
.evolve-track-info small{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evolve-track-player{
  min-width: 0;
}

.evolve-track-actions{
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.evolve-track-actions a{
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.evolve-open-file{
  color: #123f61;
  background: rgba(237,248,252,.96);
  border: 1px solid rgba(190,226,238,.9);
}

.evolve-open-file:hover,
.evolve-open-file:focus-visible{
  color: #ffffff;
  background: #123f61;
}

.evolve-floating-tools{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 8px;
}

.evolve-floating-tools a{
  min-width: 58px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #123f61, #061626);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(8,34,58,.24);
  font-size: 12.5px;
  font-weight: 950;
  text-decoration: none;
}

.evolve-no-results{
  text-align: center;
}

@media (max-width: 980px){
  .evolve-command-panel{
    top: 72px;
    border-radius: 24px;
  }

  .evolve-sticky-nav{
    top: 226px;
  }

  .evolve-compact-track{
    grid-template-columns: 1fr;
  }

  .evolve-track-actions{
    flex-direction: row;
  }

  .evolve-track-actions a{
    flex: 1 1 0;
  }
}

@media (max-width: 640px){
  .evolve-command-panel{
    position: relative;
    top: auto;
    padding: 12px;
    border-radius: 22px;
  }

  .evolve-sticky-nav{
    top: 0;
    border-radius: 18px;
    margin-bottom: 16px;
  }

  .evolve-search-box label{
    font-size: 12.5px;
  }

  .evolve-search-field{
    min-height: 48px;
    border-radius: 18px;
  }

  .evolve-search-field input{
    font-size: 13.5px;
  }

  .evolve-book-tab{
    min-width: 136px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .evolve-mini-actions{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .evolve-mini-actions a{
    padding: 0 8px;
    font-size: 11.5px;
  }

  .evolve-active-summary{
    justify-content: flex-start;
    font-size: 13px;
  }

  .evolve-cd-panel{
    scroll-margin-top: 120px;
    border-radius: 22px;
  }

  .evolve-cd-toggle{
    align-items: flex-start;
    flex-direction: column;
    padding: 15px;
  }

  .evolve-cd-toggle::after{
    position: absolute;
    left: 15px;
    top: 15px;
  }

  .evolve-cd-content{
    padding: 0 12px 12px;
  }

  .evolve-unit-toggle{
    align-items: flex-start;
    flex-direction: column;
    padding-left: 54px;
  }

  .evolve-unit-toggle::after{
    position: absolute;
    left: 12px;
    top: 12px;
  }

  .evolve-unit-content{
    padding: 10px;
  }

  .evolve-compact-track{
    padding: 11px;
    border-radius: 18px;
  }

  .evolve-track-player audio{
    width: 100%;
  }

  .evolve-floating-tools{
    left: 12px;
    bottom: 12px;
  }

  .evolve-floating-tools a{
    min-height: 40px;
    min-width: 52px;
    font-size: 11.5px;
  }
}

@media (max-width: 420px){
  .evolve-mini-actions{
    grid-template-columns: 1fr;
  }

  .evolve-book-tab{
    min-width: 128px;
  }

  .evolve-track-actions{
    flex-direction: column;
  }
}


/* =========================================================
   Clean UX Patch - remove extra pills and floating widgets
   ========================================================= */

.evolve-mini-actions,
.evolve-active-summary,
.evolve-floating-tools,
.evolve-cd-meta,
.evolve-track-badge,
.evolve-open-file,
.evolve-unit-toggle em,
.evolve-ux-note{
  display: none !important;
}

.evolve-manifest-status[hidden]{
  display: none !important;
}

.evolve-command-panel{
  margin-bottom: 20px;
}

.evolve-cd-toggle,
.evolve-unit-toggle{
  min-height: auto;
}

.evolve-cd-toggle{
  padding: 17px 18px;
}

.evolve-unit-toggle{
  padding: 13px 14px;
}

.evolve-compact-track{
  grid-template-columns: minmax(130px,.55fr) minmax(280px,1.3fr) auto;
  padding: 12px 14px;
}

.evolve-track-info{
  gap: 3px;
}

.evolve-track-info strong{
  color: #0f2740;
  font-size: 16px;
  font-weight: 950;
  direction: ltr;
}

.evolve-track-info small{
  color: #6b7f93;
  font-size: 12px;
  font-weight: 700;
}

.evolve-track-actions{
  align-self: stretch;
  justify-content: center;
}

.evolve-track-actions .audio-track-download{
  min-width: 76px;
}

@media (max-width: 980px){
  .evolve-compact-track{
    grid-template-columns: 1fr;
  }

  .evolve-track-actions{
    flex-direction: row;
  }
}

@media (max-width: 640px){
  .evolve-compact-track{
    gap: 10px;
  }

  .evolve-track-info{
    text-align: right;
  }

  .evolve-track-actions .audio-track-download{
    width: 100%;
  }
}