/* TikTok tool pages. Every rule is scoped to .tt-tools so it cannot leak into the downloader pages,
   and it reuses the site tokens from site.css so the tools share the TikTokSavers look. */
.tt-tools {
    --tt-green: #155c3d;
    --tt-green-bg: #eefaf4;
    --tt-green-line: #c9ecd9;
    --tt-amber-bg: #fdf9ee;
    --tt-amber-line: #efe2bd;
    --tt-amber-ring: #f8ebc9;
    --tt-red: #c13655;
    --tt-red-ring: #ffe1e8;
    --tt-accent-line: #cbbcff;
    padding-bottom: 2rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

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

    .tt-tools a {
        color: var(--purple);
    }

    .tt-tools :focus-visible {
        outline: 3px solid var(--purple);
        outline-offset: 3px;
    }

    .tt-tools h1, .tt-tools h2, .tt-tools h3 {
        letter-spacing: -.04em;
        line-height: 1.15;
    }

    .tt-tools .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .tt-tools .mono {
        font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
        letter-spacing: 0;
    }

    .tt-tools .break {
        overflow-wrap: anywhere;
    }

    /* ---------- breadcrumbs ---------- */
    .tt-tools .breadcrumbs {
        padding-top: 1.1rem;
        font-size: .82rem;
    }

        .tt-tools .breadcrumbs ol {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--muted);
        }

        .tt-tools .breadcrumbs li + li::before {
            margin-right: .4rem;
            color: var(--field-line);
            content: "/";
        }

        .tt-tools .breadcrumbs a, .tt-tools .breadcrumbs span {
            display: inline-block;
            padding-block: .3rem;
        }

        .tt-tools .breadcrumbs a {
            color: var(--muted);
            font-weight: 650;
            text-decoration: none;
        }

            .tt-tools .breadcrumbs a:hover {
                color: var(--purple);
            }

    /* ---------- hero ---------- */
    .tt-tools .tool-hero, .tt-tools .hub-hero {
        margin: 1rem 0 2.5rem;
        padding: 3.25rem 5.5% 3.5rem;
        border-radius: 28px;
        background: var(--hero-bg);
    }

    .tt-tools h1 {
        max-width: 760px;
        margin: 0;
        font-size: clamp(2.3rem, 4.5vw, 3.8rem);
        font-weight: 820;
        letter-spacing: -.065em;
        line-height: 1;
    }

    .tt-tools .lead {
        max-width: 640px;
        margin: 1.2rem 0 1.75rem;
        color: var(--muted);
        font-size: 1.05rem;
        line-height: 1.65;
    }

    /* ---------- lookup form (mirrors the downloader's link field) ---------- */
    .tt-tools .lookup-form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem;
        max-width: 620px;
        padding: .45rem;
        border: 1px solid var(--field-line);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: 0 18px 44px var(--shadow);
        transition: border-color .2s, box-shadow .2s;
    }

        .tt-tools .lookup-form:focus-within {
            border-color: var(--purple);
            box-shadow: 0 0 0 4px rgba(108,61,244,.1);
        }

    .tt-tools .input-wrap {
        display: flex;
        flex: 1 1 14rem;
        align-items: center;
        min-width: 0;
        padding-left: .7rem;
    }

        .tt-tools .input-wrap > span {
            padding-right: .45rem;
            color: var(--purple);
            font-size: 1.15rem;
            font-weight: 800;
        }

        .tt-tools .input-wrap input {
            width: 100%;
            min-width: 0;
            min-height: 42px;
            padding: .5rem 0;
            border: 0;
            color: var(--ink);
            background: none;
            font: inherit;
            font-size: .96rem;
        }

            .tt-tools .input-wrap input:focus {
                outline: none;
            }

    .tt-tools .lookup-form button {
        flex: 0 0 auto;
        min-height: 44px;
        padding: .7rem 1.15rem;
        border: 1px solid var(--purple);
        border-radius: 9px;
        color: #fff;
        background: var(--purple);
        cursor: pointer;
        font: inherit;
        font-weight: 750;
    }

        .tt-tools .lookup-form button:hover, .tt-tools .lookup-form button:focus-visible {
            border-color: var(--purple-dark);
            background: var(--purple-dark);
        }

    /* While a lookup or the next page of videos loads (site.js, data-loading), the control shows a spinner. */
    .tt-tools .lookup-form button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .tt-tools .is-loading {
        cursor: progress;
    }

        .tt-tools .is-loading .button-spinner {
            display: inline-block;
        }

        .tt-tools .is-loading .button-icon {
            display: none;
        }

    .tt-tools .form-note {
        margin: .75rem 0 0;
        color: var(--muted);
        font-size: .84rem;
    }

    /* ---------- result ---------- */
    /* Every section uses the full content width, so hero, results, guides, text and FAQs share one set of edges. */
    .tt-tools .result {
        margin: 0 0 1rem;
    }

    .tt-tools .result-card {
        margin-bottom: 1.25rem;
        padding: clamp(1.25rem, 4vw, 2rem);
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--surface);
        box-shadow: 0 24px 60px var(--shadow);
    }

        .tt-tools .result-card.found, .tt-tools .result-card.available {
            border-color: var(--tt-green-line);
            background: var(--tt-green-bg);
        }

        .tt-tools .result-card.unknown {
            border-color: var(--tt-amber-line);
            background: var(--tt-amber-bg);
        }

    .tt-tools .status {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 .9rem;
        color: var(--muted);
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .tt-tools .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #21c77a;
        box-shadow: 0 0 0 4px var(--dot-ring);
    }

        .tt-tools .status-dot.taken {
            background: var(--tt-red);
            box-shadow: 0 0 0 4px var(--tt-red-ring);
        }

    .tt-tools .result-card.unknown .status-dot {
        background: #d49a1f;
        box-shadow: 0 0 0 4px var(--tt-amber-ring);
    }

    .tt-tools .headline-value {
        margin: 0;
        font-size: clamp(1.8rem, 6vw, 2.8rem);
        font-weight: 820;
        letter-spacing: -.05em;
        line-height: 1.1;
    }

        .tt-tools .headline-value.small {
            font-size: clamp(.95rem, 3vw, 1.15rem);
            font-weight: 650;
            letter-spacing: 0;
            line-height: 1.5;
        }

    .tt-tools .headline-secondary {
        margin: .75rem 0 0;
        font-size: 1.05rem;
    }

    .tt-tools .headline-caption {
        margin: .7rem 0 0;
        color: var(--muted);
        font-size: .9rem;
    }

    .tt-tools .result-card h2 {
        margin: .2rem 0 .6rem;
        font-size: clamp(1.3rem, 4vw, 1.7rem);
        font-weight: 800;
    }

    .tt-tools .result-card p {
        color: var(--text-soft);
    }

        .tt-tools .result-card p + p {
            margin-bottom: 0;
        }

    .tt-tools .fineprint {
        color: var(--muted);
        font-size: .84rem;
    }

    /* ---------- profile ---------- */
    .tt-tools .profile-summary {
        margin-bottom: 1.25rem;
        padding: clamp(1.25rem, 4vw, 2rem);
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--surface);
    }

        .tt-tools .profile-summary > h2 {
            margin: 0 0 1.1rem;
            color: var(--purple);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

    .tt-tools .profile-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

        .tt-tools .profile-head img {
            flex: none;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            object-fit: cover;
            background: var(--mist);
            box-shadow: 0 0 0 4px var(--chip);
        }

    .tt-tools .profile-name {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: -.03em;
    }

    .tt-tools .profile-handle {
        margin: .15rem 0 0;
        color: var(--purple);
        font-size: .9rem;
        font-weight: 700;
    }

    .tt-tools .profile-bio {
        margin: 1.1rem 0 0;
        color: var(--text-soft);
        white-space: pre-line;
    }

    .tt-tools .verified {
        display: inline-grid;
        width: 1.15rem;
        height: 1.15rem;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: var(--purple);
        font-size: .7rem;
        vertical-align: middle;
    }

    .tt-tools .stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 1.25rem 0;
        padding: 1.15rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
    }

        .tt-tools .stats > div {
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        .tt-tools .stats dt {
            order: 2;
            color: var(--muted);
            font-size: .78rem;
            font-weight: 650;
        }

        .tt-tools .stats dd {
            order: 1;
            margin: 0 0 .15rem;
        }

        .tt-tools .stats b {
            font-size: 1.3rem;
            font-weight: 820;
            letter-spacing: -.04em;
        }

    .tt-tools .details {
        display: grid;
        gap: .2rem;
        margin: 1.5rem 0 0;
    }

    .tt-tools .detail {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: .2rem .75rem;
        padding-block: .6rem;
        border-top: 1px solid var(--line);
    }

        .tt-tools .detail dt {
            grid-column: 1;
            color: var(--muted);
            font-size: .84rem;
        }

        .tt-tools .detail dd {
            grid-column: 1;
            margin: 0;
        }

        .tt-tools .detail strong {
            font-weight: 700;
        }

    .tt-tools .copy {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        padding: .35rem .6rem;
        border: 0;
        border-radius: 8px;
        color: var(--chip-ink);
        background: var(--chip);
        cursor: pointer;
        font: inherit;
        font-size: .78rem;
        font-weight: 750;
    }

        .tt-tools .copy:hover {
            color: var(--chip-ink-strong);
            background: var(--chip-hover);
        }

        .tt-tools .copy.primary {
            display: inline-block;
            grid-column: auto;
            grid-row: auto;
            margin-top: 1rem;
            padding: .65rem 1rem;
            color: #fff;
            background: var(--purple);
            font-size: .9rem;
        }

            .tt-tools .copy.primary:hover {
                background: var(--purple-dark);
            }

    /* ---------- content sections ---------- */
    .tt-tools .guide, .tt-tools .prose, .tt-tools .faq, .tt-tools .related, .tt-tools .hub-category {
        padding: 3rem 0 0;
        border: 0;
    }

        .tt-tools .guide h2, .tt-tools .prose h2, .tt-tools .faq h2, .tt-tools .related h2, .tt-tools .hub-category h2 {
            max-width: 640px;
            margin: 0 0 1.35rem;
            font-size: clamp(1.55rem, 3vw, 2.1rem);
            font-weight: 800;
            letter-spacing: -.055em;
        }

    .tt-tools .guide-grid {
        display: grid;
        gap: 1rem;
    }

    .tt-tools .guide article {
        height: 100%;
        padding: 1.45rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
    }

    .tt-tools .guide h3 {
        margin: 0 0 .45rem;
        font-size: 1rem;
        font-weight: 780;
    }

    .tt-tools .guide p {
        margin: 0;
        color: var(--muted);
        font-size: .88rem;
        line-height: 1.6;
    }

    /* A guide's introduction and closing note sit outside the cards and read like body text. */
    .tt-tools .guide > p:not(.card-kicker) {
        margin: 0 0 1.25rem;
        color: var(--text-body);
        font-size: 1rem;
        line-height: 1.7;
    }

    /* A note after a row of cards or the steps keeps clear of them. As specific as the rule above, and later, so it wins. */
    .tt-tools .guide > .guide-grid + p:not(.card-kicker), .tt-tools .guide > .visual-steps + p:not(.card-kicker) {
        margin: 1.5rem 0 0;
    }

    /* Links in a guide's text and cards look like links everywhere else in the tools' text. */
    .tt-tools .guide p a {
        font-weight: 750;
        text-decoration: none;
    }

        .tt-tools .guide p a:hover {
            text-decoration: underline;
        }

    /* A small label above a section heading ("Features", "Troubleshooting"). */
    .tt-tools .guide > .card-kicker {
        margin: 0 0 .5rem;
        color: var(--purple);
        font-size: .72rem;
        line-height: 1.6;
    }

    .tt-tools .guide h3 + p + h3, .tt-tools .guide > p + h3 {
        margin-top: 1.75rem;
    }

    /* Feature cards with an icon, and the same gentle lift on hover as the rest of the site's cards. */
    .tt-tools .guide article .feature-icon {
        margin-bottom: .9rem;
    }

    .tt-tools .guide article {
        transition: box-shadow .2s, transform .2s, border-color .2s;
    }

@media (hover: hover) {
    .tt-tools .guide article:hover {
        border-color: var(--tt-accent-line);
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-3px);
    }
}

/* Step-by-step guides with pictures (.visual-steps, site.css) inside a tool page. */
.tt-tools .guide .visual-steps {
    margin-top: .5rem;
}

    .tt-tools .guide .visual-steps h3 {
        margin: .8rem 0 .55rem;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .tt-tools .guide .visual-steps p {
        margin: 0 0 .55rem;
        color: var(--text-body);
        font-size: .96rem;
        line-height: 1.65;
    }

        .tt-tools .guide .visual-steps p:last-child {
            margin-bottom: 0;
        }

/* The site's comparison table (.home-table, site.css) inside a tool page's text. */
.tt-tools .prose .home-table-wrap, .tt-tools .guide .home-table-wrap {
    margin: .25rem 0 1.25rem;
}

/* The hero's short list of ticks, between the introduction and the search box. */
.tt-tools .tool-hero .hero-trust {
    margin: -.5rem 0 1.5rem;
    padding: 0;
}

/* A tool page's introduction with its featured picture uses the downloader pages' layout (site.css: .home-prose,
   .intro-split): text and picture side by side on wide screens. Only the spacing follows the tool pages. */
.tt-tools .tool-intro {
    padding-top: 3rem;
}

    /* The tool pages' general heading rule (.tt-tools h2) would otherwise loosen this heading. */
    .tt-tools .tool-intro h2 {
        letter-spacing: -.055em;
        line-height: normal;
    }

.tt-tools .prose h2 + p {
    margin-top: 0;
}

.tt-tools .prose p, .tt-tools .prose li {
    margin: 0 0 1rem;
    color: var(--text-body);
    line-height: 1.7;
}

.tt-tools .prose a, .tt-tools .faq details p a {
    font-weight: 750;
    text-decoration: none;
}

    .tt-tools .prose a:hover, .tt-tools .faq details p a:hover {
        text-decoration: underline;
    }

.tt-tools .prose h3 {
    margin: 1.75rem 0 .6rem;
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.tt-tools .faq {
    padding-bottom: 0;
}

    .tt-tools .faq details {
        margin-bottom: .7rem;
        padding: 0 1.15rem;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--surface);
    }

    .tt-tools .faq summary {
        display: flex;
        align-items: center;
        min-height: 58px;
        cursor: pointer;
        font-size: .92rem;
        font-weight: 720;
        list-style: none;
    }

        .tt-tools .faq summary::-webkit-details-marker {
            display: none;
        }

        .tt-tools .faq summary::after {
            margin-left: auto;
            padding-left: 1rem;
            color: var(--purple);
            content: "+";
            font-size: 1.2rem;
        }

    .tt-tools .faq details[open] summary::after {
        content: "−";
    }

    .tt-tools .faq details p {
        margin: 0 0 1rem;
        color: var(--muted);
        font-size: .88rem;
        line-height: 1.6;
    }

.tt-tools .related ul, .tt-tools .tool-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tt-tools .related a, .tt-tools .tool-grid a {
        display: grid;
        gap: .3rem;
        height: 100%;
        padding: 1.3rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--ink);
        background: linear-gradient(135deg, var(--surface), var(--surface-tint));
        text-decoration: none;
        transition: border-color .2s, box-shadow .2s;
    }

        .tt-tools .related a:hover, .tt-tools .tool-grid a:hover, .tt-tools .related a:focus-visible, .tt-tools .tool-grid a:focus-visible {
            border-color: var(--tt-accent-line);
            box-shadow: 0 14px 34px rgba(87,44,206,.1);
        }

    .tt-tools .related strong, .tt-tools .tool-grid strong {
        color: var(--ink);
        font-size: 1rem;
        font-weight: 780;
    }

    .tt-tools .related span, .tt-tools .tool-grid span {
        color: var(--muted);
        font-size: .86rem;
        line-height: 1.5;
    }

/* ---------- profile videos and comments ---------- */
.tt-tools .profile-videos {
    margin: 0 0 0 auto;
}

.tt-tools .profile-videos-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .55rem .95rem;
    border-radius: 9px;
    color: #fff;
    background: var(--purple);
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
}

    .tt-tools .profile-videos-link:hover {
        background: var(--purple-dark);
    }

.tt-tools .video-section {
    padding-top: 1rem;
}

.tt-tools .video-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: 0 0 1.35rem;
}

    .tt-tools .video-head h2 {
        margin: 0;
        font-size: clamp(1.55rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -.055em;
    }

.tt-tools .video-count {
    color: var(--muted);
    font-weight: 700;
}

.tt-tools .video-sort {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

    .tt-tools .video-sort[hidden] {
        display: none;
    }

    .tt-tools .video-sort select {
        min-height: 40px;
        padding: .45rem .9rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink);
        background: var(--surface);
        cursor: pointer;
        font: inherit;
        font-weight: 750;
    }

        .tt-tools .video-sort select:hover {
            border-color: var(--tt-accent-line);
        }

.tt-tools .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-tools .video-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

    .tt-tools .video-card:hover {
        border-color: var(--tt-accent-line);
    }

.tt-tools .video-cover {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    color: #fff;
    background: linear-gradient(145deg, var(--chip), var(--mist));
    text-decoration: none;
}

    /* A light shade at the top and bottom keeps the badges readable on bright covers. */
    .tt-tools .video-cover::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10,9,18,.38) 0, rgba(10,9,18,0) 30%, rgba(10,9,18,0) 68%, rgba(10,9,18,.42) 100%);
        content: "";
        pointer-events: none;
    }

    .tt-tools .video-cover img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .tt-tools .video-cover:hover img, .tt-tools .video-cover:focus-visible img {
        transform: scale(1.04);
    }

    .tt-tools .video-cover .icon, .tt-tools .video-stats .icon, .tt-tools .video-icon-button .icon, .tt-tools .player-actions .icon {
        flex: none;
        width: 1em;
        height: 1em;
    }

.tt-tools .video-views, .tt-tools .video-length {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(15,14,24,.62);
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.4;
    backdrop-filter: blur(6px);
}

.tt-tools .video-views {
    top: .6rem;
    left: .6rem;
}

    .tt-tools .video-views .icon {
        font-size: .95rem;
    }

.tt-tools .video-length {
    right: .6rem;
    bottom: .6rem;
}

/* The play button appears on hover or focus; touch screens, which cannot hover, always show it. */
.tt-tools .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #8d63ff, var(--purple) 55%, #ff4f8b);
    box-shadow: 0 12px 30px rgba(10,9,18,.4);
    font-size: 1.55rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.85);
    transition: opacity .2s, transform .2s;
}

    .tt-tools .video-play .icon {
        margin-left: .12em;
    }

.tt-tools .video-cover:hover .video-play, .tt-tools .video-cover:focus-visible .video-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (hover: none) {
    .tt-tools .video-play {
        opacity: .95;
        transform: translate(-50%, -50%) scale(.8);
    }
}

.tt-tools .video-date {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.tt-tools .video-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .3rem;
}

.tt-tools .video-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .85rem;
    margin: 0;
    color: var(--text-soft);
    font-size: .82rem;
    font-weight: 750;
}

    .tt-tools .video-stats > * {
        display: inline-flex;
        align-items: center;
        gap: .32rem;
        color: inherit;
        text-decoration: none;
    }

    .tt-tools .video-stats .icon {
        color: var(--muted);
        font-size: 1rem;
    }

    .tt-tools .video-stats .video-likes .icon {
        color: #e5466b;
    }

    .tt-tools .video-stats a:hover {
        color: var(--purple);
    }

.tt-tools .video-foot .video-actions {
    flex: none;
    margin: 0;
}

.tt-tools .video-icon-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--chip-ink);
    background: var(--surface);
    cursor: pointer;
    font-size: 1.1rem;
    transition: background .2s, border-color .2s, color .2s;
}

    .tt-tools .video-icon-button:hover {
        border-color: var(--tt-accent-line);
        background: var(--chip);
    }

    .tt-tools .video-icon-button.primary {
        border-color: var(--purple);
        color: #fff;
        background: var(--purple);
    }

        .tt-tools .video-icon-button.primary:hover {
            border-color: var(--purple-dark);
            background: var(--purple-dark);
        }

    .tt-tools .video-icon-button[hidden] {
        display: none;
    }

.tt-tools .video-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
    padding: .95rem;
}

.tt-tools .video-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tt-tools .video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
}

.tt-tools .video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
}

.tt-tools .video-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .35rem .65rem;
    border: 0;
    border-radius: 8px;
    color: var(--chip-ink);
    background: var(--chip);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 750;
    text-decoration: none;
}

    .tt-tools .video-action:hover {
        color: var(--chip-ink-strong);
        background: var(--chip-hover);
    }

    .tt-tools .video-action.primary {
        color: #fff;
        background: var(--purple);
    }

        .tt-tools .video-action.primary:hover {
            background: var(--purple-dark);
        }

    .tt-tools .video-action[hidden] {
        display: none;
    }

.tt-tools .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0;
}

    .tt-tools .pager a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 44px;
        padding: .65rem 1rem;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        font-weight: 750;
        text-decoration: none;
    }

        .tt-tools .pager a:hover {
            border-color: var(--tt-accent-line);
        }

    .tt-tools .pager .pager-next {
        margin-left: auto;
        color: #fff;
        border-color: var(--purple);
        background: var(--purple);
    }

.tt-tools .empty-note {
    color: var(--muted);
}

.tt-tools .comment-video {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin: 0;
    font-size: .9rem;
}

    .tt-tools .comment-video a {
        font-weight: 750;
        text-decoration: none;
    }

.tt-tools .comment-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-tools .comment {
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.tt-tools .comment-author {
    margin: 0 0 .3rem;
    color: var(--purple);
    font-size: .86rem;
    font-weight: 750;
}

.tt-tools .comment-text {
    margin: 0;
    white-space: pre-line;
}

.tt-tools .comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    margin: .5rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}

/* The downloader card is reused unchanged inside the dialog; only its page-level offsets are reset. */
.tt-tools .video-dialog {
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100% - 2rem);
    padding: 1.25rem;
    border: 0;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 30px 80px rgba(34,24,72,.25);
}

    .tt-tools .video-dialog::backdrop {
        background: rgba(22,22,34,.55);
    }

.tt-tools .video-dialog-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .25rem 1rem;
    margin-bottom: 1rem;
}

    .tt-tools .video-dialog-head .eyebrow {
        margin: 0;
    }

.tt-tools .video-dialog-title {
    grid-column: 1;
    margin: 0;
    font-weight: 750;
}

.tt-tools .video-dialog-close {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    color: var(--ink);
    background: var(--mist);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.tt-tools .video-dialog .row {
    display: block;
}

.tt-tools .video-dialog .download-card {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

/* The player window: a portrait 9:16 frame sized to fit the screen, with the actions underneath. */
.tt-tools .player-dialog {
    width: min(460px, calc(100% - 2rem));
}

.tt-tools .player-frame {
    position: relative;
    width: min(100%, calc((100dvh - 15rem) * 9 / 16));
    min-width: min(100%, 240px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}

    .tt-tools .player-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.tt-tools .player-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

    .tt-tools .player-actions .btn {
        flex: 1 1 10rem;
        gap: .5rem;
        min-height: 46px;
        padding: .7rem 1rem;
        border-radius: 12px;
        font-size: .92rem;
        font-weight: 750;
    }

        .tt-tools .player-actions .btn[hidden] {
            display: none;
        }

    .tt-tools .player-actions .icon {
        font-size: 1.1rem;
    }

.tt-tools .player-open {
    border-color: var(--line);
    color: var(--ink);
    background: var(--surface);
}

    .tt-tools .player-open:hover {
        border-color: var(--tt-accent-line);
        background: var(--chip);
    }

/* ---------- dark theme ---------- */
:root[data-theme="dark"] .tt-tools {
    --tt-green: #7fe0b0;
    --tt-green-bg: #10241b;
    --tt-green-line: #1f4a36;
    --tt-amber-bg: #221c10;
    --tt-amber-line: #4d3f1b;
    --tt-amber-ring: #3a2f12;
    --tt-red: #ff7a93;
    --tt-red-ring: #3d1822;
    --tt-accent-line: #5b45a8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tt-tools {
        --tt-green: #7fe0b0;
        --tt-green-bg: #10241b;
        --tt-green-line: #1f4a36;
        --tt-amber-bg: #221c10;
        --tt-amber-line: #4d3f1b;
        --tt-amber-ring: #3a2f12;
        --tt-red: #ff7a93;
        --tt-red-ring: #3d1822;
        --tt-accent-line: #5b45a8;
    }
}

@media (min-width: 768px) {
    .tt-tools .stats {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }

    .tt-tools .detail {
        grid-template-columns: 13rem minmax(0, 1fr) auto;
    }

        .tt-tools .detail dd {
            grid-column: 2;
        }

    .tt-tools .copy {
        grid-row: 1;
        grid-column: 3;
    }
    /* Cards fill the row evenly (4 guide cards sit in one row instead of 3 + 1); hub cards keep one size. */
    .tt-tools .guide-grid, .tt-tools .related ul {
        grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    }

    .tt-tools .tool-grid {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    }
}

@media (min-width: 992px) {
    /* Long-form sections: heading in a narrow left column, readable text in the wider right one. */
    .tt-tools .prose, .tt-tools .faq {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        column-gap: 3.5rem;
        align-items: start;
    }

        .tt-tools .prose > h2, .tt-tools .faq > h2 {
            grid-column: 1;
            grid-row: 1 / span 40;
            position: sticky;
            top: 1.5rem;
            margin: 0;
        }

        .tt-tools .prose > :not(h2), .tt-tools .faq > :not(h2) {
            grid-column: 2;
        }

        .tt-tools .prose > h3:first-of-type {
            margin-top: .5rem;
        }
}

@media (max-width: 767px) {
    .tt-tools .tool-hero, .tt-tools .hub-hero {
        padding: 2.5rem 1.3rem 2.75rem;
        border-radius: 22px;
    }

    .tt-tools .lookup-form {
        padding: .6rem;
    }

        .tt-tools .lookup-form button {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .tt-tools *, .tt-tools *::before, .tt-tools *::after {
        transition-duration: .001ms !important;
    }
}

/* ---------- card elevation (tokens in site.css) ---------- */
.tt-tools .result-card, .tt-tools .profile-summary, .tt-tools .result > .stats, .tt-tools .guide article, .tt-tools .faq details,
.tt-tools .related a, .tt-tools .tool-grid a, .tt-tools .video-card, .tt-tools .comment, .tt-tools .pager a {
    box-shadow: var(--card-shadow);
}

.tt-tools .profile-summary, .tt-tools .result > .stats, .tt-tools .guide article, .tt-tools .faq details,
.tt-tools .related a, .tt-tools .tool-grid a, .tt-tools .video-card, .tt-tools .comment {
    border-color: var(--card-line);
}
    /* Stats nested inside a profile card are part of that card, not a second raised surface. */
    .tt-tools .profile-summary .stats {
        box-shadow: none;
    }

.tt-tools .related a, .tt-tools .tool-grid a, .tt-tools .video-card {
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

    .tt-tools .related a:hover, .tt-tools .tool-grid a:hover, .tt-tools .video-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

@media (prefers-reduced-motion: reduce) {
    .tt-tools .related a:hover, .tt-tools .tool-grid a:hover, .tt-tools .video-card:hover, .tt-tools .guide article:hover, .guide-card:hover {
        transform: none;
    }
}

/* ---------- About, Contact, Privacy and Terms ---------- */
.tt-tools .legal-updated {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 650;
}

.tt-tools .contact-email {
    margin: 0;
}

.tt-tools .contact-email-link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: .75rem 1.25rem;
    border-radius: 12px;
    color: #fff;
    background: var(--purple);
    box-shadow: var(--card-shadow);
    font-size: 1.05rem;
    font-weight: 750;
    text-decoration: none;
}

    .tt-tools .contact-email-link:hover, .tt-tools .contact-email-link:focus-visible {
        background: var(--purple-dark);
        color: #fff;
    }

.tt-tools .prose ul {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.tt-tools .prose code {
    padding: .1rem .35rem;
    border-radius: 6px;
    background: var(--chip);
    color: var(--chip-ink);
    font-size: .85em;
}

/* Links inside cards match the bold, underline-on-hover links used in text sections. */
.tt-tools .guide p a {
    font-weight: 750;
    text-decoration: none;
}

    .tt-tools .guide p a:hover {
        text-decoration: underline;
    }
/* Five or more cards sit in three columns (3 + 2 or 3 + 3) instead of leaving one card alone on a row. */
@media (min-width: 992px) {
    .tt-tools .guide-grid:has(> :nth-child(5)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}