/* =========================================================================
   SSSTikTok — Redesigned UI
   Design system + premium app-like styling.
   IMPORTANT: All selectors / IDs / classes referenced from sss2aws.js are
   preserved 1:1. Animation keyframes that JS / inline HTML rely on are kept:
   - borderAnimation, slideDown, skeleton-wave, ic-move, ic-shadow, shimmer,
     spin, blink, pwaFadeIn, pwaPopIn
   ========================================================================= */

/* ----------------------------- DESIGN TOKENS --------------------------- */
:root {
    /* === ANA RENK PALETİ (canlı + TikTok'tan kaçınmış) === */
    --tt-purple: #A855F7;        /* Canlı ametist mor (TikTok'ta yok) */
    --tt-purple-2: #8B3FE6;      /* Daha derin elektrik moru */
    --tt-purple-deep: #6D28D9;   /* Royal purple (vurgu için) */
    --tt-pink: #EC4899;          /* Soğuk magenta-pembe (mavi tarafa kaçar) */
    --tt-cyan: #14B8A6;          /* Doygun teal (mint-teal, TikTok cyan'dan farklı) */
    --tt-cyan-2: #0EA5E9;        /* Sky blue (saf cyan değil) */
    --tt-red: #DB2777;           /* Hot pink-fuşya (kırmızı yerine pembe ailesi) */
    --tt-success: #28a745;       /* Aynı kalsın, evrensel renk */
    --tt-gold: #F59E0B;          /* Doygun amber-altın */

    /* === HOLOGRAPHIC EXTRAS (canlandırılmış pastel) === */
    --holo-cyan: #5EEAD4;        /* Canlı turkuaz (mint tarafta) */
    --holo-mint: #6EE7B7;        /* Naneli yeşil (canlı) */
    --holo-lavender: #C4B5FD;    /* Canlı lavanta */
    --holo-pink: #F9A8D4;        /* Canlı pembe */
    --holo-yellow: #FDE68A;      /* Canlı krem-sarı */
    --holo-purple: #C084FC;      /* Canlı orkide moru */

    /* Surfaces (light) */
    --bg-base: #fbf7ff;
    --bg-elev-0: #ffffff;
    --bg-elev-1: rgba(255, 255, 255, 0.78);
    --bg-elev-2: rgba(255, 255, 255, 0.92);
    --border-soft: rgba(168, 85, 247, 0.18);
    --border-strong: rgba(168, 85, 247, 0.35);
    --shadow-sm: 0 1px 3px rgba(20, 0, 40, 0.08), 0 1px 2px rgba(20, 0, 40, 0.05);
    --shadow-md: 0 6px 24px rgba(120, 60, 200, 0.16), 0 2px 6px rgba(120, 60, 200, 0.08);
    --shadow-lg: 0 18px 60px -12px rgba(120, 60, 200, 0.32), 0 6px 18px rgba(120, 60, 200, 0.16);
    --shadow-glow: 0 8px 32px rgba(168, 85, 247, 0.40);
    --text-primary: #150b22;
    --text-secondary: #4a3b5c;
    --text-muted: #7d6e8c;

    /* Brand gradients (canlı holografik) */
    --grad-brand: linear-gradient(120deg, var(--tt-cyan) 0%, var(--tt-purple) 50%, var(--tt-pink) 100%);
    --grad-brand-soft: linear-gradient(120deg, rgba(20, 184, 166, 0.18), rgba(168, 85, 247, 0.22), rgba(236, 72, 153, 0.18));
    --grad-cta: linear-gradient(135deg, var(--tt-pink) 0%, var(--tt-purple) 60%, var(--tt-cyan-2) 120%);
    --grad-holo: linear-gradient(135deg, var(--holo-cyan) 0%, var(--holo-lavender) 25%, var(--holo-pink) 50%, var(--holo-yellow) 75%, var(--holo-mint) 100%);

    /* Geometry */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;
    --gutter: clamp(14px, 2.4vw, 24px);
    --maxw: 880px;
}

body.dark-mode {
    --bg-base: #0c0815;
    --bg-elev-0: #161121;
    --bg-elev-1: rgba(28, 22, 40, 0.72);
    --bg-elev-2: rgba(34, 26, 50, 0.92);
    --border-soft: rgba(168, 85, 247, 0.28);
    --border-strong: rgba(168, 85, 247, 0.50);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 18px 60px -12px rgba(0, 0, 0, 0.65), 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 8px 32px rgba(168, 85, 247, 0.55);
    --text-primary: #f3eaff;
    --text-secondary: #c8b6dd;
    --text-muted: #8e7fa6;
}
/* ------------------------------- RESET --------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: var(--text-primary);
    background: var(--bg-base);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--tt-purple);
    text-decoration: none;
}

button {
    font-family: inherit;
}

/* Selection */
::selection {
    background: rgba(180, 0, 215, 0.25);
    color: var(--text-primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------- AURORA AMBIENT BACKGROUND --------------------- */
.aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    contain: strict;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}

.aurora-blob--1 {
    width: 520px;
    height: 520px;
    top: -180px;
    left: -120px;
    background: radial-gradient(circle, var(--tt-purple) 0%, transparent 70%);
    animation: aurora-drift-1 28s ease-in-out infinite;
}

.aurora-blob--2 {
    width: 460px;
    height: 460px;
    top: 20%;
    right: -160px;
    background: radial-gradient(circle, var(--tt-cyan) 0%, transparent 70%);
    opacity: 0.40;
    animation: aurora-drift-2 32s ease-in-out infinite;
}

.aurora-blob--3 {
    width: 480px;
    height: 480px;
    bottom: -180px;
    left: 30%;
    background: radial-gradient(circle, var(--tt-pink) 0%, transparent 70%);
    opacity: 0.35;
    animation: aurora-drift-3 36s ease-in-out infinite;
}

body.dark-mode .aurora-blob {
    opacity: 0.40;
}

body.dark-mode .aurora-blob--2 {
    opacity: 0.30;
}

body.dark-mode .aurora-blob--3 {
    opacity: 0.28;
}

@keyframes aurora-drift-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, 30px) scale(1.08);
    }
}

@keyframes aurora-drift-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-50px, 40px) scale(1.10);
    }
}

@keyframes aurora-drift-3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -40px) scale(1.06);
    }
}

/* ------------------------------ HEADER --------------------------------- */
#a {
    max-width: var(--maxw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 14px var(--gutter);
    height: auto;
    min-height: 84px;
    background: transparent;
    overflow: visible;
    position: relative;
    z-index: 100;
}

#a .left,
#a .right {
    display: flex;
    align-items: center;
    flex: 1;
}

#a .right {
    justify-content: flex-end;
}

#a .center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

#a .center img {
    width: clamp(140px, 24vw, 199px) !important;
    height: auto !important;
    aspect-ratio: 199/112;
    transition: transform 0.3s ease;
}

#a .center a:hover img {
    transform: scale(1.04);
}

#theme-toggle {
    color: var(--tt-purple);
    cursor: pointer;
    font-weight: 700;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-elev-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#theme-toggle:hover {
    transform: rotate(20deg) scale(1.05);
    box-shadow: var(--shadow-glow);
}

#menu-button {
    background: var(--bg-elev-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm);
    padding: 0;
}

#menu-button:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-glow);
}

#menu-button svg {
    fill: currentColor;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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

#menu-dropdown {
    position: absolute;
    top: 78px;
    background: var(--bg-elev-2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-strong);
    display: none;
    flex-direction: column;
    z-index: 1001;
    width: calc(100% - calc(var(--gutter) * 2));
    max-width: 360px;
    right: var(--gutter);
    left: auto;
    margin: 0;
    padding: 8px;
    animation: 0.25s ease-out forwards slideDown;
    opacity: 0;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    gap: 2px;
}

#menu-dropdown a {
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
    font-weight: 700;
    text-align: left;
    font-size: 14px;
    border-radius: var(--r-sm);
}

#menu-dropdown a:hover {
    background: linear-gradient(90deg, rgba(180, 0, 215, 0.10), rgba(0, 242, 234, 0.06));
    color: var(--tt-purple);
    transform: translateX(2px);
}

.menu-separator {
    border: 0;
    border-top: 1px solid var(--border-soft);
    margin: 6px 0;
}

.dropdown {
    position: relative;
}

#dropdown-toggle {
    display: none;
}

.dropdown-label {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
    border-radius: var(--r-sm);
    transition: background 0.2s;
}

.dropdown-label:hover {
    background: rgba(180, 0, 215, 0.08);
}

.dropdown-label .arrow {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--tt-purple);
    transition: transform 0.25s ease;
}

#dropdown-toggle:checked ~ .dropdown-content,
#languages-button.open + #languages-dropdown-content {
    max-height: 400px;
    opacity: 1;
    margin-top: 4px;
}

#dropdown-toggle:checked + .dropdown-label .arrow,
#languages-button.open .arrow {
    transform: rotate(180deg);
}

.dropdown-content {
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    padding: 0 8px;
}

.dropdown-content a {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

.dropdown-content a:hover {
    color: var(--tt-purple) !important;
}

#languages-dropdown-content {
    display: flex !important;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    padding: 0 8px;
}

/* JS toggles display:flex on these — override transition pattern */
#languages-dropdown-content[style*="display: flex"],
#languages-dropdown-content[style*="display:flex"] {
    max-height: 400px;
    opacity: 1;
    margin-top: 4px;
}

/* ------------------------------ HERO ----------------------------------- */
.hero {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px var(--gutter) 8px;
    text-align: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--bg-elev-1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: live-pulse 2s ease-out infinite;
}

@keyframes live-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.hero-title {
    font-size: clamp(28px, 5.4vw, 46px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 14px auto 10px;
    max-width: 720px;
    color: var(--text-primary);
}

.hero-title__accent {
    display: block;
    background: var(--grad-cta);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hero-grad 8s ease-in-out infinite;
}

@keyframes hero-grad {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.hero-sub {
    font-size: clamp(14px, 1.7vw, 16px);
    color: var(--text-secondary);
    margin: 0 auto 14px;
    max-width: 560px;
    font-weight: 500;
}



.cursor {
    color: var(--tt-pink);
    font-weight: 700;
    margin-left: 2px;
    animation: blink 0.9s steps(2) infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}





/* ----------------------- DOWNLOADER CARD (form) ------------------------ */
.downloader-card {
    max-width: var(--maxw);
    margin: 14px auto 0;
    padding: 0 var(--gutter);
}

form#convert-form {
    color: var(--text-primary);
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 28px);
    box-sizing: border-box;
    background: var(--bg-elev-2);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Top brand stripe */
form#convert-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--grad-brand);
    background-size: 200% 200%;
    animation: hero-grad 6s ease-in-out infinite;
}

/* override original form > div first-child; our #b */
form#convert-form > div#b {
    text-align: center;
    color: var(--text-primary);
    font-weight: 800;
    font-size: clamp(15px, 2vw, 18px);
    text-shadow: none;
    margin-top: 0;
    margin-bottom: 14px;
}

#b p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#b p::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-brand);
    box-shadow: 0 0 8px rgba(180, 0, 215, 0.4);
}

/* feature badges */
#features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

@media (min-width: 560px) {
    #features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(180, 0, 215, 0.06), rgba(0, 242, 234, 0.05));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-badge:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.feature-badge .tick {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ------------------------ INPUT + DOWNLOAD BUTTON ---------------------- */
#input-section {
    margin: 6px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 720px) {
    #input-section {
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
    }
}

label[for=url] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    align-items: center;
    margin-top: 10px;
}

/* The input wrapper .c */
.c {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 56px;
}

.input-leading-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tt-purple);
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.input-leading-icon svg {
    fill: currentColor;
    opacity: 0.85;
}

input {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    height: 56px;
    width: 100%;
    border: none;
    outline: none;
}

/* GRADIENT INPUT — preserved logic, refined visuals */
.c input[type=text].input-classic.is-gradient {
    border: 3px solid transparent;
    background: linear-gradient(var(--ic-bg, #fff), var(--ic-bg, #fff)) padding-box,
        linear-gradient(120deg, #00e9ff, #ff29d1, #00e9ff) border-box;
    background-size: 350% 350%;
    background-position: 0 50%;
    border-radius: var(--r-md);
    box-shadow: 0 6px 14px rgba(180, 0, 215, .10);
    caret-color: #ff29d1;
    animation: 10s linear infinite ic-move, 3.6s ease-in-out infinite ic-shadow;
    will-change: background-position, box-shadow;
    padding: 0 100px 0 46px;
    /* room for leading icon + paste button */
    color: var(--text-primary);
    font-weight: 600;
    transition: padding 0.2s ease;
}

.c input[type=text].input-classic.is-gradient::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.c input[type=text].input-classic.is-gradient:focus {
    animation-duration: 3s, 2.4s;
    box-shadow: 0 8px 24px rgba(180, 0, 215, .22);
}

body.dark-mode .c input[type=text].input-classic.is-gradient {
    --ic-bg: #1a1426;
    color: #e6e8ee;
}

@keyframes ic-move {

    0%,
    100% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes ic-shadow {

    0%,
    100% {
        box-shadow: 0 6px 14px rgba(180, 0, 215, .10);
    }

    50% {
        box-shadow: 0 10px 22px rgba(180, 0, 215, .18);
    }
}

/* Paste / clear button (#d) */
#d {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--grad-brand);
    background-size: 200% 200%;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--r-sm);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.4s ease;
    box-shadow: 0 4px 12px rgba(180, 0, 215, 0.3);
    height: 40px;
    min-width: 84px;
    justify-content: center;
}

#d:hover {
    transform: translateY(-50%) scale(1.04);
    background-position: 100% 50%;
    box-shadow: 0 6px 18px rgba(180, 0, 215, 0.45);
}

#d:active {
    transform: translateY(-50%) scale(0.97);
}

#paste-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

#paste-icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

/* DOWNLOAD BUTTON — main CTA */
#convert-button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    height: 56px;
    min-width: 140px;
    padding: 0 26px;
    border-radius: var(--r-md);
    background: var(--grad-cta);
    background-size: 200% 200%;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(180, 0, 215, 0.32), 0 2px 6px rgba(255, 0, 80, 0.14);
    transition: transform 0.18s ease, box-shadow 0.22s ease, background-position 0.5s ease;
    position: relative;
    overflow: hidden;
    will-change: transform, background-position;
}

#convert-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
    transform: translateX(-110%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

#convert-button:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 14px 36px rgba(180, 0, 215, 0.42), 0 4px 10px rgba(255, 0, 80, 0.18);
}

#convert-button:hover::before {
    transform: translateX(110%);
}

#convert-button:active {
    transform: translateY(0) scale(0.98);
}

#convert-button:focus-visible {
    outline: 3px solid var(--tt-cyan);
    outline-offset: 2px;
}

@media (min-width: 720px) {
    #convert-button {
        min-width: 170px;
    }
}

/* PROGRESS BAR (#f .progress-classic.is-gradient) — preserved keyframes */
#f.progress-classic.is-gradient {
    border: 3px solid transparent;
    background: linear-gradient(var(--ic-bg, #fff), var(--ic-bg, #fff)) padding-box,
        linear-gradient(120deg, #00e9ff, #ff29d1, #00e9ff) border-box;
    background-size: 350% 350%;
    background-position: 0 50%;
    border-radius: var(--r-md);
    height: 56px;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-weight: 700;
    margin: 12px 0;
    animation: 6s linear infinite ic-move;
    position: relative;
    overflow: hidden;
}

#f.progress-classic.is-gradient:hover {
    animation-duration: 3s;
}

body.dark-mode #f.progress-classic.is-gradient {
    --ic-bg: #1a1426;
    color: #fff;
}

#y {
    position: relative;
    z-index: 2;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#f .g,
#f .h {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(180, 0, 215, 0.20), rgba(0, 242, 234, 0.18));
    width: 50%;
    animation: progress-sweep 1.5s ease-in-out infinite;
}

#f .g {
    left: -50%;
}

#f .h {
    right: -50%;
    animation-delay: 0.75s;
}

@keyframes progress-sweep {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200%);
    }
}

/* Service text */
#using-service {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 8px 0;
}

#using-service .service-link {
    color: var(--tt-purple);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s;
}

#using-service .service-link:hover {
    border-bottom-color: var(--tt-purple);
}

/* ======================== RESULTS WRAPPER ============================= */
#results-wrapper {
    margin-top: 8px;
    transition: min-height 0.3s ease;
}

#results-wrapper.results-active {
    margin-top: 18px;
}

#results-wrapper > p.text-truncate {
    display: none;
}

/* SKELETON LOADER (preserved) */
.custom-skeleton {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 18px;
    background: var(--bg-elev-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
}

.custom-skeleton .thumb-skeleton {
    background: linear-gradient(90deg, rgba(180, 0, 215, 0.18) 0%, rgba(0, 233, 255, 0.16) 50%, rgba(255, 41, 209, 0.18) 100%);
    background-size: 200% 100%;
    animation: 1.5s linear infinite shimmer;
}

body.dark-mode .custom-skeleton .thumb-skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: 1.5s infinite shimmer;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* THUMB SKELETON (preserved keyframe + selectors) */
.thumb-skeleton {
    background: rgba(180, 0, 215, 0.18);
    position: relative;
    overflow: hidden;
    aspect-ratio: 9/17;
    border-radius: 8px;
}

.thumb-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ac0bd8 0, #547edf 50%, #0decf3 100%);
    animation: 0.5s infinite skeleton-wave;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-mode: alpha;
}

@keyframes skeleton-wave {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

#t.loaded {
    opacity: 1;
}

.thumb-skeleton.is-loaded {
    background: 0 0;
}

.thumb-skeleton.is-loaded::after {
    display: none;
}

.thumb-skeleton--slide {
    aspect-ratio: 2.5/3;
}

.photo-item .thumb-skeleton {
    width: 100%;
    height: 100%;
    flex: 1 0 100%;
}

.thumb-skeleton--avatar {
    aspect-ratio: 1/1;
    width: 130px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.thumb-skeleton--avatar img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.thumb-skeleton.is-loaded img {
    opacity: 1;
}

/* ============================== VIDEO RESULT CARD ===================== */
#r,
.result-card {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.85));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#r.show,
.result-card.show {
    opacity: 1;
    transform: translateY(0);
}

body.dark-mode #r,
body.dark-mode .result-card {
    background: linear-gradient(135deg, rgba(28, 22, 40, 0.7), rgba(34, 26, 50, 0.92));
    border-color: var(--border-strong);
}

#r {
    display: none;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}

#s {
    flex-shrink: 0;
    position: relative;
    width: 135px;
    aspect-ratio: 9/16;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

#s::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

#t {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
    display: block;
}

#w {
    overflow: hidden;
    width: 100%;
    flex: 1;
    min-width: 0;
}

#w p {
    margin: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

#w p i {
    color: var(--tt-purple);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.result-title,
#w p:first-child,
.video-title-display,
.result-title-bar {
    font-weight: 800 !important;
    font-size: 15px !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
}

.result-title-bar {
    width: 100%;
    padding: 14px 18px;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    margin-bottom: 14px !important;
    box-shadow: var(--shadow-sm);
}

.result-title-bar p {
    margin: 0 !important;
    text-align: center;
    line-height: 1.4;
}

.result-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 6px;
}

.result-stats-grid p {
    margin: 4px 0 !important;
    font-size: 12px !important;
}

/* text truncate */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

/* Video title container */
#video-title-container {
    margin: 12px 0 6px;
    padding: 12px 14px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
}

/* ======================== DOWNLOAD BUTTON STACK (#v + ALL CTAs) ======== */
#v {
    gap: 10px;
    flex-direction: column;
    display: none;
    width: 100%;
    margin-top: 16px;
}

/* Universal "result button" base — applies to all download options */
#v a,
#photo-mp3-button,
#photo-convert-video-button,
#music-download-button-1,
#music-download-button-2,
#music-download-button-cd,
#download-profile-pic-button,
#zoom-profile-pic-button,
.download-photo,
#dynamic-download-btn,
#l-photo,
#ui-next-btn,
#l a,
#n {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--tt-purple) 0%, var(--tt-purple-2) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    border-radius: var(--r-md);
    box-shadow: 0 4px 14px rgba(180, 0, 215, 0.30);
    transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 1.25;
    cursor: pointer;
    border: none;
    margin-top: 10px;
    -webkit-tap-highlight-color: transparent;
}

/* Sheen effect */
#v a::before,
#photo-mp3-button::before,
#photo-convert-video-button::before,
#music-download-button-1::before,
#music-download-button-2::before,
#music-download-button-cd::before,
#download-profile-pic-button::before,
#zoom-profile-pic-button::before,
#dynamic-download-btn::before,
#l-photo::before,
#ui-next-btn::before,
#l a::before,
#n::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

#v a:hover,
#photo-mp3-button:hover,
#photo-convert-video-button:hover,
#music-download-button-1:hover,
#music-download-button-2:hover,
#music-download-button-cd:hover,
#download-profile-pic-button:hover,
#zoom-profile-pic-button:hover,
#dynamic-download-btn:hover,
#l-photo:hover,
#ui-next-btn:hover,
#l a:hover,
#n:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(180, 0, 215, 0.45);
}

#v a:hover::before,
#photo-mp3-button:hover::before,
#photo-convert-video-button:hover::before,
#music-download-button-1:hover::before,
#music-download-button-2:hover::before,
#music-download-button-cd:hover::before,
#download-profile-pic-button:hover::before,
#zoom-profile-pic-button:hover::before,
#dynamic-download-btn:hover::before,
#l-photo:hover::before,
#ui-next-btn:hover::before,
#l a:hover::before,
#n:hover::before {
    left: 150%;
}

#v a:active,
#photo-mp3-button:active,
#photo-convert-video-button:active,
#music-download-button-1:active,
#music-download-button-2:active,
#music-download-button-cd:active,
#download-profile-pic-button:active,
#zoom-profile-pic-button:active,
#dynamic-download-btn:active,
#l-photo:active,
#ui-next-btn:active,
#n:active {
    transform: translateY(0) scale(0.98);
}

#v a i,
[class*="download"] i,
[class*="music-download"] i,
#dynamic-download-btn i,
#zoom-profile-pic-button i,
#download-profile-pic-button i {
    flex-shrink: 0;
}

/* HD button — gold accent (#q) */
#q {
    background: linear-gradient(135deg, #b400d7 0%, #ff0050 100%) !important;
    box-shadow: 0 4px 14px rgba(255, 0, 80, 0.30) !important;
}

#q:hover {
    box-shadow: 0 8px 24px rgba(255, 0, 80, 0.45) !important;
}

/* MP3 button slight differentiation */
#o,
#photo-mp3-button,
#music-download-button-1 {
    background: linear-gradient(135deg, #b400d7 0%, #00e9ff 130%) !important;
}

/* Thumbnail button */
#c-link {
    background: linear-gradient(135deg, #00e9ff 0%, #b400d7 100%) !important;
}

/* Music CD/Sound image button */
#music-download-button-cd {
    background: linear-gradient(135deg, #ff29d1 0%, #b400d7 100%) !important;
}

/* SD button */
#p {
    background: linear-gradient(135deg, var(--tt-purple) 0%, var(--tt-purple-deep) 100%) !important;
}

/* Btn states (preserved) */
.btn-processing {
    opacity: 0.85;
    background: linear-gradient(90deg, #d600aa 0, #9b00e8 100%) !important;
    cursor: wait !important;
}

#zoom-profile-pic-button.btn-ready,
.btn-ready {
    background: var(--tt-success) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35) !important;
}

.download-started {
    opacity: 0.9;
    cursor: not-allowed !important;
}

/* download-button (legacy) */
.download-button {
    background-color: var(--tt-purple);
    color: #fff;
    font-size: 16px;
    line-height: 31px;
    text-decoration: none;
    height: 48px;
    border-radius: var(--r-md);
    text-align: center;
    width: 100%;
    display: none;
    margin-top: 20px;
}

.download-photo {
    display: flex !important;
}

.download-note {
    font-size: 11px;
    opacity: 0.9;
    display: block;
    margin-top: 2px;
}

/* ======================== PHOTO / SLIDE CAROUSEL ====================== */
#photo-container {
    display: none;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 18px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

#photo-container.show {
    opacity: 1;
    transform: translateY(0);
}

#photo-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}

#photo-info p {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
}

#photo-info p:first-child {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
}

#photo-info p i {
    color: var(--tt-purple);
    width: 14px;
    flex-shrink: 0;
}

.truncated-span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: calc(100% - 24px);
    vertical-align: middle;
}

.carousel-container {
    position: relative;
    width: 100%;
    margin-top: 8px;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: rgba(0, 0, 0, 0.04);
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track.active {
    cursor: grabbing;
}

.carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-img-wrapper {
    width: 100%;
    aspect-ratio: 9/14;
    background: rgba(180, 0, 215, 0.08);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ac0bd8 0, #547edf 50%, #0decf3 100%);
    animation: 0.5s infinite skeleton-wave;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

.carousel-img-wrapper.loaded::after {
    display: none;
}

.carousel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.carousel-img-wrapper.loaded img {
    opacity: 1;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 0 4px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
}

.carousel-dots::-webkit-scrollbar {
    display: none;
}

.dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(180, 0, 215, 0.30);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease, transform 0.18s ease;
}

.dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--grad-brand);
    background-size: 200% 100%;
    animation: hero-grad 4s ease-in-out infinite;
}

.dot:hover {
    transform: scale(1.2);
}

#l-photo {
    margin-top: 12px !important;
    background: linear-gradient(135deg, var(--tt-cyan-2) 0%, var(--tt-purple) 100%) !important;
}

/* ============================ MUSIC RESULT ============================ */
#music-cover {
    width: 120px;
    height: 120px;
    object-fit: cover;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 3px solid var(--tt-purple);
    box-shadow: 0 8px 22px rgba(180, 0, 215, 0.30);
    animation: vinyl-spin 12s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    #music-cover {
        animation: none;
    }
}

.thumb-skeleton--cover {
    width: 130px !important;
    height: 125px !important;
    margin: 15px auto 0;
    padding: 0 !important;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.thumb-skeleton--cover::before {
    display: none;
}

.thumb-skeleton--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#music-duration {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    margin: 4px 0 8px;
    display: none;
}

#music-duration[style*="display: block"] {
    display: block !important;
    padding: 6px 12px;
    background: var(--bg-elev-1);
    border-radius: var(--r-pill);
    width: max-content;
    margin: 4px auto 12px;
    border: 1px solid var(--border-soft);
}

#music-duration i {
    color: var(--tt-purple);
    margin-right: 4px;
}

#music-download-container {
    display: none;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding: 20px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#music-download-container.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================== USER PROFILE RESULT ====================== */
#user-info-container {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: linear-gradient(180deg, rgba(180, 0, 215, 0.05) 0%, var(--bg-elev-1) 80%);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

#user-info-container.show {
    opacity: 1;
    transform: translateY(0);
}

#user-info-container::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -10%;
    right: -10%;
    height: 220px;
    background: var(--grad-brand);
    background-size: 200% 200%;
    opacity: 0.10;
    filter: blur(40px);
    z-index: 0;
    animation: hero-grad 8s ease-in-out infinite;
}

#user-info-container > * {
    position: relative;
    z-index: 1;
}

#ui-profile-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(180, 0, 215, 0.30), 0 0 0 3px var(--tt-purple);
    margin-bottom: 12px;
    background: var(--bg-elev-0);
}

body.dark-mode #ui-profile-img {
    border-color: #1a1426;
}

#ui-username {
    font-weight: 800;
    font-size: 18px;
    margin: 4px 0;
    color: var(--text-primary);
    text-align: center;
    background: var(--grad-brand);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-grad 6s ease-in-out infinite;
}

#ui-bio-row,
#ui-privacy-row {
    margin: 4px 0;
    color: var(--text-secondary);
    text-align: center;
    font-size: 13px;
    max-width: 100%;
    word-break: break-word;
}

#ui-bio-row i,
#ui-privacy-row i {
    color: var(--tt-purple);
    margin-right: 4px;
}

#user-info-container h3 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 16px 0 10px;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
}

.stats-container p {
    margin: 0;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.stats-container p:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}

.stats-container p i {
    color: var(--tt-purple);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

#zoom-profile-pic-button {
    background: linear-gradient(135deg, #00e9ff 0%, #b400d7 100%) !important;
}

/* "Download next" cluster */
#l {
    display: none;
    width: 100%;
    margin-top: 12px;
    cursor: pointer;
}

#l > a {
    background: linear-gradient(135deg, var(--tt-cyan-2) 0%, var(--tt-purple) 100%) !important;
}

/* ============================== ANIM TARGET =========================== */
.anim-target {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.anim-target.show {
    opacity: 1;
    transform: translateY(0);
}

/* ================================ TOAST =============================== */
.toast {
    white-space: nowrap;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: rgba(20, 12, 30, 0.92);
    color: #fff;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-pill);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 9999;
    pointer-events: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ======================== CTA HINTS (scroll + PWA) ==================== */
.cta-hints {
    max-width: var(--maxw);
    margin: 24px auto 0;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 600px) {
    .cta-hints {
        grid-template-columns: 1fr 1fr;
    }
}

.scroll-button-wrapper {
    width: 100%;
}

.scroll-to-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scroll-to-guide:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.scroll-to-guide .scroll-icon {
    width: 22px;
    height: 22px;
}

.pwa-install-wrapper {
    width: 100%;
}

.pwa-install-btn {
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--tt-purple) 0%, var(--tt-pink) 120%);
    border: none;
    border-radius: var(--r-md);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(180, 0, 215, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pwa-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(180, 0, 215, 0.42);
}

.pwa-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 14px;
}

.pwa-title-row .scroll-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.pwa-btn-subtext {
    font-size: 11px;
    opacity: 0.9;
    font-weight: 500;
}

/* PWA hint overlay */
@keyframes pwaFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pwaPopIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }

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

#pwa-hint-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 25, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pwaFadeIn 0.3s ease both;
}

.pwa-hint-box {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    padding: 24px 22px 20px;
    max-width: 380px;
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: pwaPopIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pwa-hint-close-icon {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.pwa-hint-close-icon:hover {
    background: rgba(180, 0, 215, 0.10);
    color: var(--tt-purple);
}

.pwa-hint-title {
    font-weight: 800;
    font-size: 17px;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-right: 30px;
}

.pwa-hint-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 18px;
}

.pwa-hint-actions {
    display: flex;
    justify-content: flex-end;
}

.pwa-hint-done {
    padding: 10px 22px;
    background: var(--grad-cta);
    background-size: 200% 200%;
    border: none;
    border-radius: var(--r-md);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background-position 0.5s, transform 0.18s;
}

.pwa-hint-done:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
}

/* =================== CONTENT BLOCK (#k) — info & SEO ================== */
#k {
    max-width: var(--maxw);
    margin: 32px auto 0;
    padding: 0 var(--gutter);
}

#k > hr {
    height: 0;
    border: 0;
    border-top: 2px solid var(--tt-red);
    animation: 2s infinite borderAnimation;
    opacity: 0.85;
    transition: opacity 0.1s;
    margin: 24px 0 !important;
    border-radius: 2px;
}

@keyframes borderAnimation {

    0%,
    100%,
    85% {
        border-color: var(--tt-red);
    }

    35% {
        border-color: var(--tt-purple);
    }

    70% {
        border-color: var(--tt-cyan);
    }
}

/* OTHER TOOLS NAV (.rbutton) */
.rbutton-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}

@media (min-width: 720px) {
    .rbutton-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rmenu {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 800;
    color: var(--text-primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.rbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    background: linear-gradient(135deg, var(--tt-purple) 0%, var(--tt-purple-2) 100%);
    color: #fff;
    text-decoration: none;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 12px rgba(180, 0, 215, 0.25);
    line-height: 1.2;
}

.rbutton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(180, 0, 215, 0.40);
}

.rbutton svg {
    flex-shrink: 0;
}

/* SEO sections */
#info-text,
#features-info,
#reasons,
#url-formats-section,
#guide-section,
#devices,
#faq-item {
    padding: 18px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
}

#info-text h1,
#info-text h2,
#features-info h2,
#reasons h2,
#url-formats-section h2,
#guide-section h2,
#devices h2,
#faq-item > h2 {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

#info-text h1 {
    background: var(--grad-cta);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-grad 8s ease-in-out infinite;
}

#info-text p,
#features-info p,
#reasons p,
#url-formats-section p,
#guide-section p,
#devices p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 14px;
    margin: 10px 0;
}

#info-text strong,
#features-info strong,
#reasons strong,
#url-formats-section strong,
#guide-section strong,
#devices strong {
    color: var(--text-primary);
    font-weight: 800;
}

.icons-container {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.icons-container .icon {
    width: clamp(90px, 18vw, 130px) !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.icons-container .icon:hover {
    transform: rotate(-6deg) scale(1.06);
}

.section-title {
    text-align: center;
}

.brand-name {
    background: var(--grad-brand);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-grad 6s ease-in-out infinite;
}

/* Feature cards (Why choose) */
.features-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
}

@media (min-width: 600px) {
    .features-cards {
        grid-template-columns: 1fr 1fr;
    }
}

.feature-card {
    padding: 18px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.3s;
    animation: hero-grad 6s ease-in-out infinite;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(180, 0, 215, 0.10), rgba(0, 242, 234, 0.10));
    margin-bottom: 12px;
}

.feature-card .icon img {
    width: 44px;
    height: 44px;
}

.feature-card h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 6px 0 8px;
}

.feature-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* URL formats list */
.url-formats {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

@media (min-width: 600px) {
    .url-formats {
        grid-template-columns: 1fr 1fr;
    }
}

.url-formats li {
    padding: 10px 14px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--tt-purple);
    word-break: break-all;
    font-weight: 600;
}

.url-formats-desc code {
    background: rgba(180, 0, 215, 0.10);
    color: var(--tt-purple);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* GUIDE STEPS — modern numbered cards */
.guide-intro {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 18px;
}

.guide-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.guide-step {
    position: relative;
    padding: 18px 18px 18px 18px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.guide-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.guide-step__num {
    position: absolute;
    top: -14px;
    left: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--grad-cta);
    background-size: 200% 200%;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(180, 0, 215, 0.35);
    animation: hero-grad 6s ease-in-out infinite;
}

.guide-step__media {
    margin: 14px 0 12px;
    display: flex;
    justify-content: center;
}

.guide-step__media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    background: var(--bg-elev-0);
}

.guide-step__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 8px 0 0;
}

.spn {
    color: var(--tt-purple);
    font-weight: 800;
}

.download-options {
    list-style: none;
    padding: 0;
    margin: 12px 0 6px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.download-options li {
    padding: 10px 12px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-secondary);
}

/* DEVICES list */
.large-tick {
    display: block;
    margin: 0 auto 12px;
    width: clamp(100px, 18vw, 130px) !important;
    height: auto !important;
    aspect-ratio: 1/1;
}

.os-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (min-width: 600px) {
    .os-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.os-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.os-list li .tick {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.os-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================== FAQ ================================== */
#faq-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
    border-color: var(--border-strong);
}

.faq-question {
    margin: 0;
    padding: 16px 48px 16px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    position: relative;
    user-select: none;
    line-height: 1.4;
    transition: background 0.2s;
}

.faq-question:hover {
    background: rgba(180, 0, 215, 0.04);
}

.faq-chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--tt-purple);
    border-bottom: 2px solid var(--tt-purple);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}

.faq-question.open .faq-chevron,
.faq-answer.open ~ .faq-chevron {
    /* fallback */
}

.faq-question .triangle {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--tt-purple);
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.faq-question .triangle.open {
    transform: translateY(-50%) rotate(180deg);
}

/* JS toggles .open on .faq-answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 18px;
    background: rgba(180, 0, 215, 0.03);
}

.faq-answer.open {
    max-height: 600px;
    padding: 4px 18px 16px;
}

.faq-answer p {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* Rotate chevron when answer is open — sibling selector trick */
.faq-item:has(.faq-answer.open) .faq-chevron {
    transform: translateY(-30%) rotate(225deg);
}

/* ============================== FOOTER ================================ */
#global-footer {
    margin-top: 32px;
    padding: 0 0 0;
}

#ttalert {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px var(--gutter);
}

#ttalert p {
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-elev-1);
    border: 1px dashed var(--border-soft);
    border-radius: var(--r-md);
}

.share-section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.share-section > span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.share-section hr {
    border: 0;
    border-top: 1px solid var(--border-soft);
    width: 70%;
    margin: 4px 0 !important;
}

.share-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.share-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad-cta);
    background-size: 200% 200%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(180, 0, 215, 0.35);
    transition: transform 0.25s ease, background-position 0.5s ease;
    animation: hero-grad 6s ease-in-out infinite;
}

.share-icon-circle:hover {
    transform: scale(1.08);
}

.my-other-tools-container {
    width: 100%;
    max-width: 360px;
}

.my-other-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s, background 0.2s;
}

.my-other-tools-header:hover {
    border-color: var(--border-strong);
}

.my-arrow {
    color: var(--tt-purple);
    transition: transform 0.3s ease;
}

.my-rotated {
    transform: rotate(180deg);
}

.my-other-tools-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
}

.my-other-tools-content.my-active {
    max-height: 280px;
    opacity: 1;
    margin-top: 6px;
}

.my-other-tools-content ul {
    list-style: none;
    padding: 6px;
    margin: 0;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.my-other-tools-content li a {
    display: block;
    padding: 10px 14px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--r-sm);
    transition: background 0.2s, color 0.2s;
}

.my-other-tools-content li a:hover {
    background: rgba(180, 0, 215, 0.08);
    color: var(--tt-purple);
}

.footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--tt-purple);
}

#footer {
    text-align: center;
    padding: 14px var(--gutter) 24px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ====================== ANIMATIONS / UTILITIES ======================== */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.fa-spin,
.fa-circle-notch.fa-spin {
    animation: 1s linear infinite spin;
}

/* ============================ RESPONSIVE ============================== */
@media (max-width: 540px) {
    #r {
        flex-direction: column;
        align-items: stretch;
    }

    #s {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
        aspect-ratio: 9/14;
    }

    .result-stats-grid {
        grid-template-columns: 1fr;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 8px;
    }

    .hero-title {
        font-size: clamp(24px, 7vw, 32px);
    }
}

/* Lower-end device performance opt-out for heavy effects */
@media (max-width: 480px) {
    .aurora-blob {
        filter: blur(60px);
    }

    form#convert-form {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* Print */
@media print {

    .aurora,
    #menu-button,
    #menu-dropdown,
    #cookie-consent-banner,
    .toast,
    #pwa-install-btn,
    .scroll-to-guide {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* Focus-visible polish */
:focus-visible {
    outline: 3px solid var(--tt-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--tt-cyan);
    outline-offset: 2px;
}


#input-section {
    display: block;          /* flex'i iptal et */
    width: 100%;
}

#input-section .c {
    display: block;          /* inline-block yerine block */
    width: 100%;
    margin-bottom: 15px;     /* input ile download butonu arası boşluk */
}

#input-section #convert-button {
    display: block;
    width: 100%;
    margin-top: 0;           /* artık .c'nin margin-bottom'u var */
}

/* ============================================ */
/* STATS MARQUEE - SADECE MOBİLDE                */
/* ============================================ */

/* PC'de (801px+): Marquee tamamen kapalı, sıradan dikey liste */
.stats-marquee {
    width: 100%;
    overflow: visible;
    margin: 0;
}

.stats-track {
    display: block;
}

.stats-track p {
    margin: 7px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

/* MOBİLDE (≤800px): Marquee aktif */
@media only screen and (max-width: 800px) {
    .stats-marquee {
        overflow-x: auto;             /* ✅ Manuel kaydırma için açık */
        overflow-y: hidden;
        margin: 8px 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
        /* ❌ mask-image YOK — blur kaldırıldı */
    }

    .stats-marquee::-webkit-scrollbar {
        display: none;
    }

    .stats-marquee:active {
        cursor: grabbing;
    }

    .stats-track {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 24px;
        width: max-content;
        /* CSS animasyon YOK — JS ile yumuşak kontrol edeceğiz */
    }

    .stats-track p {
        margin: 0;
        flex-shrink: 0;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-overflow: clip;
        overflow: visible;
        max-width: none;
    }
}

/* ============================================ */
/* BUTTON METIN HIZALAMA DÜZELTMESİ              */
/* ============================================ */
#v a,
#p, #q, #o, #c-link,
#photo-mp3-button,
#photo-convert-video-button,
#music-download-button-1,
#music-download-button-2,
#music-download-button-cd,
#download-profile-pic-button,
#zoom-profile-pic-button,
#dynamic-download-btn,
.download-photo,
#l-photo,
#ui-next-btn {
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 52px;
    padding: 14px 18px;
    box-sizing: border-box;
    /* NOT: display: flex KASITLI OLARAK YAZILMADI */
    /* Çünkü JS butonları "block" veya "flex" olarak açıyor */
    /* Inline display:none'u ezmemek için bu kuralı KOYMUYORUZ */
}

/* Buton görünür olduğunda (JS display='block' yaptığında) flex davranması için: */
#p[style*="block"], #q[style*="block"], #o[style*="block"], #c-link[style*="block"],
#photo-mp3-button[style*="block"], #photo-convert-video-button[style*="block"],
#v a[style*="block"] {
    display: flex !important;
}

/* Buton içindeki ikonlar */
#v a i, #p i, #q i, #o i, #c-link i,
#photo-mp3-button i, #photo-convert-video-button i,
#music-download-button-1 i, #music-download-button-2 i, #music-download-button-cd i,
#download-profile-pic-button i, #zoom-profile-pic-button i,
#dynamic-download-btn i, #ui-next-btn i {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}