:root {
  --ink: #101726;
  --muted: #66748a;
  --soft: #f5f9fb;
  --panel: #ffffff;
  --line: #dce7ef;
  --aqua: #20c6c4;
  --blue: #2f7df6;
  --brand-primary: linear-gradient(135deg, #28e0d4 0%, #20c6c4 42%, #2f7df6 100%);
  --brand-primary-shadow: 0 16px 34px rgba(32, 198, 196, .28);
  --amber: #f5a524;
  --green: #22c55e;
  --shadow: 0 24px 70px rgba(28, 42, 67, .12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 94px;
  color: var(--ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 16% 8%, rgba(32, 198, 196, .18), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(47, 125, 246, .16), transparent 26%),
    linear-gradient(180deg, #fbfdff 0%, #edf8fb 48%, #ffffff 100%);
}

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

button,
input,
select {
  font: inherit;
}

img {
  max-width: 100%;
}

.page-shell,
.site-header,
.tool-header,
.tool-page {
  width: min(1380px, calc(100% - 44px));
  margin-inline: auto;
}

.site-header,
.tool-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  transform: translateX(-50%);
  border: 1px solid rgba(18, 20, 23, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(31, 45, 61, .08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-height: 56px;
  font-weight: 850;
}

.h5-logo-mark {
  width: 205px;
  height: 52px;
  flex: 0 0 205px;
  display: inline-grid;
  place-items: center;
  overflow: visible;
}

.brand .h5-logo-mark > .brand-logo-image {
  width: 205px !important;
  height: 52px !important;
  max-width: 205px !important;
  max-height: 52px !important;
  object-fit: contain;
  display: block;
  position: static !important;
}

.brand-tool,
.tool-status {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.brand-tool {
  color: #253141;
  font-size: 18px;
  font-weight: 780;
}

.tool-status {
  color: var(--muted);
  font-size: 14px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
}

.site-nav a:hover {
  color: var(--ink);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(16, 23, 38, .12);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 760;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.dark {
  color: #04111f;
  background: var(--brand-primary);
  border-color: rgba(32, 198, 196, .9);
  box-shadow: var(--brand-primary-shadow), inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.button.dark:hover:not(:disabled) {
  border-color: rgba(135, 245, 238, .96);
  box-shadow: 0 22px 48px rgba(32, 198, 196, .32), inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.button.dark:disabled {
  color: #8fa0b2;
  border-color: #dbe4ec;
  background: #edf2f7;
  box-shadow: none;
  opacity: .82;
}

.button.light {
  color: #172033;
  background: rgba(255, 255, 255, .86);
}

.button.small {
  min-height: 40px;
  padding-inline: 16px;
  font-size: 14px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: .52;
  transform: none;
  box-shadow: none;
}

.language-switcher {
  position: relative;
  z-index: 20;
  margin-left: auto;
}

.language-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(16, 23, 38, .1);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 750;
}

.language-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 132px;
  padding: 8px;
  border: 1px solid rgba(16, 23, 38, .1);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

.language-switcher.open .language-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.language-menu button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
}

.language-menu button.active,
.language-menu button:hover {
  background: #eef7ff;
}

.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 0 42px;
  text-align: center;
}

.hero-copy {
  width: 100%;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 860;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 980px;
  margin: 0 auto 22px;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 780px;
  margin: 0 auto;
  color: #526174;
  font-size: 19px;
  line-height: 1.75;
}

.hero-actions,
.tool-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.metrics {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px auto 30px;
}

.metrics div,
.panel,
.hero-uploader,
.mini-workbench,
.engine-panel {
  border: 1px solid rgba(16, 23, 38, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 20px 60px rgba(31, 45, 61, .08);
}

.metrics div {
  padding: 16px;
  text-align: center;
}

.metrics strong {
  display: block;
  font-size: 28px;
}

.metrics span {
  color: var(--muted);
  font-size: 14px;
}

.hero-uploader {
  width: min(780px, 100%);
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 28px;
  margin: 0 auto;
  text-align: center;
}

.audio-orb,
.upload-icon.audio {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(32, 198, 196, .95), rgba(47, 125, 246, .95));
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .32);
}

.audio-orb::before,
.upload-icon.audio::before {
  content: "";
  width: 22px;
  height: 28px;
  border: 3px solid #fff;
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

.hero-uploader strong {
  display: block;
  margin-top: 14px;
  font-size: 22px;
}

.hero-uploader small {
  color: var(--muted);
  line-height: 1.6;
}

.mini-workbench {
  width: min(1120px, 100%);
  margin-top: 18px;
  padding: 16px;
  text-align: left;
}

.mini-toolbar,
.panel-head,
.panel-actions,
.card-title,
.preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mini-toolbar {
  margin-bottom: 14px;
}

.tab,
.chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 14px;
  border-radius: 10px;
  background: #f1f7fb;
  color: #344256;
  font-weight: 760;
}

.tab.active,
.chip.selected {
  color: #fff;
  background: #0f172a;
}

.route {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

.ad-slot {
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px dashed rgba(32, 198, 196, .45);
  border-radius: 14px;
  color: #78879a;
  background: rgba(255, 255, 255, .5);
  text-align: center;
}

.ad-slot.large {
  min-height: 90px;
}

.audio-mini-grid {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(230px, 280px);
  gap: 14px;
  margin-top: 14px;
}

.queue-card,
.preview-card,
.settings-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.file-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #f8fbfd;
}

.file-row.active {
  outline: 2px solid rgba(32, 198, 196, .28);
}

.file-row small,
.preview-foot span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.file-row em {
  color: #0b8f68;
  font-style: normal;
  font-weight: 820;
}

.wave-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 80 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 25 C10 25 12 17 16 17 C21 17 22 35 27 35 C32 35 33 10 39 10 C45 10 46 39 52 39 C58 39 59 16 64 16 C69 16 71 25 75 25' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 78% 62% no-repeat,
    linear-gradient(135deg, #20c6c4, #2f7df6);
}

.wave-thumb.cool {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 80 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 25 C18 25 20 17 24 17 C29 17 30 35 35 35 C40 35 41 10 47 10 C53 10 54 35 60 35 C64 35 66 25 70 25' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 68% 58% no-repeat,
    linear-gradient(135deg, #2f7df6, #8b5cf6);
}

.wave-thumb.mint {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 80 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 25 C13 25 15 19 19 19 C24 19 25 33 30 33 C35 33 36 13 42 13 C48 13 49 37 55 37 C61 37 62 18 67 18 C71 18 73 25 76 25' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 74% 60% no-repeat,
    linear-gradient(135deg, #22c55e, #20c6c4);
}

.waveform {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 18%, rgba(32, 198, 196, .22), transparent 32%),
    linear-gradient(135deg, #f7fbff, #eef8fb);
}

.waveform span {
  width: 12px;
  min-height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue), var(--aqua));
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section {
  padding: 54px 0;
}

.section-head {
  max-width: 820px;
  margin-bottom: 24px;
}

.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
}

.section-head p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.case-grid,
.seo-grid {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-card,
.seo-grid article {
  padding: 22px;
  border: 1px solid rgba(16, 23, 38, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 48px rgba(31, 45, 61, .06);
}

.case-image.audio {
  display: block;
  position: relative;
  overflow: hidden;
  height: 132px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(180deg, rgba(148, 163, 184, .08) 1px, transparent 1px) 0 50% / 100% 34px,
    radial-gradient(circle at 18% 18%, rgba(32, 198, 196, .16), transparent 34%),
    linear-gradient(135deg, #07111f, #0d1828 68%, #101d31);
}

.case-image.audio::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wave-width, 86%);
  height: 82px;
  transform: translate(-50%, -50%);
  background:
    var(--wave-svg) center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 18px rgba(32, 198, 196, .18));
}

.case-image.audio::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 232, 240, .26), transparent);
}

.case-image.cool {
  --wave-width: 48%;
  --wave-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 760 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 90 L38 86 L56 72 L74 103 L92 88 L110 48 L128 40 L146 126 L164 139 L182 78 L200 68 L218 92 L236 84 L254 70 L272 62 L290 115 L308 122 L326 84 L344 82 L362 77 L380 90 L398 96 L416 88 L434 86 L452 89 L470 90 L488 88 L506 87 L524 90 L542 91 L560 89 L578 88 L596 90 L614 91 L632 90 L650 89 L668 90 L686 90 L704 90 L722 91 L740 90 L740 90 L722 92 L704 92 L686 91 L668 92 L650 91 L632 93 L614 92 L596 94 L578 93 L560 94 L542 93 L524 94 L506 93 L488 95 L470 94 L452 96 L434 94 L416 98 L398 103 L380 90 L362 103 L344 98 L326 96 L308 58 L290 65 L272 118 L254 110 L236 96 L218 112 L200 108 L182 102 L164 41 L146 54 L128 140 L110 132 L92 92 L74 77 L56 108 L38 94 L20 90 Z' fill='%2328e0d4' opacity='.92'/%3E%3Cpath d='M20 90 L38 86 L56 72 L74 103 L92 88 L110 48 L128 40 L146 126 L164 139 L182 78 L200 68 L218 92 L236 84 L254 70 L272 62 L290 115 L308 122 L326 84 L344 82 L362 77 L380 90 L398 96 L416 88 L434 86 L452 89 L470 90 L488 88 L506 87 L524 90 L542 91 L560 89 L578 88 L596 90 L614 91 L632 90 L650 89 L668 90 L686 90 L704 90 L722 91 L740 90' fill='none' stroke='%23b8fff8' stroke-width='3' opacity='.55'/%3E%3C/svg%3E");
}

.case-image.warm {
  --wave-width: 94%;
  --wave-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 760 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 90 L32 76 L46 58 L60 64 L74 38 L88 122 L102 139 L116 66 L130 44 L144 96 L158 112 L172 50 L186 30 L200 144 L214 158 L228 72 L242 55 L256 98 L270 76 L284 35 L298 28 L312 140 L326 152 L340 92 L354 72 L368 49 L382 110 L396 126 L410 64 L424 42 L438 136 L452 148 L466 78 L480 60 L494 88 L508 116 L522 44 L536 31 L550 132 L564 151 L578 92 L592 70 L606 54 L620 116 L634 130 L648 78 L662 48 L676 118 L690 134 L704 88 L718 78 L732 86 L746 90 L746 90 L732 96 L718 102 L704 96 L690 46 L676 62 L662 132 L648 104 L634 50 L620 64 L606 126 L592 110 L578 88 L564 29 L550 48 L536 149 L522 136 L508 64 L494 92 L480 120 L466 102 L452 32 L438 44 L424 138 L410 116 L396 54 L382 70 L368 131 L354 108 L340 88 L326 28 L312 40 L298 152 L284 145 L270 104 L256 82 L242 125 L228 108 L214 22 L200 36 L186 150 L172 130 L158 68 L144 84 L130 136 L116 114 L102 41 L88 58 L74 142 L60 116 L46 122 L32 104 L18 90 Z' fill='%2328e0d4' opacity='.92'/%3E%3Cpath d='M18 90 L32 76 L46 58 L60 64 L74 38 L88 122 L102 139 L116 66 L130 44 L144 96 L158 112 L172 50 L186 30 L200 144 L214 158 L228 72 L242 55 L256 98 L270 76 L284 35 L298 28 L312 140 L326 152 L340 92 L354 72 L368 49 L382 110 L396 126 L410 64 L424 42 L438 136 L452 148 L466 78 L480 60 L494 88 L508 116 L522 44 L536 31 L550 132 L564 151 L578 92 L592 70 L606 54 L620 116 L634 130 L648 78 L662 48 L676 118 L690 134 L704 88 L718 78 L732 86 L746 90' fill='none' stroke='%23b8fff8' stroke-width='3' opacity='.52'/%3E%3C/svg%3E");
}

.case-image.mint {
  --wave-width: 68%;
  --wave-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 760 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 90 L40 88 L60 70 L80 73 L100 108 L120 113 L140 74 L160 52 L180 64 L200 126 L220 132 L240 82 L260 56 L280 67 L300 118 L320 128 L340 76 L360 50 L380 61 L400 130 L420 137 L440 88 L460 62 L480 70 L500 114 L520 121 L540 82 L560 64 L580 74 L600 102 L620 108 L640 88 L660 80 L680 84 L700 91 L720 90 L740 90 L740 90 L720 92 L700 93 L680 96 L660 100 L640 92 L620 72 L600 78 L580 106 L560 116 L540 98 L520 59 L500 66 L480 110 L460 118 L440 92 L420 43 L400 50 L380 119 L360 130 L340 104 L320 52 L300 62 L280 113 L260 124 L240 98 L220 48 L200 54 L180 116 L160 128 L140 106 L120 67 L100 72 L80 107 L60 110 L40 92 L20 90 Z' fill='%2328e0d4' opacity='.92'/%3E%3Cpath d='M20 90 L40 88 L60 70 L80 73 L100 108 L120 113 L140 74 L160 52 L180 64 L200 126 L220 132 L240 82 L260 56 L280 67 L300 118 L320 128 L340 76 L360 50 L380 61 L400 130 L420 137 L440 88 L460 62 L480 70 L500 114 L520 121 L540 82 L560 64 L580 74 L600 102 L620 108 L640 88 L660 80 L680 84 L700 91 L720 90 L740 90' fill='none' stroke='%23b8fff8' stroke-width='3' opacity='.54'/%3E%3C/svg%3E");
}

.case-card h3,
.seo-grid h3 {
  margin: 18px 0 10px;
}

.case-card p,
.seo-grid p {
  color: var(--muted);
  line-height: 1.65;
}

.save-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9f0f6;
}

.save-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aqua), var(--blue));
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 0 48px;
  color: var(--muted);
}

.tool-page {
  padding-bottom: 48px;
}

.tool-ad,
.engine-panel,
.drop-zone {
  margin-bottom: 16px;
}

.engine-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
}

.engine-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.drop-zone {
  position: relative;
  border: 1px dashed rgba(32, 198, 196, .62);
  border-radius: 20px;
  background: rgba(255, 255, 255, .52);
}

.drop-zone.dragging {
  border-color: var(--blue);
  background: rgba(47, 125, 246, .08);
}

.drop-zone input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.drop-zone label {
  min-height: 174px;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  cursor: pointer;
}

.drop-zone strong {
  margin-top: 12px;
  font-size: 24px;
}

.drop-zone small {
  color: var(--muted);
}

.tool-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.panel {
  padding: 18px;
}

.panel-head {
  margin-bottom: 16px;
}

.panel-actions {
  gap: 10px;
}

.icon-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}

.icon-button:hover {
  color: var(--ink);
  border-color: rgba(32, 198, 196, .55);
}

.icon-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.panel-head h2 {
  margin: 0;
  font-size: 20px;
}

.queue-list {
  display: grid;
  gap: 10px;
}

.queue-item {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}

.queue-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.queue-name {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.queue-delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #eef4f7;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.queue-delete:hover {
  color: #b42318;
  background: #fff0ee;
}

.queue-item.active {
  border-color: rgba(32, 198, 196, .7);
  box-shadow: 0 0 0 4px rgba(32, 198, 196, .12);
}

.queue-item small,
.empty-state {
  color: var(--muted);
  line-height: 1.55;
}

.player-card p {
  color: #93a4b8;
  line-height: 1.55;
}

.audio-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.preview-panel {
  color: #e8f0fb;
  border-color: rgba(148, 163, 184, .2);
  background:
    radial-gradient(circle at 18% 0, rgba(32, 198, 196, .18), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(47, 125, 246, .18), transparent 30%),
    linear-gradient(180deg, #121b2b, #07101d 78%);
}

.preview-panel .panel-head h2,
.preview-panel .panel-head span {
  color: #e8f0fb;
}

.preview-panel .panel-head span {
  color: #93a4b8;
}

.preview-panel [data-transcode-current],
.preview-panel [data-download-current]:not(:disabled) {
  color: #04111f;
  border-color: rgba(32, 198, 196, .95);
  background: var(--brand-primary);
  box-shadow:
    0 16px 34px rgba(32, 198, 196, .28),
    0 0 0 1px rgba(255, 255, 255, .18) inset;
}

.preview-panel [data-transcode-current]:hover:not(:disabled),
.preview-panel [data-download-current]:hover:not(:disabled) {
  border-color: rgba(135, 245, 238, .98);
  box-shadow:
    0 20px 42px rgba(32, 198, 196, .34),
    0 0 0 1px rgba(255, 255, 255, .26) inset;
}

.preview-panel [data-transcode-current]:disabled {
  color: #8fa0b2;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(148, 163, 184, .16);
  box-shadow: none;
}

.preview-panel [data-download-current]:disabled {
  color: #8fa0b2;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(148, 163, 184, .16);
  box-shadow: none;
  opacity: .82;
}

.player-card {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  background: rgba(10, 18, 32, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.player-card span {
  display: block;
  margin-bottom: 12px;
  font-weight: 820;
}

audio {
  width: 100%;
}

.waveform-editor {
  position: relative;
  margin: 14px 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 14%, rgba(32, 198, 196, .14), transparent 28%),
    linear-gradient(135deg, #0b1220, #050a13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.waveform-editor canvas {
  width: 100%;
  height: 180px;
  display: block;
  border-radius: 14px;
  background: #070d18;
  cursor: crosshair;
  touch-action: none;
}

.waveform-editor.panning canvas {
  cursor: grabbing;
}

.trim-selection {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 180px;
  display: none;
  pointer-events: none;
}

.trim-shade,
.trim-window {
  position: absolute;
  top: 0;
  bottom: 0;
}

.trim-shade {
  background: rgba(15, 23, 42, .18);
}

.trim-window {
  border-left: 3px solid var(--blue);
  border-right: 3px solid var(--aqua);
  background: rgba(32, 198, 196, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.trim-window::before,
.trim-window::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 44px;
  border-radius: 999px;
  background: #0f172a;
  transform: translateY(-50%);
}

.trim-window::before {
  left: -8px;
}

.trim-window::after {
  right: -8px;
}

.trim-ranges {
  position: relative;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.trim-ranges input {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  background: transparent;
  appearance: none;
}

.trim-ranges input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  appearance: none;
  pointer-events: auto;
}

.trim-ranges input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  pointer-events: auto;
}

.trim-ranges input::-webkit-slider-runnable-track,
.trim-ranges input::-moz-range-track {
  height: 4px;
  background: transparent;
}

.trim-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #93a4b8;
  font-size: 13px;
}

.fade-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.fade-presets button {
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 10px;
  background: rgba(15, 23, 42, .82);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}

.fade-presets button.active {
  color: #07101d;
  border-color: #f7bd17;
  background: #f7bd17;
}

.result-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.result-pill {
  padding: 12px;
  border-radius: 14px;
  color: #e8f0fb;
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(148, 163, 184, .16);
}

.result-pill span {
  display: block;
  color: #93a4b8;
  font-size: 12px;
}

.result-pill strong {
  display: block;
  margin-top: 4px;
}

fieldset,
.settings-panel label,
.note-box {
  margin: 0 0 16px;
}

fieldset {
  padding: 0;
  border: 0;
}

legend,
.settings-panel label > span {
  display: block;
  margin-bottom: 8px;
  font-weight: 820;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.segmented button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 740;
}

.segmented button.active {
  color: #fff;
  background: #0f172a;
  border-color: #0f172a;
}

.settings-panel select,
.settings-panel input[type="text"],
.settings-panel input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.settings-panel input[type="range"] {
  width: 100%;
}

.size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.check-row {
  display: flex !important;
  gap: 10px;
  align-items: center;
}

.check-row span {
  margin: 0 !important;
}

.note-box {
  padding: 14px;
  border-radius: 14px;
  background: #fff8dd;
}

.note-box p {
  margin: 6px 0 0;
  color: #655427;
  line-height: 1.55;
}

.ad-dialog {
  max-width: 480px;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1100px) {
  .hero,
  .tool-layout,
  .audio-mini-grid,
  .case-grid,
  .seo-grid {
    grid-template-columns: 1fr;
  }

  .site-nav {
    display: none;
  }
}

@media (max-width: 760px) {
  .page-shell,
  .site-header,
  .tool-header,
  .tool-page {
    width: min(100% - 24px, 1380px);
  }

  .site-header,
  .tool-header {
    padding: 14px;
  }

  .brand {
    gap: 12px;
  }

  .h5-logo-mark {
    width: 160px;
    flex-basis: 160px;
  }

  .brand .h5-logo-mark > .brand-logo-image {
    width: 160px !important;
  }

  .brand-tool,
  .tool-status {
    display: none;
  }

  .hero h1 {
    font-size: 42px;
  }

  .metrics,
  .audio-compare,
  .result-strip,
  .size-grid {
    grid-template-columns: 1fr;
  }

  .engine-panel {
    align-items: stretch;
    flex-direction: column;
  }
}