/* SoundSaver external stylesheet
   Generated from previous inline CSS blocks.
*/

/* ===== contact-us.html inline style 1 ===== */
:root {
      --only-dark: #071126;
      --only-text: #101828;
      --only-muted: #667085;
      --only-border: #e7eaf1;
      --only-soft: #f8f9fd;
      --only-primary: #ff5500;
      --only-primary-2: #ff2200;
      --only-purple: #8b5cf6;
      --only-blue: #2563eb;
      --only-green: #12b76a;
      --only-yellow: #f59e0b;
    }

    /* Typography is intentionally bold but not extra-heavy. */
    body {
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--only-text);
      background: #fff;
      padding-bottom: 0;
    }

    a { text-decoration: none; }
.site-header {
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(231,234,241,.75);
    }

    .nav-link {
      color: var(--only-text);
      font-weight: 700;
    }

    .nav-link:hover {
      color: var(--only-primary);
    }

    .btn-only {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--only-primary);
      --bs-btn-border-color: var(--only-primary);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #e04b00;
      --bs-btn-hover-border-color: #e04b00;
      border-radius: 14px;
      font-weight: 700;
      box-shadow: 0 14px 28px rgba(255,85,0,.24);
    }

    .btn-outline-only {
      --bs-btn-color: var(--only-primary);
      --bs-btn-border-color: var(--only-primary);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: var(--only-primary);
      --bs-btn-hover-border-color: var(--only-primary);
      border-radius: 14px;
      font-weight: 700;
    }

    .text-gradient {
      background: linear-gradient(135deg, var(--only-primary), var(--only-primary-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 64px 0 54px;
      background:
        radial-gradient(circle at 10% 28%, rgba(255,85,0,.10), transparent 25%),
        radial-gradient(circle at 86% 22%, rgba(139,92,246,.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fff9f6 56%, #f8f9fd 100%);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      top: 42%;
      width: 34%;
      height: 130px;
      opacity: .08;
      background:
        repeating-linear-gradient(90deg,
          transparent 0 13px,
          rgba(255,85,0,.7) 14px 16px,
          transparent 17px 29px);
      mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
      pointer-events: none;
    }

    .hero::before { left: -4%; }
    .hero::after { right: -4%; }

    .floating-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #ffefe5;
      color: var(--only-primary);
      font-size: 1.75rem;
      box-shadow: 0 18px 35px rgba(16,24,40,.08);
    }

    .hero-title {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin-inline: auto;
      font-size: clamp(2.35rem, 5vw, 4.35rem);
      line-height: 1.1;
      letter-spacing: -.045em;
      font-weight: 700;
      color: var(--only-text);
    }

    .hero-subtitle {
      position: relative;
      z-index: 1;
      max-width: 570px;
      color: #4b5565;
      font-size: 1.15rem;
      line-height: 1.7;
    }

    .converter-card {
      position: relative;
      z-index: 2;
      max-width: 880px;
      margin: 28px auto 0;
      padding: 20px;
      border-radius: 24px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 24px 60px rgba(16,24,40,.10);
      backdrop-filter: blur(16px);
    }

    .converter-input {
      height: 64px;
      border: 1px solid var(--only-border);
      border-radius: 16px;
      padding-left: 54px;
      font-weight: 600;
      color: var(--only-text);
      box-shadow: 0 10px 24px rgba(16,24,40,.05);
    }

    .converter-icon {
      position: absolute;
      left: 19px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--only-primary);
      font-size: 1.25rem;
      z-index: 5;
    }

    .trust-row {
      color: var(--only-text);
      font-weight: 700;
      font-size: .93rem;
    }

    .trust-row i {
      color: var(--only-primary);
    }

    .section-soft {
      background: linear-gradient(180deg, #f8f9fd 0%, #fff 78%);
    }

    .only-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 22px;
      box-shadow: 0 14px 36px rgba(16,24,40,.06);
    }

    .benefit-card {
      min-height: 174px;
      padding: 28px 18px;
      text-align: center;
    }

    .icon-circle {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin-inline: auto;
      font-size: 1.65rem;
      margin-bottom: 14px;
    }

    .icon-pink { background: #ffefe5; color: var(--only-primary); }
    .icon-purple { background: #f3edff; color: var(--only-purple); }
    .icon-green { background: #eafaf1; color: var(--only-green); }
    .icon-blue { background: #eaf1ff; color: var(--only-blue); }
    .icon-yellow { background: #fff7e6; color: var(--only-yellow); }

    .benefit-card h3,
    .feature-card h3,
    .step-card h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .benefit-card p,
    .feature-card p,
    .step-card p,
    .content-card p,
    .content-card li {
      color: var(--only-muted);
      line-height: 1.65;
      margin-bottom: 0;
    }

    .section-title {
      font-size: clamp(1.65rem, 3vw, 2.2rem);
      font-weight: 700;
      letter-spacing: -.035em;
    }

    .step-card {
      position: relative;
      padding: 32px 26px;
      min-height: 215px;
    }

    .step-number {
      position: absolute;
      top: -16px;
      left: 22px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(135deg, var(--only-primary), #9d28f0);
      box-shadow: 0 12px 26px rgba(255,85,0,.25);
    }

    .content-card {
      padding: 32px;
      height: 100%;
    }

    .content-card h2 {
      font-size: 1.45rem;
      font-weight: 700;
      letter-spacing: -.025em;
      margin-bottom: 16px;
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .check-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .check-list i {
      color: var(--only-primary);
      margin-top: 3px;
    }

    .feature-card {
      padding: 24px;
      height: 100%;
    }

    .feature-icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 1.65rem;
      flex: 0 0 auto;
    }

    .faq-accordion .accordion-item {
      border: 1px solid var(--only-border);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(16,24,40,.04);
    }

    .faq-accordion .accordion-button {
      font-weight: 700;
      color: var(--only-text);
    }

    .faq-accordion .accordion-button:not(.collapsed) {
      color: var(--only-primary);
      background: #fff5f7;
      box-shadow: none;
    }

    .support-strip {
      border: 1px solid #ffe2a4;
      background: linear-gradient(135deg, #fff8e7, #fffdf6);
      border-radius: 22px;
      padding: 24px;
    }

    .site-footer-light {
      background: #fff;
      border-top: 1px solid var(--only-border);
      padding: 38px 0 0;
      margin-bottom: 0;
    }

    .site-footer-light p,
    .site-footer-light a,
    .site-footer-light li {
      color: var(--only-muted);
    }

    .site-footer-light a:hover {
      color: var(--only-primary);
    }

    .footer-title {
      color: var(--only-text);
      font-weight: 700;
      margin-bottom: 14px;
    }

    .mobile-bottom-nav {
      position: fixed;
      z-index: 1030;
      left: 12px;
      right: 12px;
      bottom: 12px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(231,234,241,.95);
      border-radius: 26px;
      box-shadow: 0 -6px 30px rgba(16,24,40,.16);
      backdrop-filter: blur(18px);
      overflow: visible;
    }

    .mobile-bottom-nav .container {
      padding-left: 8px;
      padding-right: 8px;
    }

    .mobile-bottom-nav a,
    .mobile-menu-button {
      position: relative;
      color: #667085;
      font-size: .72rem;
      font-weight: 700;
      padding: 12px 0 10px;
      min-height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: 0;
      background: transparent;
      width: 100%;
    }

    .mobile-bottom-nav i,
    .mobile-menu-button i {
      font-size: 1.3rem;
      line-height: 1;
    }

    .mobile-bottom-nav a.active {
      color: var(--only-primary);
    }

    .mobile-bottom-nav a.active::before {
      content: "";
      position: absolute;
      top: 8px;
      width: 38px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255,85,0,.1);
      z-index: -1;
    }

    .mobile-offcanvas {
      border-radius: 28px 28px 0 0;
      border: 0;
      min-height: 52vh;
    }

    .mobile-menu-link {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 4px;
      color: var(--only-text);
      font-weight: 700;
      border-bottom: 1px solid #f0f2f6;
    }

    .mobile-menu-link i {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: #ffefe5;
      color: var(--only-primary);
      font-size: 1.2rem;
    }

    @media (min-width: 768px) {
      .mobile-bottom-nav,
      .mobile-offcanvas {
        display: none !important;
      }
    }

    @media (max-width: 767.98px) {
      /* Typography is intentionally bold but not extra-heavy. */
    body {
        padding-bottom: 88px;
      }

      .site-logo {
        font-size: 1.55rem;
      }

      .site-header .btn {
        font-size: .88rem;
      }

      .hero {
        padding: 38px 0 34px;
      }

      .hero-title {
        font-size: 2.45rem;
      }

      .hero-subtitle {
        font-size: 1rem;
      }

      .floating-icon {
        display: none;
      }

      .hero::before,
      .hero::after {
        top: 40%;
        opacity: .12;
      }

      .converter-card {
        padding: 16px;
        border-radius: 22px;
      }

      .converter-input {
        height: 58px;
        padding-left: 50px;
      }

      .trust-row {
        gap: 12px !important;
        font-size: .84rem;
      }

      .benefit-card {
        min-height: 158px;
        padding: 22px 14px;
      }

      .icon-circle {
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
      }

      .step-card {
        min-height: auto;
        padding: 24px 20px 22px 86px;
      }

      .step-card .icon-circle {
        position: absolute;
        left: 22px;
        top: 28px;
      }

      .step-number {
        left: 14px;
        top: -10px;
        width: 34px;
        height: 34px;
        font-size: .9rem;
      }

      .content-card {
        padding: 24px;
      }
    }
  
    .input-action-wrap {
      position: relative;
    }

    .converter-input.with-paste {
      padding-right: 112px;
    }

    .paste-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;
      border: 0;
      border-radius: 12px;
      height: 42px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--only-primary);
      background: #ffefe5;
      font-weight: 700;
      transition: all .18s ease;
    }

    .paste-btn:hover,
    .paste-btn:focus {
      color: #fff;
      background: var(--only-primary);
    }

    .paste-btn i {
      font-size: 1rem;
    }

    .paste-message {
      display: none;
      margin-top: 8px;
      color: var(--only-muted);
      font-size: .86rem;
      font-weight: 600;
    }

    .paste-message.show {
      display: block;
    }

    @media (max-width: 420px) {
      .converter-input.with-paste {
        padding-right: 58px;
      }

      .paste-btn {
        width: 42px;
        padding: 0;
        justify-content: center;
      }

      .paste-btn span {
        display: none;
      }
    }

  
    .site-logo {
      display: inline-flex;
      align-items: center;
      font-size: 1.9rem;
      font-weight: 700;
      letter-spacing: -.05em;
      line-height: 1;
      color: var(--only-dark);
    }

    .site-logo span {
      color: var(--only-primary);
    }

    .site-logo:hover {
      color: var(--only-dark);
    }

    .site-logo:hover span {
      color: var(--only-primary);
    }

    .footer-bottom {
      background: #fff;
      border-top: 1px solid var(--only-border);
      padding: 20px 0;
      margin-top: 28px;
    }

  
    .footer-links-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: clamp(32px, 5vw, 72px);
      flex-wrap: wrap;
      text-align: left;
    }

    .footer-link-col {
      min-width: 140px;
    }

  
    .shortcut-tip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 760px;
      margin: 14px auto 0;
      padding: 12px 14px;
      border: 1px solid #ffe2a4;
      background: linear-gradient(135deg, #fff8e7, #fffdf6);
      border-radius: 14px;
      color: #7c4a03;
      font-size: .92rem;
      font-weight: 500;
      line-height: 1.5;
      text-align: left;
    }

    .shortcut-tip i {
      color: #f59e0b;
      font-size: 1.1rem;
      margin-top: 2px;
      flex: 0 0 auto;
    }

    .shortcut-tip code {
      color: var(--only-primary);
      background: #ffefe5;
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
    }

    @media (max-width: 575.98px) {
      .shortcut-tip {
        font-size: .86rem;
        padding: 11px 12px;
      }
    }

  
    .mobile-bottom-nav a,
    .mobile-menu-button {
      isolation: isolate;
    }

    .mobile-bottom-nav a > *,
    .mobile-menu-button > * {
      position: relative;
      z-index: 1;
    }

  
    html,
    body {
      overflow-x: hidden;
    }
.converter-card form {
      margin: 0;
    }

    @media (max-width: 767.98px) {
      .footer-links-wrap {
        justify-content: flex-start;
      }

      .hero-title {
        letter-spacing: -.035em;
      }
    }

  
    /* Wider desktop layout restored */
    @media (min-width: 1200px) {
      .site-header .container,
      .hero .container,
      .site-footer-light .container,
      main > section > .container {
        max-width: 1240px;
      }

      .converter-card {
        max-width: 960px;
      }

      .hero-title {
        max-width: 860px;
      }

      .hero-subtitle {
        max-width: 640px;
      }

      .footer-links-wrap {
        gap: clamp(48px, 6vw, 96px);
      }
    }

  
    /* Cleaner hero title sizing */
    .hero-title {
      max-width: 760px;
      font-size: clamp(2.15rem, 4.2vw, 3.85rem);
      line-height: 1.12;
      letter-spacing: -.035em;
      font-weight: 700;
    }

    .hero-subtitle {
      max-width: 620px;
    }

    @media (min-width: 1200px) {
      .hero-title {
        max-width: 820px;
        font-size: 4rem;
      }
    }

    @media (max-width: 767.98px) {
      .hero-title {
        font-size: 2.2rem;
        line-height: 1.15;
        letter-spacing: -.025em;
      }
    }

  
    .shortcut-tip {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .shortcut-tip i {
      line-height: 1;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .shortcut-tip span {
      line-height: 1.45;
      display: inline-block;
    }

    .shortcut-tip code {
      vertical-align: baseline;
    }

  
    /* Keep footer divider lines aligned with the main container width */
    .site-footer-light {
      border-top: 0;
      padding-top: 0;
    }

    .site-footer-light > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 38px;
    }

    .footer-bottom {
      border-top: 0;
      padding: 0 0 20px;
      margin-top: 28px;
    }

    .footer-bottom > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 20px;
    }

  
    /* Modern Premium Language Dropdown */
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      border-radius: 16px;
      padding: 10px 15px;
      font-weight: 700;
      color: var(--only-dark);
      box-shadow: 0 14px 36px rgba(255, 85, 0, .12);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }

    .language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      color: var(--only-dark);
      border-color: rgba(255, 85, 0, .28);
      background: linear-gradient(135deg, #fff, #fff5f2);
      box-shadow: 0 16px 42px rgba(255, 85, 0, .16);
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 22px;
      padding: 10px;
      min-width: 210px;
      box-shadow: 0 24px 60px rgba(16, 24, 40, .16);
      background: #fff;
    }

    .language-dropdown .dropdown-item,
    .lang-card-menu .dropdown-item {
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      color: var(--only-text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .language-dropdown .dropdown-item:hover,
    .language-dropdown .dropdown-item:focus,
    .lang-card-menu .dropdown-item:hover,
    .lang-card-menu .dropdown-item:focus {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .08);
    }

    .language-dropdown .dropdown-item.active,
    .language-dropdown .dropdown-item.active-preview,
    .lang-card-menu .dropdown-item.active,
    .lang-card-menu .dropdown-item.active-preview {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .10);
    }

    @media (max-width: 575.98px) {
      .language-dropdown .dropdown-toggle,
      .lang-card-btn {
        padding: 9px 12px;
        border-radius: 14px;
        font-size: .92rem;
      }

      .language-dropdown .dropdown-menu,
      .lang-card-menu {
        min-width: 190px;
      }
    }

    .lang-card-btn.dropdown-toggle::after {
      display: none;
    }

    /* Legal / support content pages */
    .page-hero {
      padding: 72px 0 28px;
      background:
        radial-gradient(circle at top left, rgba(255, 85, 0, .10), transparent 32%),
        linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    }

    .page-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--only-primary);
      background: rgba(255, 85, 0, .08);
      border: 1px solid rgba(255, 85, 0, .12);
      border-radius: 999px;
      padding: 8px 13px;
      font-weight: 800;
      font-size: .86rem;
      margin-bottom: 18px;
    }

    .page-title {
      color: var(--only-dark);
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.02;
      margin-bottom: 16px;
    }

    .page-lead {
      color: var(--only-muted);
      font-size: 1.05rem;
      max-width: 760px;
      margin-bottom: 0;
    }

    .legal-layout {
      padding: 34px 0 70px;
    }

    .legal-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 28px;
      box-shadow: 0 24px 80px rgba(16, 24, 40, .08);
      padding: 34px;
    }

    .legal-card h2 {
      color: var(--only-dark);
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -.025em;
      margin-top: 30px;
      margin-bottom: 12px;
    }

    .legal-card h2:first-child {
      margin-top: 0;
    }

    .legal-card p,
    .legal-card li {
      color: var(--only-muted);
      line-height: 1.75;
    }

    .legal-card strong {
      color: var(--only-text);
    }

    .legal-card ul {
      padding-left: 1.15rem;
      margin-bottom: 18px;
    }

    .legal-note {
      background: rgba(255, 85, 0, .06);
      border: 1px solid rgba(255, 85, 0, .12);
      border-radius: 18px;
      padding: 16px 18px;
      color: var(--only-muted);
      margin: 22px 0;
    }

    .legal-side-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 24px;
      padding: 22px;
      box-shadow: 0 18px 60px rgba(16, 24, 40, .07);
      position: sticky;
      top: 110px;
    }

    .legal-side-card a {
      color: var(--only-muted);
      text-decoration: none;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--only-border);
    }

    .legal-side-card a:last-child {
      border-bottom: 0;
    }

    .legal-side-card a:hover {
      color: var(--only-primary);
    }

    .contact-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 28px;
      box-shadow: 0 24px 80px rgba(16, 24, 40, .08);
      padding: 30px;
    }

    .contact-input {
      border: 1px solid var(--only-border);
      border-radius: 16px;
      padding: 13px 15px;
      font-weight: 600;
      color: var(--only-text);
    }

    .contact-input:focus {
      border-color: rgba(255, 85, 0, .45);
      box-shadow: 0 0 0 .25rem rgba(255, 85, 0, .10);
    }

    .contact-method {
      border: 1px solid var(--only-border);
      border-radius: 20px;
      padding: 18px;
      background: #fff;
      height: 100%;
    }

    .contact-method i {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 85, 0, .08);
      color: var(--only-primary);
      margin-bottom: 12px;
      font-size: 1.2rem;
    }

    @media (max-width: 991.98px) {
      .page-hero {
        padding: 48px 0 20px;
      }

      .legal-layout {
        padding-bottom: 110px;
      }

      .legal-card,
      .contact-card {
        padding: 24px;
        border-radius: 24px;
      }

      .legal-side-card {
        position: static;
      }
    }

    /* Softer language dropdown shadow */
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

  
    /* Sitewide typography normalization */
    :root {
      --fs-xs: .72rem;
      --fs-sm: .88rem;
      --fs-md: .94rem;
      --fs-base: 1rem;
      --fs-lead: 1.08rem;
      --fs-card-title: 1.2rem;
      --fs-section-kicker: .86rem;
      --fw-regular: 500;
      --fw-medium: 600;
      --fw-semibold: 700;
      --fw-bold: 800;
    }

    body {
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
      line-height: 1.6;
    }

    .nav-link,
    .footer-link-col a,
    .mobile-menu-link,
    .mobile-bottom-nav a span {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
    }

    .btn,
    .dropdown-item,
    .accordion-button {
      font-weight: var(--fw-semibold);
    }

    .section-kicker,
    .hero-badge,
    .page-kicker,
    .status-badge {
      font-size: var(--fs-section-kicker);
      font-weight: var(--fw-bold);
    }

    .section-title,
    .page-title,
    .result-title,
    .hero-title {
      font-weight: var(--fw-bold);
      letter-spacing: -.045em;
    }

    .section-subtitle,
    .hero-subtitle,
    .page-lead,
    .result-subtitle,
    .text-secondary,
    .text-muted {
      font-weight: var(--fw-regular);
    }

    .feature-card h3,
    .step-card h3,
    .legal-card h2,
    .contact-method h2,
    .track-title,
    .footer-title {
      font-weight: var(--fw-bold);
    }

    .feature-card p,
    .step-card p,
    .accordion-body,
    .legal-card p,
    .legal-card li,
    .result-share-text,
    .coffee-support-text {
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
    }

    .small,
    small,
    .meta-pill,
    .trust-item,
    .shortcut-tip,
    .paste-message {
      font-size: var(--fs-sm);
    }

    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
    }

    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: var(--fw-bold);
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
      font-weight: var(--fw-bold);
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: var(--fw-bold);
      margin-left: 1px;
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    @media (max-width: 767.98px) {
      body {
        font-size: .97rem;
      }

      .site-header .site-logo {
        font-size: 1.55rem;
      }

      .nav-link,
      .footer-link-col a,
      .mobile-menu-link,
      .mobile-bottom-nav a span {
        font-size: .9rem;
      }
    }

    /* Synced sitewide header/footer/link visibility */
    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: 800;
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
      font-weight: 800;
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: 800;
      margin-left: 1px;
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    .site-footer-light .footer-link-col a,
    .site-footer-light .footer-bottom a {
      color: #475467 !important;
      font-weight: 600 !important;
      opacity: 1 !important;
      text-decoration: none;
    }

    .site-footer-light .footer-link-col a:hover,
    .site-footer-light .footer-bottom a:hover {
      color: var(--only-primary) !important;
    }

    .site-footer-light .footer-title {
      color: var(--only-dark) !important;
      font-weight: 800 !important;
    }

    .site-footer-light p,
    .site-footer-light .footer-bottom {
      color: #667085 !important;
      opacity: 1 !important;
    }

    .site-footer-light {
      border-top: 0;
      padding-top: 0;
    }

    .site-footer-light > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 38px;
    }

    .footer-bottom {
      border-top: 0;
      padding: 0 0 20px;
      margin-top: 28px;
    }

    .footer-bottom > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 20px;
    }

    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
      font-weight: 700;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

    @media (max-width: 767.98px) {
      .site-header .site-logo {
        font-size: 1.55rem;
      }
    }

    /* Footer language menu uses the same premium dropdown style */
    .footer-language-dropdown {
      display: inline-flex;
      justify-content: flex-start;
    }

    .footer-language-dropdown .dropdown-toggle {
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      border-radius: 16px;
      padding: 10px 15px;
      font-size: .94rem;
      font-weight: 700;
      color: var(--only-dark);
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }

    .footer-language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .footer-language-dropdown .dropdown-toggle:hover,
    .footer-language-dropdown .dropdown-toggle:focus {
      color: var(--only-dark);
      border-color: rgba(255, 85, 0, .28);
      background: linear-gradient(135deg, #fff, #fff5f2);
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
    }

    .footer-language-dropdown .dropdown-menu {
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 22px;
      padding: 10px;
      min-width: 210px;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09);
      background: #fff;
    }

    .footer-language-dropdown .dropdown-item {
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      color: var(--only-text) !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .footer-language-dropdown .dropdown-item:hover,
    .footer-language-dropdown .dropdown-item:focus {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .08);
    }

    .footer-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .10);
    }

    /* Footer language expanded menu height fix */
    .site-footer-light .footer-language-dropdown .dropdown-menu,
    .site-footer-light .language-dropdown .dropdown-menu {
      min-height: 292px !important;
      padding: 14px !important;
      border-radius: 24px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-item,
    .site-footer-light .language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 14px !important;
      border-radius: 15px !important;
      line-height: 1.25 !important;
      font-size: .95rem !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-toggle,
    .site-footer-light .language-dropdown .dropdown-toggle {
      min-height: 46px !important;
      padding: 12px 16px !important;
    }

    @media (max-width: 767.98px) {
      .site-footer-light .footer-language-dropdown .dropdown-menu,
      .site-footer-light .language-dropdown .dropdown-menu {
        min-height: 280px !important;
      }
    }

    /* Direct footer dropdown expanded-size fix */
    .site-footer-light .footer-language-dropdown .dropdown-menu {
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
      overflow-y: auto !important;
      padding: 18px !important;
      width: 250px !important;
      border-radius: 26px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-menu.show {
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 6px !important;
      border-radius: 16px !important;
      font-size: 1rem !important;
      line-height: 1.25 !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-toggle {
      min-height: 50px !important;
      padding: 13px 17px !important;
    }

    /* Mobile offcanvas language dropdown fix */
    .mobile-offcanvas {
      min-height: 70vh !important;
    }

    .mobile-offcanvas .mobile-language-dropdown {
      width: 100%;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-toggle {
      width: 100%;
      min-height: 58px;
      border-radius: 18px;
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      color: var(--only-dark);
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      min-height: 330px !important;
      max-height: 330px !important;
      overflow-y: auto !important;
      margin-top: 12px !important;
      padding: 16px !important;
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 24px;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .10);
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu.show {
      min-height: 330px !important;
      max-height: 330px !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 7px !important;
      border-radius: 16px !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--only-text) !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item:hover,
    .mobile-offcanvas .mobile-language-dropdown .dropdown-item:focus,
    .mobile-offcanvas .mobile-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .09);
    }

    /* Mobile language dropdown should overlay links, not push them down */
    .mobile-offcanvas .mobile-language-dropdown {
      position: relative !important;
      z-index: 30 !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      min-height: auto !important;
      height: auto !important;
      max-height: 260px !important;
      overflow-y: auto !important;
      margin-top: 0 !important;
      z-index: 9999 !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu.show {
      position: absolute !important;
      min-height: auto !important;
      height: auto !important;
      max-height: 260px !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 15px !important;
      margin-bottom: 5px !important;
    }

    .mobile-offcanvas .offcanvas-body {
      overflow-y: auto;
      overflow-x: visible;
    }

    /* Prevent mobile language dropdown scroll from moving background/offcanvas links */
    .mobile-offcanvas.language-dropdown-open .offcanvas-body {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none;
    }

    .mobile-offcanvas.language-dropdown-open .mobile-language-dropdown,
    .mobile-offcanvas.language-dropdown-open .mobile-language-dropdown .dropdown-menu {
      touch-action: pan-y;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch;
      z-index: 10000 !important;
    }

    /* Lock background page while mobile offcanvas/footer menu is open */
    html.mobile-menu-page-locked,
    body.mobile-menu-page-locked {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none;
    }

    body.mobile-menu-page-locked {
      position: fixed !important;
      left: 0;
      right: 0;
      width: 100% !important;
    }

    #mobileMenu {
      overscroll-behavior: contain !important;
    }

    #mobileMenu .offcanvas-body {
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }


/* ===== contact-us.html inline style 2 ===== */
/* Final unified footer system: identical across all pages */
    .soundsaver-footer-v3.site-footer-light {
      display: none !important;
      background: #fff !important;
      border-top: 0 !important;
      padding: 0 !important;
      margin-top: 72px !important;
      color: var(--only-text) !important;
    }

    @media (min-width: 768px) {
      .soundsaver-footer-v3.site-footer-light {
        display: block !important;
      }
    }

    .soundsaver-footer-v3.site-footer-light > .container {
      border-top: 1px solid var(--only-border) !important;
      padding-top: 38px !important;
      padding-bottom: 0 !important;
    }

    .soundsaver-footer-v3 .row {
      align-items: flex-start !important;
    }

    .soundsaver-footer-v3 .site-logo {
      display: inline-flex !important;
      align-items: baseline !important;
      gap: 0 !important;
      text-decoration: none !important;
      line-height: 1 !important;
      letter-spacing: -.055em !important;
      font-size: 1.9rem !important;
      font-weight: 800 !important;
      color: var(--only-dark) !important;
      margin-bottom: 1rem !important;
    }

    .soundsaver-footer-v3 .site-logo .brand-only {
      color: var(--only-dark) !important;
      font-weight: 800 !important;
    }

    .soundsaver-footer-v3 .site-logo .brand-saver {
      color: var(--only-primary) !important;
      font-weight: 800 !important;
      margin-left: 1px !important;
    }

    .soundsaver-footer-v3 p {
      color: #667085 !important;
      font-size: .95rem !important;
      font-weight: 500 !important;
      line-height: 1.65 !important;
      opacity: 1 !important;
      margin-bottom: 0 !important;
    }

    .soundsaver-footer-v3 .footer-links-wrap {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 28px !important;
    }

    .soundsaver-footer-v3 .footer-title {
      color: var(--only-dark) !important;
      font-size: .92rem !important;
      font-weight: 800 !important;
      line-height: 1.3 !important;
      margin-bottom: 12px !important;
    }

    .soundsaver-footer-v3 ul {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      display: grid !important;
      gap: 8px !important;
    }

    .soundsaver-footer-v3 .footer-link-col a {
      color: #475467 !important;
      font-size: .92rem !important;
      font-weight: 600 !important;
      line-height: 1.45 !important;
      opacity: 1 !important;
      text-decoration: none !important;
      transition: color .18s ease !important;
    }

    .soundsaver-footer-v3 .footer-link-col a:hover,
    .soundsaver-footer-v3 .footer-link-col a:focus {
      color: var(--only-primary) !important;
      text-decoration: none !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown {
      display: inline-flex !important;
      justify-content: flex-start !important;
      position: relative !important;
      margin-top: 1rem !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-toggle {
      min-height: 50px !important;
      padding: 13px 17px !important;
      border: 1px solid rgba(255, 85, 0, .18) !important;
      background: linear-gradient(135deg, #fff, #fff8f5) !important;
      border-radius: 16px !important;
      color: var(--only-dark) !important;
      font-size: .94rem !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      text-decoration: none !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-toggle::after {
      display: none !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-menu {
      width: 250px !important;
      min-width: 250px !important;
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
      overflow-y: auto !important;
      padding: 18px !important;
      border: 1px solid rgba(255, 85, 0, .16) !important;
      border-radius: 26px !important;
      background: #fff !important;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 6px !important;
      border-radius: 16px !important;
      color: var(--only-text) !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      line-height: 1.25 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      text-decoration: none !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item:hover,
    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item:focus,
    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .09) !important;
    }

    .soundsaver-footer-bottom-v3.footer-bottom {
      display: none !important;
      border-top: 0 !important;
      padding: 0 0 20px !important;
      margin-top: 28px !important;
      color: #667085 !important;
      background: #fff !important;
      opacity: 1 !important;
    }

    @media (min-width: 768px) {
      .soundsaver-footer-bottom-v3.footer-bottom {
        display: block !important;
      }
    }

    .soundsaver-footer-bottom-v3.footer-bottom > .container {
      border-top: 1px solid var(--only-border) !important;
      padding-top: 20px !important;
    }

    .soundsaver-footer-bottom-v3,
    .soundsaver-footer-bottom-v3 .small {
      color: #667085 !important;
      font-size: .88rem !important;
      font-weight: 500 !important;
      opacity: 1 !important;
    }

    .soundsaver-footer-bottom-v3 a {
      color: #475467 !important;
      font-weight: 600 !important;
      opacity: 1 !important;
      text-decoration: none !important;
    }

    .soundsaver-footer-bottom-v3 a:hover,
    .soundsaver-footer-bottom-v3 a:focus {
      color: var(--only-primary) !important;
    }

    /* Mobile footer/offcanvas consistency */
    .soundsaver-mobile-menu-v3.mobile-offcanvas .site-logo {
      font-size: 1.55rem !important;
      letter-spacing: -.055em !important;
      font-weight: 800 !important;
    }

    .soundsaver-mobile-menu-v3 .mobile-language-dropdown {
      position: relative !important;
      z-index: 30 !important;
      width: 100% !important;
    }

    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-toggle {
      width: 100% !important;
      min-height: 58px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255, 85, 0, .18) !important;
      background: linear-gradient(135deg, #fff, #fff8f5) !important;
      color: var(--only-dark) !important;
      font-weight: 800 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-toggle::after {
      display: none !important;
    }

    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-menu {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      max-height: 260px !important;
      overflow-y: auto !important;
      padding: 16px !important;
      border: 1px solid rgba(255, 85, 0, .16) !important;
      border-radius: 24px !important;
      background: #fff !important;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .10) !important;
      z-index: 10000 !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 15px !important;
      margin-bottom: 5px !important;
      border-radius: 16px !important;
      color: var(--only-text) !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      text-decoration: none !important;
    }

    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-item:hover,
    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-item:focus,
    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .09) !important;
    }

    .soundsaver-mobile-bottom-v3.mobile-bottom-nav {
      background: rgba(255, 255, 255, .96) !important;
      border-top: 1px solid var(--only-border) !important;
      box-shadow: 0 -10px 30px rgba(16, 24, 40, .08) !important;
    }

    .soundsaver-mobile-bottom-v3.mobile-bottom-nav a {
      color: #667085 !important;
      font-weight: 700 !important;
      text-decoration: none !important;
    }

    .soundsaver-mobile-bottom-v3.mobile-bottom-nav a:hover,
    .soundsaver-mobile-bottom-v3.mobile-bottom-nav a:focus {
      color: var(--only-primary) !important;
    }

    @media (max-width: 767.98px) {
      body {
        padding-bottom: 74px !important;
      }
    }

    @media (max-width: 991.98px) {
      .soundsaver-footer-v3 .footer-links-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }


/* ===== contact-us.html inline style 3 ===== */
/* Ensure footer/mobile language dropdowns are closed by default */
    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-menu:not(.show),
    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-menu:not(.show) {
      display: none !important;
    }

    .soundsaver-footer-v3 .footer-language-dropdown .dropdown-menu.show,
    .soundsaver-mobile-menu-v3 .mobile-language-dropdown .dropdown-menu.show {
      display: block !important;
    }


/* ===== contact-us.html inline style 4 ===== */
/* Final: language dropdowns closed by default */
    .footer-language-dropdown .dropdown-menu:not(.show),
    .mobile-language-dropdown .dropdown-menu:not(.show),
    .language-dropdown .dropdown-menu:not(.show) {
      display: none !important;
    }

    .footer-language-dropdown .dropdown-menu.show,
    .mobile-language-dropdown .dropdown-menu.show,
    .language-dropdown .dropdown-menu.show {
      display: block !important;
    }


/* ===== index.html inline style 1 ===== */
:root {
      --only-dark: #071126;
      --only-text: #101828;
      --only-muted: #667085;
      --only-border: #e7eaf1;
      --only-soft: #f8f9fd;
      --only-primary: #ff5500;
      --only-primary-2: #ff2200;
      --only-purple: #8b5cf6;
      --only-blue: #2563eb;
      --only-green: #12b76a;
      --only-yellow: #f59e0b;
    }

    /* Typography is intentionally bold but not extra-heavy. */
    body {
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--only-text);
      background: #fff;
      padding-bottom: 0;
    }

    a { text-decoration: none; }
.site-header {
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(231,234,241,.75);
    }

    .nav-link {
      color: var(--only-text);
      font-weight: 700;
    }

    .nav-link:hover {
      color: var(--only-primary);
    }

    .btn-only {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--only-primary);
      --bs-btn-border-color: var(--only-primary);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #e04b00;
      --bs-btn-hover-border-color: #e04b00;
      border-radius: 14px;
      font-weight: 700;
      box-shadow: 0 14px 28px rgba(255,85,0,.24);
    }

    .btn-outline-only {
      --bs-btn-color: var(--only-primary);
      --bs-btn-border-color: var(--only-primary);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: var(--only-primary);
      --bs-btn-hover-border-color: var(--only-primary);
      border-radius: 14px;
      font-weight: 700;
    }

    .text-gradient {
      background: linear-gradient(135deg, var(--only-primary), var(--only-primary-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 64px 0 54px;
      background:
        radial-gradient(circle at 10% 28%, rgba(255,85,0,.10), transparent 25%),
        radial-gradient(circle at 86% 22%, rgba(139,92,246,.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fff9f6 56%, #f8f9fd 100%);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      top: 42%;
      width: 34%;
      height: 130px;
      opacity: .08;
      background:
        repeating-linear-gradient(90deg,
          transparent 0 13px,
          rgba(255,85,0,.7) 14px 16px,
          transparent 17px 29px);
      mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
      pointer-events: none;
    }

    .hero::before { left: -4%; }
    .hero::after { right: -4%; }

    .floating-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #ffefe5;
      color: var(--only-primary);
      font-size: 1.75rem;
      box-shadow: 0 18px 35px rgba(16,24,40,.08);
    }

    .hero-title {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin-inline: auto;
      font-size: clamp(2.35rem, 5vw, 4.35rem);
      line-height: 1.1;
      letter-spacing: -.045em;
      font-weight: 700;
      color: var(--only-text);
    }

    .hero-subtitle {
      position: relative;
      z-index: 1;
      max-width: 570px;
      color: #4b5565;
      font-size: 1.15rem;
      line-height: 1.7;
    }

    .converter-card {
      position: relative;
      z-index: 2;
      max-width: 880px;
      margin: 28px auto 0;
      padding: 20px;
      border-radius: 24px;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 24px 60px rgba(16,24,40,.10);
      backdrop-filter: blur(16px);
    }

    .converter-input {
      height: 64px;
      border: 1px solid var(--only-border);
      border-radius: 16px;
      padding-left: 54px;
      font-weight: 600;
      color: var(--only-text);
      box-shadow: 0 10px 24px rgba(16,24,40,.05);
    }

    .converter-icon {
      position: absolute;
      left: 19px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--only-primary);
      font-size: 1.25rem;
      z-index: 5;
    }

    .trust-row {
      color: var(--only-text);
      font-weight: 700;
      font-size: .93rem;
    }

    .trust-row i {
      color: var(--only-primary);
    }

    .section-soft {
      background: linear-gradient(180deg, #f8f9fd 0%, #fff 78%);
    }

    .only-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 22px;
      box-shadow: 0 14px 36px rgba(16,24,40,.06);
    }

    .benefit-card {
      min-height: 174px;
      padding: 28px 18px;
      text-align: center;
    }

    .icon-circle {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin-inline: auto;
      font-size: 1.65rem;
      margin-bottom: 14px;
    }

    .icon-pink { background: #ffefe5; color: var(--only-primary); }
    .icon-purple { background: #f3edff; color: var(--only-purple); }
    .icon-green { background: #eafaf1; color: var(--only-green); }
    .icon-yellow { background: #fff7e6; color: var(--only-yellow); }

    .benefit-card h3,
    .feature-card h3,
    .step-card h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .benefit-card p,
    .feature-card p,
    .step-card p,
    .content-card p,
    .content-card li {
      color: var(--only-muted);
      line-height: 1.65;
      margin-bottom: 0;
    }

    .section-title {
      font-size: clamp(1.65rem, 3vw, 2.2rem);
      font-weight: 700;
      letter-spacing: -.035em;
    }

    .step-card {
      position: relative;
      padding: 32px 26px;
      min-height: 215px;
    }

    .step-number {
      position: absolute;
      top: -16px;
      left: 22px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(135deg, var(--only-primary), #9d28f0);
      box-shadow: 0 12px 26px rgba(255,85,0,.25);
    }

    .content-card {
      padding: 32px;
      height: 100%;
    }

    .content-card h2 {
      font-size: 1.45rem;
      font-weight: 700;
      letter-spacing: -.025em;
      margin-bottom: 16px;
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .check-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .check-list i {
      color: var(--only-primary);
      margin-top: 3px;
    }

    .feature-card {
      padding: 24px;
      height: 100%;
    }

    .feature-icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 1.65rem;
      flex: 0 0 auto;
    }

    .faq-accordion .accordion-item {
      border: 1px solid var(--only-border);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(16,24,40,.04);
    }

    .faq-accordion .accordion-button {
      font-weight: 700;
      color: var(--only-text);
    }

    .faq-accordion .accordion-button:not(.collapsed) {
      color: var(--only-primary);
      background: #fff5f7;
      box-shadow: none;
    }

    .support-strip {
      border: 1px solid #ffe2a4;
      background: linear-gradient(135deg, #fff8e7, #fffdf6);
      border-radius: 22px;
      padding: 24px;
    }

    .site-footer-light {
      background: #fff;
      border-top: 1px solid var(--only-border);
      padding: 38px 0 0;
      margin-bottom: 0;
    }

    .site-footer-light p,
    .site-footer-light a,
    .site-footer-light li {
      color: var(--only-muted);
    }

    .site-footer-light a:hover {
      color: var(--only-primary);
    }

    .footer-title {
      color: var(--only-text);
      font-weight: 700;
      margin-bottom: 14px;
    }

    .mobile-bottom-nav {
      position: fixed;
      z-index: 1030;
      left: 12px;
      right: 12px;
      bottom: 12px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(231,234,241,.95);
      border-radius: 26px;
      box-shadow: 0 -6px 30px rgba(16,24,40,.16);
      backdrop-filter: blur(18px);
      overflow: visible;
    }

    .mobile-bottom-nav .container {
      padding-left: 8px;
      padding-right: 8px;
    }

    .mobile-bottom-nav a,
    .mobile-menu-button {
      position: relative;
      color: #667085;
      font-size: .72rem;
      font-weight: 700;
      padding: 12px 0 10px;
      min-height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: 0;
      background: transparent;
      width: 100%;
    }

    .mobile-bottom-nav i,
    .mobile-menu-button i {
      font-size: 1.3rem;
      line-height: 1;
    }

    .mobile-bottom-nav a.active {
      color: var(--only-primary);
    }

    .mobile-bottom-nav a.active::before {
      content: "";
      position: absolute;
      top: 8px;
      width: 38px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255,85,0,.1);
      z-index: -1;
    }

    .mobile-offcanvas {
      border-radius: 28px 28px 0 0;
      border: 0;
      min-height: 52vh;
    }

    .mobile-menu-link {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 4px;
      color: var(--only-text);
      font-weight: 700;
      border-bottom: 1px solid #f0f2f6;
    }

    .mobile-menu-link i {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: #ffefe5;
      color: var(--only-primary);
      font-size: 1.2rem;
    }

    @media (min-width: 768px) {
      .mobile-bottom-nav,
      .mobile-offcanvas {
        display: none !important;
      }
    }

    @media (max-width: 767.98px) {
      /* Typography is intentionally bold but not extra-heavy. */
    body {
        padding-bottom: 88px;
      }

      .site-logo {
        font-size: 1.55rem;
      }

      .site-header .btn {
        font-size: .88rem;
      }

      .hero {
        padding: 38px 0 34px;
      }

      .hero-title {
        font-size: 2.45rem;
      }

      .hero-subtitle {
        font-size: 1rem;
      }

      .floating-icon {
        display: none;
      }

      .hero::before,
      .hero::after {
        top: 40%;
        opacity: .12;
      }

      .converter-card {
        padding: 16px;
        border-radius: 22px;
      }

      .converter-input {
        height: 58px;
        padding-left: 50px;
      }

      .trust-row {
        gap: 12px !important;
        font-size: .84rem;
      }

      .benefit-card {
        min-height: 158px;
        padding: 22px 14px;
      }

      .icon-circle {
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
      }

      .step-card {
        min-height: auto;
        padding: 24px 20px 22px 86px;
      }

      .step-card .icon-circle {
        position: absolute;
        left: 22px;
        top: 28px;
      }

      .step-number {
        left: 14px;
        top: -10px;
        width: 34px;
        height: 34px;
        font-size: .9rem;
      }

      .content-card {
        padding: 24px;
      }
    }
  
    .input-action-wrap {
      position: relative;
    }

    .converter-input.with-paste {
      padding-right: 112px;
    }

    .paste-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;
      border: 0;
      border-radius: 12px;
      height: 42px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--only-primary);
      background: #ffefe5;
      font-weight: 700;
      transition: all .18s ease;
    }

    .paste-btn:hover,
    .paste-btn:focus {
      color: #fff;
      background: var(--only-primary);
    }

    .paste-btn i {
      font-size: 1rem;
    }
@media (max-width: 420px) {
      .converter-input.with-paste {
        padding-right: 58px;
      }

      .paste-btn {
        width: 42px;
        padding: 0;
        justify-content: center;
      }

      .paste-btn span {
        display: none;
      }
    }

  
    .site-logo {
      display: inline-flex;
      align-items: center;
      font-size: 1.9rem;
      font-weight: 700;
      letter-spacing: -.05em;
      line-height: 1;
      color: var(--only-dark);
    }

    .site-logo span {
      color: var(--only-primary);
    }

    .site-logo:hover {
      color: var(--only-dark);
    }

    .site-logo:hover span {
      color: var(--only-primary);
    }

    .footer-bottom {
      background: #fff;
      border-top: 1px solid var(--only-border);
      padding: 20px 0;
      margin-top: 28px;
    }

  
    .footer-links-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: clamp(32px, 5vw, 72px);
      flex-wrap: wrap;
      text-align: left;
    }

    .footer-link-col {
      min-width: 140px;
    }

    @media (max-width: 575.98px) {
    }

  
    .mobile-bottom-nav a,
    .mobile-menu-button {
      isolation: isolate;
    }

    .mobile-bottom-nav a > *,
    .mobile-menu-button > * {
      position: relative;
      z-index: 1;
    }

  
    html,
    body {
      overflow-x: hidden;
    }
.converter-card form {
      margin: 0;
    }

    @media (max-width: 767.98px) {
      .footer-links-wrap {
        justify-content: flex-start;
      }

      .hero-title {
        letter-spacing: -.035em;
      }
    }

  
    /* Wider desktop layout restored */
    @media (min-width: 1200px) {
      .site-header .container,
      .hero .container,
      .site-footer-light .container,
      main > section > .container {
        max-width: 1240px;
      }

      .converter-card {
        max-width: 960px;
      }

      .hero-title {
        max-width: 860px;
      }

      .hero-subtitle {
        max-width: 640px;
      }

      .footer-links-wrap {
        gap: clamp(48px, 6vw, 96px);
      }
    }

  
    /* Cleaner hero title sizing */
    .hero-title {
      max-width: 760px;
      font-size: clamp(2.15rem, 4.2vw, 3.85rem);
      line-height: 1.12;
      letter-spacing: -.035em;
      font-weight: 700;
    }

    .hero-subtitle {
      max-width: 620px;
    }

    @media (min-width: 1200px) {
      .hero-title {
        max-width: 820px;
        font-size: 4rem;
      }
    }

    @media (max-width: 767.98px) {
      .hero-title {
        font-size: 2.2rem;
        line-height: 1.15;
        letter-spacing: -.025em;
      }
    }

  
    /* Keep footer divider lines aligned with the main container width */
    .site-footer-light {
      border-top: 0;
      padding-top: 0;
    }

    .site-footer-light > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 38px;
    }

    .footer-bottom {
      border-top: 0;
      padding: 0 0 20px;
      margin-top: 28px;
    }

    .footer-bottom > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 20px;
    }

  
    /* Modern Premium Language Dropdown */
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      border-radius: 16px;
      padding: 10px 15px;
      font-weight: 700;
      color: var(--only-dark);
      box-shadow: 0 14px 36px rgba(255, 85, 0, .12);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }

    .language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      color: var(--only-dark);
      border-color: rgba(255, 85, 0, .28);
      background: linear-gradient(135deg, #fff, #fff5f2);
      box-shadow: 0 16px 42px rgba(255, 85, 0, .16);
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 22px;
      padding: 10px;
      min-width: 210px;
      box-shadow: 0 24px 60px rgba(16, 24, 40, .16);
      background: #fff;
    }

    .language-dropdown .dropdown-item,
    .lang-card-menu .dropdown-item {
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      color: var(--only-text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .language-dropdown .dropdown-item:hover,
    .language-dropdown .dropdown-item:focus,
    .lang-card-menu .dropdown-item:hover,
    .lang-card-menu .dropdown-item:focus {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .08);
    }

    .language-dropdown .dropdown-item.active,
    .language-dropdown .dropdown-item.active-preview,
    .lang-card-menu .dropdown-item.active,
    .lang-card-menu .dropdown-item.active-preview {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .10);
    }

    @media (max-width: 575.98px) {
      .language-dropdown .dropdown-toggle,
      .lang-card-btn {
        padding: 9px 12px;
        border-radius: 14px;
        font-size: .92rem;
      }

      .language-dropdown .dropdown-menu,
      .lang-card-menu {
        min-width: 190px;
      }
    }

    .lang-card-btn.dropdown-toggle::after {
      display: none;
    }

    /* Softer language dropdown shadow */
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

  
    /* Unified SoundSaver wordmark style */
    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: 800;
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: 800;
      margin-left: 1px;
    }

    .site-logo:hover .brand-only {
      color: var(--only-dark);
    }

    .site-logo:hover .brand-saver {
      color: var(--only-primary);
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    @media (max-width: 767.98px) {
      .site-header .site-logo {
        font-size: 1.55rem;
      }
    }

    /* Sitewide typography normalization */
    :root {
      --fs-xs: .72rem;
      --fs-sm: .88rem;
      --fs-md: .94rem;
      --fs-base: 1rem;
      --fs-lead: 1.08rem;
      --fs-card-title: 1.2rem;
      --fs-section-kicker: .86rem;
      --fw-regular: 500;
      --fw-medium: 600;
      --fw-semibold: 700;
      --fw-bold: 800;
    }

    body {
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
      line-height: 1.6;
    }

    .nav-link,
    .footer-link-col a,
    .mobile-menu-link,
    .mobile-bottom-nav a span {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
    }

    .btn,
    .dropdown-item,
    .accordion-button {
      font-weight: var(--fw-semibold);
    }

    .section-kicker,
    .hero-badge,
    .page-kicker,
    .status-badge {
      font-size: var(--fs-section-kicker);
      font-weight: var(--fw-bold);
    }

    .section-title,
    .page-title,
    .result-title,
    .hero-title {
      font-weight: var(--fw-bold);
      letter-spacing: -.045em;
    }

    .section-subtitle,
    .hero-subtitle,
    .page-lead,
    .result-subtitle,
    .text-secondary,
    .text-muted {
      font-weight: var(--fw-regular);
    }

    .feature-card h3,
    .step-card h3,
    .legal-card h2,
    .contact-method h2,
    .track-title,
    .footer-title {
      font-weight: var(--fw-bold);
    }

    .feature-card p,
    .step-card p,
    .accordion-body,
    .legal-card p,
    .legal-card li,
    .result-share-text,
    .coffee-support-text {
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
    }

    .small,
    small,
    .meta-pill,
    .trust-item,
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
    }

    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: var(--fw-bold);
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
      font-weight: var(--fw-bold);
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: var(--fw-bold);
      margin-left: 1px;
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    @media (max-width: 767.98px) {
      body {
        font-size: .97rem;
      }

      .site-header .site-logo {
        font-size: 1.55rem;
      }

      .nav-link,
      .footer-link-col a,
      .mobile-menu-link,
      .mobile-bottom-nav a span {
        font-size: .9rem;
      }
    }

    .benefits-heading-block {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    .benefits-heading-block .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--only-primary);
      background: rgba(255, 85, 0, .08);
      border: 1px solid rgba(255, 85, 0, .12);
      border-radius: 999px;
      padding: 8px 13px;
      margin-bottom: 14px;
      font-size: var(--fs-section-kicker, .86rem);
      font-weight: var(--fw-bold, 800);
    }

    .benefits-heading-block .section-title {
      color: var(--only-dark);
    }

    .benefits-heading-block .section-subtitle {
      max-width: 620px;
      color: var(--only-muted);
      font-size: 1.05rem;
    }

    .section-title + .section-subtitle {
      max-width: 680px;
      color: var(--only-muted);
      font-size: 1.05rem;
      line-height: 1.6;
    }

    .section-heading .section-subtitle {
      margin-top: -4px;
    }

    /* Paste + Clear controls inside converter input */
    .input-action-wrap {
      position: relative;
    }

    .converter-input.with-paste {
      padding-right: 176px;
    }

    .paste-btn {
      right: 88px;
    }

    .clear-url-btn {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      border: 0;
      background: rgba(16, 24, 40, .06);
      color: var(--only-muted);
      border-radius: 999px;
      padding: 8px 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      z-index: 3;
      transition: all .18s ease;
    }

    .clear-url-btn:hover,
    .clear-url-btn:focus {
      background: rgba(255, 85, 0, .10);
      color: var(--only-primary);
    }

    @media (max-width: 575.98px) {
      .converter-input.with-paste {
        padding-right: 138px;
      }

      .paste-btn {
        right: 68px;
        padding-left: 10px;
        padding-right: 10px;
      }

      .clear-url-btn {
        right: 10px;
        padding: 8px 10px;
      }

      .paste-btn span,
      .clear-url-btn span {
        display: none;
      }
    }

    /* Paste/Clear should use the same position, never appear side by side */
    .converter-input.with-paste {
      padding-right: 112px !important;
    }

    .paste-btn,
    .clear-url-btn {
      right: 14px !important;
      top: 50%;
      transform: translateY(-50%);
    }

    .clear-url-btn {
      min-width: 82px;
      justify-content: center;
    }

    @media (max-width: 575.98px) {
      .converter-input.with-paste {
        padding-right: 64px !important;
      }

      .paste-btn,
      .clear-url-btn {
        right: 10px !important;
      }

      .clear-url-btn {
        min-width: 42px;
      }
    }

    /* Improve footer link visibility */
    .site-footer-light .footer-link-col a,
    .site-footer-light .footer-bottom a {
      color: #475467 !important;
      font-weight: 600 !important;
      opacity: 1 !important;
      text-decoration: none;
    }

    .site-footer-light .footer-link-col a:hover,
    .site-footer-light .footer-bottom a:hover {
      color: var(--only-primary) !important;
    }

    .site-footer-light .footer-title {
      color: var(--only-dark) !important;
      font-weight: 800 !important;
    }

    .site-footer-light p,
    .site-footer-light .footer-bottom {
      color: #667085 !important;
      opacity: 1 !important;
    }

  
    /* Keep homepage section subtitles concise and visually one-line on larger screens */
    @media (min-width: 768px) {
      .section-heading .section-subtitle,
      .benefits-heading-block .section-subtitle,
      .section-title + .section-subtitle {
        max-width: none;
      }
    }

    /* Synced sitewide header/footer/link visibility */
    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: 800;
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
      font-weight: 800;
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: 800;
      margin-left: 1px;
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    .site-footer-light .footer-link-col a,
    .site-footer-light .footer-bottom a {
      color: #475467 !important;
      font-weight: 600 !important;
      opacity: 1 !important;
      text-decoration: none;
    }

    .site-footer-light .footer-link-col a:hover,
    .site-footer-light .footer-bottom a:hover {
      color: var(--only-primary) !important;
    }

    .site-footer-light .footer-title {
      color: var(--only-dark) !important;
      font-weight: 800 !important;
    }

    .site-footer-light p,
    .site-footer-light .footer-bottom {
      color: #667085 !important;
      opacity: 1 !important;
    }

    .site-footer-light {
      border-top: 0;
      padding-top: 0;
    }

    .site-footer-light > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 38px;
    }

    .footer-bottom {
      border-top: 0;
      padding: 0 0 20px;
      margin-top: 28px;
    }

    .footer-bottom > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 20px;
    }

    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
      font-weight: 700;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

    @media (max-width: 767.98px) {
      .site-header .site-logo {
        font-size: 1.55rem;
      }
    }

    /* Footer language menu uses the same premium dropdown style */
    .footer-language-dropdown {
      display: inline-flex;
      justify-content: flex-start;
    }

    .footer-language-dropdown .dropdown-toggle {
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      border-radius: 16px;
      padding: 10px 15px;
      font-size: .94rem;
      font-weight: 700;
      color: var(--only-dark);
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }

    .footer-language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .footer-language-dropdown .dropdown-toggle:hover,
    .footer-language-dropdown .dropdown-toggle:focus {
      color: var(--only-dark);
      border-color: rgba(255, 85, 0, .28);
      background: linear-gradient(135deg, #fff, #fff5f2);
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
    }

    .footer-language-dropdown .dropdown-menu {
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 22px;
      padding: 10px;
      min-width: 210px;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09);
      background: #fff;
    }

    .footer-language-dropdown .dropdown-item {
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      color: var(--only-text) !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .footer-language-dropdown .dropdown-item:hover,
    .footer-language-dropdown .dropdown-item:focus {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .08);
    }

    .footer-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .10);
    }

    /* Footer language expanded menu height fix */
    .site-footer-light .footer-language-dropdown .dropdown-menu,
    .site-footer-light .language-dropdown .dropdown-menu {
      min-height: 292px !important;
      padding: 14px !important;
      border-radius: 24px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-item,
    .site-footer-light .language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 14px !important;
      border-radius: 15px !important;
      line-height: 1.25 !important;
      font-size: .95rem !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-toggle,
    .site-footer-light .language-dropdown .dropdown-toggle {
      min-height: 46px !important;
      padding: 12px 16px !important;
    }

    @media (max-width: 767.98px) {
      .site-footer-light .footer-language-dropdown .dropdown-menu,
      .site-footer-light .language-dropdown .dropdown-menu {
        min-height: 280px !important;
      }
    }

    /* Direct footer dropdown expanded-size fix */
    .site-footer-light .footer-language-dropdown .dropdown-menu {
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
      overflow-y: auto !important;
      padding: 18px !important;
      width: 250px !important;
      border-radius: 26px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-menu.show {
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 6px !important;
      border-radius: 16px !important;
      font-size: 1rem !important;
      line-height: 1.25 !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-toggle {
      min-height: 50px !important;
      padding: 13px 17px !important;
    }

    /* Mobile offcanvas language dropdown fix */
    .mobile-offcanvas {
      min-height: 70vh !important;
    }

    .mobile-offcanvas .mobile-language-dropdown {
      width: 100%;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-toggle {
      width: 100%;
      min-height: 58px;
      border-radius: 18px;
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      color: var(--only-dark);
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      min-height: 330px !important;
      max-height: 330px !important;
      overflow-y: auto !important;
      margin-top: 12px !important;
      padding: 16px !important;
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 24px;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .10);
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu.show {
      min-height: 330px !important;
      max-height: 330px !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 7px !important;
      border-radius: 16px !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--only-text) !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item:hover,
    .mobile-offcanvas .mobile-language-dropdown .dropdown-item:focus,
    .mobile-offcanvas .mobile-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .09);
    }

    /* Mobile language dropdown should overlay links, not push them down */
    .mobile-offcanvas .mobile-language-dropdown {
      position: relative !important;
      z-index: 30 !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      min-height: auto !important;
      height: auto !important;
      max-height: 260px !important;
      overflow-y: auto !important;
      margin-top: 0 !important;
      z-index: 9999 !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu.show {
      position: absolute !important;
      min-height: auto !important;
      height: auto !important;
      max-height: 260px !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 15px !important;
      margin-bottom: 5px !important;
    }

    .mobile-offcanvas .offcanvas-body {
      overflow-y: auto;
      overflow-x: visible;
    }

    /* Prevent mobile language dropdown scroll from moving background/offcanvas links */
    .mobile-offcanvas.language-dropdown-open .offcanvas-body {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none;
    }

    .mobile-offcanvas.language-dropdown-open .mobile-language-dropdown,
    .mobile-offcanvas.language-dropdown-open .mobile-language-dropdown .dropdown-menu {
      touch-action: pan-y;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch;
      z-index: 10000 !important;
    }

    /* Lock background page while mobile offcanvas/footer menu is open */
    html.mobile-menu-page-locked,
    body.mobile-menu-page-locked {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none;
    }

    body.mobile-menu-page-locked {
      position: fixed !important;
      left: 0;
      right: 0;
      width: 100% !important;
    }

    #mobileMenu {
      overscroll-behavior: contain !important;
    }

    #mobileMenu .offcanvas-body {
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    /* Match How it works numbers with body text color */
    #how-it-works .step-number,
    #how-it-works .step-badge,
    #how-it-works .process-number,
    #how-it-works .how-step-number,
    #how-it-works .rounded-circle {
      color: var(--only-text) !important;
    }

    /* Converter processing loader */
    .converter-processing-status {
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: var(--only-text);
      font-size: .94rem;
      font-weight: 700;
      background: rgba(255, 85, 0, .08);
      border: 1px solid rgba(255, 85, 0, .14);
      border-radius: 999px;
      padding: 9px 15px;
    }

    .converter-processing-status .spinner-border {
      width: 1rem;
      height: 1rem;
      color: var(--only-primary);
      border-width: .16em;
    }

    #convert-submit-btn.is-processing {
      pointer-events: none;
      opacity: .92;
    }

    #convert-submit-btn .btn-spinner {
      width: 1rem;
      height: 1rem;
      border-width: .16em;
    }

    @media (max-width: 575.98px) {
      .converter-processing-status {
        width: 100%;
        border-radius: 16px;
      }
    }

    /* Theme-aligned converter button loader */
    .converter-processing-status,
    #converter-processing-status {
      display: none !important;
    }

    #convert-submit-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;
      min-width: 132px;
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
    }

    #convert-submit-btn.is-processing {
      opacity: 1 !important;
      pointer-events: none !important;
      background: linear-gradient(135deg, #ff5500, #ff7700) !important;
      border-color: #ff5500 !important;
      color: #fff !important;
      box-shadow: 0 12px 28px rgba(255, 85, 0, .22) !important;
    }

    #convert-submit-btn .btn-spinner {
      width: 1rem !important;
      height: 1rem !important;
      border-width: .16em !important;
      color: #fff !important;
      border-color: rgba(255,255,255,.42) !important;
      border-right-color: #fff !important;
      flex: 0 0 auto;
    }

    #convert-submit-btn.is-processing span:last-child {
      color: #fff !important;
      font-weight: 800 !important;
    }

    /* FAQ code tag styling */
    #faq code {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .08);
      border: 1px solid rgba(255, 85, 0, .12);
      border-radius: 8px;
      padding: 2px 6px;
      font-size: .88em;
      font-weight: 800;
    }

    /* Hero spacing update */
    .hero {
      padding: 15px 0 15px 0 !important;
    }

    /* How it works step numbers should be white */
    #how-it-works .step-number,
    #how-it-works .step-badge,
    #how-it-works .process-number,
    #how-it-works .how-step-number,
    #how-it-works .rounded-circle {
      color: #fff !important;
    }

    #how-it-works .step-number *,
    #how-it-works .step-badge *,
    #how-it-works .process-number *,
    #how-it-works .how-step-number *,
    #how-it-works .rounded-circle * {
      color: #fff !important;
    }


/* ===== index.html inline style 4 ===== */
/* Homepage footer row/link height match */
    .soundsaver-footer-v3 .footer-link-col ul,
    .site-footer-light .footer-link-col ul {
      display: grid !important;
      gap: 8px !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
    }

    .soundsaver-footer-v3 .footer-link-col li,
    .site-footer-light .footer-link-col li {
      min-height: 24px !important;
      display: flex !important;
      align-items: center !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .soundsaver-footer-v3 .footer-link-col a,
    .site-footer-light .footer-link-col a {
      min-height: 24px !important;
      display: inline-flex !important;
      align-items: center !important;
      line-height: 1.45 !important;
      padding: 0 !important;
      margin: 0 !important;
    }


/* ===== index.html inline style 6 ===== */
/* Final green trust icons under converter form */
    .hero .trust-row i.bi-check-circle,
    .hero .trust-row i.bi-shield-check,
    .hero .trust-row i.bi-lightning-charge {
      color: #16a34a !important;
      -webkit-text-fill-color: #16a34a !important;
    }


/* ===== index.html inline style 7 ===== */
/* Green checkmarks in Why choose SoundSaver section */
    #why-choose .bi-check-circle,
    #why-choose .bi-check-circle-fill,
    #why-choose .bi-check2,
    #why-choose .bi-check-lg,
    #why-choose .bi-patch-check,
    #why-choose .bi-patch-check-fill,
    .why-choose-list .bi-check-circle,
    .why-choose-list .bi-check-circle-fill,
    .why-choose-list .bi-check2,
    .why-choose-list .bi-check-lg,
    .why-choose-list .bi-patch-check,
    .why-choose-list .bi-patch-check-fill {
      color: #16a34a !important;
      -webkit-text-fill-color: #16a34a !important;
    }


/* ===== index.html inline style 8 ===== */
/* Blue styling only for Powerful features cards, not the Enjoying SoundSaver support section */
    .powerful-features-blue-only .feature-icon,
    .powerful-features-blue-only .icon-box,
    .powerful-features-blue-only .icon-wrap,
    .powerful-features-blue-only .feature-card-icon {
      background: #eff6ff !important;
      border-color: rgba(37, 99, 235, .14) !important;
      box-shadow: none !important;
    }

    .powerful-features-blue-only .feature-icon i,
    .powerful-features-blue-only .icon-box i,
    .powerful-features-blue-only .icon-wrap i,
    .powerful-features-blue-only .feature-card-icon i,
    .powerful-features-blue-only i.bi,
    .powerful-features-blue-only svg {
      color: #2563eb !important;
      fill: #2563eb !important;
      stroke: #2563eb !important;
      -webkit-text-fill-color: #2563eb !important;
    }


/* ===== index.html inline style 9 ===== */
/* Preview: green styling only for Benefits of Using SoundSaver icons */
    .benefits-green-preview-section .feature-icon,
    .benefits-green-preview-section .benefit-icon,
    .benefits-green-preview-section .icon-box,
    .benefits-green-preview-section .icon-wrap,
    .benefits-green-preview-section .card-icon {
      background: #f0fdf4 !important;
      border-color: rgba(22, 163, 74, .14) !important;
      box-shadow: none !important;
    }

    .benefits-green-preview-section .feature-icon i,
    .benefits-green-preview-section .benefit-icon i,
    .benefits-green-preview-section .icon-box i,
    .benefits-green-preview-section .icon-wrap i,
    .benefits-green-preview-section .card-icon i,
    .benefits-green-preview-section i.bi,
    .benefits-green-preview-section svg {
      color: #16a34a !important;
      fill: #16a34a !important;
      stroke: #16a34a !important;
      -webkit-text-fill-color: #16a34a !important;
    }


/* ===== index.html inline style 10 ===== */
/* Vertically center icon/text rows in Why choose SoundSaver section */
    .why-choose-align-center li,
    .why-choose-align-center .why-item,
    .why-choose-align-center .benefit-line,
    .why-choose-align-center .check-line,
    .why-choose-align-center .d-flex {
      align-items: center !important;
    }

    .why-choose-align-center i.bi-check-circle,
    .why-choose-align-center i.bi-check-circle-fill,
    .why-choose-align-center i.bi-check2,
    .why-choose-align-center i.bi-check-lg,
    .why-choose-align-center i.bi-patch-check,
    .why-choose-align-center i.bi-patch-check-fill {
      flex-shrink: 0 !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }


/* ===== index.html inline style 11 ===== */
/* Apply result-page coffee section color scheme to homepage support strip only */
    .homepage-coffee-result-colors {
      background: linear-gradient(135deg, #fff8e7, #fffdf6) !important;
      border: 1px solid #ffe2a4 !important;
      border-radius: 18px !important;
      box-shadow: 0 12px 28px rgba(245, 158, 11, .10) !important;
    }

    /* Match result page text colors: no brown override */
    .homepage-coffee-result-colors h3,
    .homepage-coffee-result-colors .fw-semibold {
      color: inherit !important;
    }

    .homepage-coffee-result-colors p,
    .homepage-coffee-result-colors .text-secondary,
    .homepage-coffee-result-colors .text-muted {
      color: var(--bs-secondary-color, #6c757d) !important;
      opacity: 1 !important;
    }

    /* Coffee icon should be plain, not inside a circle */
    .homepage-coffee-result-colors .coffee-icon-plain,
    .homepage-coffee-result-colors .icon-circle,
    .homepage-coffee-result-colors .icon-yellow {
      width: auto !important;
      height: auto !important;
      min-width: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      color: #b45309 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .homepage-coffee-result-colors .coffee-icon-plain i,
    .homepage-coffee-result-colors .icon-circle i,
    .homepage-coffee-result-colors .icon-yellow i {
      color: #b45309 !important;
      -webkit-text-fill-color: #b45309 !important;
      font-size: 1.45rem !important;
      line-height: 1 !important;
    }

    .homepage-coffee-result-colors .btn-coffee {
      color: #b45309 !important;
      background: #fff !important;
      border: 1px solid #f59e0b !important;
      border-radius: 14px !important;
      font-weight: 700 !important;
      box-shadow: none !important;
    }

    .homepage-coffee-result-colors .btn-coffee i {
      color: #b45309 !important;
      -webkit-text-fill-color: #b45309 !important;
    }

    .homepage-coffee-result-colors .btn-coffee:hover {
      color: #fff !important;
      background: #f59e0b !important;
      border-color: #f59e0b !important;
    }

    .homepage-coffee-result-colors .btn-coffee:hover i {
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
    }


/* ===== index.html inline style 12 ===== */
/* Keep homepage coffee text aligned after making the coffee icon plain */
    .homepage-coffee-result-colors .coffee-icon-plain,
    .homepage-coffee-result-colors .icon-circle,
    .homepage-coffee-result-colors .icon-yellow {
      width: 46px !important;
      min-width: 46px !important;
      height: auto !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #b45309 !important;
    }

    .homepage-coffee-result-colors .coffee-icon-plain i,
    .homepage-coffee-result-colors .icon-circle i,
    .homepage-coffee-result-colors .icon-yellow i {
      color: #b45309 !important;
      -webkit-text-fill-color: #b45309 !important;
      font-size: 1.45rem !important;
      line-height: 1 !important;
    }

    .homepage-coffee-result-colors .row > .col {
      padding-left: .25rem !important;
    }


/* ===== result.html inline style 1 ===== */
:root {
      --only-dark: #071126;
      --only-text: #101828;
      --only-muted: #667085;
      --only-border: #e7eaf1;
      --only-soft: #f8f9fd;
      --only-primary: #ff5500;
      --only-primary-2: #ff2200;
      --only-blue: #2563eb;
      --only-green: #12b76a;
      --only-yellow: #f59e0b;
    }

    html, body {
      overflow-x: hidden;
    }

    body {
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--only-text);
      background: #fff;
      padding-bottom: 0;
    }

    a { text-decoration: none; }

    .site-logo {
      display: inline-flex;
      align-items: center;
      font-size: 1.9rem;
      font-weight: 700;
      letter-spacing: -.05em;
      line-height: 1;
      color: var(--only-dark);
    }

    .site-logo span { color: var(--only-primary); }

    .site-logo:hover,
    .site-logo:hover span { color: var(--only-primary); }

    .site-header {
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(231,234,241,.75);
    }

    .nav-link {
      color: var(--only-text);
      font-weight: 600;
    }

    .nav-link:hover { color: var(--only-primary); }

    .btn-only {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--only-primary);
      --bs-btn-border-color: var(--only-primary);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #e04b00;
      --bs-btn-hover-border-color: #e04b00;
      border-radius: 14px;
      font-weight: 700;
      box-shadow: 0 14px 28px rgba(255,85,0,.24);
    }

    .btn-dropbox {
      color: #101828;
      background: #fff;
      border: 1px solid #cfd6e4;
      border-radius: 14px;
      font-weight: 700;
    }

    .btn-dropbox:hover {
      background: #f7f8fc;
      border-color: #b8c2d6;
    }

    .btn-dropbox.uploading {
      color: #175cd3;
      background: #eff4ff;
      border-color: #b2ccff;
      pointer-events: none;
    }

    .btn-dropbox.saved {
      color: #067647;
      background: #ecfdf3;
      border-color: #abefc6;
    }

    .text-gradient {
      background: linear-gradient(135deg, var(--only-primary), var(--only-primary-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .result-hero {
      position: relative;
      overflow: hidden;
      padding: 54px 0 34px;
      background:
        radial-gradient(circle at 10% 28%, rgba(255,85,0,.10), transparent 25%),
        radial-gradient(circle at 86% 22%, rgba(139,92,246,.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fff9f6 56%, #f8f9fd 100%);
    }

    .hero-title {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin-inline: auto;
      font-size: clamp(2.1rem, 4.2vw, 4rem);
      line-height: 1.12;
      letter-spacing: -.035em;
      font-weight: 700;
      color: var(--only-text);
    }

    .hero-subtitle {
      position: relative;
      z-index: 1;
      max-width: 620px;
      margin-inline: auto;
      color: #4b5565;
      font-size: 1.08rem;
      line-height: 1.7;
    }

    .result-section {
      background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 70%);
      padding: 20px 0 56px;
    }

    .result-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 24px 70px rgba(16,24,40,.08);
    }

    .success-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 999px;
      background: #ecfdf3;
      color: #067647;
      font-weight: 700;
    }

    .track-thumb {
      position: relative;
      min-height: 270px;
      border-radius: 22px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(7,17,38,.08), rgba(255,85,0,.24)),
        url("../images/soundcloud_placeholder.png") center/cover no-repeat;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
    }

    .play-button {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255,255,255,.24);
      color: #fff;
      border: 2px solid rgba(255,255,255,.85);
      font-size: 2rem;
      backdrop-filter: blur(8px);
    }

    .track-title {
      font-size: 1.35rem;
      line-height: 1.35;
      letter-spacing: -.025em;
      font-weight: 700;
    }

    .meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 13px;
      border-radius: 13px;
      background: #f4f6fa;
      color: #344054;
      font-weight: 600;
      font-size: .92rem;
    }

    .download-panel {
      border-left: 1px solid var(--only-border);
      padding-left: 26px;
    }

    .dropbox-upload-box {
      display: none;
      border: 1px solid #b2ccff;
      background: #eff4ff;
      border-radius: 18px;
      padding: 16px;
      margin-bottom: 16px;
      color: #175cd3;
    }

    .dropbox-upload-box.show {
      display: block;
    }

    .dropbox-progress-shell {
      height: 12px;
      border-radius: 999px;
      background: #dbeafe;
      overflow: hidden;
      border: 1px solid #b2ccff;
    }

    .dropbox-progress-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(135deg, #2563eb, #60a5fa);
      transition: width .35s ease;
    }

    .dropbox-saved-alert {
      display: none;
      border: 1px solid #abefc6;
      background: #ecfdf3;
      color: #067647;
      border-radius: 18px;
      padding: 16px;
      margin-bottom: 16px;
      font-weight: 500;
    }

    .dropbox-saved-alert.show {
      display: block;
    }

    .upload-mini-steps {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .upload-step {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .88rem;
      font-weight: 600;
      color: #475467;
    }

    .upload-step.done {
      color: #067647;
    }

    .upload-step.active {
      color: #175cd3;
    }

    .spinner-mini {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(37,99,235,.25);
      border-top-color: #2563eb;
      animation: spin .8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .coffee-box {
      background: linear-gradient(135deg, #fff8e7, #fffdf6);
      border: 1px solid #ffe2a4;
      border-radius: 18px;
      padding: 16px;
      text-align: center;
    }

    .btn-coffee {
      color: #b45309;
      background: #fff;
      border: 1px solid #f59e0b;
      border-radius: 14px;
      font-weight: 700;
    }

    .btn-coffee:hover {
      color: #fff;
      background: #f59e0b;
      border-color: #f59e0b;
    }

    .share-btn {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: #fff;
      border: 1px solid var(--only-border);
      color: var(--only-text);
    }

    .share-btn:hover {
      color: var(--only-primary);
      border-color: rgba(255,85,0,.35);
      background: #fff5f7;
    }

    .safe-alert {
      border: 1px solid #abefc6;
      background: #ecfdf3;
      color: #067647;
      border-radius: 16px;
      padding: 15px 18px;
      font-weight: 500;
    }

    .site-footer-light {
      background: #fff;
      border-top: 1px solid var(--only-border);
      padding: 38px 0 0;
      margin-bottom: 0;
    }

    .site-footer-light p,
    .site-footer-light a,
    .site-footer-light li {
      color: var(--only-muted);
    }

    .site-footer-light a:hover {
      color: var(--only-primary);
    }

    .footer-title {
      color: var(--only-text);
      font-weight: 700;
      margin-bottom: 14px;
    }

    .footer-links-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: clamp(32px, 5vw, 72px);
      flex-wrap: wrap;
      text-align: left;
    }

    .footer-link-col {
      min-width: 140px;
    }

    .footer-bottom {
      background: #fff;
      border-top: 1px solid var(--only-border);
      padding: 20px 0;
      margin-top: 28px;
    }

    .mobile-bottom-nav {
      position: fixed;
      z-index: 1030;
      left: 12px;
      right: 12px;
      bottom: 12px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(231,234,241,.95);
      border-radius: 26px;
      box-shadow: 0 -6px 30px rgba(16,24,40,.16);
      backdrop-filter: blur(18px);
      overflow: visible;
    }

    .mobile-bottom-nav .container {
      padding-left: 8px;
      padding-right: 8px;
    }

    .mobile-bottom-nav a,
    .mobile-menu-button {
      position: relative;
      color: #667085;
      font-size: .72rem;
      font-weight: 700;
      padding: 12px 0 10px;
      min-height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: 0;
      background: transparent;
      width: 100%;
      isolation: isolate;
    }

    .mobile-bottom-nav i,
    .mobile-menu-button i {
      font-size: 1.3rem;
      line-height: 1;
    }

    .mobile-bottom-nav a.active {
      color: var(--only-primary);
    }

    .mobile-bottom-nav a.active::before {
      content: "";
      position: absolute;
      top: 8px;
      width: 38px;
      height: 28px;
      border-radius: 999px;
      background: rgba(255,85,0,.1);
      z-index: -1;
    }

    .mobile-offcanvas {
      border-radius: 28px 28px 0 0;
      border: 0;
      min-height: 52vh;
    }

    .mobile-menu-link {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 4px;
      color: var(--only-text);
      font-weight: 700;
      border-bottom: 1px solid #f0f2f6;
    }

    .mobile-menu-link i {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: #ffefe5;
      color: var(--only-primary);
      font-size: 1.2rem;
    }

    @media (min-width: 1200px) {
      .site-header .container,
      .result-hero .container,
      .result-section .container,
      .site-footer-light .container {
        max-width: 1240px;
      }
    }

    @media (max-width: 991.98px) {
      .download-panel {
        border-left: 0;
        border-top: 1px solid var(--only-border);
        padding-left: 0;
        padding-top: 24px;
      }
    }

    @media (min-width: 768px) {
      .mobile-bottom-nav,
      .mobile-offcanvas {
        display: none !important;
      }
    }

    @media (max-width: 767.98px) {
      body {
        padding-bottom: 88px;
      }

      .site-logo {
        font-size: 1.55rem;
      }

      .site-header .btn {
        font-size: .88rem;
      }

      .result-hero {
        padding: 36px 0 26px;
      }

      .hero-title {
        font-size: 2.2rem;
        line-height: 1.15;
        letter-spacing: -.025em;
      }

      .hero-subtitle {
        font-size: 1rem;
      }

      .result-card {
        padding: 18px;
        border-radius: 24px;
      }

      .track-thumb {
        min-height: 210px;
      }

      .coffee-box {
        text-align: left;
      }

      .footer-links-wrap {
        justify-content: flex-start;
      }
    }
  
    .upload-step .spinner-border {
      width: 14px;
      height: 14px;
      border-width: 2px;
      flex: 0 0 auto;
    }

    .btn-dropbox .spinner-border {
      width: 1rem;
      height: 1rem;
      border-width: 2px;
    }

  
    html {
      scroll-behavior: smooth;
    }

    #download-result {
      scroll-margin-top: 96px;
    }

  
    .track-info-panel {
      padding-top: 4px;
    }

    @media (max-width: 991.98px) {
      .track-info-panel {
        padding-top: 0;
      }
    }

  
    .btn-convert-another {
      color: var(--only-primary);
      background: #fff;
      border: 1px solid rgba(255, 85, 0, .28);
      border-radius: 14px;
      font-weight: 700;
    }

    .btn-convert-another:hover {
      color: #fff;
      background: var(--only-primary);
      border-color: var(--only-primary);
    }

    .coffee-box {
      position: relative;
    }

    .coffee-box::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 18px;
      pointer-events: none;
      box-shadow: 0 12px 28px rgba(245, 158, 11, .10);
    }

  
    .left-result-area .result-share-row {
      border-top: 1px solid var(--only-border);
      margin-top: 22px;
      padding-top: 20px;
    }

    .result-share-title {
      color: var(--only-text);
      font-weight: 700;
      margin-bottom: 8px;
    }

    .result-share-text {
      color: var(--only-muted);
      font-size: .92rem;
      margin-bottom: 12px;
    }

    @media (max-width: 991.98px) {
      .left-result-area .result-share-row {
        margin-top: 18px;
      }
    }

    .mobile-share-card {
      background: #fff;
      border: 1px solid var(--only-border);
      border-radius: 22px;
      box-shadow: 0 18px 55px rgba(16, 24, 40, .08);
      padding: 20px;
      margin-top: 18px;
    }

    .mobile-share-card .result-share-row {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    @media (max-width: 991.98px) {
      .result-share-row {
        border-top: 0;
      }
    }

    .result-card > .mobile-share-card {
      box-shadow: none;
      margin-top: 22px;
      margin-bottom: 0;
      border: 1px solid var(--only-border);
      border-radius: 20px;
      background: #fff;
      padding: 18px;
    }

    @media (max-width: 991.98px) {
      .result-card > .mobile-share-card {
        border: 1px solid var(--only-border);
        border-radius: 18px;
        background: #fff;
        padding: 16px;
      }
    }

    .safe-alert {
      align-items: center;
    }

    .safe-alert i {
      line-height: 1;
      flex: 0 0 auto;
    }

    .safe-alert div {
      line-height: 1.45;
    }

  
    /* Modern Premium Language Dropdown */
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      border-radius: 16px;
      padding: 10px 15px;
      font-weight: 700;
      color: var(--only-dark);
      box-shadow: 0 14px 36px rgba(255, 85, 0, .12);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }

    .language-dropdown .dropdown-toggle::after,
    .lang-card-btn.dropdown-toggle::after {
      display: none;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      color: var(--only-dark);
      border-color: rgba(255, 85, 0, .28);
      background: linear-gradient(135deg, #fff, #fff5f2);
      box-shadow: 0 16px 42px rgba(255, 85, 0, .16);
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 22px;
      padding: 10px;
      min-width: 210px;
      box-shadow: 0 24px 60px rgba(16, 24, 40, .16);
      background: #fff;
    }

    .language-dropdown .dropdown-item,
    .lang-card-menu .dropdown-item {
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      color: var(--only-text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .language-dropdown .dropdown-item:hover,
    .language-dropdown .dropdown-item:focus,
    .lang-card-menu .dropdown-item:hover,
    .lang-card-menu .dropdown-item:focus {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .08);
    }

    .language-dropdown .dropdown-item.active,
    .language-dropdown .dropdown-item.active-preview,
    .lang-card-menu .dropdown-item.active,
    .lang-card-menu .dropdown-item.active-preview {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .10);
    }

    @media (max-width: 575.98px) {
      .language-dropdown .dropdown-toggle,
      .lang-card-btn {
        padding: 9px 12px;
        border-radius: 14px;
        font-size: .92rem;
      }

      .language-dropdown .dropdown-menu,
      .lang-card-menu {
        min-width: 190px;
      }
    }

    /* Softer language dropdown shadow */
    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

  
    /* Sitewide typography normalization */
    :root {
      --fs-xs: .72rem;
      --fs-sm: .88rem;
      --fs-md: .94rem;
      --fs-base: 1rem;
      --fs-lead: 1.08rem;
      --fs-card-title: 1.2rem;
      --fs-section-kicker: .86rem;
      --fw-regular: 500;
      --fw-medium: 600;
      --fw-semibold: 700;
      --fw-bold: 800;
    }

    body {
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
      line-height: 1.6;
    }

    .nav-link,
    .footer-link-col a,
    .mobile-menu-link,
    .mobile-bottom-nav a span {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
    }

    .btn,
    .dropdown-item,
    .accordion-button {
      font-weight: var(--fw-semibold);
    }

    .section-kicker,
    .hero-badge,
    .page-kicker,
    .status-badge {
      font-size: var(--fs-section-kicker);
      font-weight: var(--fw-bold);
    }

    .section-title,
    .page-title,
    .result-title,
    .hero-title {
      font-weight: var(--fw-bold);
      letter-spacing: -.045em;
    }

    .section-subtitle,
    .hero-subtitle,
    .page-lead,
    .result-subtitle,
    .text-secondary,
    .text-muted {
      font-weight: var(--fw-regular);
    }

    .feature-card h3,
    .step-card h3,
    .legal-card h2,
    .contact-method h2,
    .track-title,
    .footer-title {
      font-weight: var(--fw-bold);
    }

    .feature-card p,
    .step-card p,
    .accordion-body,
    .legal-card p,
    .legal-card li,
    .result-share-text,
    .coffee-support-text {
      font-size: var(--fs-base);
      font-weight: var(--fw-regular);
    }

    .small,
    small,
    .meta-pill,
    .trust-item,
    .shortcut-tip,
    .paste-message {
      font-size: var(--fs-sm);
    }

    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
    }

    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: var(--fw-bold);
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
      font-weight: var(--fw-bold);
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: var(--fw-bold);
      margin-left: 1px;
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    @media (max-width: 767.98px) {
      body {
        font-size: .97rem;
      }

      .site-header .site-logo {
        font-size: 1.55rem;
      }

      .nav-link,
      .footer-link-col a,
      .mobile-menu-link,
      .mobile-bottom-nav a span {
        font-size: .9rem;
      }
    }

    /* Synced sitewide header/footer/link visibility */
    .site-logo {
      display: inline-flex;
      align-items: baseline;
      gap: 0;
      color: var(--only-dark) !important;
      font-weight: 800;
      letter-spacing: -.055em;
      line-height: 1;
      text-decoration: none;
    }

    .site-logo .brand-only {
      color: var(--only-dark);
      font-weight: 800;
    }

    .site-logo .brand-saver {
      color: var(--only-primary);
      font-weight: 800;
      margin-left: 1px;
    }

    .site-header .site-logo,
    .site-footer-light .site-logo {
      font-size: 1.9rem;
    }

    .mobile-offcanvas .site-logo {
      font-size: 1.55rem;
    }

    .site-footer-light .footer-link-col a,
    .site-footer-light .footer-bottom a {
      color: #475467 !important;
      font-weight: 600 !important;
      opacity: 1 !important;
      text-decoration: none;
    }

    .site-footer-light .footer-link-col a:hover,
    .site-footer-light .footer-bottom a:hover {
      color: var(--only-primary) !important;
    }

    .site-footer-light .footer-title {
      color: var(--only-dark) !important;
      font-weight: 800 !important;
    }

    .site-footer-light p,
    .site-footer-light .footer-bottom {
      color: #667085 !important;
      opacity: 1 !important;
    }

    .site-footer-light {
      border-top: 0;
      padding-top: 0;
    }

    .site-footer-light > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 38px;
    }

    .footer-bottom {
      border-top: 0;
      padding: 0 0 20px;
      margin-top: 28px;
    }

    .footer-bottom > .container {
      border-top: 1px solid var(--only-border);
      padding-top: 20px;
    }

    .language-dropdown .dropdown-toggle,
    .lang-card-btn {
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05) !important;
      font-weight: 700;
    }

    .language-dropdown .dropdown-toggle:hover,
    .language-dropdown .dropdown-toggle:focus,
    .lang-card-btn:hover,
    .lang-card-btn:focus {
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07) !important;
    }

    .language-dropdown .dropdown-menu,
    .lang-card-menu {
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09) !important;
    }

    @media (max-width: 767.98px) {
      .site-header .site-logo {
        font-size: 1.55rem;
      }
    }

    /* Footer language menu uses the same premium dropdown style */
    .footer-language-dropdown {
      display: inline-flex;
      justify-content: flex-start;
    }

    .footer-language-dropdown .dropdown-toggle {
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      border-radius: 16px;
      padding: 10px 15px;
      font-size: .94rem;
      font-weight: 700;
      color: var(--only-dark);
      box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
    }

    .footer-language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .footer-language-dropdown .dropdown-toggle:hover,
    .footer-language-dropdown .dropdown-toggle:focus {
      color: var(--only-dark);
      border-color: rgba(255, 85, 0, .28);
      background: linear-gradient(135deg, #fff, #fff5f2);
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
    }

    .footer-language-dropdown .dropdown-menu {
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 22px;
      padding: 10px;
      min-width: 210px;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .09);
      background: #fff;
    }

    .footer-language-dropdown .dropdown-item {
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      color: var(--only-text) !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .footer-language-dropdown .dropdown-item:hover,
    .footer-language-dropdown .dropdown-item:focus {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .08);
    }

    .footer-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .10);
    }

    /* Footer language expanded menu height fix */
    .site-footer-light .footer-language-dropdown .dropdown-menu,
    .site-footer-light .language-dropdown .dropdown-menu {
      min-height: 292px !important;
      padding: 14px !important;
      border-radius: 24px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-item,
    .site-footer-light .language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 14px !important;
      border-radius: 15px !important;
      line-height: 1.25 !important;
      font-size: .95rem !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-toggle,
    .site-footer-light .language-dropdown .dropdown-toggle {
      min-height: 46px !important;
      padding: 12px 16px !important;
    }

    @media (max-width: 767.98px) {
      .site-footer-light .footer-language-dropdown .dropdown-menu,
      .site-footer-light .language-dropdown .dropdown-menu {
        min-height: 280px !important;
      }
    }

    /* Direct footer dropdown expanded-size fix */
    .site-footer-light .footer-language-dropdown .dropdown-menu {
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
      overflow-y: auto !important;
      padding: 18px !important;
      width: 250px !important;
      border-radius: 26px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-menu.show {
      height: 360px !important;
      min-height: 360px !important;
      max-height: 360px !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 6px !important;
      border-radius: 16px !important;
      font-size: 1rem !important;
      line-height: 1.25 !important;
    }

    .site-footer-light .footer-language-dropdown .dropdown-toggle {
      min-height: 50px !important;
      padding: 13px 17px !important;
    }

    /* Mobile offcanvas language dropdown fix */
    .mobile-offcanvas {
      min-height: 70vh !important;
    }

    .mobile-offcanvas .mobile-language-dropdown {
      width: 100%;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-toggle {
      width: 100%;
      min-height: 58px;
      border-radius: 18px;
      border: 1px solid rgba(255, 85, 0, .18);
      background: linear-gradient(135deg, #fff, #fff8f5);
      color: var(--only-dark);
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-toggle::after {
      display: none;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      min-height: 330px !important;
      max-height: 330px !important;
      overflow-y: auto !important;
      margin-top: 12px !important;
      padding: 16px !important;
      border: 1px solid rgba(255, 85, 0, .16);
      border-radius: 24px;
      box-shadow: 0 12px 34px rgba(16, 24, 40, .10);
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu.show {
      min-height: 330px !important;
      max-height: 330px !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item {
      min-height: 54px !important;
      padding: 15px 16px !important;
      margin-bottom: 7px !important;
      border-radius: 16px !important;
      font-size: 1rem !important;
      font-weight: 800 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--only-text) !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item:hover,
    .mobile-offcanvas .mobile-language-dropdown .dropdown-item:focus,
    .mobile-offcanvas .mobile-language-dropdown .dropdown-item.active-preview {
      color: var(--only-primary) !important;
      background: rgba(255, 85, 0, .09);
    }

    /* Mobile language dropdown should overlay links, not push them down */
    .mobile-offcanvas .mobile-language-dropdown {
      position: relative !important;
      z-index: 30 !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      min-height: auto !important;
      height: auto !important;
      max-height: 260px !important;
      overflow-y: auto !important;
      margin-top: 0 !important;
      z-index: 9999 !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu.show {
      position: absolute !important;
      min-height: auto !important;
      height: auto !important;
      max-height: 260px !important;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-item {
      min-height: 48px !important;
      padding: 13px 15px !important;
      margin-bottom: 5px !important;
    }

    .mobile-offcanvas .offcanvas-body {
      overflow-y: auto;
      overflow-x: visible;
    }

    /* Prevent mobile language dropdown scroll from moving background/offcanvas links */
    .mobile-offcanvas.language-dropdown-open .offcanvas-body {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none;
    }

    .mobile-offcanvas.language-dropdown-open .mobile-language-dropdown,
    .mobile-offcanvas.language-dropdown-open .mobile-language-dropdown .dropdown-menu {
      touch-action: pan-y;
    }

    .mobile-offcanvas .mobile-language-dropdown .dropdown-menu {
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch;
      z-index: 10000 !important;
    }

    /* Lock background page while mobile offcanvas/footer menu is open */
    html.mobile-menu-page-locked,
    body.mobile-menu-page-locked {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none;
    }

    body.mobile-menu-page-locked {
      position: fixed !important;
      left: 0;
      right: 0;
      width: 100% !important;
    }

    #mobileMenu {
      overscroll-behavior: contain !important;
    }

    #mobileMenu .offcanvas-body {
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    /* Result page mz shortcut tip */
    .result-shortcut-tip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      color: var(--only-text);
      background: rgba(255, 85, 0, .07);
      border: 1px solid rgba(255, 85, 0, .14);
      border-radius: 18px;
      padding: 12px 14px;
      font-size: .92rem;
      font-weight: 650;
      line-height: 1.45;
      text-align: left;
    }

    .result-shortcut-tip i {
      color: var(--only-primary);
      font-size: 1.05rem;
      line-height: 1.35;
      flex: 0 0 auto;
    }

    .result-shortcut-tip code {
      color: var(--only-primary);
      background: rgba(255, 85, 0, .10);
      border: 1px solid rgba(255, 85, 0, .12);
      border-radius: 8px;
      padding: 2px 6px;
      font-size: .88em;
      font-weight: 800;
    }

    @media (max-width: 575.98px) {
      .result-shortcut-tip {
        border-radius: 16px;
        padding: 11px 12px;
        font-size: .9rem;
      }
    }

    /* Modern result shortcut tip icon */
    .result-shortcut-tip {
      align-items: center !important;
      gap: 12px !important;
      background: linear-gradient(135deg, rgba(255, 85, 0, .075), rgba(255, 85, 0, .035)) !important;
      border: 1px solid rgba(255, 85, 0, .14) !important;
      box-shadow: 0 10px 24px rgba(16, 24, 40, .04) !important;
    }

    .result-shortcut-icon {
      width: 34px;
      height: 34px;
      min-width: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, #ff5500, #ff8833);
      box-shadow: 0 8px 18px rgba(255, 85, 0, .20);
    }

    .result-shortcut-icon i {
      color: #fff !important;
      font-size: 1rem !important;
      line-height: 1 !important;
    }

    @media (max-width: 575.98px) {
      .result-shortcut-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 11px;
      }
    }

    /* Bulb icon for result shortcut tip */
    .result-shortcut-icon .bi-lightbulb-fill {
      color: #fff !important;
      font-size: 1rem !important;
      line-height: 1 !important;
    }


/* ===== result.html inline style 5 ===== */
/* MP3 badge: bottom-left, styled like the mz shortcut tip icon */
    .track-thumb {
      position: relative !important;
    }

    .track-thumb .play-button.audio-badge.mz-style-badge {
      position: absolute !important;
      top: auto !important;
      right: auto !important;
      left: 12px !important;
      bottom: 12px !important;
      transform: none !important;
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
      padding: 0 !important;
      border-radius: 12px !important;
      cursor: default !important;
      pointer-events: none !important;
      color: #fff !important;
      background: linear-gradient(135deg, #ff5500, #ff8833) !important;
      border: 0 !important;
      box-shadow: 0 8px 18px rgba(255, 85, 0, .20) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .track-thumb .play-button.audio-badge.mz-style-badge::before,
    .track-thumb .play-button.audio-badge.mz-style-badge::after {
      display: none !important;
      content: none !important;
    }

    .track-thumb .play-button.audio-badge.mz-style-badge i {
      color: #fff !important;
      fill: #fff !important;
      stroke: #fff !important;
      -webkit-text-fill-color: #fff !important;
      font-size: 1rem !important;
      line-height: 1 !important;
    }


/* ===== result.html inline style 6 ===== */
/* SoundCloud artwork: force clean 16:9 frame and crop overflow */
    .track-thumb {
      position: relative !important;
      width: 100% !important;
      aspect-ratio: 16 / 9 !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
    }

    .track-thumb img,
    .track-thumb picture,
    .track-thumb picture img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center center !important;
      display: block !important;
    }

    .track-thumb picture {
      position: absolute !important;
      inset: 0 !important;
    }

    .track-thumb > img {
      position: absolute !important;
      inset: 0 !important;
    }


/* ===== result.html inline style 7 ===== */
/* Preview: duration moved into meta pill row */
    .track-info-panel .meta-pill {
      white-space: nowrap;
    }


/* ===== result.html inline style 8 ===== */
/* Tighten result metadata pills so they fit in one row */
    .track-info-panel .meta-pill {
      padding: 6px 9px !important;
      font-size: .82rem !important;
      line-height: 1.15 !important;
      gap: 4px !important;
      white-space: nowrap !important;
      border-radius: 999px !important;
    }

    .track-info-panel .meta-pill i {
      font-size: .88rem !important;
      margin-right: 2px !important;
    }

    .track-info-panel .d-flex.flex-wrap:has(.meta-pill) {
      gap: 6px !important;
      margin-bottom: 16px !important;
    }

    @media (max-width: 575.98px) {
      .track-info-panel .meta-pill {
        padding: 5px 7px !important;
        font-size: .76rem !important;
      }

      .track-info-panel .meta-pill i {
        font-size: .8rem !important;
        margin-right: 1px !important;
      }

      .track-info-panel .d-flex.flex-wrap:has(.meta-pill) {
        gap: 5px !important;
      }
    }


/* ===== result.html inline style 9 ===== */
/* Reduce result page track title size */
    .track-info-panel .track-title {
      font-size: 1.22rem !important;
      line-height: 1.35 !important;
      margin-bottom: 14px !important;
    }

    @media (max-width: 575.98px) {
      .track-info-panel .track-title {
        font-size: 1.08rem !important;
        line-height: 1.35 !important;
      }
    }


/* ===== result.html inline style 10 ===== */
/* MZ shortcut tip: equal spacing on desktop, hidden on mobile */
    .result-shortcut-tip {
      margin-top: 16px !important;
      margin-bottom: 16px !important;
    }

    @media (max-width: 991.98px) {
      .result-shortcut-tip {
        display: none !important;
      }
    }


/* ===== result.html inline style 11 ===== */
/* Donation modal after MP3 download */
    .support-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1080;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .54);
      backdrop-filter: blur(7px);
    }

    .support-modal-overlay.is-visible {
      display: flex;
    }

    .support-modal-card {
      width: min(100%, 410px);
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255, 226, 164, .85);
      background: linear-gradient(135deg, #fff8e7, #fffdf6);
      box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
      padding: 28px;
      text-align: center;
      animation: supportModalIn .22s ease-out;
    }

    @keyframes supportModalIn {
      from { transform: translateY(12px) scale(.98); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .support-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      background: rgba(180, 83, 9, .08);
      color: #92400e;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background .18s ease, transform .18s ease;
    }

    .support-modal-close:hover {
      background: rgba(180, 83, 9, .14);
      transform: rotate(90deg);
    }

    .support-modal-icon {
      width: 62px;
      height: 62px;
      margin: 0 auto 16px;
      border-radius: 20px;
      background: transparent;
      color: #b45309;
      border: 1px solid #f59e0b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 28px rgba(245, 158, 11, .14);
      font-size: 1.75rem;
    }

    .support-modal-title {
      margin: 0 0 8px;
      font-size: 1.45rem;
      line-height: 1.25;
      font-weight: 800;
      color: #111827;
      letter-spacing: -.02em;
    }

    .support-modal-text {
      margin: 0 auto 20px;
      max-width: 340px;
      color: #6b7280;
      font-size: .96rem;
      line-height: 1.65;
      text-align: justify;
      text-align-last: center;
    }

    .support-modal-actions {
      display: grid;
      gap: 10px;
    }

    .support-modal-btn {
      min-height: 46px;
      border-radius: 14px;
      border: 1px solid transparent;
      padding: 10px 14px;
      font-weight: 750;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .support-modal-btn:hover {
      transform: translateY(-1px);
      text-decoration: none;
    }

    .support-modal-btn-coffee {
      background: transparent;
      color: #b45309;
      border-color: #f59e0b;
      box-shadow: 0 10px 22px rgba(245, 158, 11, .16);
    }

    .support-modal-btn-coffee:hover {
      background: #f59e0b;
      color: #fff;
      box-shadow: 0 13px 26px rgba(245, 158, 11, .24);
    }

    .support-modal-btn-muted {
      background: transparent;
      color: #92400e;
      border-color: rgba(180, 83, 9, .18);
    }

    @media (max-width: 575.98px) {
      .support-modal-card {
        border-radius: 20px;
        padding: 24px 18px;
      }

      .support-modal-title {
        font-size: 1.28rem;
      }
    }


/* ===== result.html inline style 12 ===== */
/* Dropbox status: keep the original button style; only add a small spinner */
    .dropbox-status-spinner {
      width: 1rem;
      height: 1rem;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      display: inline-block;
      animation: dropboxSpin .72s linear infinite;
      vertical-align: -2px;
      margin-right: 8px;
    }

    @keyframes dropboxSpin {
      to { transform: rotate(360deg); }
    }

/* ===== Result shortcut icon alignment fix ===== */
/* Keep the bulb perfectly centered after moving CSS into the shared stylesheet. */
.result-shortcut-tip .result-shortcut-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.result-shortcut-tip .result-shortcut-icon i,
.result-shortcut-tip .result-shortcut-icon .bi-lightbulb-fill {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}

@media (max-width: 575.98px) {
  .result-shortcut-tip .result-shortcut-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
  }
}

/* ===== Homepage SoundCloud validation error ===== */
.url-error {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 9px 14px;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #fff1f2;
  color: #dc2626;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  animation: soundsaverErrorIn .18s ease-out;
}

.url-error.d-none {
  display: none !important;
}

.url-error i {
  line-height: 1;
}

.has-soundcloud-error,
.input-row.has-soundcloud-error,
.converter-input.has-soundcloud-error,
.search-box.has-soundcloud-error {
  border-color: #fecdd3 !important;
  box-shadow: 0 12px 32px rgba(220, 38, 38, .08) !important;
}

@keyframes soundsaverErrorIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 575.98px) {
  .url-error {
    width: 100%;
    border-radius: 16px;
    text-align: left;
    align-items: flex-start;
  }
}

/* ===== Homepage SoundCloud validation button fixed ===== */
/* The input/error column can grow, but the Convert MP3 button stays aligned to the top input field. */
.soundcloud-converter-row-fixed,
[data-soundcloud-form-row] {
  display: flex !important;
  align-items: flex-start !important;
}

.soundcloud-input-col {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.soundcloud-submit-col {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
}

.soundcloud-submit-col .convert-btn,
.soundcloud-submit-col button,
.soundcloud-submit-col .btn {
  margin-top: 0 !important;
  align-self: flex-start !important;
  transform: none !important;
}

.soundcloud-input-col .url-error {
  position: static !important;
  align-self: flex-start !important;
  margin: 12px 0 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* Keep the trust row lower only when the error is visible, without moving the button. */
.soundcloud-input-col:has(.url-error:not(.d-none)) {
  margin-bottom: 8px !important;
}

@media (max-width: 575.98px) {
  .soundcloud-converter-row-fixed,
  [data-soundcloud-form-row] {
    flex-direction: column !important;
  }

  .soundcloud-input-col,
  .soundcloud-submit-col {
    width: 100% !important;
  }

  .soundcloud-submit-col .convert-btn,
  .soundcloud-submit-col button,
  .soundcloud-submit-col .btn {
    width: 100% !important;
  }

  .soundcloud-input-col .url-error {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ===== Convert MP3 shimmer attention effect ===== */
/* Activates only when the URL input has text. */
[data-convert-button] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

[data-convert-button] i,
[data-convert-button] span {
  position: relative;
  z-index: 2;
}

[data-convert-button].is-ready::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
  transform: skewX(-18deg);
  animation: soundsaverShimmerSweep 1.65s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes soundsaverShimmerSweep {
  0% {
    left: -55%;
  }

  52%, 100% {
    left: 120%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-convert-button].is-ready::before {
    animation: none;
    display: none;
  }
}

/* ===== Equal converter input and button height ===== */
:root {
  --only-converter-control-height: 64px;
}

.soundcloud-input-col .input-action-wrap,
.soundcloud-submit-col,
.soundcloud-submit-col [data-convert-button],
[data-soundcloud-form-row] [data-convert-button] {
  height: var(--only-converter-control-height) !important;
  min-height: var(--only-converter-control-height) !important;
}

.soundcloud-input-col .converter-input,
.soundcloud-input-col input[data-soundcloud-url-input] {
  height: var(--only-converter-control-height) !important;
  min-height: var(--only-converter-control-height) !important;
}

.soundcloud-submit-col {
  display: flex !important;
  align-items: stretch !important;
}

.soundcloud-submit-col [data-convert-button],
[data-soundcloud-form-row] [data-convert-button] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}

@media (max-width: 575.98px) {
  :root {
    --only-converter-control-height: 58px;
  }

  .soundcloud-submit-col,
  .soundcloud-submit-col [data-convert-button],
  [data-soundcloud-form-row] [data-convert-button] {
    width: 100% !important;
  }
}


/* ==========================================
   SoundSaver Extension: Auth, Profile, Dashboard
   ========================================== */

/* User Header Navigation Dropdown */
.header-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--only-primary);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 85, 0, 0.15);
  transition: all 0.2s ease;
}

.header-user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(255, 85, 0, 0.25);
}

.user-nav-dropdown .dropdown-menu {
  border: 1px solid rgba(255, 85, 0, 0.12);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 16px 48px rgba(7, 17, 38, 0.1);
  min-width: 220px;
  background: #fff;
}

.user-nav-dropdown .dropdown-header {
  padding: 8px 12px 12px;
  border-bottom: 1px solid #f0f2f6;
  margin-bottom: 8px;
}

.user-nav-dropdown .dropdown-item {
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--only-text);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

.user-nav-dropdown .dropdown-item i {
  font-size: 1.1rem;
  color: var(--only-muted);
  transition: color 0.15s;
}

.user-nav-dropdown .dropdown-item:hover {
  color: var(--only-primary);
  background: #ffefe5;
}

.user-nav-dropdown .dropdown-item:hover i {
  color: var(--only-primary);
}

.user-nav-dropdown .dropdown-item.text-danger:hover {
  color: #dc3545;
  background: #fdf2f2;
}

.user-nav-dropdown .dropdown-item.text-danger:hover i {
  color: #dc3545;
}

/* Unified Auth Layout */
.auth-container {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: 
    radial-gradient(circle at 12% 18%, rgba(255, 85, 0, 0.07), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(255, 34, 0, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fffbf9 50%, #ffefe5 100%);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 40px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 85, 0, 0.12);
  box-shadow: 0 24px 60px rgba(255, 85, 0, 0.08);
  backdrop-filter: blur(16px);
}

.auth-logo-center {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  text-align: center;
  margin-bottom: 30px;
  display: block;
}

.auth-tabs {
  display: flex;
  border-bottom: 2px solid #f0f2f6;
  margin-bottom: 28px;
  padding: 0 10px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding-bottom: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--only-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.auth-tab:hover {
  color: var(--only-text);
}

.auth-tab.active {
  color: var(--only-primary);
  border-color: var(--only-primary);
}

.auth-input-group {
  position: relative;
  margin-bottom: 20px;
}

.auth-input-group label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--only-text);
  margin-bottom: 8px;
  display: block;
}

.auth-input-wrapper {
  position: relative;
}

.auth-input-wrapper i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--only-muted);
  font-size: 1.15rem;
  pointer-events: none;
}

.auth-input {
  width: 100%;
  height: 54px;
  border: 1px solid var(--only-border);
  border-radius: 14px;
  padding-left: 48px;
  padding-right: 16px;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--only-text);
  background: #fff;
  transition: all 0.2s ease;
}

.auth-input:focus {
  outline: none;
  border-color: var(--only-primary);
  box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.12);
  background: #fff;
}

.auth-btn {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.social-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0;
  color: var(--only-muted);
  font-weight: 600;
  font-size: 0.88rem;
}

.social-auth-divider::before,
.social-auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #f0f2f6;
}

.social-auth-divider::before {
  margin-right: 15px;
}

.social-auth-divider::after {
  margin-left: 15px;
}

.btn-social-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 1px solid var(--only-border);
  border-radius: 14px;
  background: #fff;
  color: var(--only-text);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.btn-social-auth:hover {
  background: var(--only-soft);
  border-color: #d0d5dd;
  transform: translateY(-1px);
}

.btn-soundcloud-orange {
  border-color: rgba(255, 85, 0, 0.2) !important;
}

.btn-soundcloud-orange:hover {
  background: #ffefe5 !important;
  color: var(--only-primary) !important;
  border-color: var(--only-primary) !important;
}

.btn-soundcloud-orange i {
  color: var(--only-primary);
}

/* Dashboard & Profile Layout */
.dashboard-wrap {
  display: flex;
  min-height: calc(100vh - 180px);
  background: #fafafc;
}

.dashboard-sidebar {
  width: 280px;
  background: #fff;
  border-right: 1px solid var(--only-border);
  padding: 30px 20px;
  flex-shrink: 0;
}

.sidebar-menu {
  display: grid;
  gap: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 700;
  color: var(--only-muted);
  transition: all 0.2s ease;
  text-decoration: none;
}

.sidebar-link i {
  font-size: 1.25rem;
  transition: color 0.2s;
}

.sidebar-link:hover {
  color: var(--only-primary);
  background: #ffefe5;
}

.sidebar-link:hover i {
  color: var(--only-primary);
}

.sidebar-link.active {
  color: #fff;
  background: var(--only-primary);
  box-shadow: 0 10px 20px rgba(255, 85, 0, 0.15);
}

.sidebar-link.active i {
  color: #fff;
}

.dashboard-content {
  flex: 1;
  padding: 40px;
  overflow-x: hidden;
}

/* Stat Cards */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--only-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.06);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #ffefe5;
  color: var(--only-primary);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

.stat-info h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--only-muted);
  margin-bottom: 6px;
}

.stat-val {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--only-dark);
  line-height: 1.1;
}

/* Dashboard Converter Card */
.dashboard-converter-panel {
  background: #fff;
  border: 1px solid var(--only-border);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 12px 36px rgba(16, 24, 40, 0.04);
  margin-bottom: 40px;
}

.dashboard-converter-panel h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--only-dark);
  margin-bottom: 20px;
}

/* History List / Table */
.dashboard-section-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--only-dark);
  margin-bottom: 20px;
}

.history-card-list {
  display: grid;
  gap: 16px;
}

.history-item {
  background: #fff;
  border: 1px solid var(--only-border);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.02);
  transition: border-color 0.2s;
}

.history-item:hover {
  border-color: rgba(255, 85, 0, 0.24);
}

.history-artwork {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #f0f2f6;
}

.history-details {
  flex: 1;
  min-width: 0;
}

.history-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--only-text);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--only-muted);
  font-weight: 600;
}

.history-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--only-border);
  background: #fff;
  color: var(--only-text);
  font-size: 1.1rem;
  transition: all 0.15s ease;
}

.history-btn:hover {
  color: var(--only-primary);
  border-color: rgba(255, 85, 0, 0.3);
  background: #ffefe5;
}

.history-btn.btn-download-action {
  background: var(--only-primary);
  color: #fff;
  border-color: var(--only-primary);
  width: auto;
  padding: 0 16px;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-btn.btn-download-action:hover {
  background: #e04b00;
  color: #fff;
  border-color: #e04b00;
}

.history-btn.btn-delete-action:hover {
  color: #dc3545;
  background: #fdf2f2;
  border-color: rgba(220, 53, 69, 0.2);
}

/* Premium Upgrade Banner */
.premium-upgrade-card {
  background: linear-gradient(135deg, var(--only-primary) 0%, var(--only-primary-2) 100%);
  border-radius: 24px;
  padding: 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(255, 85, 0, 0.25);
  margin-top: 40px;
}

.premium-upgrade-card::before {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.premium-upgrade-card::after {
  content: "";
  position: absolute;
  right: 50px;
  top: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.premium-tag {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 16px;
  backdrop-filter: blur(4px);
}

.premium-upgrade-card h2 {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.premium-upgrade-card p {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.98rem;
  max-width: 480px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.btn-premium-action {
  background: #fff;
  color: var(--only-primary);
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 14px;
  border: 0;
  font-size: 0.98rem;
  box-shadow: 0 8px 24px rgba(7, 17, 38, 0.12);
  transition: all 0.2s ease;
}

.btn-premium-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(7, 17, 38, 0.2);
  color: var(--only-primary);
  background: #fff;
}

/* Profile specific styles */
.profile-card {
  background: #fff;
  border: 1px solid var(--only-border);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 12px 36px rgba(16, 24, 40, 0.04);
  margin-bottom: 30px;
}

.profile-header-flex {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid #f0f2f6;
  padding-bottom: 24px;
}

.avatar-upload-container {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

.profile-avatar-preview {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--only-primary);
  box-shadow: 0 8px 20px rgba(255, 85, 0, 0.15);
}

.avatar-edit-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--only-primary);
  color: #fff;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background-color 0.15s;
}

.avatar-edit-overlay:hover {
  background: #e04b00;
}

.profile-title-info h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--only-dark);
  margin-bottom: 4px;
}

.profile-title-info span {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--only-primary);
  letter-spacing: 0.05em;
}

.profile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.profile-field label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--only-text);
  margin-bottom: 8px;
  display: block;
}

.profile-field input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--only-border);
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 600;
  color: var(--only-text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-field input:focus {
  outline: none;
  border-color: var(--only-primary);
  box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.1);
}

.profile-field input[readonly] {
  background: var(--only-soft);
  color: var(--only-muted);
  cursor: not-allowed;
}

/* Service Toggles */
.integration-list {
  display: grid;
  gap: 16px;
}

.integration-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid var(--only-border);
  border-radius: 16px;
  background: var(--only-soft);
}

.integration-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.integration-info i {
  font-size: 1.75rem;
}

.integration-info h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--only-text);
  margin-bottom: 3px;
}

.integration-info p {
  font-size: 0.8rem;
  color: var(--only-muted);
  margin-bottom: 0;
  font-weight: 500;
}

/* Custom switch toggle */
.soundcloud-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.soundcloud-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: .3s;
  border-radius: 34px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.soundcloud-switch input:checked + .switch-slider {
  background-color: var(--only-primary);
}

.soundcloud-switch input:checked + .switch-slider:before {
  transform: translateX(22px);
}

/* Mobile Sidebar Responsiveness */
@media (max-width: 991.98px) {
  .dashboard-wrap {
    flex-direction: column;
  }
  
  .dashboard-sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--only-border);
    padding: 20px;
  }
  
  .sidebar-menu {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
  }
  
  .sidebar-link {
    padding: 10px 12px;
    font-size: 0.88rem;
    justify-content: center;
    border-radius: 10px;
  }
  
  .sidebar-link i {
    font-size: 1.1rem;
  }
  
  .dashboard-content {
    padding: 24px 16px;
  }
  
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .history-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .history-actions {
    justify-content: flex-end;
  }
}

/* --- SoundSaver Conversion Optimizations Extensions --- */
.btn-gdrive {
  background-color: #25a163 !important;
  color: white !important;
  border: none !important;
  border-radius: 16px !important;
  transition: all 0.2s ease !important;
}
.btn-gdrive:hover {
  background-color: #1e8751 !important;
  box-shadow: 0 4px 12px rgba(37, 161, 99, 0.2) !important;
}
.btn-onedrive {
  background-color: #0078d4 !important;
  color: white !important;
  border: none !important;
  border-radius: 16px !important;
  transition: all 0.2s ease !important;
}
.btn-onedrive:hover {
  background-color: #0063b1 !important;
  box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2) !important;
}
.format-selector-card {
  background: #ffffff;
  border: 1px solid var(--only-border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
}
.format-option-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.format-radio-item {
  position: relative;
}
.format-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.format-radio-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 8px;
  border: 2px solid var(--only-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--only-dark);
  transition: all 0.2s ease;
  text-align: center;
  background: #fafbfc;
}
.format-radio-input:checked + .format-radio-label {
  border-color: var(--only-primary);
  background: #fff8f5;
  color: var(--only-primary);
}
.format-radio-label .pro-lock-badge {
  font-size: 0.72rem;
  background: #ffebe5;
  color: var(--only-primary);
  padding: 1px 6px;
  border-radius: 20px;
  margin-top: 4px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.speed-indicator-badge {
  background: #ffefe5;
  color: var(--only-primary);
  border: 1px dashed rgba(255, 85, 0, 0.3);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.speed-indicator-badge.premium-active {
  background: #effdf5;
  color: var(--only-green);
  border-color: rgba(18, 183, 106, 0.3);
}
.history-gate-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.history-blurred-section {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
}
.history-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  text-align: center;
  padding: 24px;
  border-radius: 20px;
}
.history-lock-icon {
  font-size: 2.2rem;
  color: var(--only-primary);
  margin-bottom: 12px;
  background: #ffefe5;
  padding: 10px 18px;
  border-radius: 50%;
}
.history-lock-title {
  font-weight: 800;
  color: var(--only-dark);
  margin-bottom: 6px;
  font-size: 1.15rem;
}
.history-lock-desc {
  color: var(--only-muted);
  font-size: 0.9rem;
  max-width: 320px;
  margin-bottom: 16px;
  font-weight: 500;
}

/* ===== Night Mode Overrides ===== */
[data-theme="dark"] {
  --only-dark: #ffffff;
  --only-text: #f3f4f6;
  --only-muted: #9ca3af;
  --only-border: #1e293b;
  --only-soft: #0d1321;
}

/* Base Body and Layout overrides */
[data-theme="dark"] body {
  background-color: #090d16 !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .site-header {
  background: rgba(9, 13, 22, 0.94) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.75) !important;
}

[data-theme="dark"] .nav-link {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .nav-link:hover {
  color: var(--only-primary) !important;
}

/* Hero section gradient overrides */
[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 10% 28%, rgba(255,85,0,.06), transparent 25%),
    radial-gradient(circle at 86% 22%, rgba(139,92,246,.06), transparent 26%),
    linear-gradient(180deg, #090d16 0%, #0d1321 56%, #090d16 100%) !important;
}
[data-theme="dark"] .result-hero {
  background: 
    radial-gradient(circle at 10% 20%, rgba(255, 85, 0, 0.05), transparent 30%), 
    linear-gradient(180deg, #090d16 0%, #0d1321 50%, #090d16 100%) !important;
}

/* Card components overrides */
[data-theme="dark"] .converter-card,
[data-theme="dark"] .result-card,
[data-theme="dark"] .playlist-card,
[data-theme="dark"] .only-card,
[data-theme="dark"] .history-item {
  background: #151f32 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4) !important;
}

/* Section styling overrides */
[data-theme="dark"] .section-soft,
[data-theme="dark"] section.py-5[style*="background"] {
  background: linear-gradient(180deg, #0d1321 0%, #090d16 78%) !important;
}

/* Inputs and Forms overrides */
[data-theme="dark"] .converter-input,
[data-theme="dark"] .form-control {
  background-color: #1c2841 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}
[data-theme="dark"] .converter-input::placeholder,
[data-theme="dark"] .form-control::placeholder {
  color: #9ca3af !important;
  opacity: 0.6;
}
[data-theme="dark"] .form-control:focus {
  background-color: #1c2841 !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .form-label {
  color: #f3f4f6 !important;
}

/* Typography elements */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] .h1, 
[data-theme="dark"] .h2, 
[data-theme="dark"] .h3, 
[data-theme="dark"] .h4, 
[data-theme="dark"] .h5, 
[data-theme="dark"] .h6 {
  color: #ffffff !important;
}

[data-theme="dark"] p, 
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .text-muted {
  color: #9ca3af !important;
}

[data-theme="dark"] .trust-row {
  color: #f3f4f6 !important;
}

/* Utilities overrides */
[data-theme="dark"] .text-dark {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .bg-light {
  background-color: #1c2841 !important;
  color: #f3f4f6 !important;
}

/* Offcanvas drawer & Mobile Menu overrides */
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .mobile-offcanvas,
[data-theme="dark"] #mobileMenu {
  background-color: #0d1321 !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .mobile-menu-link {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .mobile-menu-link:hover {
  background-color: #151f32 !important;
}
[data-theme="dark"] .mobile-legal-divider {
  border-top-color: #1e293b !important;
}
[data-theme="dark"] .mobile-user-header {
  background-color: #2d1b10 !important;
}

/* Dropdowns overrides */
[data-theme="dark"] .lang-card-btn,
[data-theme="dark"] .footer-language-dropdown button,
[data-theme="dark"] .dropdown-toggle {
  background: #151f32 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .dropdown-menu {
  background-color: #151f32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .dropdown-item {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #1c2841 !important;
}
[data-theme="dark"] .dropdown-item.active-preview,
[data-theme="dark"] .dropdown-item.active {
  background-color: var(--only-primary) !important;
  color: #ffffff !important;
}

/* Modals overrides */
[data-theme="dark"] .modal-content {
  background-color: #151f32 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .modal-header {
  border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .modal-footer {
  border-top-color: #1e293b !important;
}
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(2) !important;
}

/* Dividers & Borders */
[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider {
  border-color: #1e293b !important;
  opacity: 1 !important;
}

/* Success badging */
[data-theme="dark"] .success-badge {
  background: #064e3b !important;
  color: #a7f3d0 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Playlist page specific overrides */
[data-theme="dark"] .track-list-container {
  background: #0d1321 !important;
  border-color: #1e293b !important;
}
[data-theme="dark"] .playlist-track-item {
  background: #151f32 !important;
  border-color: #1e293b !important;
}
[data-theme="dark"] .playlist-track-item:hover {
  border-color: rgba(255, 85, 0, 0.4) !important;
  box-shadow: 0 8px 20px rgba(255, 85, 0, 0.08) !important;
}
[data-theme="dark"] .playlist-track-item.active-converting {
  background-color: #211c21 !important;
}
[data-theme="dark"] .badge-status-ready {
  background: #1c2841 !important;
  color: #9ca3af !important;
}
[data-theme="dark"] .badge-status-converting {
  background: #2d1b10 !important;
  color: var(--only-primary) !important;
}
[data-theme="dark"] .badge-status-completed {
  background: #064e3b !important;
  color: #a7f3d0 !important;
}
[data-theme="dark"] .playlist-global-actions {
  background: rgba(255, 85, 0, 0.04) !important;
  border-color: rgba(255, 85, 0, 0.3) !important;
}
[data-theme="dark"] .global-progress-card {
  background: #151f32 !important;
  border-color: #1e293b !important;
}
[data-theme="dark"] .global-progress-card .progress {
  background: #1c2841 !important;
}
[data-theme="dark"] .safe-alert {
  background: #151f32 !important;
  border-color: #1e293b !important;
}
[data-theme="dark"] .playlist-thumb-container {
  background: #151f32 !important;
  border-color: #1e293b !important;
}
[data-theme="dark"] .track-artwork,
[data-theme="dark"] .history-artwork {
  border-color: #1e293b !important;
}
[data-theme="dark"] .speed-indicator-badge {
  background: #1c2841 !important;
  border-color: #1e293b !important;
  color: #9ca3af !important;
}
[data-theme="dark"] .speed-indicator-badge.premium-active {
  background: #064e3b !important;
  color: #a7f3d0 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Dashboard Gating Overrides */
[data-theme="dark"] .history-lock-overlay {
  background: rgba(9, 13, 22, 0.88) !important;
}
[data-theme="dark"] .history-lock-icon {
  background: #2d1b10 !important;
}
[data-theme="dark"] .history-blurred-section {
  opacity: 0.3 !important;
}

/* Footer overrides */
[data-theme="dark"] .site-footer-light {
  background: #070a10 !important;
  border-top: 1px solid #1e293b !important;
}
[data-theme="dark"] .footer-bottom {
  border-top: 1px solid #1e293b !important;
  background: #05070b !important;
}
[data-theme="dark"] .footer-title {
  color: #ffffff !important;
}
[data-theme="dark"] .site-footer-light a {
  color: #9ca3af !important;
}
[data-theme="dark"] .site-footer-light a:hover {
  color: var(--only-primary) !important;
}

/* Profile / settings navigation styling */
[data-theme="dark"] .profile-card,
[data-theme="dark"] .dashboard-card {
  background: #151f32 !important;
  border-color: #1e293b !important;
}
[data-theme="dark"] .list-group-item {
  background: #151f32 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}
[data-theme="dark"] .list-group-item.active {
  background-color: var(--only-primary) !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .table {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: #1e293b !important;
}
[data-theme="dark"] tr[style*="border-bottom"] {
  border-bottom-color: #1e293b !important;
}

/* Mobile bottom nav overrides */
[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(9, 13, 22, 0.94) !important;
  border-top: 1px solid #1e293b !important;
}
[data-theme="dark"] .mobile-bottom-nav a {
  color: #9ca3af !important;
}
[data-theme="dark"] .mobile-bottom-nav a.active {
  color: var(--only-primary) !important;
}

/* Error message overrides */
[data-theme="dark"] .url-error {
  background-color: #2d1a1a !important;
  border-color: #581c1c !important;
  color: #fca5a5 !important;
}

/* Accordion Dark Mode Overrides */
[data-theme="dark"] .accordion-item {
  background-color: #151f32 !important;
  border-color: #1e293b !important;
}

[data-theme="dark"] .accordion-button {
  background-color: #151f32 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(255, 85, 0, 0.12) !important;
  color: var(--only-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .accordion-body {
  background-color: #151f32 !important;
  color: #9ca3af !important;
}

/* Support strip override */
[data-theme="dark"] .support-strip {
  background: rgba(255, 85, 0, 0.05) !important;
  border-color: rgba(255, 85, 0, 0.3) !important;
}

/* Icon circle background overrides */
[data-theme="dark"] .icon-circle {
  background: rgba(255, 85, 0, 0.08) !important;
  border-color: rgba(255, 85, 0, 0.2) !important;
}
[data-theme="dark"] .icon-circle.icon-purple {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}
[data-theme="dark"] .icon-circle.icon-green {
  background: rgba(18, 183, 106, 0.15) !important;
  border-color: rgba(18, 183, 106, 0.3) !important;
}
[data-theme="dark"] .icon-circle.icon-pink {
  background: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}
[data-theme="dark"] .icon-circle[style*="background: #f0fdf4"] {
  background: rgba(22, 163, 74, 0.15) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

/* Footer Language Dropdown Dark Mode Overrides */
[data-theme="dark"] .footer-language-dropdown .dropdown-toggle,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-toggle,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-toggle {
  background: #151f32 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .footer-language-dropdown .dropdown-toggle:hover,
[data-theme="dark"] .footer-language-dropdown .dropdown-toggle:focus,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-toggle:hover,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-toggle:focus,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-toggle:hover,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-toggle:focus {
  background: #1c2841 !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .footer-language-dropdown .dropdown-menu,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-menu,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-menu {
  background-color: #151f32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .footer-language-dropdown .dropdown-item,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-item,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item {
  color: #f3f4f6 !important;
  background-color: transparent !important;
}

[data-theme="dark"] .footer-language-dropdown .dropdown-item:hover,
[data-theme="dark"] .footer-language-dropdown .dropdown-item:focus,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-item:hover,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-item:focus,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item:hover,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item:focus {
  background-color: #1c2841 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .footer-language-dropdown .dropdown-item.active-preview,
[data-theme="dark"] .site-footer-light .footer-language-dropdown .dropdown-item.active-preview,
[data-theme="dark"] .soundsaver-footer-v3 .footer-language-dropdown .dropdown-item.active-preview {
  background-color: var(--only-primary) !important;
  color: #ffffff !important;
}

/* Legal Pages Dark Mode Overrides */
[data-theme="dark"] .page-hero {
  background:
    radial-gradient(circle at top left, rgba(255, 85, 0, .05), transparent 32%),
    linear-gradient(180deg, #090d16 0%, #0d1321 100%) !important;
}

[data-theme="dark"] .legal-layout {
  background: #090d16 !important;
}

[data-theme="dark"] .legal-card,
[data-theme="dark"] .legal-side-card {
  background: #151f32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4) !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .legal-card h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .legal-card p,
[data-theme="dark"] .legal-card li,
[data-theme="dark"] .legal-side-card a {
  color: #9ca3af !important;
  border-bottom-color: #1e293b !important;
}

[data-theme="dark"] .legal-side-card a:hover {
  color: var(--only-primary) !important;
}

[data-theme="dark"] .legal-note {
  background: rgba(255, 85, 0, 0.05) !important;
  border-color: rgba(255, 85, 0, 0.3) !important;
  color: #9ca3af !important;
}

[data-theme="dark"] .page-kicker {
  background: rgba(255, 85, 0, 0.08) !important;
  border-color: rgba(255, 85, 0, 0.2) !important;
}

/* Contact Us Page Dark Mode Overrides */
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-method {
  background: #151f32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4) !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .contact-input,
[data-theme="dark"] .form-select {
  background-color: #1c2841 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] .contact-input::placeholder {
  color: #9ca3af !important;
  opacity: 0.6;
}

[data-theme="dark"] .contact-input:focus {
  background-color: #1c2841 !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 .25rem rgba(255, 85, 0, .15) !important;
}

/* Auth Page Dark Mode Overrides */
[data-theme="dark"] .auth-container {
  background: 
    radial-gradient(circle at 12% 18%, rgba(255, 85, 0, 0.05), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(255, 34, 0, 0.05), transparent 28%),
    linear-gradient(180deg, #090d16 0%, #0d1321 50%, #090d16 100%) !important;
}

[data-theme="dark"] .auth-card {
  background: rgba(21, 31, 50, 0.95) !important;
  border-color: rgba(255, 85, 0, 0.18) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .auth-tabs {
  border-bottom-color: #1e293b !important;
}

[data-theme="dark"] .auth-input {
  background-color: #1c2841 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .auth-input:focus {
  background-color: #1c2841 !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .auth-input-wrapper i {
  color: #9ca3af !important;
}

[data-theme="dark"] .social-auth-divider::before,
[data-theme="dark"] .social-auth-divider::after {
  border-bottom-color: #1e293b !important;
}

[data-theme="dark"] .btn-social-auth {
  background: #1c2841 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-social-auth:hover {
  background: #253352 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-soundcloud-orange:hover {
  background: rgba(255, 85, 0, 0.1) !important;
  color: var(--only-primary) !important;
  border-color: var(--only-primary) !important;
}

/* Dashboard & Profile Pages Dark Mode Overrides */
[data-theme="dark"] .bg-light-subtle {
  background-color: #090d16 !important;
}

[data-theme="dark"] .dashboard-converter-panel {
  background: #151f32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .dashboard-converter-panel h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .dashboard-section-title {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-card {
  background: #1c2841 !important;
  border-color: #1e293b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .stat-card h3 {
  color: #9ca3af !important;
}

[data-theme="dark"] .stat-card .stat-val {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-icon {
  background: rgba(255, 85, 0, 0.15) !important;
  color: var(--only-primary) !important;
}

[data-theme="dark"] .profile-field input {
  background-color: #1c2841 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

[data-theme="dark"] .profile-field input:focus {
  background-color: #1c2841 !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .profile-field input[readonly] {
  background-color: rgba(30, 41, 59, 0.5) !important;
  color: #9ca3af !important;
}

[data-theme="dark"] .border {
  border-color: #1e293b !important;
}

[data-theme="dark"] .btn-light {
  background-color: #1c2841 !important;
  border-color: #1e293b !important;
  color: #ffffff;
}

[data-theme="dark"] .btn-light:hover {
  background-color: #253352 !important;
  border-color: #334155 !important;
}

/* ===== Result Page (result.html) Dark Mode Overrides ===== */

[data-theme="dark"] .result-section {
  background: linear-gradient(180deg, #0d1321 0%, #090d16 70%) !important;
}

[data-theme="dark"] .download-panel {
  border-left-color: #1e293b !important;
}

[data-theme="dark"] .format-selector-card {
  background: #151f32 !important;
  border-color: #1e293b !important;
}

[data-theme="dark"] .format-radio-label {
  background: #1c2841 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .format-radio-input:checked + .format-radio-label {
  border-color: var(--only-primary) !important;
  background: rgba(255, 85, 0, 0.1) !important;
  color: var(--only-primary) !important;
}

[data-theme="dark"] .format-radio-label .pro-lock-badge {
  background: rgba(255, 85, 0, 0.12) !important;
  color: var(--only-primary) !important;
}

[data-theme="dark"] .meta-pill {
  background: #1c2841 !important;
  color: #9ca3af !important;
}

[data-theme="dark"] .meta-pill i {
  color: #9ca3af !important;
}

[data-theme="dark"] .track-title {
  color: #ffffff !important;
}

[data-theme="dark"] .track-info-panel .meta-pill {
  background: #1c2841 !important;
  color: #9ca3af !important;
}

[data-theme="dark"] .track-info-panel .meta-pill i {
  color: #9ca3af !important;
}

[data-theme="dark"] .coffee-box {
  background: rgba(255, 85, 0, 0.06) !important;
  border-color: rgba(255, 85, 0, 0.25) !important;
}

[data-theme="dark"] .coffee-box .text-dark {
  color: #f3f4f6 !important;
}

[data-theme="dark"] .share-btn {
  background: #151f32 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .share-btn:hover {
  background: rgba(255, 85, 0, 0.08) !important;
  border-color: rgba(255, 85, 0, 0.35) !important;
  color: var(--only-primary) !important;
}

[data-theme="dark"] .mobile-share-card {
  background: #151f32 !important;
  border-color: #1e293b !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .result-card > .mobile-share-card {
  background: #0d1321 !important;
  border-color: #1e293b !important;
}

[data-theme="dark"] .result-share-title {
  color: #f3f4f6 !important;
}

[data-theme="dark"] .btn-dropbox {
  background: #151f32 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .btn-dropbox:hover {
  background: #1c2841 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .btn-dropbox.uploading {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .btn-dropbox.saved {
  background: #064e3b !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #a7f3d0 !important;
}

[data-theme="dark"] .btn-gdrive {
  background: #1c4f3d !important;
  border-color: rgba(52, 168, 83, 0.3) !important;
}

[data-theme="dark"] .btn-onedrive {
  background: #173a6a !important;
  border-color: rgba(0, 120, 212, 0.3) !important;
}

[data-theme="dark"] .btn-convert-another {
  background: #151f32 !important;
  border-color: rgba(255, 85, 0, 0.3) !important;
  color: var(--only-primary) !important;
}

[data-theme="dark"] .btn-convert-another:hover {
  background: var(--only-primary) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .shortcut-tip,
[data-theme="dark"] .result-shortcut-tip {
  background: #151f32 !important;
  border-color: #1e293b !important;
  color: #9ca3af !important;
}

[data-theme="dark"] .shortcut-tip i,
[data-theme="dark"] .result-shortcut-tip i {
  color: var(--only-primary) !important;
}

[data-theme="dark"] .dropbox-upload-box {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .dropbox-progress-shell {
  background: #1c2841 !important;
  border-color: #1e293b !important;
}

[data-theme="dark"] .dropbox-saved-alert {
  background: #064e3b !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #a7f3d0 !important;
}

/* Support/Upgrade Modal dark mode */
[data-theme="dark"] .support-modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .support-modal-card {
  background: linear-gradient(135deg, #151f32, #1c2841) !important;
  border-color: rgba(255, 85, 0, 0.25) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .support-modal-title {
  color: #ffffff !important;
}

[data-theme="dark"] .support-modal-text {
  color: #9ca3af !important;
}

[data-theme="dark"] .support-modal-close {
  background: rgba(255, 85, 0, 0.1) !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .support-modal-close:hover {
  background: rgba(255, 85, 0, 0.2) !important;
}

[data-theme="dark"] .support-modal-icon {
  background: rgba(255, 85, 0, 0.1) !important;
  color: var(--only-primary) !important;
  border-color: rgba(255, 85, 0, 0.3) !important;
}

[data-theme="dark"] .support-modal-btn-muted {
  color: #9ca3af !important;
  border-color: #1e293b !important;
}

[data-theme="dark"] .support-modal-btn-muted:hover {
  background: #1c2841 !important;
  color: #f3f4f6 !important;
}

/* ===== Playlist Page (playlist.html) Dark Mode Overrides ===== */

/* Master checkbox row & selection summary */
[data-theme="dark"] .d-flex[style*="background: #f8f9fd"] {
  background: #151f32 !important;
  border-color: #1e293b !important;
}

[data-theme="dark"] .custom-orange-check .form-check-label {
  color: #f3f4f6 !important;
}

[data-theme="dark"] .badge.bg-light.text-dark {
  background-color: #1c2841 !important;
  color: #f3f4f6 !important;
  border-color: #1e293b !important;
}

/* Playlist section background override (inline style #fffcfb) */
[data-theme="dark"] section[style*="background: #fffcfb"],
[data-theme="dark"] section[style*="background:#fffcfb"] {
  background: linear-gradient(180deg, #0d1321 0%, #090d16 78%) !important;
}

/* Track row meta text */
[data-theme="dark"] .track-row-title {
  color: #f3f4f6 !important;
}

[data-theme="dark"] .track-row-meta {
  color: #9ca3af !important;
}

/* Track number pill */
[data-theme="dark"] .track-num {
  color: #9ca3af !important;
}

/* Selection summary text */
[data-theme="dark"] #selection-summary-text {
  color: #9ca3af !important;
}

/* Playlist page inline-style bg overrides for progress card */
[data-theme="dark"] .global-progress-card[style*="background: #f8f9fd"] {
  background: #151f32 !important;
  border-color: #1e293b !important;
}

/* Safe alert green override (already generic, reinforce for inline styles) */
[data-theme="dark"] .safe-alert[style*="background:#f8f9fd"],
[data-theme="dark"] .safe-alert[style*="background: #f8f9fd"] {
  background: #151f32 !important;
  border-color: #1e293b !important;
}

/* Playlist track individual download button */
[data-theme="dark"] .playlist-track-item .btn-outline-secondary {
  background: #1c2841 !important;
  border-color: #1e293b !important;
  color: #f3f4f6 !important;
}

[data-theme="dark"] .playlist-track-item .btn-outline-secondary:hover {
  background: var(--only-primary) !important;
  border-color: var(--only-primary) !important;
  color: #ffffff !important;
}