@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

:root {
    --jd-bg: #fefefe;
    --jd-ink: #130B46;
    --jd-muted: #5b5b6e;
    --jd-border: rgba(0,0,0,.08);
    --jd-card: #ffffff;
    --jd-shadow: 0 12px 32px rgba(0,0,0,0.08);
    --jd-shadow-hover: 0 18px 46px rgba(0,0,0,0.12);
    --jd-accent: #6A35FF;
    --jd-cyan: #4DDFFD;
    --jd-pink: #D36CA0;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

.jd-body {
    font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--jd-bg);
    color: #222;
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Platform typography: use Inter's real heavy faces so important copy has
   stronger hierarchy on both desktop and mobile without changing dimensions. */
.jd-body h1,
.jd-body h2,
.jd-body h3,
.jd-body h4,
.jd-body h5,
.jd-body h6,
.jd-body .h1,
.jd-body .h2,
.jd-body .h3,
.jd-body .h4,
.jd-body .h5,
.jd-body .h6,
.jd-body .jd-h1,
.jd-body .jd-h1-sm,
.jd-body .jd-h2 {
    font-weight: 900;
    letter-spacing: -.028em;
}

.jd-body strong,
.jd-body b,
.jd-body .fw-bold {
    font-weight: 800 !important;
}

.jd-body .fw-semibold {
    font-weight: 700 !important;
}

.jd-body button,
.jd-body .btn,
.jd-body [role="button"],
.jd-body label,
.jd-body .jd-nav-link,
.jd-body .jd-mobile-link {
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .jd-body h1,
    .jd-body h2,
    .jd-body h3,
    .jd-body h4,
    .jd-body h5,
    .jd-body h6,
    .jd-body .h1,
    .jd-body .h2,
    .jd-body .h3,
    .jd-body .h4,
    .jd-body .h5,
    .jd-body .h6,
    .jd-body .jd-h1,
    .jd-body .jd-h1-sm,
    .jd-body .jd-h2 {
        letter-spacing: -.02em;
    }
}

.jd-muted {
    color: var(--jd-muted)
}

.jd-main {
    flex: 1 0 auto;
    min-height: 0
}

.jd-navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(254,254,254,.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.jd-navbar {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Mobile navbar: keep everything inside viewport */
@media (max-width: 767.98px) {
    .jd-navbar {
        gap: 10px;
    }

    .navbar-brand {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .navbar-brand img {
            height: 28px !important;
        }

    .jd-brand-text {
        display: none !important;
    }

    .jd-nav-actions {
        gap: 8px;
        min-width: 0;
    }

    /* Keep navbar action pills compact (but DON'T affect pills elsewhere, e.g. Explore filters) */
    .jd-navbar .jd-nav-actions .jd-pill,
    .jd-navbar .dropdown > .jd-pill {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

        .jd-navbar .jd-nav-actions .jd-pill-text,
        .jd-navbar .dropdown > .jd-pill .jd-pill-text {
            display: none !important;
        }

        .jd-navbar .jd-nav-actions .jd-pill i,
        .jd-navbar .dropdown > .jd-pill i {
            margin: 0 !important;
            font-size: 18px;
        }
}

/* Explore filter pills: visible active state */
.jd-filter-pills .jd-pill.active {
    background: linear-gradient(135deg, var(--jd-accent), var(--jd-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(106,53,255,.22);
}

    .jd-filter-pills .jd-pill.active:hover {
        opacity: .98;
    }

.jd-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--jd-ink);
    text-decoration: none;
    font-size: 1.05rem;
}

    .jd-logo:hover {
        color: var(--jd-ink)
    }

.jd-logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--jd-accent),var(--jd-cyan));
    box-shadow: 0 0 0 6px rgba(106,53,255,.12);
}

.jd-nav-links {
    display: flex;
    align-items: center;
    gap: 18px
}

.jd-nav-link {
    color: var(--jd-ink);
    text-decoration: none;
    font-weight: 600;
    opacity: .86;
}

    .jd-nav-link:hover {
        opacity: 1
    }

.jd-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.jd-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.9);
    color: var(--jd-ink);
    text-decoration: none;
}

/* Navbar unread badge (chat) */
.jd-chat-nav {
    position: relative;
}

.jd-nav-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary2));
    box-shadow: 0 10px 22px rgba(124,92,255,.28);
    border: 2px solid rgba(255,255,255,.95);
}

.jd-primary, .jd-ghost, .jd-pill, .jd-search-btn {
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    user-select: none;
}

.jd-primary {
    background: linear-gradient(135deg,var(--jd-accent),#4b19ff);
    color: #fff;
    box-shadow: 0 12px 35px rgba(106,53,255,.32);
}

    .jd-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 44px rgba(106,53,255,.38);
        color: #fff
    }

.jd-primary-sm {
    padding: 9px 14px;
    font-size: .95rem
}

.jd-ghost {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    color: var(--jd-ink);
}

    .jd-ghost:hover {
        transform: translateY(-2px);
        box-shadow: var(--jd-shadow);
        color: var(--jd-ink)
    }

.jd-pill {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    color: var(--jd-ink);
    padding: 10px 14px;
}

.jd-danger {
    border-radius: 12px
}

.jd-burger {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jd-ink);
}

.jd-dropdown {
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: var(--jd-shadow);
    padding: 8px
}

.jd-offcanvas {
    border-left: 1px solid rgba(0,0,0,.08)
}

.jd-mobile-link {
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--jd-ink);
    font-weight: 650
}

    .jd-mobile-link:hover {
        background: rgba(106,53,255,.08)
    }

.jd-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 26px 0;
    margin-top: auto;
}

.jd-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--jd-ink)
}

.jd-hero {
    padding: 56px 0 18px;
    background: radial-gradient(900px 280px at 20% -10%, rgba(106,53,255,.14), transparent 60%), radial-gradient(700px 260px at 90% 0%, rgba(77,223,253,.14), transparent 55%), radial-gradient(900px 420px at 50% 95%, rgba(211,108,160,.10), transparent 60%);
}

.jd-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 26px;
    align-items: stretch;
}

@media(max-width: 992px) {
    .jd-hero-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }
}

.jd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--jd-accent);
    background: rgba(106,53,255,.10);
    border: 1px solid rgba(106,53,255,.18);
    border-radius: 999px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

.jd-h1 {
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    line-height: 1.08;
    margin: 0 0 12px;
    color: var(--jd-ink);
    font-weight: 800;
}

.jd-h1-sm {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.12;
    margin: 0 0 10px;
    color: var(--jd-ink);
    font-weight: 800;
}

.jd-h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--jd-ink);
    margin: 0
}

.jd-gradient {
    background: linear-gradient(90deg, var(--jd-accent), var(--jd-pink));
    -webkit-background-clip: text;
    color: transparent;
}

.jd-lead {
    font-size: 1.05rem;
    color: var(--jd-muted);
    margin: 0 0 18px;
    max-width: 48ch;
}

.jd-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 18px
}

.jd-stat-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 22px
}

.jd-stat {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding: 14px 16px;
    min-width: 180px;
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.jd-stat-num {
    font-weight: 900;
    color: var(--jd-ink)
}

.jd-stat-label {
    color: var(--jd-muted);
    font-weight: 600;
    font-size: .92rem
}

.jd-hero-card {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 22px;
    box-shadow: var(--jd-shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jd-hero-card-top, .jd-hero-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.jd-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(19,11,70,.06);
    border: 1px solid rgba(19,11,70,.10);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 750;
    color: var(--jd-ink)
}

.jd-jobcard {
    background: var(--jd-card);
    border: 1px solid var(--jd-border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.jd-job-title {
    font-weight: 850;
    color: var(--jd-ink);
    font-size: 1.05rem
}

.jd-job-meta {
    color: var(--jd-muted);
    font-weight: 650;
    margin-top: 2px
}

.jd-job-desc {
    margin-top: 12px;
    color: #2f2f3c;
    font-weight: 560
}

.jd-job-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.jd-salary {
    font-weight: 700;
    color: var(--jd-ink);
    font-size: .74rem;
    letter-spacing: .01em
}

.jd-link {
    color: var(--jd-accent);
    font-weight: 800;
    text-decoration: none
}

    .jd-link:hover {
        text-decoration: underline
    }

.jd-section {
    padding: 38px 0
}

.jd-section-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px
}

.jd-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

@media(max-width: 992px) {
    .jd-feature-grid {
        grid-template-columns: 1fr
    }
}

.jd-feature {
    background: var(--jd-card);
    border: 1px solid var(--jd-border);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    padding: 18px;
}

.jd-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(106,53,255,.10);
    border: 1px solid rgba(106,53,255,.18);
    color: var(--jd-accent);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.jd-feature-title {
    font-weight: 850;
    color: var(--jd-ink);
    margin-bottom: 6px
}

.jd-pagehead {
    padding: 34px 0 18px
}

.jd-search-wrap {
    position: relative;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.jd-search-icon {
    padding-left: 8px;
    color: var(--jd-muted)
}

.jd-search-input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-weight: 650;
    padding: 10px 6px;
}

.jd-search-btn {
    background: linear-gradient(135deg,var(--jd-accent),#4b19ff);
    color: #fff;
    padding: 10px 16px;
    box-shadow: 0 12px 30px rgba(106,53,255,.28);
}

    .jd-search-btn:hover {
        transform: translateY(-1px);
        color: #fff
    }

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

@media(max-width: 992px) {
    .jd-grid {
        grid-template-columns: repeat(2, minmax(0,1fr))
    }
}

@media(max-width: 576px) {
    .jd-grid {
        grid-template-columns: 1fr
    }
}

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

@media(max-width: 992px) {
    .jd-grid-sm {
        grid-template-columns: 1fr
    }
}

.jd-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    background: var(--jd-card);
    border-radius: 18px;
    border: 1px solid var(--jd-border);
    box-shadow: var(--jd-shadow);
    padding: 16px;
    transition: transform .18s ease, box-shadow .18s ease;
    min-height: 240px;
}

    .jd-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--jd-shadow-hover);
        color: inherit
    }

.jd-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.jd-company {
    font-weight: 850;
    color: var(--jd-ink)
}

.jd-company-big {
    font-weight: 900;
    color: var(--jd-ink);
    font-size: 1.05rem
}

.jd-chip {
    background: rgba(77,223,253,.18);
    border: 1px solid rgba(77,223,253,.28);
    color: #0c6776;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: .85rem;
}

.jd-card-title {
    font-weight: 900;
    color: var(--jd-ink);
    font-size: 1.06rem;
    line-height: 1.15
}

.jd-card-meta {
    color: var(--jd-muted);
    font-weight: 650;
    font-size: .92rem
}

.jd-card-desc {
    color: #2f2f3c;
    font-weight: 560;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.jd-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

/* Clean card (image + gallery layout) */
.jd-card-clean {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--jd-card);
    border-radius: 18px;
    border: 1px solid var(--jd-border);
    box-shadow: var(--jd-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    min-height: 260px;
}

    .jd-card-clean:hover {
        transform: translateY(-4px);
        box-shadow: var(--jd-shadow-hover);
        color: inherit
    }

.jd-card-media {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: radial-gradient(900px 260px at 10% 0%, rgba(106,53,255,.18), transparent 60%), radial-gradient(700px 260px at 90% 10%, rgba(77,223,253,.14), transparent 55%), radial-gradient(900px 420px at 30% 100%, rgba(211,108,160,.12), transparent 60%);
}

    .jd-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .jd-card-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.22));
        pointer-events: none;
    }

.jd-card-badges {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 2;
}
    /* Card: company badge size = old date size; date size = pill size */
    .jd-card-badges .jd-pill:first-child {
        font-size: .82rem;
        padding: 6px 10px;
        font-weight: 900;
    }

.jd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(0,0,0,.08);
    color: var(--jd-ink);
}

.jd-pill-accent {
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(139,92,246,.22);
    color: ghostwhite;
    backdrop-filter: blur(4px);
}

.jd-pill-instant {
    background: linear-gradient(135deg, rgba(106,53,255,.18), rgba(77,223,253,.18));
    border: 1px solid rgba(106,53,255,.22);
    color: var(--jd-ink);
}

    .jd-pill-instant i {
        color: var(--jd-accent)
    }

.jd-card-clean-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1
}

.jd-card-clean-title {
    font-weight: 900;
    color: var(--jd-ink);
    font-size: 1.06rem;
    line-height: 1.15
}

.jd-card-clean-meta {
    color: var(--jd-muted);
    font-weight: 650;
    font-size: .92rem
}

.jd-card-clean-desc {
    color: rgba(21,19,58,0.8);
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 6px;
    margin-bottom: 4px;
}

.jd-card-clean-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap
}
    /* prevent salary text from pushing action buttons outside the card */
    .jd-card-clean-footer .jd-salary {
        min-width: 0;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .8rem;
        font-weight: 760;
        line-height: 1.15
    }
    /* keep action cluster compact */
    .jd-card-clean-footer > :last-child {
        flex-shrink: 0;
        white-space: nowrap
    }

/* small creation date badge (top-right in media) */
.jd-card-date {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: clamp(10.5px, 2.8vw, 12px);
    color: #fff;
    background: rgba(19,11,70,.55);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
}

.jd-subhead {
    font-weight: 900;
    color: var(--jd-ink);
    font-size: 1.02rem
}

/* mini icon buttons used on cards */
.jd-icon-mini {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jd-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .jd-icon-mini:hover {
        transform: translateY(-1px);
        box-shadow: var(--jd-shadow)
    }

.jd-icon-danger {
    color: #c62828;
    border-color: rgba(198,40,40,.18)
}

.jd-card-archived {
    opacity: .92
}

/* Media viewer must be the final visual layer in the app. */
:root {
    --jd-media-modal-z: 2147483647;
    --jd-media-backdrop-z: 2147483646;
    --jd-app-under-media-z: 2147483000;
}

/* Deea-style image zoom overlay */
.jd-zoom-modal {
    position: fixed;
    inset: 0;
    background: rgba(10,10,20,.65);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    z-index: var(--jd-media-modal-z, 2147483647) !important;
    isolation: isolate;
}

    .jd-zoom-modal.is-open {
        display: flex
    }

body.jd-zoom-open {
    overflow: hidden
}

/* Image modal controls: only the symbols, no circle/background/hover/focus effects */
.jd-zoom-close,
.jd-zoom-nav {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    opacity: .9;
    transition: none !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

    .jd-zoom-close:hover,
    .jd-zoom-close:focus,
    .jd-zoom-close:active,
    .jd-zoom-close:focus-visible,
    .jd-zoom-nav:hover,
    .jd-zoom-nav:focus,
    .jd-zoom-nav:active,
    .jd-zoom-nav:focus-visible {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: .9 !important;
        transform: none !important;
    }

.jd-zoom-close {
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border-radius: 0 !important;
    font-size: 26px;
    line-height: 1;
}

.jd-zoom-nav {
    top: 50%;
    width: 58px;
    height: 58px;
    border-radius: 0 !important;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1;
    transform: translateY(-50%) !important;
}

    .jd-zoom-nav:hover,
    .jd-zoom-nav:focus,
    .jd-zoom-nav:active,
    .jd-zoom-nav:focus-visible {
        transform: translateY(-50%) !important;
    }

.jd-zoom-prev {
    left: max(14px, env(safe-area-inset-left));
}

.jd-zoom-next {
    right: max(14px, env(safe-area-inset-right));
}

.jd-zoom-counter {
    position: static;
    transform: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .02em;
    border: 0;
    backdrop-filter: none;
    box-shadow: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    pointer-events: none;
}

    .jd-zoom-nav[hidden],
    .jd-zoom-counter[hidden] {
        display: none !important
    }

@media (max-width: 575.98px) {
    .jd-zoom-nav {
        width: 42px;
        height: 42px;
        font-size: 32px
    }

    .jd-zoom-prev {
        left: 8px
    }

    .jd-zoom-next {
        right: 8px
    }

    .jd-zoom-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 24px
    }
}

/* ===== Brand modal + buttons (used in Career Chat delete confirm) ===== */
.jd-modal .modal-backdrop.show {
    backdrop-filter: blur(6px);
}

.jd-modal-card {
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,.06);
    background: linear-gradient(180deg,#fff,rgba(255,255,255,.7));
    box-shadow: 0 30px 80px rgba(26,17,80,.18);
    padding: 0;
    overflow: hidden;
}

.jd-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(0,0,0,.05);
}



.jd-modal-title {
    font-weight: 700;
    font-size: 18px;
    color: #130B46;
}

.jd-modal-sub {
    font-size: 13px;
    color: #7a7a9a;
}

.jd-modal-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    font-size: 18px;
    color: #999;
    transition: .15s;
}

    .jd-modal-close:hover {
        color: #130B46;
    }

.jd-modal-body {
    padding: 18px 24px;
    color: #2a225a;
}

.jd-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(0,0,0,.05);
}

.jd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: #130B46;
    font-weight: 600;
    text-decoration: none;
    transition: .15s;
}

.jd-btn-ghost {
    background: transparent;
}

/* Dashboard metrics strip */
.jd-metrics {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.jd-metric {
    min-width: 140px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: #fff;
    backdrop-filter: blur(10px);
}

.jd-metric-k {
    font-size: 12px;
    opacity: .85
}

.jd-metric-v {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em
}

/* Delete forever modal (danger theme) */
.jd-modal-header--danger {
    background: linear-gradient(135deg, rgba(230,57,70,.20), rgba(108,92,255,.10));
}

.jd-danger {
    border: 1px solid rgba(230,57,70,.35);
    background: linear-gradient(135deg, #e63946 0%, #ff6b6b 100%);
    color: #fff;
    padding: 10px 14px;
    font-weight: 800;
    border-radius: 14px;
}

    .jd-danger:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 32px rgba(230,57,70,.22)
    }

.jd-danger-card {
    border-radius: 18px;
    border: 1px solid rgba(230,57,70,.18);
    background: rgba(230,57,70,.06);
    padding: 14px 16px;
}

.jd-danger-k {
    font-size: 12px;
    opacity: .8;
    margin-bottom: 6px
}

.jd-danger-v {
    font-weight: 800
}

.jd-btn-ghost:hover {
    background: rgba(0,0,0,.04);
}

.jd-btn-danger {
    border-color: rgba(220,53,69,.35);
    background: rgba(220,53,69,.10);
    color: #b02a37;
}

    .jd-btn-danger:hover {
        background: rgba(220,53,69,.16);
    }

.jd-zoom-avatar {
    max-width: min(92vw, 980px);
    max-height: 86vh;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    background: transparent;
}

    .jd-zoom-avatar img {
        display: block;
        max-width: 92vw;
        max-height: 86vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.jd-zoom-modal.is-round .jd-zoom-avatar {
    /* responsive circle that always fits in viewport (mobile-safe) */
    width: min(78vmin, 520px);
    height: min(78vmin, 520px);
    max-width: unset;
    max-height: unset;
    border-radius: 9999px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

    .jd-zoom-modal.is-round .jd-zoom-avatar img {
        width: 100%;
        height: 100%;
        max-width: unset;
        max-height: unset;
        object-fit: cover;
    }


/* Natural avatar/photo zoom: keep the real portrait or landscape ratio, never force a square crop. */
.jd-zoom-modal.is-natural .jd-zoom-avatar {
    width: auto;
    height: auto;
    max-width: min(92vw, 1180px);
    max-height: 86vh;
    border-radius: 22px;
    overflow: hidden;
}

.jd-zoom-modal.is-natural .jd-zoom-avatar img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1180px);
    max-height: 86vh;
    object-fit: contain;
    aspect-ratio: auto;
}

@media (max-width: 640px) {
    .jd-zoom-modal.is-natural .jd-zoom-avatar,
    .jd-zoom-modal.is-natural .jd-zoom-avatar img {
        max-width: 94vw !important;
        max-height: 82vh !important;
    }
}

.jd-zoomable {
    cursor: zoom-in
}

/* ===== Brand spinner overlay ===== */
.jd-spinner {
    position: fixed;
    inset: 0;
    background: rgba(10,10,20,.22);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

    .jd-spinner.is-open {
        display: flex
    }

.jd-spinner-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 30px 80px rgba(26,17,80,.16);
}

.jd-spinner-ring {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: conic-gradient(from 0deg, #7c5cff, #4ddffd, #7c5cff);
    -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
    mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
    animation: jd-spin .7s linear infinite;
}

.jd-spinner-text {
    font-weight: 700;
    font-size: 14px;
    color: #130B46;
    letter-spacing: -0.01em;
}

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

.jd-empty {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;
    box-shadow: var(--jd-shadow);
    padding: 30px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.jd-empty-sm {
    padding: 22px
}

.jd-empty-icon {
    font-size: 2.2rem;
    color: var(--jd-accent);
    margin-bottom: 8px
}

.jd-empty-title {
    font-weight: 900;
    color: var(--jd-ink);
    font-size: 1.15rem;
    margin-bottom: 4px
}

.jd-panel {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;
    box-shadow: var(--jd-shadow);
    padding: 18px;
}

.jd-panel-title {
    font-weight: 900;
    color: var(--jd-ink);
    font-size: 1.05rem;
    margin-bottom: 12px
}

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


@media(max-width: 992px) {
    .jd-dash-grid {
        grid-template-columns: 1fr
    }
}

.jd-form .jd-label {
    font-weight: 800;
    color: var(--jd-ink);
    margin-bottom: 6px;
    display: block
}

.jd-input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    padding: 12px 12px;
    font-weight: 650;
    outline: none;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .jd-input:focus {
        border-color: rgba(106,53,255,.35);
        box-shadow: 0 0 0 6px rgba(106,53,255,.12);
    }

.jd-textarea {
    resize: vertical
}

.jd-val {
    color: #c62828;
    font-weight: 650;
    font-size: .9rem
}

/* File upload (brand) */
.jd-file {
    display: grid;
    gap: 10px
}

.jd-file-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.jd-file-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px dashed rgba(106,53,255,.28);
    background: linear-gradient(135deg, rgba(106,53,255,.08), rgba(77,223,253,.08));
    cursor: pointer;
    transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease;
}

    .jd-file-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(17,24,39,.10);
        border-color: rgba(106,53,255,.42)
    }

    .jd-file-btn i {
        font-size: 1.2rem;
        color: var(--jd-accent)
    }

.jd-file-btn-title {
    font-weight: 900;
    color: var(--jd-ink)
}

.jd-file-btn-sub {
    font-weight: 650;
    color: var(--jd-muted);
    font-size: .92rem;
    margin-left: auto;
    text-align: right
}

.jd-file-name {
    font-weight: 700;
    color: var(--jd-muted);
    font-size: .92rem
}

/* Checkbox (warm / premium) */
.jd-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 750;
    color: var(--jd-muted);
    user-select: none;
    cursor: pointer
}

    .jd-check input {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 7px;
        border: 1px solid rgba(0,0,0,.16);
        background: #fff;
        box-shadow: 0 8px 18px rgba(17,24,39,.08);
        display: inline-grid;
        place-items: center;
        transition: box-shadow .12s ease, border-color .12s ease, transform .08s ease;
    }

        .jd-check input:hover {
            transform: translateY(-1px)
        }

        .jd-check input:focus {
            outline: none;
            border-color: rgba(106,53,255,.45);
            box-shadow: 0 0 0 6px rgba(106,53,255,.12)
        }

        .jd-check input:checked {
            border-color: rgba(106,53,255,.45);
            background: linear-gradient(135deg, #6C5CFF 0%, #5B8CFF 60%, #4CC9F0 100%);
        }

            .jd-check input:checked::after {
                content: "";
                width: 9px;
                height: 6px;
                border-left: 2px solid rgba(255,255,255,.98);
                border-bottom: 2px solid rgba(255,255,255,.98);
                transform: rotate(-45deg);
                margin-top: -1px;
            }

.jd-check-sm input {
    width: 16px;
    height: 16px;
    border-radius: 6px
}

.jd-auth {
    padding: 38px 0
}

.jd-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start
}

@media(max-width: 992px) {
    .jd-auth-grid {
        grid-template-columns: 1fr
    }
}

.jd-auth-side {
    padding: 18px;
    border-radius: 22px;
    background: radial-gradient(900px 280px at 10% 0%, rgba(106,53,255,.18), transparent 60%), radial-gradient(700px 260px at 90% 10%, rgba(77,223,253,.14), transparent 55%), radial-gradient(900px 420px at 30% 100%, rgba(211,108,160,.10), transparent 60%);
}

.jd-auth-bullets {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.jd-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--jd-ink)
}

    .jd-bullet i {
        color: var(--jd-accent)
    }

.jd-auth-card {
    padding: 20px
}

.jd-auth-foot {
    margin-top: 14px;
    text-align: center
}

.jd-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}

.jd-detail-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px
}

@media(max-width: 576px) {
    .jd-detail-side {
        align-items: flex-start
    }
}

.jd-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px
}

.jd-panel-text {
    color: #2f2f3c;
    font-weight: 560;
    line-height: 1.6
}

.jd-prose ul {
    margin-top: 8px
}

.jd-back {
    display: inline-flex;
    align-items: center;
    color: var(--jd-ink);
    text-decoration: none;
    font-weight: 800;
    opacity: .85
}

    .jd-back:hover {
        opacity: 1
    }



/* Chat modals: slightly tighter header (dashboard style) */
.jd-modal-header--chat {
    align-items: flex-start;
}

    .jd-modal-header--chat .jd-modal-close {
        margin-top: 2px;
    }

/* ===== v15 polish: brand selects + mobile pills + round chat nav ===== */
.jd-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 14px;
    padding-right: 44px;
    background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

    .jd-select:focus {
        outline: none;
        border-color: #6C5CFF;
        box-shadow: 0 0 0 4px rgba(108,92,255,.15);
    }

/* Pills: keep readable on mobile (no circles, no overflow) */
.jd-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-pill {
    padding: 6px 12px;
    height: auto;
    line-height: 1.1;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Explore filters: show which section is active */
.jd-filter-pills .jd-pill {
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.86);
    color: var(--jd-ink);
    text-decoration: none;
    font-weight: 800;
}

    .jd-filter-pills .jd-pill.active {
        border-color: transparent;
        color: #fff;
        background: linear-gradient(135deg, var(--jd-accent), var(--jd-cyan));
        box-shadow: 0 10px 22px rgba(124,92,255,.20);
    }

    .jd-filter-pills .jd-pill:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

@media (max-width:640px) {
    .jd-card-badges {
        gap: 6px;
    }

    .jd-pill {
        font-size: 11.5px;
        padding: 6px 10px;
    }
}

/* Career Chat header icons round */
.jd-chat-actions .jd-icon-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Round checkboxes (circle outline / filled) */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 2px solid rgba(108,92,255,.45);
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
    transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

    input[type="checkbox"]:hover {
        box-shadow: 0 0 0 4px rgba(108,92,255,.12);
    }

    input[type="checkbox"]:checked {
        background: linear-gradient(135deg,#6C5CFF,#4CC9F0);
        border-color: transparent;
    }

        input[type="checkbox"]:checked::after {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fff;
        }

    input[type="checkbox"]:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(108,92,255,.15);
    }


/* --- Custom select (brand dropdown) --- */

/*
   Brand select fallback rule:
   The native <select> must stay visible until JavaScript has successfully
   created the branded dropdown. Older CSS hid every select[data-jd-select],
   so if site.js was delayed by bfcache, partial navigation, a browser plugin
   or a script error, Activity domain / Work type / Level disappeared.
   JS now adds .jd-select-native-hidden only after the replacement is mounted.
*/
.jd-selectbox[data-jd-selectbox-mounted="1"] > select[data-jd-select="1"].jd-select-native-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}


/* If a browser restores partial/stale select markup, show the native select
   rather than leaving the form with an empty Activity domain / Work type / Level. */
.jd-selectbox:not([data-jd-selectbox-mounted="1"]) > select[data-jd-select="1"] {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
}

.jd-selectbox {
    position: relative;
    width: 100%;
}

.jd-selectbox-btn {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 24px;
    border: 1px solid rgba(108,92,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,248,255,.98));
    box-shadow: 0 10px 26px rgba(19,11,70,.06);
    font-size: 15px;
    font-weight: 700;
    color: var(--jd-ink, #130B46);
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

    .jd-selectbox-btn:hover {
        border-color: rgba(108,92,255,.34);
        box-shadow: 0 14px 28px rgba(108,92,255,.10);
    }

    .jd-selectbox-btn:focus {
        outline: none;
        border-color: #6C5CFF;
        box-shadow: 0 0 0 4px rgba(108,92,255,.14), 0 16px 32px rgba(108,92,255,.12);
    }

    .jd-selectbox-btn .jd-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
    }

        .jd-selectbox-btn .jd-label.is-placeholder {
            color: rgba(19,11,70,.62);
            font-weight: 600;
        }

    .jd-selectbox-btn .jd-chev {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        background: rgba(108,92,255,.08);
        color: rgba(19,11,70,.70);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform .16s ease, background .16s ease, color .16s ease;
        flex: 0 0 auto;
    }

.jd-selectbox.open .jd-selectbox-btn .jd-chev {
    transform: rotate(180deg);
    background: linear-gradient(135deg, rgba(108,92,255,.16), rgba(76,201,240,.16));
    color: #6C5CFF;
}

.jd-selectbox-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    padding: 8px;
    border-radius: 24px;
    border: 1px solid rgba(108,92,255,.14);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(18px);
    box-shadow: 0 26px 60px rgba(19,11,70,.16);
    display: none;
    max-height: 280px;
    overflow: auto;
    z-index: 80;
}

    .jd-selectbox-list::-webkit-scrollbar {
        width: 10px;
    }

    .jd-selectbox-list::-webkit-scrollbar-thumb {
        background: rgba(108,92,255,.24);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }

.jd-selectbox.open .jd-selectbox-list {
    display: block;
}

.jd-selectbox-item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 650;
    color: var(--jd-ink, #130B46);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}

    .jd-selectbox-item:hover {
        background: rgba(108,92,255,.08);
        transform: translateY(-1px);
    }

    .jd-selectbox-item.is-placeholder .jd-option-text {
        color: rgba(19,11,70,.56);
        font-weight: 600;
    }

    .jd-selectbox-item.active {
        background: linear-gradient(135deg, rgba(108,92,255,.16), rgba(76,201,240,.14));
        box-shadow: inset 0 0 0 1px rgba(108,92,255,.18);
    }

    .jd-selectbox-item .jd-option-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .jd-selectbox-item .jd-check {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(108,92,255,.10);
        color: #6C5CFF;
        opacity: 0;
        transform: scale(.92);
        transition: opacity .12s ease, transform .12s ease;
        flex: 0 0 auto;
    }

    .jd-selectbox-item.active .jd-check {
        opacity: 1;
        transform: scale(1);
    }

.jd-selectbox-sm .jd-selectbox-btn {
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 22px;
    font-size: 14px;
}

.jd-selectbox-sm .jd-selectbox-item {
    padding: 11px 12px;
    border-radius: 16px;
    font-size: 14px;
}

.jd-adv-drawer .jd-selectbox-list {
    z-index: 100050;
}

/* ===== v18: Navbar + Career Chat round buttons ===== */
.jd-navbar .jd-nav-actions .jd-icon-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* User pill (Dan) to match icon buttons height */
.jd-navbar .jd-nav-actions .jd-pill {
    height: 44px;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

    /* keep icons nicely centered */
    .jd-navbar .jd-nav-actions .jd-pill i {
        font-size: 18px;
        margin-right: 0 !important;
    }

/* If any chat header uses jd-icon-btn, force round */
.jd-chat-actions .jd-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    padding: 0 !important;
}



/* ===== Hero metrics pills ===== */
.jd-hero-metrics {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.jd-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(124,92,255,.18);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

.jd-metric-k {
    font-size: 12px;
    font-weight: 600;
    opacity: .72;
}

.jd-metric-v {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.jd-subline {
    font-size: 13px;
    opacity: .7;
    font-weight: 600;
}

/* ===== Career Chat: send button (pill) + composer mobile fit ===== */
.jd-chat-compose {
    display: flex;
    gap: 10px;
    align-items: center;
}

.jd-compose-input {
    flex: 1;
    min-width: 0; /* critical on mobile so input doesn't push outside viewport */
}

.jd-send {
    height: 44px;
    padding: 0 18px;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    border: 1px solid rgba(124,92,255,.18);
    background: linear-gradient(135deg,#6C5CFF 0%,#5B8CFF 55%,#4CC9F0 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(92,99,255,.22);
}

    .jd-send i {
        font-size: 16px;
    }

    .jd-send:hover {
        filter: brightness(1.02);
        transform: translateY(-1px);
    }

@media (max-width: 520px) {
    .jd-chat-compose {
        gap: 8px;
    }

    .jd-send {
        padding: 0 16px;
    }
}

@media (max-width: 380px) {
    .jd-send-text {
        display: none;
    }

    .jd-send {
        width: 44px;
        padding: 0;
        justify-content: center;
    }
}

/* Explore cards: footer actions (chat icon + open) */
.jd-card-clean-footer .jd-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.jd-chat-btn {
    width: 40px;
    height: 40px;
    border-radius: 9999px !important;
}


/* ===== Mobile navbar: make profile button perfectly round (matches icon buttons) ===== */
@media (max-width: 768px) {
    .jd-navbar .dropdown > .jd-pill {
        height: 44px;
        width: 44px;
        padding: 0;
        border-radius: 9999px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .jd-navbar .dropdown > .jd-pill .jd-pill-text {
            display: none;
        }

        .jd-navbar .dropdown > .jd-pill i {
            margin: 0 !important;
        }
}

/* ===== Mobile offcanvas logout: pill ends ===== */
.jd-offcanvas .jd-danger {
    border-radius: 9999px !important;
    padding: 14px 16px;
}

/* ===== Job extra media (gallery + video) ===== */
.jd-card-media-link {
    display: block;
    color: inherit;
    height: 100%;
    text-decoration: none;
}

.jd-play-overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
}

    .jd-play-overlay i {
        font-size: 1.6rem;
        margin-left: 2px;
    }

    .jd-play-overlay:hover {
        background: rgba(0,0,0,.45);
    }

.jd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 992px) {
    .jd-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .jd-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.jd-gallery-thumb {
    padding: 0;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

    .jd-gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .jd-gallery-thumb:hover {
        transform: translateY(-1px);
    }

.jd-video-preview,
.jd-video-hero {
    padding: 0;
    border: 0;
    width: 140px;
    height: 90px;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
    position: relative;
    cursor: pointer;
}

.jd-video-hero {
    width: 100%;
    height: 320px;
    display: block;
}

    .jd-video-preview img, .jd-video-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


.jd-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jd-video-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    background: radial-gradient(900px 260px at 10% 0%, rgba(106,53,255,.28), transparent 60%), radial-gradient(700px 260px at 90% 10%, rgba(77,223,253,.22), transparent 55%), radial-gradient(900px 420px at 30% 100%, rgba(211,108,160,.22), transparent 60%);
}

    .jd-video-fallback i {
        font-size: 2.1rem;
    }

.jd-play-badge {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    color: #fff;
}

    .jd-play-badge i {
        font-size: 1.4rem;
        margin-left: 2px;
    }

.jd-play-badge-lg {
    width: 62px;
    height: 62px;
}

    .jd-play-badge-lg i {
        font-size: 1.9rem;
    }

/* Global modal layering fix */
.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1055;
}

/* Video modal: same dark full-screen vibe as image zoom */
.jd-video-modal {
    --bs-modal-width: min(1120px, calc(100vw - 36px));
}

    .jd-video-modal .modal-dialog {
        max-width: 900px; /* sweet spot */
        margin: auto;
    }

    .jd-video-modal .modal-content {
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }

    .jd-video-modal .modal-body {
        padding: 0 !important;
        background: transparent !important;
    }

    .jd-video-modal video {
        display: block; /* elimină spațiu inline */
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 16px;
    }

.jd-video-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    border: 0;
    background: transparent;
    color: #fff;
    width: auto;
    height: auto;
    padding: 0;
    line-height: 1;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
    opacity: .96;
}

    .jd-video-close:hover {
        color: #fff;
        opacity: 1;
    }

    .jd-video-close:focus {
        outline: none;
        box-shadow: none;
    }

body.jd-modal-blur-open .modal-backdrop.show {
    opacity: 1 !important;
}

.modal-backdrop.show.jd-video-backdrop,
.modal-backdrop.show.jd-video-manual-backdrop,
body.jd-media-modal-open .modal-backdrop.show.jd-video-backdrop,
body.jd-media-modal-open .modal-backdrop.show.jd-video-manual-backdrop {
    opacity: 1 !important;
    background: rgba(255, 255, 255, .58) !important;
    backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
    -webkit-backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
}

body.jd-video-closing-stable .modal-backdrop.jd-video-backdrop,
body.jd-video-closing-stable .modal-backdrop.jd-video-manual-backdrop {
    opacity: 1 !important;
    background: rgba(255, 255, 255, .58) !important;
    backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
    -webkit-backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
    transition: none !important;
}

/* Delete account confirm modal: lighter glass backdrop */
#deleteConfirmModal .modal-dialog {
    max-width: 540px;
}

#deleteConfirmModal .modal-content {
    border: 1px solid rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.90) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 24px 72px rgba(17,24,39,.08);
}

body.jd-modal-blur-open .modal-backdrop.show.delete-account-backdrop {
    background: rgba(245,242,255,.26) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* --- Edit gallery selective remove --- */
.jd-gallery-item {
    position: relative;
}

.jd-thumb-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.65);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

    .jd-thumb-x:hover {
        background: rgba(0,0,0,.85);
    }

/* video thumb inside preview button */
.jd-video-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




/* Details: play button over cover image */
.jd-cover-wrap {
    position: relative
}

.jd-cover-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 78px;
    height: 78px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

    .jd-cover-play i {
        font-size: 44px;
        margin-left: 2px
    }

    .jd-cover-play:hover {
        background: rgba(0,0,0,.5)
    }

.jd-hidden {
    display: none !important;
}


/* New cover preview (Edit) */
.jd-cover-grid {
    display: flex;
    gap: 14px;
}

.jd-cover-item {
    width: 140px;
    height: 90px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
}

    .jd-cover-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.jd-thumb-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

    .jd-thumb-x:hover {
        background: rgba(0,0,0,.72);
    }

/* =============================
   Infinite scroll tiny loader
   ============================= */
[data-jd-infinite="1"].jd-infinite-loading {
    position: relative;
}

    [data-jd-infinite="1"].jd-infinite-loading::after {
        content: "Loading…";
        display: block;
        text-align: center;
        font-weight: 800;
        font-size: 12px;
        opacity: .65;
        padding: 10px 0 14px;
    }
/* Container */
.jd-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    /* Ascundem checkbox-ul default */
    .jd-check input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #c7c9ff; /* violet foarte deschis */
        background: #f3f4ff; /* fundal discret */
        position: relative;
        cursor: pointer;
        transition: all .2s ease;
    }

        /* Hover subtil */
        .jd-check input[type="checkbox"]:hover {
            border-color: #9fa8ff;
        }

        /* Checked */
        .jd-check input[type="checkbox"]:checked {
            background: #7c83ff; /* violet-albastrui soft */
            border-color: #7c83ff;
        }

            /* Checkmark discret */
            .jd-check input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                display: none;
                top: 4px;
                left: 6px;
                width: 4px;
                height: 8px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }


/* ===== Global: make buttons pill-ended everywhere ===== */
:root {
    --jd-pill-radius: 9999px;
}

/* Bootstrap buttons + generic buttons/anchors that act like buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
a.btn {
    border-radius: var(--jd-pill-radius) !important;
}

/* JobDropper custom buttons (din proiectul tău) */
.jd-btn,
.jd-primary,
.jd-ghost,
.jd-link,
.jd-upload-mini,
.jd-file-btn,
.jd-msg-menu-btn,
.dropdown-item {
    border-radius: var(--jd-pill-radius) !important;
}

/* Păstrează butoanele icon-only rotunde perfect (cerc), nu pill */
.jd-icon-btn,
.jd-icon-mini,
.jd-send,
.jd-thumb-x,
.jd-attach-remove,
.jd-thread-remove,
.jd-msg-menu-btn {
    border-radius: 9999px !important; /* cerc */
    /* dacă vrei cerc perfect, trebuie și width==height în stilurile lor */
}

/* NU pills pe thumbs / preview / X */
.jd-gallery-thumb,
.jd-video-preview {
    border-radius: 14px !important;
}




/* === MOBILE TABLE SCROLL (swipe horizontally to see all columns) === */
.insights-grid, .panel, .panel-body, .tables, .table-block {
    min-width: 0;
}

.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

    .table-scroll > table {
        width: max-content;
        min-width: 100%;
    }

table.wow-table th, table.wow-table td {
    white-space: nowrap;
}

table.wow-table td {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .table-block {
        overflow: visible;
    }

    .panel {
        overflow: hidden;
    }

    .table-scroll {
        padding-bottom: 6px;
    }
}
/* === END MOBILE TABLE SCROLL === */

.jd-danger:hover,
.jd-danger:focus,
.jd-danger:active {
    border: none !important;
}

/* ===== Engagement (Like) - no bubble, clean ===== */
.jd-action-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.jd-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    color: #2a2a2a;
}

    .jd-like-btn i {
        font-size: 18px;
        transform: translateY(1px);
    }

    .jd-like-btn[aria-pressed="true"] i {
        color: #ff4d6d;
    }

.jd-like-count {
    font-size: 14px;
    font-weight: 700;
    color: #2a2a2a;
}

.jd-card-clean-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Details: keep meta from pushing buttons */
.jd-detail-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.jd-detail-side {
    flex: 0 0 auto;
    margin-left: auto;
}

.jd-detail-head .jd-muted {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.jd-card-clean-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.jd-card-clean-title {
    font-weight: 700;
    font-size: 16px;
    flex: 1;
}

.jd-like-inline {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
}

    .jd-like-inline i {
        font-size: 17px;
        color: #666;
        transition: color .18s ease, transform .18s ease;
    }

    .jd-like-inline.is-liked i {
        color: #666;
    }

    .jd-like-inline.is-liked-flash i {
        color: #000;
        transform: scale(1.06);
    }

    .jd-like-inline.is-liked-flash {
        color: #000;
    }

.jd-card-clean-title,
.jd-card-clean-desc,
.jd-card-clean-meta,
.jd-card-clean-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.jd-navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 1100;
    transition: transform .16s ease;
    will-change: transform;
}

    .jd-navbar-wrap.nav-hidden {
        transform: translateY(-100%);
    }

.jd-navbar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    transition: transform .16s ease;
    will-change: transform;
}

body {
    padding-top: 72px;
}

.jd-card-trash {
    width: 100%;
    margin-top: auto;
    padding-top: 14px;
    text-align: center;
}

.jd-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.jd-filter-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center; /* asta le centreaza */
    padding: 6px 0 14px 0;
    margin: 0 0 14px 0;
}

/* modal peste navbar */
.modal {
    z-index: 2000 !important;
}

/* fundalul întunecat */
.modal-backdrop {
    z-index: 1990 !important;
}

    .modal-backdrop.show {
        opacity: 1 !important;
        background: rgba(8, 10, 20, .64) !important;
        backdrop-filter: blur(14px) saturate(125%);
        -webkit-backdrop-filter: blur(14px) saturate(125%);
    }

body.modal-open .modal {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* =========================================================
   MODALS: gradient brand icon + chat media remove dark
   PLACE LAST
========================================================= */


/* 2) Chat edit modal - remove media button = negru transparent rotund */
#chatEditModal .jd-edit-att .x,
#chatEditModal .jd-thumb-x,
#chatEditModal .jd-attach-remove {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    border: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,.58) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

    #chatEditModal .jd-edit-att .x:hover,
    #chatEditModal .jd-thumb-x:hover,
    #chatEditModal .jd-attach-remove:hover {
        background: rgba(0,0,0,.78) !important;
        color: #fff !important;
    }

    #chatEditModal .jd-edit-att .x i,
    #chatEditModal .jd-thumb-x i,
    #chatEditModal .jd-attach-remove i {
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

/* 3) dacă mai există buton X generic în alte modale media */
.modal .jd-edit-att .x {
    border-radius: 9999px !important;
}

/* 4) nu lăsa regula veche să le facă pătrate/14px */
#chatEditModal .jd-gallery-thumb,
#chatEditModal .jd-video-preview {
    border-radius: 14px !important;
}


/*scrol aside mesaje necitie label useri input chat*/

html {
    scrollbar-gutter: stable;
}

.jd-unread-dot {
    min-width: 20px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff3b3b;
    color: white;
    font-weight: 600;
}

.jd-card-signal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.jd-signal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .01em;
    white-space: nowrap;
    border: 1px solid rgba(23,23,42,.08)
}

.jd-signal-high {
    background: linear-gradient(135deg, rgba(110,130,255,.16), rgba(255,255,255,.94));
    color: #3456d1;
    border-color: rgba(52,86,209,.18)
}

.jd-signal-medium {
    background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(255,255,255,.95));
    color: #5b3fd6;
    border-color: rgba(91,63,214,.16)
}

.jd-signal-low {
    background: linear-gradient(135deg, rgba(23,23,42,.08), rgba(255,255,255,.92));
    color: #2c2c3d;
    border-color: rgba(23,23,42,.10)
}

.jd-card-match-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: -2px
}

.jd-match-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(107,78,255,.18);
    background: linear-gradient(135deg, rgba(123,92,255,.14), rgba(123,92,255,.06));
    color: #6B4EFF;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(107,78,255,.08);
}

    .jd-match-chip:hover {
        background: linear-gradient(135deg, rgba(123,92,255,.18), rgba(123,92,255,.09));
        color: #5B3FD6;
    }

.jd-signal-panel {
    margin-bottom: 20px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(91,63,214,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,243,255,.94))
}

.jd-signal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.jd-signal-summary {
    color: rgba(23,23,42,.72);
    font-weight: 650;
    line-height: 1.55;
    margin-top: 4px;
    max-width: 760px
}

.jd-card-match-chips-detail {
    margin-bottom: 14px
}

.jd-signal-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 12px;
    margin-bottom: 16px
}

.jd-signal-reason {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #23233a;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(23,23,42,.06);
    border-radius: 18px;
    padding: 14px 15px;
    box-shadow: 0 10px 26px rgba(19,18,54,.05)
}

.jd-signal-reason-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #161433;
    font-size: 13px;
    font-weight: 850;
    text-transform: none
}

    .jd-signal-reason-top strong {
        font-size: 13px;
        color: #4c43c8
    }

.jd-signal-reason-body {
    color: #31314a;
    font-weight: 650;
    line-height: 1.55
}

.jd-signal-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 14px
}

.jd-signal-bar-row {
    min-width: 0
}

.jd-signal-bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: #23233a;
    font-size: 13px;
    font-weight: 800
}

.jd-signal-bar-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(91,63,214,.10);
    overflow: hidden
}

.jd-signal-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c5cff, #b39cff)
}

@media (max-width: 640px) {
    .jd-signal-panel {
        padding: 16px
    }

    .jd-signal-bars, .jd-signal-reasons {
        grid-template-columns: 1fr
    }
}

.jd-card-title-link {
    text-decoration: none;
    color: #161433;
    font-weight: 700;
}

    .jd-card-title-link:hover {
        text-decoration: underline;
    }

.explore-card-domain {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: #F3F0FF;
    color: #6B4EFF;
    font-size: 13px;
    font-weight: 700;
}


.jd-password-field {
    position: relative;
}

    .jd-password-field .jd-input {
        padding-right: 44px;
    }

.jd-password-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #6b7280;
    line-height: 1;
}

    .jd-password-eye:hover {
        color: #111827;
    }

/* Gallery card: no search chips under cards */
.jd-card-clean .jd-card-match-chips {
    display: none !important;
}

/* Assessment chips in details */
.jd-card-match-chips-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 0;
}

.jd-signal-panel .jd-card-match-chips-detail .jd-match-chip {
    background: rgba(108,92,255,.07);
}

.jd-card-match-chips-detail {
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Smaller media block in details page */
.jd-media-grid-compact {
    max-width: 1240px;
    margin-inline: auto;
}

    .jd-media-grid-compact .jd-media-main {
        max-width: 980px;
        margin-inline: auto;
    }

    .jd-media-grid-compact .jd-video-hero {
        height: 240px;
    }

    .jd-media-grid-compact .jd-media-main img {
        max-height: 520px;
        object-fit: cover;
    }
/* ===== FIX FINAL PILLS ===== */

.jd-card-clean .jd-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 3;
}

    .jd-card-clean .jd-card-badges .jd-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 48% !important;
    }

        .jd-card-clean .jd-card-badges .jd-pill:first-child {
            background: #fff !important;
            color: #1c1b5c !important;
        }

        .jd-card-clean .jd-card-badges .jd-pill.jd-pill-accent {
            background: rgba(40,33,98,.8) !important;
            color: #fff !important;
        }

.jd-card-clean .jd-card-date {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #4b43b5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.jd-card-clean .jd-card-signal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.jd-card-clean .explore-card-domain,
.jd-card-clean .jd-signal-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.jd-card-clean .explore-card-domain {
    background: #f2edff;
    color: #6b4eff;
    font-weight: 700;
}

.jd-card-clean .jd-signal-pill {
    background: #f8f5ff;
    color: #5c42f5;
    border: 1px solid rgba(123,92,255,.2);
    font-weight: 800;
}

/* MOBILE */
@media (max-width:576px) {

    .jd-card-clean .jd-card-badges {
        top: 10px;
        left: 10px;
        right: 10px;
    }

        .jd-card-clean .jd-card-badges .jd-pill {
            height: 30px !important;
            font-size: 11px !important;
            padding: 0 10px !important;
        }

    .jd-card-clean .jd-card-date {
        height: 30px;
        font-size: 11px;
        padding: 0 10px;
    }

    .jd-card-clean .jd-card-signal-row {
        flex-wrap: wrap;
    }

    .jd-card-clean .explore-card-domain,
    .jd-card-clean .jd-signal-pill {
        height: 32px;
        font-size: 11px;
        padding: 0 10px;
    }
}

.jd-card-clean .jd-card-badges .jd-pill {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.jd-card-clean .jd-card-date {
    background: rgba(20, 20, 30, 0.55); /* negru transparent */
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* STANGA SUS - company */
.jd-card-clean .jd-card-badges .jd-pill:first-child {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #1c1b5c !important;
    border: 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* DREAPTA SUS - job/talent */
.jd-card-clean .jd-card-badges .jd-pill.jd-pill-accent {
    background: rgba(40, 33, 98, 0.30) !important;
    color: #ffffff !important;
    border: 1px solid rgba(160, 150, 255, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.jd-primary,
.jd-primary:hover,
.jd-primary:focus,
.jd-primary:active {
    color: #fff !important;
}

.jd-fast-chip--accent,
.jd-fast-chip--accent:hover,
.jd-fast-chip--accent:focus,
.jd-fast-chip--accent:active {
    color: #fff !important;
}


.cards-sidebar {
    width: 340px;
    padding: 20px;
    background: #fafafa;
    border-right: 1px solid #eee;
}

.card-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    margin-bottom: 10px;
    transition: .2s;
    cursor: pointer;
}

    .card-item:hover {
        background: #f5f3ff;
    }

    .card-item.active {
        background: #ede9fe;
        border: 1px solid #c4b5fd;
    }

.radio-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    margin-top: 6px;
    position: relative;
}

.card-item.active .radio-check {
    border-color: #7c3aed;
}

    .card-item.active .radio-check::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
        background: #7c3aed;
        border-radius: 50%;
    }

.card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
}

.card-content {
    flex: 1;
}

.card-title {
    font-weight: 600;
    font-size: 14px;
}

.card-sub {
    font-size: 12px;
    color: #777;
}


/* Media viewer is always the final visual layer: above Details, Comments, Public cards, navbar, and every drawer. */
#jdZoomOverlay,
.jd-zoom-modal,
#jdVideoModal,
.jd-video-modal,
.modal.jd-video-modal {
    z-index: var(--jd-media-modal-z, 2147483647) !important;
}

#jdZoomOverlay.is-open,
.jd-zoom-modal.is-open,
#jdVideoModal.show,
.jd-video-modal.show,
.modal.jd-video-modal.show {
    z-index: var(--jd-media-modal-z, 2147483647) !important;
}

.modal-backdrop.show.jd-video-backdrop,
.jd-video-backdrop {
    z-index: var(--jd-media-backdrop-z, 2147483646) !important;
}

/* JD v100: global bright glass video backdrop across Gallery/Dashboard/Insights. */
body.jd-media-modal-open .modal-backdrop.show.jd-video-backdrop,
body.jd-media-modal-open .modal-backdrop.show.jd-video-manual-backdrop,
body.jd-video-closing-stable .modal-backdrop.jd-video-backdrop,
body.jd-video-closing-stable .modal-backdrop.jd-video-manual-backdrop {
    opacity: 1 !important;
    background: rgba(255, 255, 255, .58) !important;
    backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
    -webkit-backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
}

body.jd-media-modal-open #jdDetailsOverlay,
body.jd-media-modal-open .jd-details-overlay,
body.jd-media-modal-open .jd-card-comments,
body.jd-media-modal-open .jd-card-comments.is-maximized,
body.jd-media-modal-open .jd-author-panel,
body.jd-media-modal-open #jdChatDetailsOverlay,
body.jd-media-modal-open #jdChatDetailsDrawer,
body.jd-media-modal-open .jd-chat-details-overlay,
body.jd-media-modal-open .jd-chat-details-drawer,
body.jd-media-modal-open .jd-insights-panel,
body.jd-media-modal-open .jd-insights-overlay,
body.jd-media-modal-open .navbar,
body.jd-media-modal-open .jd-navbar,
body.jd-media-modal-open .jd-navbar-wrap,
body.jd-media-modal-open .jd-mobile-nav,
body.jd-media-modal-open header {
    z-index: var(--jd-app-under-media-z, 2147483000) !important;
}

body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

html, body {
    touch-action: auto !important;
}

/* Friend network drawer + gallery friend signals */
.jd-friends-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1045;
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg,#18c964,#4ade80);
    color: #052e16;
    font-weight: 900;
    box-shadow: 0 18px 48px rgba(22,163,74,.28);
    letter-spacing: .01em
}

    .jd-friends-fab i {
        font-size: 1.1rem
    }

.jd-friends-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.34);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: .18s ease
}

    .jd-friends-overlay.is-open {
        opacity: 1;
        pointer-events: auto
    }

.jd-friends-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(440px,calc(100vw - 18px));
    z-index: 1051;
    background: rgba(255,255,255,.96);
    box-shadow: -28px 0 70px rgba(15,23,42,.18);
    transform: translateX(105%);
    transition: transform .22s ease;
    border-left: 1px solid rgba(15,23,42,.08);
    display: flex;
    flex-direction: column
}

    .jd-friends-drawer.is-open {
        transform: translateX(0)
    }

.jd-friends-drawer-head {
    height: 70px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(15,23,42,.08)
}

    .jd-friends-drawer-head strong {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 1.1rem;
        color: #0f172a
    }

.jd-friends-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(15,23,42,.06);
    font-size: 1.5rem;
    line-height: 1;
    color: #0f172a
}

.jd-friends-drawer-body {
    padding: 18px;
    overflow: auto
}

.jd-friends-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 26px;
    background: radial-gradient(circle at top left,rgba(34,197,94,.18),rgba(99,102,241,.08) 55%,rgba(255,255,255,.8));
    border: 1px solid rgba(22,163,74,.16);
    box-shadow: 0 16px 42px rgba(15,23,42,.06)
}

    .jd-friends-hero h3 {
        margin: 4px 0 2px;
        font-size: 1.5rem;
        font-weight: 950;
        color: #0f172a
    }

    .jd-friends-hero p {
        margin: 0;
        color: #64748b;
        font-weight: 600
    }

.jd-friends-broadcast, .jd-friend-mini {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: #0f172a;
    color: #fff !important;
    text-decoration: none;
    font-weight: 850;
    white-space: nowrap
}

    .jd-friend-mini.muted {
        background: rgba(15,23,42,.08);
        color: #0f172a !important
    }

.jd-friends-section-title {
    margin: 18px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-weight: 950
}

    .jd-friends-section-title span {
        background: rgba(34,197,94,.12);
        color: #15803d;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: .8rem
    }

.jd-friend-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
    margin-bottom: 10px
}

    .jd-friend-row img {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        object-fit: cover;
        background: #f1f5f9
    }

.jd-friend-main {
    min-width: 0;
    flex: 1
}

    .jd-friend-main strong {
        display: block;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .jd-friend-main span {
        display: block;
        color: #64748b;
        font-size: .88rem;
        font-weight: 650
    }

.jd-friends-empty, .jd-friends-loading {
    padding: 18px;
    border-radius: 20px;
    background: rgba(15,23,42,.04);
    color: #64748b;
    font-weight: 700
}

.jd-friend-beam {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(4,120,87,.92);
    color: #ecfdf5;
    font-size: .78rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(16,185,129,.30)
}

    .jd-friend-beam::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: #86efac;
        box-shadow: 0 0 0 4px rgba(134,239,172,.22),0 0 18px rgba(134,239,172,.9)
    }

.jd-add-friend-btn {
    border: 0;
    border-radius: 999px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,197,94,.13);
    color: #15803d;
    font-weight: 950
}

    .jd-add-friend-btn:hover {
        background: rgba(34,197,94,.22)
    }

    .jd-add-friend-btn.is-sent {
        background: rgba(99,102,241,.12);
        color: #4f46e5
    }

    .jd-add-friend-btn.is-accepted {
        background: rgba(34,197,94,.18);
        color: #15803d
    }

@media(max-width:640px) {
    .jd-friends-fab {
        right: 14px;
        bottom: 14px;
        padding: 12px 14px
    }

        .jd-friends-fab span {
            display: none
        }

    .jd-friends-drawer {
        width: calc(100vw - 8px)
    }
}

/* Friend polish v2: iPhone green FAB, neutral card action, friend dot, manage actions */
.jd-friends-fab {
    background: #34C759 !important;
    color: #fff !important;
    box-shadow: 0 18px 48px rgba(52,199,89,.34) !important;
}

    .jd-friends-fab i, .jd-friends-fab span {
        color: #fff !important
    }

    .jd-friends-fab:hover {
        filter: brightness(.98);
        transform: translateY(-1px)
    }

.jd-friend-mini.danger {
    background: rgba(239,68,68,.10);
    color: #dc2626 !important
}

    .jd-friend-mini.danger:hover {
        background: rgba(239,68,68,.16)
    }

.jd-friend-dot {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #34C759;
    border: 3px solid rgba(255,255,255,.96);
    box-shadow: 0 0 0 5px rgba(52,199,89,.16),0 8px 22px rgba(52,199,89,.42);
}

.jd-friend-beam {
    display: none !important
}

.jd-add-friend-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15,23,42,.09) !important;
    background: #fff !important;
    color: #0f172a !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.06) !important;
}

    .jd-add-friend-btn:hover {
        background: #f8fafc !important;
        color: #6a35ff !important;
        transform: translateY(-1px)
    }

    .jd-add-friend-btn.is-sent {
        background: #fff7ed !important;
        color: #ea580c !important;
        border-color: rgba(234,88,12,.20) !important
    }

    .jd-add-friend-btn.is-accepted {
        background: #ecfdf3 !important;
        color: #15803d !important;
        border-color: rgba(52,199,89,.25) !important
    }

    .jd-add-friend-btn:disabled {
        opacity: .72;
        cursor: wait;
        transform: none !important
    }

@media(max-width:640px) {
    .jd-friends-fab {
        right: 16px !important;
        bottom: 16px !important;
        width: 58px !important;
        height: 58px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        justify-content: center !important;
    }

        .jd-friends-fab span {
            display: none !important
        }

        .jd-friends-fab i {
            font-size: 1.35rem !important
        }
}


/* Friend polish v3: site chroma, equal round card buttons, cleaner drawer */
.jd-friends-hero {
    background: linear-gradient(135deg,rgba(106,53,255,.08),rgba(255,255,255,.94) 58%,rgba(91,219,255,.10)) !important;
    border-color: rgba(106,53,255,.12) !important;
}

.jd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(106,53,255,.09) !important;
    color: #6a35ff !important;
    border: 1px solid rgba(106,53,255,.18) !important;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 950;
}

.jd-friends-broadcast, .jd-friend-mini {
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

    .jd-friends-broadcast:hover, .jd-friend-mini:hover {
        filter: brightness(1.04);
        transform: translateY(-1px)
    }

    .jd-friend-mini.muted {
        background: rgba(106,53,255,.08) !important;
        color: #4b2bd6 !important;
        box-shadow: none !important
    }

    .jd-friend-mini.danger {
        background: rgba(239,68,68,.08) !important;
        color: #dc2626 !important;
        box-shadow: none !important
    }

        .jd-friend-mini.danger:hover {
            background: rgba(239,68,68,.13) !important
        }

.jd-add-friend-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    background: rgba(255,255,255,.92) !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

    .jd-add-friend-btn i {
        font-size: 1.05rem;
        line-height: 1
    }

    .jd-add-friend-btn:hover {
        background: #fff !important;
        color: #6a35ff !important;
        box-shadow: 0 10px 24px rgba(106,53,255,.10) !important
    }

    .jd-add-friend-btn.is-sent {
        background: rgba(106,53,255,.08) !important;
        color: #6a35ff !important;
        border-color: rgba(106,53,255,.20) !important
    }

    .jd-add-friend-btn.is-accepted {
        background: #fff !important;
        color: #34C759 !important;
        border-color: rgba(52,199,89,.25) !important
    }

.jd-friend-dot {
    width: 17px;
    height: 17px;
    background: #34C759;
    border: 3px solid #fff;
    box-shadow: 0 0 0 5px rgba(52,199,89,.16),0 8px 22px rgba(52,199,89,.38)
}

@media(max-width:640px) {
    .jd-add-friend-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 9999px !important
    }

    .jd-card-actions {
        gap: 8px !important
    }
}

/* ===== Friend network v4: navbar button, compact drawer, friend pin signal ===== */
.jd-friends-fab {
    display: none !important
}

.jd-friends-nav-btn {
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(106,53,255,.16) !important;
    background: linear-gradient(135deg,rgba(106,53,255,.08),rgba(255,255,255,.96)) !important;
    color: #211450 !important;
    box-shadow: 0 10px 28px rgba(38,25,99,.07) !important;
    font-weight: 900 !important;
}

    .jd-friends-nav-btn:hover {
        background: #fff !important;
        color: #6a35ff !important;
        transform: translateY(-1px)
    }

.jd-friends-nav-text {
    font-size: .92rem;
    line-height: 1;
    color: inherit !important
}

@media(max-width:768px) {
    .jd-friends-nav-btn {
        width: 44px !important;
        padding: 0 !important
    }

    .jd-friends-nav-text {
        display: none !important
    }
}

.jd-mobile-friends-link {
    border: 0;
    width: 100%;
    text-align: left;
    background: transparent
}

.jd-friends-drawer-head strong {
    gap: 0 !important
}

.jd-friends-hero {
    align-items: center !important;
    padding: 14px 16px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg,rgba(106,53,255,.08),rgba(255,255,255,.88) 58%,rgba(61,220,151,.07)) !important;
    border-color: rgba(106,53,255,.14) !important;
    box-shadow: 0 14px 34px rgba(20,12,64,.055) !important;
}

    .jd-friends-hero h3 {
        font-size: 1.24rem !important;
        margin: 3px 0 1px !important;
        letter-spacing: -.02em
    }

    .jd-friends-hero p {
        font-size: .94rem !important;
        line-height: 1.32 !important;
        max-width: 250px !important
    }

.jd-kicker {
    padding: 8px 15px !important;
    background: rgba(106,53,255,.07) !important;
    border-color: rgba(106,53,255,.20) !important;
    color: #6a35ff !important
}

.jd-friends-broadcast, .jd-friend-mini {
    background: #161331 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(22,19,49,.12) !important;
}

.jd-friends-broadcast {
    padding: 10px 15px !important
}

.jd-friend-mini.danger {
    background: rgba(239,68,68,.08) !important;
    color: #dc2626 !important;
    box-shadow: none !important
}

.jd-friend-mini.muted {
    background: rgba(22,19,49,.07) !important;
    color: #161331 !important;
    box-shadow: none !important
}

.jd-friend-dot, .jd-friend-beam {
    display: none !important
}

.jd-card-clean-meta.is-friend-owner .jd-card-location i,
.jd-card-clean-meta.is-friend-owner .jd-card-location {
    color: #34C759 !important
}

.jd-add-friend-btn,
.jd-chat-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid rgba(23,21,63,.10) !important;
    color: #17153f !important;
    box-shadow: 0 10px 22px rgba(23,21,63,.04) !important;
}

    .jd-add-friend-btn:hover,
    .jd-chat-btn:hover {
        color: #6a35ff !important;
        border-color: rgba(106,53,255,.18) !important;
        background: #fff !important;
        transform: translateY(-1px)
    }

    .jd-add-friend-btn.is-sent {
        background: rgba(106,53,255,.06) !important;
        color: #6a35ff !important;
        border-color: rgba(106,53,255,.20) !important
    }

    .jd-add-friend-btn.is-accepted {
        background: #fff !important;
        color: #34C759 !important;
        border-color: rgba(52,199,89,.24) !important
    }

/* ===== Friend network v5: dropdown entry, quieter drawer, icon-only friend pin ===== */
.jd-friends-overlay {
    z-index: 99998 !important;
}

.jd-friends-drawer {
    z-index: 99999 !important;
    top: 0 !important;
    height: 100dvh !important;
}

.jd-friends-nav-btn {
    display: none !important
}

.jd-menu-friends-open {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-weight: 800 !important;
    color: #211450 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg,rgba(106,53,255,.08),rgba(255,255,255,.95)) !important;
}

    .jd-menu-friends-open:hover {
        color: #6a35ff !important;
        background: rgba(106,53,255,.08) !important
    }

.jd-mobile-friends-link {
    font-weight: 800 !important;
    color: #211450 !important;
    background: rgba(106,53,255,.055) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important
}

.jd-friends-hero.jd-friends-hero-slim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(106,53,255,.11) !important;
    box-shadow: 0 12px 30px rgba(20,12,64,.045) !important;
}

.jd-friends-hero-copy {
    min-width: 0 !important
}

.jd-friends-hero.jd-friends-hero-slim h3 {
    font-size: 1.14rem !important;
    margin: 0 0 4px !important;
    letter-spacing: -.02em !important;
    color: #17153f !important
}

.jd-friends-hero.jd-friends-hero-slim p {
    font-size: .86rem !important;
    line-height: 1.28 !important;
    max-width: 280px !important;
    margin: 0 !important;
    color: #6d7388 !important;
    font-weight: 700 !important
}

.jd-kicker {
    display: none !important
}

.jd-friends-broadcast {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: #17153f !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(23,21,63,.14) !important;
}

    .jd-friends-broadcast:hover {
        background: #6a35ff !important;
        color: #fff !important;
        transform: translateY(-1px)
    }

.jd-card-clean-meta.is-friend-owner .jd-card-location {
    color: inherit !important
}

    .jd-card-clean-meta.is-friend-owner .jd-card-location i {
        color: #34C759 !important;
        font-weight: 900 !important
    }

.jd-add-friend-btn, .jd-chat-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

    .jd-add-friend-btn i, .jd-chat-btn i {
        font-size: 1.05rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: block !important
    }

@media(max-width:640px) {
    .jd-add-friend-btn, .jd-chat-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important
    }

    .jd-friends-hero.jd-friends-hero-slim {
        padding: 14px !important
    }

        .jd-friends-hero.jd-friends-hero-slim p {
            font-size: .82rem !important
        }

    .jd-friends-broadcast {
        padding: 9px 12px !important
    }
}


/* ===== Friend panel v7: compact icon actions for mobile-safe rows ===== */
.jd-friend-icon-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 1.08rem !important;
    line-height: 1 !important;
}

    .jd-friend-icon-action i {
        color: inherit !important;
        font-size: 1.08rem !important;
        line-height: 1 !important;
    }

.jd-friend-row.is-friend {
    gap: 10px !important;
}

    .jd-friend-row.is-friend .jd-friend-main {
        min-width: 0 !important;
    }

        .jd-friend-row.is-friend .jd-friend-main strong {
            max-width: 150px !important;
        }

@media(max-width:640px) {
    .jd-friend-row.is-friend {
        display: grid !important;
        grid-template-columns: 56px 1fr auto auto !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px !important;
    }

        .jd-friend-row.is-friend img {
            grid-column: 1 !important;
            width: 48px !important;
            height: 48px !important;
        }

        .jd-friend-row.is-friend .jd-friend-main {
            grid-column: 2 !important;
            min-width: 0 !important;
        }

            .jd-friend-row.is-friend .jd-friend-main strong {
                max-width: 100% !important;
            }

            .jd-friend-row.is-friend .jd-friend-main span {
                font-size: .82rem !important;
                line-height: 1.22 !important;
            }

    .jd-friend-icon-action {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
}

.friend-violet {
    background: linear-gradient(135deg,#8b5cf6 0%, #6d28d9 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(109,40,217,.35) !important;
}

    .friend-violet i {
        color: #fff !important;
    }

    .friend-violet:hover {
        background: linear-gradient(135deg,#9f67ff 0%, #7c3aed 100%) !important;
    }


/* Realtime friends SignalR indicator + toast */
.jd-friends-live-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ff2d55;
    box-shadow: 0 0 0 3px rgba(255,45,85,.18),0 0 18px rgba(255,45,85,.75);
    pointer-events: none
}

.jd-menu-friends-open, .jd-mobile-friends-link, .jd-friends-nav-btn {
    position: relative
}

.jd-friend-toast {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 2147483000;
    max-width: min(360px,calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 18px;
    background: #17153f;
    color: #fff;
    box-shadow: 0 18px 54px rgba(23,21,63,.26);
    font-weight: 850;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .18s ease,transform .18s ease
}

    .jd-friend-toast.is-show {
        opacity: 1;
        transform: translateY(0)
    }

    .jd-friend-toast strong {
        display: block;
        font-size: .96rem
    }

    .jd-friend-toast span {
        display: block;
        margin-top: 2px;
        font-size: .84rem;
        opacity: .82;
        font-weight: 650
    }

@media(max-width:640px) {
    .jd-friend-toast {
        left: 16px;
        right: 16px;
        bottom: 18px
    }
}

/* Friend panel v8: lighter hero copy, local added date, safe remove confirmation */
.jd-friends-hero.jd-friends-hero-slim p {
    font-weight: 500 !important
}

.jd-friend-added {
    font-size: small !important;
    color: #6d7388 !important;
    font-weight: 400 !important;
}

    .jd-friend-added time {
        font-size: small !important;
        color: #6d7388 !important;
        font-weight: 400 !important;
    }

.jd-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px
}

    .jd-confirm-modal.is-open {
        display: flex
    }

.jd-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.38);
    backdrop-filter: blur(5px)
}

.jd-confirm-card {
    position: relative;
    width: min(390px,calc(100vw - 34px));
    border-radius: 26px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 28px 80px rgba(15,23,42,.24);
    text-align: center;
    border: 1px solid rgba(15,23,42,.08)
}

.jd-confirm-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(15,23,42,.06);
    font-size: 1.3rem;
    line-height: 1;
    color: #17153f
}

.jd-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 4px auto 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239,68,68,.09);
    color: #dc2626;
    font-size: 1.35rem
}

.jd-confirm-card h3 {
    margin: 0 0 8px;
    color: #17153f;
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -.02em
}

.jd-confirm-card p {
    margin: 0;
    color: #6d7388;
    font-weight: 600;
    line-height: 1.42
}

.jd-confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center
}

.jd-confirm-btn {
    border: 0;
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 900;
    min-width: 112px
}

    .jd-confirm-btn.muted {
        background: rgba(23,21,63,.07);
        color: #17153f
    }

    .jd-confirm-btn.danger {
        background: #dc2626;
        color: #fff;
        box-shadow: 0 12px 26px rgba(220,38,38,.22)
    }

@media(max-width:420px) {
    .jd-confirm-actions {
        flex-direction: column
    }

    .jd-confirm-btn {
        width: 100%
    }
}

/* Friends drawer v3: pro groups, round avatars, FW avatar */
.jd-friends-v3 .jd-friends-hero {
    align-items: center;
    gap: 14px;
}

.jd-friends-v3 .jd-fw-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jd-friends-v3 .jd-friends-broadcast {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #130B46;
    color: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(19,11,70,.18);
}

.jd-fw-avatar, .jd-group-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #efe9ff;
    color: #6d45ff;
    font-weight: 950;
    flex: 0 0 auto;
}

.jd-fw-avatar {
    width: 38px;
    height: 38px;
    background: #eee8ff;
    color: #6d45ff;
}

    .jd-fw-avatar img, .jd-group-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 999px;
        display: block;
    }

.jd-wall-avatar-form, .jd-group-avatar-form {
    margin: 0;
}

.jd-wall-avatar-pick, .jd-friend-icon-action {
    cursor: pointer;
}

.jd-friend-groups-list {
    display: grid;
    gap: 10px;
    margin: 8px 0 12px;
}

.jd-friend-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(109,69,255,.16);
    border-radius: 22px;
    background: linear-gradient(135deg,#fff,#faf8ff);
    box-shadow: 0 12px 30px rgba(19,11,70,.07);
}

.jd-group-open {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.jd-create-group-box {
    border: 1px dashed rgba(109,69,255,.32);
    border-radius: 22px;
    padding: 12px;
    background: #fbf9ff;
    margin: 10px 0 16px;
}

    .jd-create-group-box summary {
        cursor: pointer;
        font-weight: 950;
        color: #130B46;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.jd-group-name-input {
    width: 100%;
    margin-top: 12px;
    border: 1px solid rgba(19,11,70,.12);
    border-radius: 16px;
    padding: 12px 14px;
    outline: none;
    font-weight: 800;
}

.jd-group-upload {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(109,69,255,.18);
    color: #130B46;
    cursor: pointer;
    font-weight: 900;
}

.jd-group-friend-picker {
    display: grid;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
    margin: 12px 0;
    padding-right: 4px;
}

.jd-group-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(19,11,70,.08);
    cursor: pointer;
}

    .jd-group-pick-item img, .jd-friend-avatar-round {
        width: 42px;
        height: 42px;
        border-radius: 999px !important;
        object-fit: cover;
        flex: 0 0 auto;
    }

    .jd-group-pick-item span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 800;
    }

.jd-create-group-btn {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 12px 14px;
    font-weight: 950;
    color: #fff;
    background: linear-gradient(135deg,#6d45ff,#8b5cf6);
    box-shadow: 0 16px 34px rgba(109,69,255,.22);
}

.jd-friends-v3 .jd-friend-row {
    border-radius: 22px;
}

.jd-friends-v3 .friend-violet {
    background: #7c3aed !important;
    color: #fff !important;
}

/* Friend groups professional controls */
.jd-friend-avatar-round, .jd-friend-row > img {
    border-radius: 999px !important;
    object-fit: cover;
    overflow: hidden
}

.jd-fw-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ece7ff;
    color: #140b46;
    font-weight: 900;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(126,87,255,.18)
}

    .jd-fw-avatar img, .jd-group-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        display: block
    }

.jd-fw-actions {
    display: flex;
    gap: 10px;
    align-items: center
}

.jd-wall-avatar-pick {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(126,87,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 12px 30px rgba(19,11,70,.08);
    cursor: pointer;
    color: #140b46
}

    .jd-wall-avatar-pick:hover {
        transform: translateY(-1px)
    }

.jd-friend-groups-list {
    display: grid;
    gap: 10px
}

.jd-friend-group-row {
    border: 1px solid rgba(19,11,70,.08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(19,11,70,.07);
    padding: 10px
}

    .jd-friend-group-row summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px
    }

        .jd-friend-group-row summary::-webkit-details-marker {
            display: none
        }

.jd-group-open {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit
}

.jd-group-avatar {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(135deg,#efeaff,#dff2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 900;
    color: #140b46;
    flex: 0 0 auto
}

.jd-group-more {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f2ff;
    color: #7257ff
}

.jd-group-manage-form {
    display: grid;
    gap: 10px;
    padding: 12px 2px 4px
}

.jd-group-name-input {
    border: 1px solid rgba(19,11,70,.12);
    border-radius: 16px;
    padding: 12px 14px;
    width: 100%;
    font-weight: 700;
    color: #140b46;
    background: #fff
}

.jd-group-upload {
    border: 1px dashed rgba(126,87,255,.35);
    border-radius: 16px;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #140b46;
    background: #fbfaff
}

.jd-group-friend-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    padding-right: 4px
}

    .jd-group-friend-picker.compact {
        max-height: 190px
    }

.jd-group-pick-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px;
    border-radius: 16px;
    border: 1px solid rgba(19,11,70,.07);
    cursor: pointer;
    background: #fff
}

    .jd-group-pick-item img {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        object-fit: cover
    }

    .jd-group-pick-item input {
        accent-color: #7257ff
    }

.jd-create-group-box {
    border: 1px solid rgba(126,87,255,.18);
    border-radius: 24px;
    background: linear-gradient(135deg,#fff,#fbfaff);
    box-shadow: 0 16px 40px rgba(19,11,70,.06);
    padding: 12px;
    margin: 12px 0
}

    .jd-create-group-box summary {
        list-style: none;
        font-weight: 900;
        color: #140b46;
        cursor: pointer;
        display: flex;
        gap: 8px;
        align-items: center
    }

        .jd-create-group-box summary::-webkit-details-marker {
            display: none
        }

    .jd-create-group-box form {
        display: grid;
        gap: 10px;
        margin-top: 12px
    }

.jd-create-group-btn {
    border: 0;
    border-radius: 16px;
    background: #140b46;
    color: #fff;
    font-weight: 900;
    padding: 12px 14px;
    box-shadow: 0 14px 30px rgba(19,11,70,.18)
}

    .jd-create-group-btn.danger {
        background: #fff0f0;
        color: #d72525;
        box-shadow: none;
        border: 1px solid rgba(215,37,37,.15)
    }

/* Friends groups - modal management refresh */
.jd-friend-groups-list {
    display: grid;
    gap: 10px;
    margin: 8px 0 14px
}

.jd-friend-group-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(19,11,70,.08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(19,11,70,.07);
    padding: 10px
}

.jd-group-open {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit
}

.jd-group-avatar, .jd-group-modal-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(135deg,#eee8ff,#dff2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 900;
    color: #140b46;
    flex: 0 0 auto
}

    .jd-group-avatar img, .jd-group-modal-avatar img, .jd-fw-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 999px
    }

.jd-group-chat-btn, .jd-group-more {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #f5f2ff;
    color: #7257ff;
    flex: 0 0 auto
}

.jd-group-chat-btn {
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    color: #fff;
    box-shadow: 0 12px 24px rgba(124,58,237,.24)
}

    .jd-group-more:hover, .jd-group-chat-btn:hover {
        transform: translateY(-1px)
    }

.jd-group-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(10,7,32,.42);
    backdrop-filter: blur(14px)
}

    .jd-group-modal.is-open {
        display: flex
    }

.jd-modal-open {
    overflow: hidden
}

.jd-group-modal-card {
    position: relative;
    width: min(560px,100%);
    max-height: min(760px,calc(100vh - 28px));
    overflow: auto;
    border-radius: 30px;
    background: linear-gradient(145deg,#fff,#fbfaff);
    box-shadow: 0 30px 90px rgba(19,11,70,.28);
    border: 1px solid rgba(126,87,255,.18);
    padding: 20px
}

.jd-group-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: #f3efff;
    color: #140b46;
    display: flex;
    align-items: center;
    justify-content: center
}

.jd-group-modal-head {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-right: 42px;
    margin-bottom: 14px
}

.jd-group-modal-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.1rem;
    box-shadow: 0 12px 26px rgba(19,11,70,.12)
}

.jd-group-modal-kicker {
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7c3aed
}

.jd-group-modal h3 {
    margin: 2px 0;
    color: #140b46;
    font-size: 1.25rem;
    font-weight: 900
}

.jd-group-modal p {
    margin: 0;
    color: #6b6682;
    font-weight: 600
}

.jd-field-label {
    font-weight: 900;
    color: #140b46;
    font-size: .9rem
}

    .jd-field-label.with-count {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .jd-field-label.with-count span {
            font-weight: 800;
            color: #8b5cf6;
            background: transparent;
            border-radius: 0;
            padding: 0
        }

.jd-group-manage-form {
    display: grid;
    gap: 10px;
    padding: 0
}

.jd-group-name-input {
    border: 1px solid rgba(19,11,70,.12);
    border-radius: 18px;
    padding: 13px 15px;
    width: 100%;
    font-weight: 800;
    color: #140b46;
    background: #fff;
    outline: none
}

    .jd-group-name-input:focus {
        border-color: #8b5cf6;
        box-shadow: 0 0 0 4px rgba(139,92,246,.12)
    }

.jd-group-upload {
    border: 1px dashed rgba(126,87,255,.35);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #140b46;
    background: #fbfaff;
    font-weight: 900
}

.jd-avatar-upload-inline {
    background: linear-gradient(135deg,#fff,#f7f3ff)
}

.jd-group-friend-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 300px;
    overflow: auto;
    padding-right: 4px
}

    .jd-group-friend-picker.compact {
        max-height: 260px
    }

.jd-group-pick-item {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(19,11,70,.07);
    cursor: pointer;
    background: #fff;
    font-weight: 800;
    color: #140b46
}

    .jd-group-pick-item img {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        object-fit: cover
    }

    .jd-group-pick-item input {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        border-radius: 999px;
        border: 2px solid #d9d2ff;
        background: #fff;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        cursor: pointer;
        transition: all .18s ease;
    }

        .jd-group-pick-item input:checked {
            border: 0;
            background:
                radial-gradient(circle, #ffffff 0 3px, transparent 3.5px),
                linear-gradient(135deg,#7c3aed,#35d3ff) !important;
            box-shadow: 0 0 0 3px rgba(124,58,237,.12), 0 5px 12px rgba(124,58,237,.18);
        }

            .jd-group-pick-item input:checked:after {
                content: none !important;
                display: none !important;
            }

.jd-create-group-box {
    border: 1px solid rgba(126,87,255,.18);
    border-radius: 24px;
    background: linear-gradient(135deg,#fff,#fbfaff);
    box-shadow: 0 16px 40px rgba(19,11,70,.06);
    padding: 12px;
    margin: 12px 0
}

    .jd-create-group-box summary {
        list-style: none;
        font-weight: 900;
        color: #140b46;
        cursor: pointer;
        display: flex;
        gap: 8px;
        align-items: center
    }

        .jd-create-group-box summary::-webkit-details-marker {
            display: none
        }

    .jd-create-group-box form {
        display: grid;
        gap: 10px;
        margin-top: 12px
    }

.jd-group-modal-actions {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    margin-bottom:24px;
}

.jd-create-group-btn {
    border: 0;
    border-radius: 18px;
    background: #140b46;
    color: #fff;
    font-weight: 900;
    padding: 13px 14px;
    box-shadow: 0 14px 30px rgba(19,11,70,.18);
    width: 100%
}

    .jd-create-group-btn.danger {
        margin-top: 10px;
        background: #fff0f0;
        color: #d72525;
        box-shadow: none;
        border: 1px solid rgba(215,37,37,.15)
    }

.jd-friends-v3 .jd-fw-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.jd-friends-v3 .jd-friends-broadcast {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: #130B46;
    color: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(19,11,70,.18)
}

.jd-fw-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #e9ddff;
    color: #140b46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    overflow: hidden
}

.jd-wall-avatar-pick {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(126,87,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #140b46;
    cursor: pointer
}

.jd-friend-avatar-round {
    border-radius: 999px !important
}

@media(max-width:640px) {
    .jd-friend-group-row {
        padding: 9px;
        gap: 8px
    }

    .jd-group-avatar {
        width: 48px;
        height: 48px
    }

    .jd-group-chat-btn, .jd-group-more {
        width: 38px;
        height: 38px
    }

    .jd-friend-main strong {
        font-size: .98rem
    }

    .jd-friend-main span {
        font-size: .86rem
    }

    .jd-group-modal {
        align-items: flex-end;
        padding: 0
    }

    .jd-group-modal-card {
        width: 100%;
        max-height: 88vh;
        border-radius: 28px 28px 0 0;
        padding: 18px 14px 16px
    }

    .jd-group-modal-head {
        align-items: flex-start
    }

    .jd-group-modal-avatar {
        width: 62px;
        height: 62px
    }

    .jd-group-modal h3 {
        font-size: 1.1rem
    }

    .jd-group-modal p {
        font-size: .9rem
    }

    .jd-group-friend-picker.compact {
        max-height: 34vh
    }

    .jd-friends-hero-slim {
        align-items: flex-start !important
    }

    .jd-friends-v3 .jd-fw-actions {
        width: 100%;
        justify-content: space-between
    }

    .jd-friends-v3 .jd-friends-broadcast {
        flex: 1;
        justify-content: center
    }
}


/* Friends groups final interaction polish */
.jd-friends-v3 .jd-group-open {
    cursor: default;
}

.jd-friends-v3 .jd-group-chat-btn, .jd-friends-v3 .jd-group-more {
    cursor: pointer;
}

.jd-friends-v3 .jd-group-more {
    background: #f2edff;
    color: #6d45ff;
    border: 1px solid rgba(109,69,255,.08);
}

    .jd-friends-v3 .jd-group-more:focus-visible, .jd-friends-v3 .jd-group-chat-btn:focus-visible, .jd-wall-avatar-pick:focus-visible {
        outline: 3px solid rgba(124,58,237,.22);
        outline-offset: 2px;
    }

.jd-group-modal {
    z-index: 2147483000 !important;
}

.jd-group-modal-card {
    animation: jdModalPop .16s ease-out;
}

@keyframes jdModalPop {
    from {
        opacity: .6;
        transform: translateY(8px) scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.jd-wall-avatar-pick input {
    display: none;
}

.jd-friends-v3 .jd-friends-broadcast {
    white-space: nowrap;
}

@media(max-width:640px) {
    .jd-friends-v3 .jd-friend-group-row {
        grid-template-columns: auto 1fr auto auto;
    }

    .jd-friends-v3 .jd-group-open {
        min-width: 0;
    }

    .jd-friends-v3 .jd-group-chat-btn, .jd-friends-v3 .jd-group-more {
        width: 42px;
        height: 42px;
    }

    .jd-group-modal-card {
        box-shadow: 0 -20px 60px rgba(19,11,70,.24);
    }
}

/* Friends panel final polish: mobile hero stacks actions under text; delete uses brand modal */
@media(max-width:640px) {
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .jd-friends-v3 .jd-friends-hero-copy {
        width: 100% !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim p {
        max-width: none !important;
        display: block !important;
        white-space: normal !important;
    }

    .jd-friends-v3 .jd-fw-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .jd-friends-v3 .jd-friends-broadcast {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    .jd-wall-avatar-pick {
        flex: 0 0 46px !important;
    }
}

.jd-confirm-modal {
    z-index: 2147483600 !important;
}

/* Friends groups inline form feedback */
.jd-group-form-message {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.35;
}

    .jd-group-form-message.is-error {
        color: #991b1b;
        background: #fff1f2;
        border: 1px solid #fecdd3;
    }

    .jd-group-form-message.is-success {
        color: #7c3aed;
        background: #f5f3ff;
        border: 1px solid #ddd6fe;
    }

/* Friends opens over the current Dashboard/Gallery viewport without touching page scroll.
   Only the drawer body scrolls; no html/body lock is applied. */
.jd-friends-overlay {
    position: fixed !important;
    inset: 0 !important;
}

.jd-friends-drawer {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    height: 100dvh !important;
}

    .jd-friends-drawer.is-open, .jd-friends-drawer.is-open * {
        touch-action: auto;
    }

    .jd-friends-drawer.is-open {
        overscroll-behavior: contain;
    }

.jd-friends-drawer-body {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Group list progressive infinite scroll + skeleton */
.jd-friend-group-row.jd-group-row-hidden {
    display: none !important;
}

.jd-group-scroll-sentinel {
    height: 1px;
}

.jd-group-skeleton-stack {
    display: grid;
    gap: 10px;
    margin: 8px 0 4px;
}

.jd-group-skeleton {
    height: 74px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,rgba(19,11,70,.045),rgba(126,87,255,.10),rgba(19,11,70,.045));
    background-size: 220% 100%;
    animation: jdGroupSkeleton 1.15s ease-in-out infinite;
    border: 1px solid rgba(19,11,70,.06);
}

    .jd-group-skeleton.short {
        opacity: .72;
        height: 66px;
    }

@keyframes jdGroupSkeleton {
    0% {
        background-position: 100% 0
    }

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

@media(max-width:640px) {
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .jd-friends-v3 .jd-fw-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .jd-friends-v3 .jd-friends-broadcast {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .jd-friends-v3 .jd-wall-avatar-pick {
        flex: 0 0 48px !important;
    }
}

/* Friends drawer: lock the page underneath while the Friends modal is open. */
html.jd-friends-scroll-locked,
body.jd-friends-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.jd-friends-scroll-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
}

.jd-friends-overlay.is-open {
    overscroll-behavior: none !important;
    touch-action: none !important;
}

.jd-create-group-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.jd-create-group-cancel {
    border: 1px solid rgba(126,87,255,.18);
    background: rgba(255,255,255,.85);
    color: #171042;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer;
}

    .jd-create-group-cancel:hover {
        background: rgba(126,87,255,.08);
    }


/* Friends drawer final UX: keep background page visible and frozen in place. */
.jd-friends-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.jd-friends-scroll-locked,
body.jd-friends-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.jd-friends-scroll-locked {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
}

/* Put Friends wall + avatar picker under the Your circle text, inside the card. */
.jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-hero-copy {
        width: 100% !important;
    }

        .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-hero-copy p {
            max-width: none !important;
        }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin-top: 4px !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-broadcast {
        flex: 0 1 auto !important;
    }

/* FINAL Friends drawer behavior: no grey dim, no body fixed/hidden jump.
   The page remains visually exactly where it was; JS blocks background wheel/touch/key scroll. */
.jd-friends-overlay,
.jd-friends-overlay.is-open {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
}

html.jd-friends-scroll-locked,
body.jd-friends-scroll-locked {
    overflow: visible !important;
    overscroll-behavior: auto !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
}


/* Mobile group modal scroll fix */
@media(max-width:640px) {
    .jd-group-modal {
        align-items: flex-end;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .jd-group-modal-card {
        max-height: calc(100vh - 12px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 32px;
    }
}

/* REAL FINAL: mobile Edit Group modal must scroll as a whole over the phone viewport. */
@media (max-width: 640px) {
    .jd-group-modal,
    .jd-group-modal.is-open {
        position: fixed !important;
        inset: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: none;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 12px 10px 34px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

        .jd-group-modal.is-open {
            display: flex !important;
        }

    .jd-group-modal-card {
        flex: 0 0 auto !important;
        width: min(560px, calc(100vw - 20px)) !important;
        max-height: none !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        margin: 18px auto 42px !important;
        border-radius: 28px !important;
        padding: 18px 14px 28px !important;
        -webkit-overflow-scrolling: auto !important;
    }

    .jd-group-friend-picker,
    .jd-group-friend-picker.compact {
        max-height: none !important;
        overflow: visible !important;
    }

    body.jd-modal-open .jd-group-modal,
    html.jd-modal-open .jd-group-modal {
        overflow-y: auto !important;
        touch-action: pan-y !important;
    }
}

/* REAL FINAL: unread messages badge in navbar is always solid purple, never transparent. */
#navUnreadBadge,
.jd-nav-badge,
.jd-nav-icon-wrap .jd-nav-badge,
.jd-chat-nav .jd-nav-badge {
    background: #7c3aed !important;
    background-color: #7c3aed !important;
    background-image: none !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 8px 22px rgba(124, 58, 237, .38) !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}


/* FINAL FIX 2026-05-08: Friends drawer opens over current scroll position, hides only page scrollbar, keeps drawer scrollable. */
html.jd-friends-scroll-locked {
    overflow: hidden !important;
    scrollbar-width: none !important;
}

    html.jd-friends-scroll-locked::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

body.jd-friends-scroll-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.jd-friends-drawer.is-open {
    overflow: hidden !important;
}

.jd-friends-drawer-body {
    height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

.jd-field-label.with-count {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

    .jd-field-label.with-count span {
        margin-left: auto !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
    }

.jd-friend-actions-subtle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.jd-friend-mini.jd-block-user-action,
.jd-friend-mini.jd-remove-user-action {
    background: #fff8f8 !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,.06) !important;
}

.jd-friend-mini.jd-block-user-action:hover,
.jd-friend-mini.jd-remove-user-action:hover {
    background: #fff1f2 !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,.10) !important;
}

.jd-friend-mini.jd-unblock-user-action {
    background: #eef2ff !important;
    color: #5b21b6 !important;
    border-color: rgba(124,58,237,.22) !important;
}

@media (max-width: 640px) {
    .jd-group-modal,
    .jd-group-modal.is-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        display: none !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: max(12px, env(safe-area-inset-top)) 10px max(42px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

        .jd-group-modal.is-open {
            display: flex !important;
        }

    .jd-group-modal-card {
        width: min(560px, calc(100vw - 20px)) !important;
        max-height: none !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        margin: 12px auto 52px !important;
        padding: 18px 16px 28px !important;
        border-radius: 28px !important;
    }

    .jd-group-friend-picker,
    .jd-group-friend-picker.compact {
        max-height: none !important;
        overflow: visible !important;
    }

    .jd-field-label.with-count span {
        padding-right: 14px !important;
    }
}

/* Friend block confirmation: use the same custom modal system as delete/remove, never a browser popup. */
.jd-confirm-modal-block .jd-confirm-icon {
    background: linear-gradient(135deg, rgba(123,63,255,.14), rgba(23,21,63,.08));
    color: #6d35ff;
}

.jd-confirm-modal-block .jd-confirm-btn.danger {
    background: #6f35ff;
    color: #fff;
    box-shadow: 0 14px 30px rgba(123,63,255,.28);
}


/* ABSOLUTE FINAL FIX: Friends must open over the exact current page position.
   Never lock the page by fixing body/html, because that visually jumps long pages to top. */
html.jd-friends-scroll-locked,
body.jd-friends-scroll-locked {
    position: static !important;
    overflow: visible !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    padding-right: 0 !important;
    overscroll-behavior: auto !important;
}

.jd-friends-overlay,
.jd-friends-overlay.is-open {
    position: fixed !important;
    inset: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.jd-friends-drawer,
.jd-friends-drawer.is-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* FINAL FIX: while the Friends group edit modal is open, no page behind it may scroll
   (Gallery, Dashboard, Insights, etc.). Only the modal/card itself can scroll. */
html.jd-group-modal-scroll-locked,
body.jd-group-modal-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.jd-group-modal.is-open {
    overscroll-behavior: contain !important;
    touch-action: none !important;
}

    .jd-group-modal.is-open .jd-group-modal-card {
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

/* ===== Friends wall hero clean layout ===== */
.jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.jd-friends-v3 .jd-fw-summary {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #17153f !important;
}

.jd-friends-v3 .jd-fw-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.15 !important;
}

.jd-friends-v3 .jd-fw-copy strong {
    font-size: 15px !important;
    font-weight: 950 !important;
    color: #17153f !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jd-friends-v3 .jd-fw-copy small {
    font-size: 12px !important;
    font-weight: 750 !important;
    color: #6d7388 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jd-friends-v3 .jd-fw-chat-btn {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: linear-gradient(135deg, #7c3cff, #6a35ff) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(106,53,255,.24) !important;
    flex: 0 0 auto !important;
}

.jd-friends-v3 .jd-fw-chat-btn:hover {
    transform: translateY(-1px) !important;
    color: #fff !important;
    filter: brightness(1.03) !important;
}

.jd-friends-v3 .jd-fw-chat-btn i {
    font-size: 19px !important;
    line-height: 1 !important;
}

@media(max-width: 420px) {
    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 8px !important;
    }

    .jd-friends-v3 .jd-fw-chat-btn,
    .jd-friends-v3 .jd-wall-avatar-pick {
        width: 42px !important;
        height: 42px !important;
    }
}
.jd-group-status-text {
    margin: 8px 0 14px;
    color: #d92d20;
    font-size: 14px;
    font-weight: 700;
    background: transparent;
    border: 0;
    padding: 0;
}

/* Group modal avatar + rejoin request polish */
.jd-group-modal-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 999px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #efe9ff;
    color: #6d45ff;
    font-weight: 950;
}

.jd-group-modal-avatar img,
.jd-rejoin-request-row .jd-friend-avatar-round {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 999px !important;
    display: block !important;
}

.jd-rejoin-request-row .jd-friend-avatar-round {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
}

@media(max-width:640px) {
    .jd-group-modal-avatar,
    .jd-rejoin-request-row .jd-friend-avatar-round {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }
}

/* Friends drawer avatar size unification: every photo circle matches group avatars. */
.jd-friends-v3 .jd-fw-avatar,
.jd-friends-v3 .jd-group-avatar,
.jd-friends-v3 .jd-group-modal-avatar,
.jd-friends-v3 .jd-friend-avatar-round,
.jd-friends-v3 .jd-friend-row > img,
.jd-friends-v3 .jd-group-pick-item img,
.jd-group-modal .jd-group-modal-avatar,
.jd-group-modal .jd-friend-avatar-round,
.jd-rejoin-request-row .jd-friend-avatar-round {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

.jd-friends-v3 .jd-fw-avatar img,
.jd-friends-v3 .jd-group-avatar img,
.jd-friends-v3 .jd-group-modal-avatar img,
.jd-friends-v3 .jd-friend-avatar-round img,
.jd-friends-v3 .jd-group-pick-item img,
.jd-group-modal .jd-group-modal-avatar img,
.jd-group-modal .jd-friend-avatar-round,
.jd-rejoin-request-row .jd-friend-avatar-round {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Rejoin requests should be visible immediately to group admins, above the edit form. */
.jd-rejoin-requests-box {
    margin: 14px 0 18px;
    padding: 12px;
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 22px;
    background: rgba(124, 58, 237, .055);
}
.jd-rejoin-requests-box .jd-rejoin-request-row {
    margin-top: 10px;
}

/* FINAL friends group modal polish: hidden scrollbar, tighter danger spacing, mobile request layout. */
.jd-group-modal,
.jd-group-modal-card,
.jd-group-friend-picker,
.jd-group-friend-picker.compact,
.jd-friends-drawer-body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.jd-group-modal::-webkit-scrollbar,
.jd-group-modal-card::-webkit-scrollbar,
.jd-group-friend-picker::-webkit-scrollbar,
.jd-group-friend-picker.compact::-webkit-scrollbar,
.jd-friends-drawer-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.jd-group-modal-actions {
    margin-bottom: 8px !important;
}

.jd-delete-group-form,
.jd-leave-group-form,
.jd-remove-my-group-form {
    margin-top: 6px !important;
}

.jd-create-group-btn.danger {
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    .jd-rejoin-requests-box {
        padding: 12px !important;
    }

    .jd-rejoin-requests-box .jd-rejoin-request-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .jd-rejoin-request-row .jd-friend-avatar-round {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .jd-rejoin-request-row .jd-friend-main {
        flex: 1 1 calc(100% - 66px) !important;
        min-width: 0 !important;
    }

    .jd-rejoin-request-row .jd-friend-main strong {
        max-width: 100% !important;
    }

    .jd-rejoin-request-row .jd-friend-main span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.25 !important;
    }

    .jd-rejoin-request-row form {
        flex: 0 0 auto !important;
        margin-top: 4px !important;
    }

    .jd-rejoin-request-row form:first-of-type {
        margin-left: 62px !important;
    }

    .jd-rejoin-request-row .jd-friend-mini {
        min-width: 92px !important;
        padding: 11px 16px !important;
        white-space: nowrap !important;
    }
}

/* Group request/block polish. */
.jd-group-section-title {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
}
.jd-rejoin-requests-box + .jd-group-manage-form .jd-group-section-title:first-of-type,
.jd-blocked-rejoin-box + .jd-group-manage-form .jd-group-section-title:first-of-type {
    margin-top: 16px !important;
}
.jd-friend-mini.danger-mini {
    background: rgba(239, 68, 68, .08) !important;
    color: #dc2626 !important;
}
.jd-blocked-rejoin-box {
    background: rgba(239, 68, 68, .045) !important;
    border-color: rgba(239, 68, 68, .18) !important;
}
.jd-rejoin-request-row.is-blocked .jd-friend-main span {
    color: #dc2626 !important;
}
@media (max-width: 640px) {
    .jd-rejoin-request-row form:first-of-type {
        margin-left: 62px !important;
    }
    .jd-rejoin-request-row form:nth-of-type(n+2) {
        margin-left: 0 !important;
    }
}

/* FINAL: clean block flow + compact group modal spacing + friends search. */
.jd-friends-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 18px;
    padding: 12px 14px;
    border: 1px solid rgba(19, 11, 70, .08);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 12px 30px rgba(19, 11, 70, .05);
}
.jd-friends-search-wrap i { color: #7c3aed; }
.jd-friends-search {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    font-weight: 800;
    color: #140b46;
    min-width: 0;
}
.jd-friends-search::placeholder { color: rgba(20, 11, 70, .38); }
.jd-friends-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.jd-friends-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(19, 11, 70, .58);
    font: 300 25px/1 "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.jd-friends-search-clear:hover,
.jd-friends-search-clear:focus-visible {
    color: rgba(19, 11, 70, .82);
    outline: none;
}
.jd-friends-search-clear[hidden],
.jd-friends-v3 [data-jd-search-item][hidden].jd-friends-search-hidden {
    display: none !important;
}
.jd-friends-v3 .jd-friend-group-row.jd-group-row-hidden.jd-friends-search-match {
    display: flex !important;
}

.jd-group-manage-form {
    gap: 7px !important;
}
.jd-group-section-title {
    margin-top: 10px !important;
    margin-bottom: 2px !important;
}
.jd-rejoin-requests-box + .jd-group-manage-form .jd-group-section-title:first-of-type,
.jd-blocked-rejoin-box + .jd-group-manage-form .jd-group-section-title:first-of-type {
    margin-top: 10px !important;
}
.jd-group-name-input {
    margin-top: 0 !important;
}
.jd-group-friend-picker.compact {
    margin-top: 0 !important;
}
.jd-avatar-upload-inline {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}
.jd-group-modal-actions {
    margin-top: 8px !important;
}

@media (max-width: 640px) {
    .jd-friends-search-wrap { margin: 12px 0 14px; }
    .jd-group-section-title { margin-top: 8px !important; margin-bottom: 2px !important; }
}

/* Friend group overview/member list */
.jd-group-members-box {
    margin: 12px 0 14px;
    padding: 12px;
    border: 1px solid rgba(126,87,255,.14);
    border-radius: 22px;
    background: linear-gradient(135deg,#fff,#fbfaff);
}

.jd-group-members-toggle {
    width: 100%;
    border: 1px solid rgba(124,58,237,.14);
    background: #fff;
    border-radius: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 10px 0 12px;
    text-align: left;
}

.jd-group-members-box .jd-group-members-toggle {
    margin: 0;
}

.jd-group-members-toggle i {
    transition: transform .18s ease;
    color: #7c3aed;
    flex: 0 0 auto;
}

.jd-group-members-toggle.open i {
    transform: rotate(180deg);
}

.jd-collapsible-members {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    transition: max-height .18s ease, opacity .18s ease;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.jd-collapsible-members.open {
    max-height: 1400px !important;
    opacity: 1;
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.jd-group-members-list {
    display: grid;
    gap: 8px;
}

.jd-group-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid rgba(19,11,70,.07);
    border-radius: 18px;
    background: #fff;
}

.jd-group-member-row .jd-friend-main {
    min-width: 0;
    flex: 1;
}

.jd-group-blocked-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(215,37,37,.18);
    border-radius: 18px;
    background: #fff4f4;
    color: #d72525;
    font-weight: 800;
}

.jd-group-blocked-notice i {
    margin-top: 2px;
}

/* Friends panel avatar -> user's Gallery posts */
.jd-avatar-gallery-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    text-decoration: none !important;
    cursor: pointer;
}

.jd-avatar-gallery-link:hover .jd-friend-avatar-round {
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(124,58,237,.12), 0 8px 18px rgba(20,0,77,.14);
}





/* EXACT ca in screenshot */

input[type="checkbox"],
input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 2px solid #d9c9ff !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all .16s ease !important;
}

    /* selected */
    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        border-color: #c6abff !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 5px rgba(168,85,247,.10) !important;
    }

        /* DOT MOV CENTRAL EXACT */
        input[type="checkbox"]:checked::before,
        input[type="radio"]:checked::before {
            content: "" !important;
            position: absolute !important;
            width: 10px !important;
            height: 10px !important;
            border-radius: 999px !important;
            background: #8b5cf6 !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
        }
/* Admin-only technical test answer preview */
.jd-ai-opt.jd-admin-correct-ring{
    border:2px solid #dc2626 !important;
    box-shadow:0 0 0 3px rgba(220,38,38,.14) !important;
    border-radius:999px !important;
}
/* Keep admin correct-answer highlight visual only.
   Do NOT inject text after the option span, because formula fragments are rendered
   inside the same span and pseudo text can appear between math tokens. */
.jd-ai-opt.jd-admin-correct-answer span::after,
.jd-ai-opt.jd-admin-correct-ring span::after,
.jd-ai-opt.jd-admin-correct-ring *::after{
    content:none !important;
}


/* Technical test math readability */
.jd-ai-q-title sup,
.jd-ai-opt span sup,
.jd-ai-q-title sub,
.jd-ai-opt span sub {
    font-size: .72em;
    line-height: 0;
}
.jd-math-symbol {
    font-family: "Cambria Math", "STIX Two Math", "DejaVu Serif", Georgia, serif;
    font-weight: 700;
    color: #4f35d6;
    display: inline-block;
    margin: 0 .02em;
}
.jd-ai-q-title sup,
.jd-ai-opt span sup {
    margin-left: .02em;
}
.jd-ai-q-title sub,
.jd-ai-opt span sub {
    margin-left: .02em;
}

/* Nuclear guard: never inject textual correctness markers into formula/options.
   The correct option is shown by the red ring only. */
.jd-ai-opt.jd-admin-correct-answer::after,
.jd-ai-opt.jd-admin-correct-answer *::after,
.jd-ai-opt.jd-admin-correct-ring::after,
.jd-ai-opt.jd-admin-correct-ring *::after {
    content: none !important;
}


/* Render square roots as a real radical with a clearly visible overbar. */
.jd-sqrt {
    display: inline-flex;
    align-items: flex-start;
    white-space: nowrap;
    vertical-align: -0.12em;
    margin: 0 .04em;
    color: #4f35d6;
    font-family: "Cambria Math", "STIX Two Math", "DejaVu Serif", Georgia, serif;
    font-weight: 700;
}
.jd-sqrt .jd-root {
    display: inline-block;
    font-size: 1.34em;
    line-height: .96;
    padding-right: .02em;
    color: #4f35d6;
    transform: translateY(.01em);
}
.jd-sqrt .jd-radicand {
    display: inline-block;
    border-top: 2.4px solid #4f35d6;
    padding: .13em .14em 0 .11em;
    margin-left: -.02em;
    line-height: 1.08;
    min-height: 1.05em;
    color: #151235;
    font-family: inherit;
    font-weight: 700;
}



/* Formula fix: give technical-test math enough room and render radicals/sums clearly. */
.jd-ai-q-title,
.jd-ai-opt span {
    line-height: 1.55;
}
.jd-ai-q-title {
    overflow-wrap: anywhere;
}
.jd-ai-opt span {
    overflow-wrap: anywhere;
}
.jd-sqrt {
    display: inline-flex !important;
    align-items: flex-start !important;
    white-space: nowrap;
    vertical-align: -0.18em;
    margin: 0 .08em;
    color: #151235;
    font-family: "Cambria Math", "STIX Two Math", "DejaVu Serif", Georgia, serif;
    font-weight: 700;
}
.jd-sqrt .jd-root {
    display: inline-block !important;
    font-size: 1.42em;
    line-height: 1;
    padding-right: .02em;
    color: #4f35d6;
    transform: translateY(.02em);
}
.jd-sqrt .jd-radicand {
    display: inline-block !important;
    border-top: 2.6px solid #4f35d6 !important;
    padding: .16em .16em 0 .12em !important;
    margin-left: -.01em;
    line-height: 1.16;
    min-height: 1.12em;
    color: #151235;
    font-family: inherit;
    font-weight: 700;
}
.jd-sum {
    display: inline-grid;
    grid-template-areas: "sup" "sigma" "sub";
    place-items: center;
    vertical-align: middle;
    margin: 0 .08em;
    color: #4f35d6;
    font-family: "Cambria Math", "STIX Two Math", "DejaVu Serif", Georgia, serif;
    font-weight: 700;
    line-height: 1;
}
.jd-sum sup { grid-area: sup; font-size: .62em; line-height: 1; margin: 0; }
.jd-sum sub { grid-area: sub; font-size: .62em; line-height: 1; margin: 0; }
.jd-sum::before { content: "∑"; grid-area: sigma; font-size: 1.18em; line-height: .95; }
.jd-sum > .jd-math-symbol { display: none; }




/* Book-style MathJax formulas for technical tests. Keep formulas readable, aligned with the app font, and never inject labels inside answers. */
.jd-ai-q-title,
.jd-ai-opt span,
.jd-dashboard-test-body .jd-ai-q-title,
.jd-dashboard-test-body .jd-ai-opt span {
    line-height: 1.82;
}

.jd-tex-inline mjx-container,
.jd-tex-display mjx-container,
.jd-ai-q-title mjx-container,
.jd-ai-opt mjx-container {
    font-family: inherit !important;
    font-size: 1em !important;
    color: inherit !important;
    line-height: 1.25 !important;
    overflow: visible !important;
}

.jd-ai-q-title mjx-container[jax="CHTML"],
.jd-ai-opt mjx-container[jax="CHTML"] {
    margin: 0 .04em;
    vertical-align: -0.08em;
}

.jd-ai-q-title mjx-container[jax="CHTML"] *,
.jd-ai-opt mjx-container[jax="CHTML"] * {
    font-family: inherit !important;
}

.jd-tex-display {
    display: block;
    margin: .42rem 0 .35rem;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: .1rem;
}

.jd-tex-display mjx-container[jax="CHTML"] {
    display: inline-block !important;
    text-align: left !important;
    margin: 0 !important;
}

.jd-ai-opt span .jd-tex-display {
    margin: .16rem 0;
}

/* Neutralize legacy manual math decorators. */
.jd-ai-q-title .jd-math-symbol,
.jd-ai-opt .jd-math-symbol { color: inherit; font-weight: inherit; }
.jd-ai-q-title .jd-sqrt,
.jd-ai-opt .jd-sqrt,
.jd-ai-q-title .jd-sum,
.jd-ai-opt .jd-sum { all: unset; }
.jd-admin-correct-answer span::after,
.jd-admin-correct-ring span::after { content: none !important; }

/* Clean scientific formula renderer for tests: app-font, no MathJax errors, book-like fractions/radicals. */
.jd-ai-q-title,
.jd-ai-opt span,
.jd-dashboard-test-body .jd-ai-q-title,
.jd-dashboard-test-body .jd-ai-opt span {
    line-height: 1.72 !important;
    overflow: visible !important;
}

.jd-math-clean {
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    overflow-wrap: anywhere;
}

.jd-math-clean sup,
.jd-math-clean sub {
    font-family: inherit !important;
    font-size: .72em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.jd-math-clean sup { top: -.45em; }
.jd-math-clean sub { bottom: -.18em; }

.jd-frac {
    display: inline-grid !important;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    vertical-align: -0.38em;
    margin: 0 .14em;
    line-height: 1.08;
    font-family: inherit !important;
    font-size: .94em;
}
.jd-frac-num {
    display: block;
    border-bottom: 1.6px solid currentColor;
    padding: 0 .22em .08em;
    min-width: 1.1em;
    text-align: center;
}
.jd-frac-den {
    display: block;
    padding: .08em .22em 0;
    min-width: 1.1em;
    text-align: center;
}

.jd-sqrt {
    display: inline-flex !important;
    align-items: flex-start;
    vertical-align: -0.25em;
    margin: 0 .1em;
    font-family: inherit !important;
    color: inherit !important;
}
.jd-root-sign {
    font-size: 1.18em;
    line-height: 1;
    margin-right: .03em;
    transform: translateY(.02em);
}
.jd-radicand {
    display: inline-block;
    border-top: 1.7px solid currentColor;
    padding: .12em .1em 0 .08em;
    line-height: 1.16;
    min-height: 1.05em;
}

.jd-sum {
    display: inline-grid !important;
    grid-template-areas: "top" "sym" "bot";
    justify-items: center;
    align-items: center;
    vertical-align: -0.55em;
    margin: 0 .18em;
    line-height: 1;
    font-family: inherit !important;
}
.jd-sum-top { grid-area: top; font-size: .62em; line-height: .9; }
.jd-sum-symbol { grid-area: sym; font-size: 1.08em; line-height: .9; }
.jd-sum-bottom { grid-area: bot; font-size: .62em; line-height: .9; }

.jd-int {
    display: inline-block !important;
    position: relative;
    padding: 0 .34em 0 .06em;
    margin: 0 .05em;
    vertical-align: -0.25em;
    font-family: inherit !important;
}
.jd-int-symbol { font-size: 1.26em; line-height: 1; }
.jd-int sub,
.jd-int sup {
    position: absolute;
    left: .72em;
    font-size: .58em;
    line-height: 1;
}
.jd-int sup { top: -.28em; }
.jd-int sub { bottom: -.22em; }

.jd-greek { font-family: inherit !important; font-style: normal !important; }

.jd-tex-inline,
.jd-tex-display,
.jd-ai-q-title mjx-container,
.jd-ai-opt mjx-container {
    display: none !important;
}

/* Academic formula rendering v20260527-4
   Uses native MathML for fractions, roots, sums and integrals. No TeX parser,
   so the technical test never shows parse errors. */
.jd-ai-q-title,
.jd-ai-opt span {
    line-height: 1.82 !important;
    letter-spacing: -0.01em;
    overflow: visible !important;
}

.jd-academic-text {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    overflow-wrap: anywhere;
}

.jd-academic-text sup,
.jd-academic-text sub {
    font-family: inherit !important;
    font-size: .72em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-weight: inherit;
}
.jd-academic-text sup { top: -.46em; }
.jd-academic-text sub { bottom: -.16em; }

.jd-mathml {
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    vertical-align: -0.22em;
    margin: 0 .12em;
    line-height: 1.35;
}

.jd-mathml mi,
.jd-mathml mn,
.jd-mathml mo,
.jd-mathml mtext {
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.jd-mathml mfrac {
    font-size: .96em;
}

.jd-mathml msqrt {
    font-size: .98em;
}

.jd-math-op {
    vertical-align: -0.42em;
    margin: 0 .18em;
}

.jd-ai-q-title .jd-mathml,
.jd-ai-opt .jd-mathml {
    color: inherit !important;
}

/* Keep admin preview clean: only the red ring indicates the correct answer. */
.jd-admin-correct-ring span::after,
.jd-admin-correct-answer span::after,
.jd-admin-correct-ring .jd-academic-text::after,
.jd-admin-correct-answer .jd-academic-text::after {
    content: none !important;
    display: none !important;
}

/* Professional technical-test formula rendering: book-like, same UI font, no external parser. */
.jd-ai-q-title,
.jd-ai-opt span {
    line-height: 1.65 !important;
    overflow: visible !important;
}
.jd-academic-text {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.jd-formula {
    font-family: inherit;
    font-size: 0.98em;
    font-weight: 500;
    color: inherit;
    letter-spacing: 0;
    white-space: normal;
}
.jd-formula-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.14em;
    vertical-align: -0.18em;
    margin: 0 0.08em;
}
.jd-formula-display {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.18em;
    width: fit-content;
    max-width: 100%;
    margin: 0.72rem auto 0.64rem;
    padding: 0.62rem 0.9rem;
    border: 1px solid rgba(91, 65, 255, 0.12);
    border-radius: 18px;
    background: rgba(248, 247, 255, 0.75);
}
.jd-mi, .jd-mn, .jd-mo, .jd-fn {
    display: inline-block;
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    color: inherit;
    line-height: 1.15;
}
.jd-mo { padding: 0 0.08em; }
.jd-fn { font-weight: 650; }
.jd-formula sup,
.jd-formula sub {
    font-family: inherit;
    font-size: 0.68em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.jd-formula sup { top: -0.58em; }
.jd-formula sub { top: 0.28em; }
.jd-fraction {
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    line-height: 1.05;
    margin: 0 0.12em;
    transform: translateY(0.06em);
}
.jd-frac-num,
.jd-frac-den {
    display: block;
    padding: 0 0.28em;
    font-size: 0.86em;
    line-height: 1.12;
    white-space: nowrap;
}
.jd-frac-den {
    border-top: 1.6px solid currentColor;
    margin-top: 0.08em;
    padding-top: 0.1em;
}
.jd-root {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    margin: 0 0.12em;
    line-height: 1;
}
.jd-root-sign {
    font-size: 1.18em;
    line-height: 1.05;
    padding-right: 0.03em;
    transform: translateY(0.02em);
}
.jd-root-body {
    display: inline-flex;
    align-items: center;
    border-top: 1.6px solid currentColor;
    padding: 0.16em 0.16em 0 0.12em;
    margin-left: -0.02em;
    min-height: 1.05em;
}
.jd-op {
    display: inline-grid;
    grid-template-rows: 0.72em auto 0.72em;
    justify-items: center;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.16em;
    line-height: 1;
}
.jd-op-main { font-size: 1.35em; line-height: 0.8; }
.jd-op-sup, .jd-op-sub { font-size: 0.58em; line-height: 1; white-space: nowrap; }
.jd-admin-correct-ring span::after,
.jd-admin-correct-answer span::after { content: none !important; display: none !important; }


/* KaTeX professional renderer for technical tests - final override v20260527-katex-professional
   Use a real math renderer for fractions, roots, sums and integrals. The surrounding UI keeps Inter. */
.jd-ai-q-title,
.jd-ai-opt span,
.jd-dashboard-test-body .jd-ai-q-title,
.jd-dashboard-test-body .jd-ai-opt span {
    line-height: 1.72 !important;
    overflow: visible !important;
}

.jd-academic-text {
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    overflow-wrap: anywhere;
}

.jd-katex-inline,
.jd-katex-display {
    color: inherit !important;
}

.jd-katex-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.16em;
    margin: 0 .08em;
    min-height: 1.2em;
}

.jd-katex-display {
    display: block;
    max-width: 100%;
    width: fit-content;
    margin: .72rem auto .78rem;
    padding: .42rem .72rem;
    border: 1px solid rgba(91, 65, 255, .12);
    border-radius: 16px;
    background: rgba(248, 247, 255, .72);
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}

.jd-ai-opt .jd-katex-display {
    margin: .35rem 0 .25rem 2.25rem;
    max-width: calc(100% - 2.25rem);
}

.jd-katex-inline .katex,
.jd-katex-display .katex {
    font-size: 1.02em !important;
    line-height: 1.25 !important;
    color: inherit !important;
}

.jd-katex-display .katex {
    font-size: 1.05em !important;
}

.jd-katex-inline .katex-display,
.jd-katex-display .katex-display {
    margin: 0 !important;
}

.jd-katex-inline .katex-html,
.jd-katex-display .katex-html {
    max-width: 100%;
}

/* Keep KaTeX clean: no old handmade fraction/root/sigma renderers, no parse-error red text. */
.jd-formula,
.jd-math-clean,
.jd-mathml,
.jd-tex-inline,
.jd-tex-display,
.jd-sqrt,
.jd-root,
.jd-sum,
.jd-int,
.jd-fraction,
.jd-frac,
.jd-op {
    all: unset;
}

.katex-error {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    background: transparent !important;
    border: 0 !important;
}

.jd-katex-pending,
.jd-katex-fallback {
    font-family: inherit !important;
    color: inherit !important;
    font-size: .98em;
    white-space: normal;
}

/* Admin preview: only the red ring marks the correct answer. */
.jd-admin-correct-ring span::after,
.jd-admin-correct-answer span::after,
.jd-admin-correct-ring .jd-academic-text::after,
.jd-admin-correct-answer .jd-academic-text::after {
    content: none !important;
    display: none !important;
}


/* KaTeX display block refinement v20260527-display-formulas
   Complex formulas are placed on their own line with consistent sizing and academic spacing. */
.jd-ai-q-title,
.jd-ai-opt span,
.jd-dashboard-test-body .jd-ai-q-title,
.jd-dashboard-test-body .jd-ai-opt span {
    line-height: 1.82 !important;
}

.jd-ai-q-title .jd-katex-display,
.jd-ai-opt .jd-katex-display,
.jd-katex-display {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: .62rem 0 .72rem !important;
    padding: .52rem .7rem !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: rgba(248, 247, 255, .62) !important;
    text-align: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.jd-ai-q-title .jd-katex-display {
    margin-top: .5rem !important;
    margin-bottom: .55rem !important;
}

.jd-ai-opt .jd-katex-display {
    margin: .42rem 0 .22rem 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: .22rem .35rem !important;
}

.jd-katex-inline {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: -0.12em !important;
    margin: 0 .06em !important;
    min-height: 1em !important;
}

.jd-katex-inline .katex,
.jd-katex-display .katex,
.jd-ai-q-title .katex,
.jd-ai-opt .katex {
    font-size: 1.03em !important;
    line-height: 1.35 !important;
    color: inherit !important;
}

.jd-ai-q-title .jd-katex-display .katex,
.jd-ai-opt .jd-katex-display .katex {
    font-size: 1.04em !important;
}

.jd-katex-display .katex-display,
.jd-katex-inline .katex-display {
    margin: 0 !important;
}

.jd-katex-display .base {
    margin-top: .04em;
    margin-bottom: .04em;
}

.jd-katex-display .mfrac,
.jd-katex-display .sqrt,
.jd-katex-inline .mfrac,
.jd-katex-inline .sqrt {
    vertical-align: middle !important;
}

.jd-ai-opt.jd-admin-correct-ring {
    overflow: visible !important;
}


/* Technical test radio alignment fix v20260527-radio-center
   Keep the check control vertically centered inside answer cards, including answers with display formulas. */
.jd-ai-opt {
    align-items: center !important;
}
.jd-ai-opt > input[type="radio"] {
    margin: 0 !important;
    align-self: center !important;
}
.jd-ai-opt > span {
    display: block;
    min-width: 0;
}


/* Technical test final alignment v20260527-scroll-radio
   Keep the radio/check vertically centered in every answer card, including
   answers where KaTeX display formulas create multiple lines. */
.jd-ai-opt {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: center !important;
}
.jd-ai-opt > input[type="radio"] {
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
}
.jd-ai-opt > span {
    grid-column: 2 !important;
    align-self: center !important;
    min-width: 0 !important;
}
.jd-ai-q-title {
    display: block !important;
}
.jd-ai-q-title > .jd-academic-text {
    display: inline !important;
}
.jd-ai-q-title .jd-katex-display {
    clear: both !important;
}

/* Home: use the three premium feature cards as the main entry points */
.jd-home-entry-grid .jd-feature-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    min-height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.jd-home-entry-grid .jd-feature-link:hover {
    transform: translateY(-2px);
    border-color: rgba(106,53,255,.28);
    box-shadow: 0 18px 42px rgba(19,11,70,.10);
}

.jd-home-entry-grid .jd-feature-link:hover .jd-feature-title {
    color: var(--jd-accent);
}

.jd-home-entry-grid .jd-feature-insights {
    background: linear-gradient(135deg, #6A35FF 0%, #A855F7 100%) !important;
    border-color: rgba(106,53,255,.22) !important;
    box-shadow: 0 24px 52px rgba(106,53,255,.22) !important;
    color: #fff !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.24) !important;
    color: #fff !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
.jd-home-entry-grid .jd-feature-insights .jd-muted {
    color: #fff !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted {
    opacity: .88;
}

.jd-home-entry-grid .jd-feature-insights:hover {
    box-shadow: 0 28px 64px rgba(106,53,255,.28) !important;
}

/* Home hero/card polish: align feature card and animated soft Insights gradient */
.jd-hero-grid .jd-jobcard {
    align-self: end;
}

.jd-home-entry-grid .jd-feature-link,
.jd-home-entry-grid .jd-feature-link:hover,
.jd-home-entry-grid .jd-feature-link:focus,
.jd-home-entry-grid .jd-feature-link:active,
.jd-home-entry-grid .jd-feature-link * {
    text-decoration: none !important;
}

.jd-home-entry-grid .jd-feature-insights {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg,
        #f7ecff 0%,
        #fff0f7 28%,
        #ffe4ef 48%,
        #f0eaff 70%,
        #eef7ff 100%) !important;
    background-size: 240% 240% !important;
    animation: jdHomeInsightGradient 9s ease-in-out infinite;
    border-color: rgba(236,72,153,.18) !important;
    box-shadow: 0 24px 58px rgba(211,108,160,.16), 0 18px 44px rgba(106,53,255,.10) !important;
    color: var(--jd-ink) !important;
}

.jd-home-entry-grid .jd-feature-insights::before {
    content: "";
    position: absolute;
    inset: -45%;
    background: radial-gradient(circle at 30% 30%, rgba(236,72,153,.18), transparent 34%),
                radial-gradient(circle at 70% 62%, rgba(124,92,255,.15), transparent 36%);
    opacity: .65;
    animation: jdHomeInsightGlow 11s ease-in-out infinite alternate;
    pointer-events: none;
}

.jd-home-entry-grid .jd-feature-insights > * {
    position: relative;
    z-index: 1;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(124,92,255,.20) !important;
    color: #6A35FF !important;
    box-shadow: 0 12px 28px rgba(106,53,255,.10) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
.jd-home-entry-grid .jd-feature-insights .jd-muted {
    color: var(--jd-ink) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted {
    opacity: .72 !important;
}

.jd-home-entry-grid .jd-feature-insights:hover {
    box-shadow: 0 28px 66px rgba(211,108,160,.20), 0 20px 48px rgba(106,53,255,.14) !important;
}

@keyframes jdHomeInsightGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes jdHomeInsightGlow {
    0% { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
    100% { transform: translate3d(2%, 1%, 0) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid .jd-feature-insights,
    .jd-home-entry-grid .jd-feature-insights::before {
        animation: none !important;
    }
}


/* FINAL HOME OVERRIDE: premium entry cards + hero alignment */
.jd-hero-grid {
    align-items: end !important;
}

.jd-hero-grid > div:first-child,
.jd-hero-grid > .jd-jobcard {
    align-self: end !important;
}

.jd-hero-grid > .jd-jobcard {
    margin-bottom: 0 !important;
}

.jd-home-entry-grid a.jd-feature-link,
.jd-home-entry-grid a.jd-feature-link:link,
.jd-home-entry-grid a.jd-feature-link:visited,
.jd-home-entry-grid a.jd-feature-link:hover,
.jd-home-entry-grid a.jd-feature-link:focus,
.jd-home-entry-grid a.jd-feature-link:active,
.jd-home-entry-grid a.jd-feature-link *,
.jd-home-entry-grid a.jd-feature-link:hover *,
.jd-home-entry-grid a.jd-feature-link:focus * {
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid a.jd-feature-link {
    color: inherit !important;
    cursor: pointer;
}

.jd-home-entry-grid .jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background: linear-gradient(120deg,
        #f7ecff 0%,
        #fff1f7 28%,
        #ffd8ea 48%,
        #f0eaff 70%,
        #eef7ff 100%) !important;
    background-size: 260% 260% !important;
    animation: jdHomeSoftMovingGradient 10s ease-in-out infinite !important;
    border-color: rgba(211,108,160,.22) !important;
    box-shadow: 0 24px 58px rgba(211,108,160,.16), 0 18px 44px rgba(106,53,255,.10) !important;
    color: #130B46 !important;
}

.jd-home-entry-grid .jd-feature-insights::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background:
        radial-gradient(circle at 24% 24%, rgba(236,72,153,.20), transparent 34%),
        radial-gradient(circle at 74% 64%, rgba(124,92,255,.18), transparent 38%),
        radial-gradient(circle at 48% 92%, rgba(255,112,44,.10), transparent 32%);
    opacity: .72;
    animation: jdHomeSoftMovingGlow 12s ease-in-out infinite alternate !important;
    pointer-events: none;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.74) !important;
    border-color: rgba(124,92,255,.22) !important;
    color: #6A35FF !important;
    box-shadow: 0 12px 28px rgba(106,53,255,.10) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
.jd-home-entry-grid .jd-feature-insights .jd-muted {
    color: #130B46 !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted {
    opacity: .74 !important;
}

@keyframes jdHomeSoftMovingGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes jdHomeSoftMovingGlow {
    0% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
    100% { transform: translate3d(2%, 1%, 0) rotate(5deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid .jd-feature-insights,
    .jd-home-entry-grid .jd-feature-insights::before {
        animation: none !important;
    }
}


/* FINAL REAL HOME FIX: align hero card with action buttons + assessment-style Insights card */
.jd-hero .jd-hero-grid {
    align-items: end !important;
}

.jd-hero .jd-hero-grid > div:first-child,
.jd-hero .jd-hero-grid > .jd-jobcard {
    align-self: end !important;
}

/* The old actions row had bottom margin, so the card aligned below the buttons.
   Remove it so the bottom of the hero card sits on the same visual baseline as the buttons. */
.jd-hero .jd-hero-actions {
    margin-bottom: 0 !important;
}

.jd-hero .jd-jobcard {
    margin-bottom: 0 !important;
}

.jd-home-entry-grid a.jd-feature-link,
.jd-home-entry-grid a.jd-feature-link:link,
.jd-home-entry-grid a.jd-feature-link:visited,
.jd-home-entry-grid a.jd-feature-link:hover,
.jd-home-entry-grid a.jd-feature-link:focus,
.jd-home-entry-grid a.jd-feature-link:active,
.jd-home-entry-grid a.jd-feature-link *,
.jd-home-entry-grid a.jd-feature-link:hover *,
.jd-home-entry-grid a.jd-feature-link:focus * {
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid .jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.28) !important;
    background: linear-gradient(135deg,
        #f72585 0%,
        #ff4d7d 24%,
        #ff7a3d 55%,
        #8b5cf6 100%) !important;
    background-size: 240% 240% !important;
    box-shadow: 0 28px 70px rgba(247,37,133,.20), 0 22px 54px rgba(139,92,246,.16) !important;
    animation: jdHomeAssessmentGradient 12s ease-in-out infinite !important;
}

.jd-home-entry-grid .jd-feature-insights::before {
    content: "";
    position: absolute;
    inset: -45%;
    z-index: -1;
    pointer-events: none;
    opacity: .72;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 28%),
        radial-gradient(circle at 76% 18%, rgba(255,122,61,.34), transparent 34%),
        radial-gradient(circle at 50% 85%, rgba(139,92,246,.38), transparent 40%);
    animation: jdHomeAssessmentGlow 14s ease-in-out infinite alternate !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.34) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
.jd-home-entry-grid .jd-feature-insights .jd-muted,
.jd-home-entry-grid .jd-feature-insights i {
    color: #ffffff !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted {
    opacity: .92 !important;
}

@keyframes jdHomeAssessmentGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes jdHomeAssessmentGlow {
    0% { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 1.5%, 0) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid .jd-feature-insights,
    .jd-home-entry-grid .jd-feature-insights::before {
        animation: none !important;
    }
}


/* FINAL HOME ENTRY HOVER FIX: smooth lift + premium lower shadow */
.jd-home-entry-grid a.jd-feature-link {
    transform: translateY(0) scale(1) !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background-position .35s ease !important;
    will-change: transform;
}

.jd-home-entry-grid a.jd-feature-link:hover,
.jd-home-entry-grid a.jd-feature-link:focus-visible {
    transform: translateY(-7px) scale(1.012) !important;
    box-shadow: 0 26px 58px rgba(19,11,70,.14), 0 10px 22px rgba(124,92,255,.10) !important;
    border-color: rgba(124,92,255,.26) !important;
    text-decoration: none !important;
}

.jd-home-entry-grid a.jd-feature-link:active {
    transform: translateY(-3px) scale(.996) !important;
    transition-duration: .12s !important;
}

.jd-home-entry-grid a.jd-feature-link:hover .jd-feature-icon,
.jd-home-entry-grid a.jd-feature-link:focus-visible .jd-feature-icon {
    transform: translateY(-2px) scale(1.04) !important;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible {
    box-shadow: 0 34px 76px rgba(247,37,133,.26), 0 18px 44px rgba(139,92,246,.22) !important;
    border-color: rgba(255,255,255,.44) !important;
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid a.jd-feature-link,
    .jd-home-entry-grid a.jd-feature-link:hover,
    .jd-home-entry-grid a.jd-feature-link:focus-visible,
    .jd-home-entry-grid a.jd-feature-link:active,
    .jd-home-entry-grid a.jd-feature-link:hover .jd-feature-icon,
    .jd-home-entry-grid a.jd-feature-link:focus-visible .jd-feature-icon {
        transition: none !important;
        transform: none !important;
    }
}

/* FINAL EXACT INSIGHTS BACKGROUND: assessment-style animated pink/orange field */
.jd-home-entry-grid .jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 12% 88%, rgba(255,255,255,.46) 0%, rgba(255,255,255,.22) 18%, rgba(255,255,255,0) 44%),
        radial-gradient(circle at 86% 22%, rgba(255,188,128,.70) 0%, rgba(255,126,42,.45) 32%, rgba(255,126,42,0) 58%),
        radial-gradient(circle at 18% 14%, rgba(255,35,139,.98) 0%, rgba(255,35,139,.76) 34%, rgba(255,35,139,0) 62%),
        linear-gradient(135deg, #f72585 0%, #ff3b8a 28%, #ff7a35 68%, #ff8f44 100%) !important;
    background-size: 180% 180%, 170% 170%, 160% 160%, 220% 220% !important;
    background-position: 0% 100%, 100% 0%, 0% 0%, 0% 50% !important;
    box-shadow: 0 30px 78px rgba(247,37,133,.25), 0 18px 48px rgba(255,122,53,.18) !important;
    animation: jdAssessmentLikeGradient 14s ease-in-out infinite !important;
}

.jd-home-entry-grid .jd-feature-insights::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    pointer-events: none;
    opacity: .78;
    background:
        radial-gradient(ellipse at 8% 100%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.22) 22%, transparent 48%),
        radial-gradient(ellipse at 78% 70%, rgba(255,102,36,.54) 0%, transparent 48%),
        radial-gradient(ellipse at 8% 18%, rgba(255,27,134,.56) 0%, transparent 50%);
    filter: blur(18px);
    transform: translate3d(0,0,0) scale(1.02);
    animation: jdAssessmentLikeGlow 16s ease-in-out infinite alternate !important;
}

.jd-home-entry-grid .jd-feature-insights::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 36%);
    mix-blend-mode: screen;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.20) !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(19,11,70,.12) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
.jd-home-entry-grid .jd-feature-insights .jd-muted,
.jd-home-entry-grid .jd-feature-insights i {
    color: #ffffff !important;
    text-decoration: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted {
    opacity: .94 !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible {
    box-shadow: 0 38px 92px rgba(247,37,133,.34), 0 24px 56px rgba(255,122,53,.24) !important;
}

@keyframes jdAssessmentLikeGradient {
    0%   { background-position: 0% 100%, 100% 0%, 0% 0%, 0% 50%; }
    50%  { background-position: 18% 82%, 84% 18%, 12% 10%, 100% 50%; }
    100% { background-position: 0% 100%, 100% 0%, 0% 0%, 0% 50%; }
}

@keyframes jdAssessmentLikeGlow {
    0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); opacity: .72; }
    100% { transform: translate3d(1.8%, 1.2%, 0) scale(1.06); opacity: .86; }
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid .jd-feature-insights,
    .jd-home-entry-grid .jd-feature-insights::before {
        animation: none !important;
    }
}


/* FINAL OVERRIDE: Insights card direct purple-to-fuchsia gradient */
.jd-home-entry-grid .jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 0 !important;
    background: linear-gradient(90deg, #5F2BFF 0%, #8B3DFF 42%, #D946EF 72%, #F72585 100%) !important;
    background-size: 220% 100% !important;
    background-position: 0% 50% !important;
    box-shadow: 0 28px 76px rgba(95,43,255,.24), 0 18px 50px rgba(247,37,133,.20) !important;
    animation: jdInsightsPurpleFuchsiaMove 12s ease-in-out infinite !important;
}

.jd-home-entry-grid .jd-feature-insights::before,
a.jd-feature.jd-feature-link.jd-feature-insights::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background: linear-gradient(90deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 100%);
}

.jd-home-entry-grid .jd-feature-insights::after,
a.jd-feature.jd-feature-link.jd-feature-insights::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%);
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(19,11,70,.14) !important;
}

.jd-home-entry-grid .jd-feature-insights,
.jd-home-entry-grid .jd-feature-insights *,
a.jd-feature.jd-feature-link.jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights * {
    color: #ffffff !important;
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-muted {
    opacity: .94 !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible,
a.jd-feature.jd-feature-link.jd-feature-insights:hover,
a.jd-feature.jd-feature-link.jd-feature-insights:focus-visible {
    box-shadow: 0 40px 96px rgba(95,43,255,.30), 0 26px 62px rgba(247,37,133,.30) !important;
}

@keyframes jdInsightsPurpleFuchsiaMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes jdInsightsPurpleFuchsiaGlow {
    0%   { opacity: .42; }
    100% { opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid .jd-feature-insights,
    .jd-home-entry-grid .jd-feature-insights::before,
    a.jd-feature.jd-feature-link.jd-feature-insights,
    a.jd-feature.jd-feature-link.jd-feature-insights::before {
        animation: none !important;
    }
}



/* FINAL OVERRIDE: Home Insights card - navy to fuchsia, no icon borders */
.jd-home-entry-grid .jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 14% 16%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 34%),
        radial-gradient(circle at 88% 22%, rgba(247,37,133,.46) 0%, rgba(247,37,133,0) 46%),
        linear-gradient(90deg, #130B46 0%, #24105F 34%, #6D28D9 66%, #F72585 100%) !important;
    background-size: 180% 180%, 170% 170%, 220% 100% !important;
    background-position: 0% 0%, 100% 0%, 0% 50% !important;
    box-shadow: 0 30px 80px rgba(19,11,70,.24), 0 22px 58px rgba(247,37,133,.22) !important;
    animation: jdInsightsNavyFuchsiaMove 13s ease-in-out infinite !important;
}

.jd-home-entry-grid .jd-feature-insights::before,
a.jd-feature.jd-feature-link.jd-feature-insights::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .50;
    background:
        radial-gradient(ellipse at 8% 95%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 24%, transparent 52%),
        linear-gradient(90deg, rgba(255,255,255,.08), transparent 55%);
}

.jd-home-entry-grid .jd-feature-insights::after,
a.jd-feature.jd-feature-link.jd-feature-insights::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 44%);
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon,
.jd-home-entry-grid .jd-feature-link .jd-feature-icon,
a.jd-feature.jd-feature-link .jd-feature-icon {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
}

.jd-home-entry-grid .jd-feature-insights,
.jd-home-entry-grid .jd-feature-insights *,
a.jd-feature.jd-feature-link.jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights * {
    color: #ffffff !important;
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-muted {
    opacity: .94 !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible,
a.jd-feature.jd-feature-link.jd-feature-insights:hover,
a.jd-feature.jd-feature-link.jd-feature-insights:focus-visible {
    box-shadow: 0 42px 98px rgba(19,11,70,.30), 0 28px 68px rgba(247,37,133,.32) !important;
}

@keyframes jdInsightsNavyFuchsiaMove {
    0%   { background-position: 0% 0%, 100% 0%, 0% 50%; }
    50%  { background-position: 12% 8%, 86% 14%, 100% 50%; }
    100% { background-position: 0% 0%, 100% 0%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .jd-home-entry-grid .jd-feature-insights,
    a.jd-feature.jd-feature-link.jd-feature-insights {
        animation: none !important;
    }
}




/* FINAL OVERRIDE: Home Insights card - solid navy with subtle Layers Innovation waves */
.jd-home-entry-grid .jd-feature-icon,
a.jd-feature.jd-feature-link .jd-feature-icon,
.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid rgba(211,108,160,.22) !important;
    background: #130B46 !important;
    box-shadow: 0 32px 86px rgba(19,11,70,.26) !important;
    animation: none !important;
}

.jd-home-entry-grid .jd-feature-insights::before,
a.jd-feature.jd-feature-link.jd-feature-insights::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    opacity: .74 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 900 360' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-40 45 C55 18 145 18 240 45 C335 72 425 72 520 45 C615 18 705 18 800 45 C850 59 884 59 940 45' fill='none' stroke='%23D36CA0' stroke-width='2.1' stroke-opacity='.42'/%3E%3Cpath d='M-40 112 C75 82 190 82 305 112 C420 142 535 142 650 112 C765 82 850 82 940 112' fill='none' stroke='%237F56D9' stroke-width='1.7' stroke-opacity='.34'/%3E%3Cpath d='M-40 190 C80 160 200 160 320 190 C440 220 560 220 680 190 C800 160 880 166 940 190' fill='none' stroke='%23C12BFF' stroke-width='1.45' stroke-opacity='.24'/%3E%3Cpath d='M-40 285 C96 255 232 255 368 285 C504 315 640 315 776 285 C850 268 900 270 940 285' fill='none' stroke='%23D36CA0' stroke-width='1.25' stroke-opacity='.20'/%3E%3C/svg%3E") !important;
    background-size: 155% 125% !important;
    background-position: center !important;
}

.jd-home-entry-grid .jd-feature-insights::after,
a.jd-feature.jd-feature-link.jd-feature-insights::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(211,108,160,.34), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(127,86,217,.26), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 52%) !important;
    opacity: .86 !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights,
.jd-home-entry-grid .jd-feature-insights *,
a.jd-feature.jd-feature-link.jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights * {
    color: #ffffff !important;
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-muted {
    color: rgba(255,255,255,.86) !important;
    opacity: 1 !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible,
a.jd-feature.jd-feature-link.jd-feature-insights:hover,
a.jd-feature.jd-feature-link.jd-feature-insights:focus-visible {
    transform: translateY(-5px) !important;
    box-shadow: 0 42px 102px rgba(19,11,70,.34), 0 22px 56px rgba(211,108,160,.18) !important;
}


/* FINAL OVERRIDE: Insights custom analytics bars icon */
.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    color: #ffffff !important;
    overflow: visible !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon path,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon path {
    stroke: currentColor !important;
}

/* FINAL OVERRIDE: smaller Insights icon, balanced inside the tile */
.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
    display: block !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon path,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon path {
    stroke-width: 1.55 !important;
}


/* =========================================================
   JobDropper Dan fix: remove ugly native black focus rings globally.
   Keep clicks/taps clean on navbar, Gallery Jobs/Talents cards, chips,
   links, icon buttons and drawer controls. Inputs keep their custom
   project styling from page CSS, but never show browser default outline.
   ========================================================= */
html, body, * {
    -webkit-tap-highlight-color: transparent !important;
}
*:focus,
*:focus-visible,
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.btn:focus,
.btn:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.jd-nav-link:focus,
.jd-nav-link:focus-visible,
.jd-navbar a:focus,
.jd-navbar a:focus-visible,
.jd-navbar button:focus,
.jd-navbar button:focus-visible,
.jd-wall-launcher:focus,
.jd-wall-launcher:focus-visible,
.jd-filter-pill:focus,
.jd-filter-pill:focus-visible,
.jd-icon-btn:focus,
.jd-icon-btn:focus-visible,
.jd-btn-soft:focus,
.jd-btn-soft:focus-visible,
.jd-btn-primary:focus,
.jd-btn-primary:focus-visible,
.jd-card-choice:focus,
.jd-card-choice:focus-visible,
.jd-backlink:focus,
.jd-backlink:focus-visible,
.jd-feature-link:focus,
.jd-feature-link:focus-visible {
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0 !important;
}


/* JD global UX polish: never leave the browser's black focus rectangle after mouse/touch clicks.
   Inputs keep normal editing behavior; navigation/action elements stay visually clean. */
a:focus, a:focus-visible, button:focus, button:focus-visible, [role="button"]:focus, [role="button"]:focus-visible,
.nav-link:focus, .nav-link:focus-visible, .jd-nav-link:focus, .jd-nav-link:focus-visible,
.btn:focus, .btn:focus-visible, .jd-primary:focus, .jd-primary:focus-visible, .jd-ghost:focus, .jd-ghost:focus-visible,
.jd-wall-launcher:focus, .jd-wall-launcher:focus-visible, .jd-filter-pill:focus, .jd-filter-pill:focus-visible,
.jd-card-clean:focus, .jd-card-clean:focus-visible, .jd-card-choice:focus, .jd-card-choice:focus-visible {
    outline: 0 !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}

/* JD Dan final polish: no native black focus rectangle anywhere after clicks/taps. */
html *, html *::before, html *::after {
    -webkit-tap-highlight-color: transparent !important;
}
html *:focus, html *:focus-visible, html *:focus-within,
body *:focus, body *:focus-visible, body *:focus-within {
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}
a:focus, a:focus-visible, button:focus, button:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible,
[tabindex]:focus, [tabindex]:focus-visible,
.jd-wall-launcher:focus, .jd-wall-launcher:focus-visible, .jd-wall-launcher:focus-within,
.jd-nav-link:focus, .jd-nav-link:focus-visible, .jd-nav-link:focus-within,
.jd-icon-btn:focus, .jd-icon-btn:focus-visible, .jd-icon-btn:focus-within,
.jd-feature-link:focus, .jd-feature-link:focus-visible, .jd-feature-link:focus-within,
.jd-card-clean:focus, .jd-card-clean:focus-visible, .jd-card-clean:focus-within,
.jd-filter-pill:focus, .jd-filter-pill:focus-visible, .jd-filter-pill:focus-within {
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}

/* Dan global polish: never show the browser black focus rectangle or black focus border after mouse/touch navigation. */
html body *:focus,
html body *:focus-visible,
html body *:focus-within {
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}
html body a:focus,
html body a:focus-visible,
html body button:focus,
html body button:focus-visible,
html body [role="button"]:focus,
html body [role="button"]:focus-visible,
html body [tabindex]:focus,
html body [tabindex]:focus-visible,
html body .nav-link:focus,
html body .nav-link:focus-visible,
html body .jd-nav-link:focus,
html body .jd-nav-link:focus-visible,
html body .jd-icon-btn:focus,
html body .jd-icon-btn:focus-visible,
html body .jd-wall-launcher:focus,
html body .jd-wall-launcher:focus-visible,
html body .jd-wall-launcher:focus-within,
html body .jd-filter-pill:focus,
html body .jd-filter-pill:focus-visible,
html body .jd-filter-pill:focus-within,
html body .jd-card-choice:focus,
html body .jd-card-choice:focus-visible,
html body .jd-card-choice:focus-within {
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
html body .jd-wall-launcher:focus,
html body .jd-wall-launcher:focus-visible,
html body .jd-wall-launcher:focus-within {
    border-color: rgba(23,21,63,.10) !important;
}
html body .nav-link:focus,
html body .nav-link:focus-visible,
html body .jd-nav-link:focus,
html body .jd-nav-link:focus-visible {
    border-color: transparent !important;
}


/* Dan final: no ugly persistent native focus outline after mouse/touch clicks anywhere. */
*:focus, *:focus-visible, *:focus-within,
a:focus, a:focus-visible, button:focus, button:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible, [tabindex]:focus, [tabindex]:focus-visible,
.btn:focus, .btn:focus-visible, .nav-link:focus, .nav-link:focus-visible,
.jd-nav-link:focus, .jd-nav-link:focus-visible, .jd-card-choice:focus, .jd-card-choice:focus-visible,
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
    outline: 0 !important;
    outline-color: transparent !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
button::-moz-focus-inner, input::-moz-focus-inner { border:0 !important; }


/* JD responsive details hardening: full detailed analysis on mobile, drawers, dashboard overlay and page resize. */
.jd-ai-details:not(.is-collapsed),
.jd-chat-details-body .jd-ai-details:not(.is-collapsed),
.insights-sidebar__detail .jd-ai-details:not(.is-collapsed),
.jd-details-overlay .jd-ai-details:not(.is-collapsed){
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
}
.jd-ai-details.is-collapsed,
.jd-chat-details-body .jd-ai-details.is-collapsed,
.insights-sidebar__detail .jd-ai-details.is-collapsed,
.jd-details-overlay .jd-ai-details.is-collapsed{
    max-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.jd-ai-grid,
.jd-chat-details-body .jd-ai-grid,
.insights-sidebar__detail .jd-ai-grid,
.jd-details-overlay .jd-ai-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
    width:100% !important;
}
.jd-ai-mini,
.jd-ai-understood,
.jd-ai-summary,
.jd-ai-level-line,
.jd-ai-verdict,
.insights-sidebar__detail .jd-ai-mini,
.jd-chat-details-body .jd-ai-mini,
.jd-details-overlay .jd-ai-mini{
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}
.jd-ai-mini li,
.jd-ai-understood,
.jd-ai-summary{
    line-height:1.48 !important;
}
.jd-chat-details-body,
.jd-details-overlay-scroller,
.insights-sidebar__panel,
.insights-sidebar__body,
.insights-sidebar__detail{
    -webkit-overflow-scrolling:touch !important;
}
@media (max-width: 991.98px){
    .jd-chat-details-drawer{
        width:100vw !important;
        max-width:100vw !important;
        min-width:0 !important;
        inset:0 0 0 auto !important;
        border-radius:0 !important;
    }
    .jd-chat-details-head{
        position:sticky !important;
        top:0 !important;
        z-index:5 !important;
        padding:12px 14px !important;
    }
    .jd-chat-details-close{width:42px !important;height:42px !important;flex:0 0 42px !important;}
    .jd-chat-details-body{padding-bottom:24px !important;}
    .jd-chat-details-body .jd-pagehead .container,
    .jd-chat-details-body .jd-section .container{
        padding-left:14px !important;
        padding-right:14px !important;
        max-width:100% !important;
    }
    .jd-chat-details-body .jd-overall-score-wrap{padding:0 14px !important;}
    .jd-chat-details-body .jd-panel,
    .jd-details-overlay .jd-panel{border-radius:20px !important;}
    .jd-ai-grid,
    .jd-chat-details-body .jd-ai-grid,
    .insights-sidebar__detail .jd-ai-grid,
    .jd-details-overlay .jd-ai-grid{
        grid-template-columns:1fr !important;
    }
    .jd-ai-mini,
    .insights-sidebar__detail .jd-ai-mini,
    .jd-chat-details-body .jd-ai-mini,
    .jd-details-overlay .jd-ai-mini{
        padding:14px !important;
        border-radius:18px !important;
    }
    .jd-ai-mini ul{padding-left:18px !important;}
    .jd-ai-expand-btn{max-width:100% !important;white-space:normal !important;text-align:left !important;}
}
@media (max-width: 640px){
    .jd-ai-score-row{grid-template-columns:1fr !important;}
    .jd-ai-pro-top{display:block !important;}
    .jd-ai-lang{margin-top:10px !important;}
    .jd-ai-score{width:100% !important;height:auto !important;min-height:78px !important;}
    .jd-ai-understood{padding:12px !important;border-radius:16px !important;}
    .jd-ai-mini h4{font-size:.95rem !important;}
    .jd-ai-mini li{font-size:.93rem !important;}
}



/* JD insights narrow drawer fix: stack detail cards in narrow resizable sidebar. */
.insights-sidebar__body,
.insights-sidebar__detail{
    container-type:inline-size;
}
.insights-sidebar__detail .jd-signal-reasons{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
}
.insights-sidebar__detail .jd-signal-bars{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
}
.insights-sidebar__detail .jd-signal-panel,
.insights-sidebar__detail .jd-signal-reason,
.insights-sidebar__detail .jd-signal-bar-row{
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
}
@container (max-width: 520px){
    .insights-sidebar__detail .jd-signal-head{
        display:block !important;
    }
    .insights-sidebar__detail .jd-signal-reasons,
    .insights-sidebar__detail .jd-signal-bars{
        grid-template-columns:1fr !important;
    }
    .insights-sidebar__detail .jd-signal-reason,
    .insights-sidebar__detail .jd-signal-bar-row{
        width:100% !important;
    }
    .insights-sidebar__detail .jd-signal-reason-top,
    .insights-sidebar__detail .jd-signal-bar-top{
        flex-wrap:wrap !important;
        align-items:flex-start !important;
        gap:6px 10px !important;
    }
}

/* DAN FINAL UI UPDATE: Insights card = premium chroma glass, subtle navy + violet, not dark block */
.jd-home-entry-grid .jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #14142f !important;
    text-decoration: none !important;
    border: 1px solid rgba(124, 58, 237, .22) !important;
    background:
        radial-gradient(circle at 16% 18%, rgba(29, 45, 112, .18) 0%, rgba(29, 45, 112, .075) 31%, rgba(29, 45, 112, 0) 58%),
        radial-gradient(circle at 92% 8%, rgba(124, 58, 237, .16) 0%, rgba(124, 58, 237, .055) 34%, rgba(124, 58, 237, 0) 64%),
        radial-gradient(circle at 70% 105%, rgba(255, 122, 48, .10) 0%, rgba(255, 122, 48, 0) 46%),
        linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(247,248,255,.96) 38%, rgba(239,243,255,.94) 100%) !important;
    box-shadow:
        0 28px 80px rgba(29, 45, 112, .12),
        0 14px 42px rgba(124, 58, 237, .10),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
    animation: none !important;
}

.jd-home-entry-grid .jd-feature-insights::before,
a.jd-feature.jd-feature-link.jd-feature-insights::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: .9 !important;
    background:
        linear-gradient(118deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 70%),
        radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, .13) 0%, transparent 48%) !important;
    animation: none !important;
}

.jd-home-entry-grid .jd-feature-insights::after,
a.jd-feature.jd-feature-link.jd-feature-insights::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 18px 16px 18px !important;
    height: 3px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(124,58,237,0), rgba(124,58,237,.32), rgba(255,122,48,.20), rgba(124,58,237,0)) !important;
    filter: blur(.2px) !important;
    opacity: .72 !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    background: #efe7ff !important;
    color: #6d28d9 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-title {
    color: #15152f !important;
    text-decoration: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-muted {
    color: #56596b !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.jd-home-entry-grid .jd-feature-insights i,
a.jd-feature.jd-feature-link.jd-feature-insights i,
.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon {
    color: #6d28d9 !important;
    text-decoration: none !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible,
a.jd-feature.jd-feature-link.jd-feature-insights:hover,
a.jd-feature.jd-feature-link.jd-feature-insights:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(124,58,237,.34) !important;
    box-shadow:
        0 34px 92px rgba(29,45,112,.16),
        0 20px 54px rgba(124,58,237,.14),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* FINAL OVERRIDE: Insights card matches Job/Talent cards, with only a subtle chromatic underline */
.jd-home-entry-grid .jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: var(--jd-card) !important;
    color: var(--jd-ink) !important;
    border: 1px solid var(--jd-border) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
    text-decoration: none !important;
    animation: none !important;
}

.jd-home-entry-grid .jd-feature-insights::before,
a.jd-feature.jd-feature-link.jd-feature-insights::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 18px !important;
    top: auto !important;
    height: 3px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .72 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(106,53,255,0),
        rgba(106,53,255,.34),
        rgba(255,126,54,.30),
        rgba(106,53,255,0)
    ) !important;
    background-image: linear-gradient(90deg,
        rgba(106,53,255,0),
        rgba(106,53,255,.34),
        rgba(255,126,54,.30),
        rgba(106,53,255,0)
    ) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
}

.jd-home-entry-grid .jd-feature-insights::after,
a.jd-feature.jd-feature-link.jd-feature-insights::after {
    content: none !important;
    display: none !important;
}

.jd-home-entry-grid .jd-feature-insights > *,
a.jd-feature.jd-feature-link.jd-feature-insights > * {
    position: relative !important;
    z-index: 1 !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    background: rgba(106,53,255,.10) !important;
    border: 1px solid rgba(106,53,255,.18) !important;
    color: var(--jd-accent) !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights,
.jd-home-entry-grid .jd-feature-insights *,
a.jd-feature.jd-feature-link.jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights * {
    color: var(--jd-ink) !important;
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-muted {
    color: var(--jd-muted) !important;
    opacity: 1 !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
    color: var(--jd-accent) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon path,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon path {
    stroke: currentColor !important;
    stroke-width: 1.55 !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible,
a.jd-feature.jd-feature-link.jd-feature-insights:hover,
a.jd-feature.jd-feature-link.jd-feature-insights:focus-visible {
    transform: translateY(-4px) !important;
    border-color: rgba(106,53,255,.24) !important;
    box-shadow: 0 18px 44px rgba(106,53,255,.11), 0 12px 28px rgba(0,0,0,.07) !important;
}

/* FINAL CLEAN FIX: Insights card exactly like Job/Talent, no stripe, no special background */
.jd-home-entry-grid .jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights {
    position: relative !important;
    overflow: hidden !important;
    isolation: auto !important;
    background: var(--jd-card, #ffffff) !important;
    background-image: none !important;
    border: 1px solid var(--jd-border, rgba(106,53,255,.16)) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
    color: var(--jd-ink, #171327) !important;
    animation: none !important;
    text-decoration: none !important;
}

.jd-home-entry-grid .jd-feature-insights::before,
.jd-home-entry-grid .jd-feature-insights::after,
a.jd-feature.jd-feature-link.jd-feature-insights::before,
a.jd-feature.jd-feature-link.jd-feature-insights::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(106,53,255,.10) !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--jd-accent, #6A35FF) !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
    display: block !important;
}

.jd-home-entry-grid .jd-feature-insights,
.jd-home-entry-grid .jd-feature-insights *,
a.jd-feature.jd-feature-link.jd-feature-insights,
a.jd-feature.jd-feature-link.jd-feature-insights * {
    text-decoration: none !important;
    -webkit-text-decoration-line: none !important;
    text-decoration-line: none !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-feature-title,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-title {
    color: var(--jd-ink, #171327) !important;
    font-weight: 850 !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-muted,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-muted {
    color: var(--jd-muted, #646173) !important;
    opacity: 1 !important;
}

.jd-home-entry-grid .jd-feature-insights i,
a.jd-feature.jd-feature-link.jd-feature-insights i,
.jd-home-entry-grid .jd-feature-insights svg,
a.jd-feature.jd-feature-link.jd-feature-insights svg {
    color: var(--jd-accent, #6A35FF) !important;
}

.jd-home-entry-grid .jd-feature-insights:hover,
.jd-home-entry-grid .jd-feature-insights:focus-visible,
a.jd-feature.jd-feature-link.jd-feature-insights:hover,
a.jd-feature.jd-feature-link.jd-feature-insights:focus-visible {
    transform: translateY(-7px) scale(1.012) !important;
    background: var(--jd-card, #ffffff) !important;
    background-image: none !important;
    border-color: rgba(124,92,255,.26) !important;
    box-shadow: 0 26px 58px rgba(19,11,70,.14), 0 10px 22px rgba(124,92,255,.10) !important;
}

/* FINAL SVG COLOR FIX: force Insights SVG bars to use the same purple as Job/Talent icons */
.jd-home-entry-grid .jd-feature-insights .jd-feature-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon {
    background: rgba(106, 53, 255, .10) !important;
    border: 0 !important;
    color: var(--jd-accent, #6A35FF) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon,
.jd-home-entry-grid .jd-feature-insights .jd-feature-icon svg,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon svg {
    color: var(--jd-accent, #6A35FF) !important;
    stroke: var(--jd-accent, #6A35FF) !important;
}

.jd-home-entry-grid .jd-feature-insights .jd-insights-bars-icon path,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-insights-bars-icon path,
.jd-home-entry-grid .jd-feature-insights .jd-feature-icon svg path,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-feature-icon svg path {
    stroke: var(--jd-accent, #6A35FF) !important;
    fill: none !important;
}

/* Protected technical test: one-question flow + anti-capture blur */
.jd-test-single-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
}
.jd-test-single-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 2px;
}
.jd-test-single-count,
.jd-test-single-timer {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 15px;
    font-weight: 900;
    letter-spacing: .02em;
    color: #120b46;
    background: #f4efff;
    border: 1px solid rgba(124, 58, 237, .18);
}
.jd-test-single-timer {
    color: #fff;
    background: linear-gradient(135deg, #120b46, #26106e);
    box-shadow: 0 14px 32px rgba(18, 11, 70, .18);
    font-variant-numeric: tabular-nums;
}
.jd-test-single-progress {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(124, 58, 237, .1);
}
.jd-test-single-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #120b46, #6d35ff);
    transition: width .25s ease;
}
.jd-test-single-q {
    margin: 0 !important;
}
.jd-test-single-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}
.jd-test-next-arrow {
    border: 0;
    min-height: 50px;
    border-radius: 999px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 950;
    color: #fff;
    background: linear-gradient(135deg, #120b46, #34159a);
    box-shadow: 0 18px 42px rgba(18, 11, 70, .22);
    transition: transform .16s ease, box-shadow .16s ease;
}
.jd-test-next-arrow:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 48px rgba(18, 11, 70, .28);
}
.jd-test-soft-blur {
    filter: blur(4.5px);
    opacity: .62;
    transition: filter .24s ease, opacity .24s ease;
    user-select: none;
}
.jd-test-finish-panel {
    text-align: left;
}
@media (max-width: 640px) {
    .jd-test-single-card { gap: 14px; }
    .jd-test-single-top { align-items: flex-start; }
    .jd-test-single-count,
    .jd-test-single-timer {
        min-height: 34px;
        padding: 7px 12px;
        font-size: .9rem;
    }
    .jd-test-next-arrow {
        width: 100%;
        min-height: 52px;
    }
    .jd-test-soft-blur { filter: blur(3.8px); }
}


/* Protected technical test v2: 60s flow, footer Next, cleaner timer */
.jd-test-single-card {
    gap: 14px !important;
}
.jd-test-single-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 4px !important;
}
.jd-test-single-count {
    white-space: nowrap !important;
    font-weight: 950 !important;
    color: #120b46 !important;
    background: #f5f1ff !important;
    border: 1px solid rgba(124, 58, 237, .18) !important;
}
.jd-test-single-timer {
    min-width: 118px !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #120b46, #2a137a) !important;
    border: 0 !important;
    box-shadow: 0 16px 34px rgba(18, 11, 70, .20) !important;
}
.jd-test-single-timer span {
    font-size: .72rem !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    opacity: .78 !important;
}
.jd-test-single-timer strong {
    font-size: 1.02rem !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}
.jd-test-foot-protected {
    justify-content: flex-end !important;
    align-items: center !important;
}
.jd-test-foot-protected [data-jd-protected-footer-next] {
    margin-right: auto !important;
}
.jd-test-next-arrow {
    border: 0 !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    padding: 0 24px 0 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-weight: 950 !important;
    font-size: 1rem !important;
    color: #fff !important;
    background: linear-gradient(135deg, #120b46, #27106f) !important;
    box-shadow: 0 18px 42px rgba(18, 11, 70, .24) !important;
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}
.jd-test-next-arrow i {
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.14) !important;
    font-size: 1.1rem !important;
    transform: scaleX(1.22) !important;
}
.jd-test-next-arrow:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 22px 52px rgba(18, 11, 70, .30) !important;
}
@media (max-width: 640px) {
    .jd-test-single-top {
        align-items: stretch !important;
    }
    .jd-test-single-count,
    .jd-test-single-timer {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: .86rem !important;
    }
    .jd-test-single-timer {
        min-width: 102px !important;
        flex-direction: column !important;
        gap: 3px !important;
    }
    .jd-test-single-timer span {
        font-size: .62rem !important;
    }
    .jd-test-single-timer strong {
        font-size: .94rem !important;
    }
    .jd-test-foot-protected {
        gap: 9px !important;
    }
    .jd-test-foot-protected [data-jd-protected-footer-next] {
        flex: 1 1 auto !important;
        margin-right: 0 !important;
    }
    .jd-test-foot-protected .jd-dashboard-test-ghost,
    .jd-test-foot-protected .jd-ghost {
        flex: 0 0 auto !important;
    }
}

/* Protected technical test v3: custom confirm modal + polished footer controls */
.jd-dashboard-test-modal,
.jd-ai-test-modal {
    position: relative !important;
}
.jd-test-single-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
}
.jd-test-single-count,
.jd-test-single-timer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}
.jd-test-single-count::after {
    content: none !important;
}
.jd-test-single-timer {
    min-width: 132px !important;
}
.jd-test-foot-protected {
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}
.jd-test-foot-protected [data-jd-protected-footer-next] {
    margin-right: auto !important;
}
.jd-test-next-arrow {
    border: 0 !important;
    min-height: 50px !important;
    border-radius: 999px !important;
    padding: 0 18px 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-weight: 950 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    color: #14094f !important;
    background: #f5f3ff !important;
    border: 1px solid rgba(124, 58, 237, .10) !important;
    box-shadow: 0 14px 34px rgba(18, 11, 70, .10) !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.jd-test-next-arrow b {
    font-size: 1.55rem !important;
    line-height: .75 !important;
    font-weight: 950 !important;
    transform: translateY(-1px) scaleX(1.22) !important;
    color: #5f2cff !important;
}
.jd-test-next-arrow:hover {
    background: #efeaff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 42px rgba(18, 11, 70, .16) !important;
}
.jd-test-next-confirm-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(18, 11, 70, .34) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: inherit !important;
}
.jd-test-next-confirm-card {
    width: min(440px, 100%) !important;
    border-radius: 30px !important;
    padding: 26px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(124, 58, 237, .16) !important;
    box-shadow: 0 34px 90px rgba(18, 11, 70, .28) !important;
    color: #14094f !important;
}
.jd-test-next-confirm-kicker {
    margin-bottom: 6px !important;
    color: #6d35ff !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
}
.jd-test-next-confirm-card h3 {
    margin: 0 0 8px !important;
    font-size: clamp(1.35rem, 3vw, 1.85rem) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    color: #120b46 !important;
}
.jd-test-next-confirm-card p {
    margin: 0 !important;
    color: #68637f !important;
    font-weight: 760 !important;
    line-height: 1.45 !important;
}
.jd-test-next-confirm-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 22px !important;
}
.jd-test-confirm-cancel,
.jd-test-confirm-continue {
    border: 0 !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    font-weight: 950 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.jd-test-confirm-cancel {
    background: #f5f3ff !important;
    color: #14094f !important;
}
.jd-test-confirm-continue {
    color: #fff !important;
    background: linear-gradient(135deg, #120b46, #2a137a) !important;
    box-shadow: 0 18px 42px rgba(18, 11, 70, .22) !important;
}
.jd-test-confirm-continue span {
    font-size: 1.55rem !important;
    line-height: .75 !important;
    transform: translateY(-1px) scaleX(1.22) !important;
}
@media (max-width: 640px) {
    .jd-test-single-top {
        align-items: center !important;
    }
    .jd-test-single-count,
    .jd-test-single-timer {
        min-height: 36px !important;
        padding: 8px 11px !important;
        font-size: .82rem !important;
    }
    .jd-test-single-timer {
        min-width: 112px !important;
    }
    .jd-test-foot-protected [data-jd-protected-footer-next] {
        flex: 0 0 auto !important;
        margin-right: auto !important;
        width: auto !important;
    }
    .jd-test-next-arrow {
        min-height: 46px !important;
        padding: 0 15px 0 17px !important;
    }
    .jd-test-next-confirm-layer {
        padding: 16px !important;
        align-items: flex-end !important;
    }
    .jd-test-next-confirm-card {
        border-radius: 26px !important;
        padding: 22px !important;
    }
    .jd-test-next-confirm-actions {
        flex-direction: column-reverse !important;
    }
    .jd-test-confirm-cancel,
    .jd-test-confirm-continue {
        width: 100% !important;
    }
}

/* Protected technical test - polished next button and centered custom confirmation */
.jd-test-foot-protected {
    position: relative !important;
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}
.jd-test-foot-protected [data-jd-protected-footer-next] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}
.jd-test-next-arrow {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(124, 58, 237, .10) !important;
    padding: 0 18px 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    font-weight: 950 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    color: #14094f !important;
    background: #f5f3ff !important;
    box-shadow: 0 14px 34px rgba(18, 11, 70, .10) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.jd-test-next-arrow i,
.jd-test-next-arrow b {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #120b46, #5f2cff) !important;
    font-size: 2.15rem !important;
    font-weight: 900 !important;
    font-style: normal !important;
    line-height: .62 !important;
    transform: translateY(-1px) scaleX(1.32) !important;
    box-shadow: 0 10px 22px rgba(95, 44, 255, .26) !important;
}
.jd-test-next-arrow:hover {
    background: #efeaff !important;
    transform: translate(-50%, calc(-50% - 1px)) !important;
    box-shadow: 0 18px 42px rgba(18, 11, 70, .16) !important;
}
.jd-test-single-top {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.jd-test-single-count,
.jd-test-single-timer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}
.jd-test-single-timer strong {
    margin-left: 2px !important;
}
.jd-test-next-confirm-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    background: transparent !important;
    pointer-events: auto !important;
}
.jd-test-next-confirm-card {
    position: relative !important;
    width: min(420px, calc(100vw - 32px)) !important;
    border-radius: 32px !important;
    padding: 28px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(124, 58, 237, .16) !important;
    box-shadow: 0 34px 95px rgba(18, 11, 70, .28), 0 0 0 1px rgba(255,255,255,.65) inset !important;
    color: #120b46 !important;
    text-align: left !important;
    overflow: hidden !important;
}
.jd-test-next-confirm-card::before {
    content: "" !important;
    position: absolute !important;
    inset: -70px -90px auto auto !important;
    width: 210px !important;
    height: 210px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(95,44,255,.18), transparent 68%) !important;
    pointer-events: none !important;
}
.jd-test-confirm-x {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f5f3ff !important;
    color: #120b46 !important;
    font-size: 1.9rem !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
}
.jd-test-next-confirm-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    display: grid !important;
    place-items: center !important;
    margin-bottom: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #120b46, #5f2cff) !important;
    box-shadow: 0 18px 42px rgba(95,44,255,.24) !important;
    font-size: 3rem !important;
    line-height: .65 !important;
    transform: scaleX(1.25) !important;
}
.jd-test-next-confirm-kicker {
    margin-bottom: 7px !important;
    color: #6d35ff !important;
    text-transform: uppercase !important;
    letter-spacing: .13em !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
}
.jd-test-next-confirm-card h3 {
    margin: 0 0 9px !important;
    color: #120b46 !important;
    font-size: clamp(1.45rem, 4vw, 2rem) !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
}
.jd-test-next-confirm-card p {
    margin: 0 !important;
    max-width: 34rem !important;
    color: #68637f !important;
    font-size: .98rem !important;
    font-weight: 760 !important;
    line-height: 1.45 !important;
}
.jd-test-next-confirm-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 24px !important;
}
.jd-test-confirm-cancel,
.jd-test-confirm-continue {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 50px !important;
    border-radius: 999px !important;
    border: 0 !important;
    padding: 0 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}
.jd-test-confirm-cancel {
    color: #14094f !important;
    background: #f5f3ff !important;
}
.jd-test-confirm-continue {
    color: #fff !important;
    background: linear-gradient(135deg, #120b46, #5f2cff) !important;
    box-shadow: 0 18px 42px rgba(95,44,255,.24) !important;
}
.jd-test-confirm-continue span {
    font-size: 2rem !important;
    line-height: .62 !important;
    transform: translateY(-1px) scaleX(1.26) !important;
}
@media (max-width: 640px) {
    .jd-test-foot-protected {
        min-height: 70px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .jd-test-next-arrow {
        min-height: 48px !important;
        padding: 0 15px 0 18px !important;
        font-size: .98rem !important;
    }
    .jd-test-next-arrow i,
    .jd-test-next-arrow b {
        width: 29px !important;
        height: 29px !important;
        font-size: 1.95rem !important;
    }
    .jd-test-next-confirm-card {
        width: min(390px, calc(100vw - 24px)) !important;
        padding: 24px !important;
        border-radius: 28px !important;
    }
    .jd-test-next-confirm-actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    .jd-test-confirm-cancel,
    .jd-test-confirm-continue {
        width: 100% !important;
    }
}


/* Protected test v4: centered Next pill and in-modal confirmation, no extra backdrop */
.jd-dashboard-test-modal,
.jd-ai-test-modal {
    position: relative !important;
}

.jd-test-foot-protected {
    position: relative !important;
    min-height: 78px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.jd-test-foot-protected [data-jd-protected-footer-next] {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
}

.jd-test-next-arrow {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(124, 58, 237, .10) !important;
    padding: 0 18px 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    font-weight: 950 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    color: #14094f !important;
    background: #f5f3ff !important;
    box-shadow: 0 12px 30px rgba(18, 11, 70, .10) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.jd-test-next-arrow i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #120b46, #5f2cff) !important;
    font-size: 2.05rem !important;
    line-height: 1 !important;
    box-shadow: 0 10px 22px rgba(95, 44, 255, .24) !important;
}

.jd-test-next-arrow:hover {
    background: #efeaff !important;
    transform: translate(-50%, calc(-50% - 1px)) !important;
    box-shadow: 0 18px 42px rgba(18, 11, 70, .15) !important;
}

.jd-test-next-confirm-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 90 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
}

body > .jd-test-next-confirm-layer {
    position: fixed !important;
    inset: 0 !important;
}

.jd-test-next-confirm-card {
    position: relative !important;
    width: min(430px, calc(100vw - 34px)) !important;
    border-radius: 32px !important;
    padding: 34px 30px 30px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(124, 58, 237, .14) !important;
    box-shadow: 0 34px 95px rgba(18, 11, 70, .26), 0 0 0 1px rgba(255,255,255,.7) inset !important;
    color: #120b46 !important;
    text-align: center !important;
    overflow: hidden !important;
}

.jd-test-confirm-x {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f5f3ff !important;
    color: #120b46 !important;
    font-size: 1.85rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.jd-test-next-confirm-icon {
    width: 70px !important;
    height: 70px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px auto 18px !important;
    color: #6d35ff !important;
    background: #f0eaff !important;
    box-shadow: 0 16px 42px rgba(95,44,255,.12) !important;
    font-size: 2.6rem !important;
    line-height: 1 !important;
}

.jd-test-next-confirm-kicker {
    display: none !important;
}

.jd-test-next-confirm-card h3 {
    margin: 0 0 10px !important;
    color: #120b46 !important;
    font-size: clamp(1.55rem, 4vw, 2rem) !important;
    line-height: 1.06 !important;
    font-weight: 950 !important;
}

.jd-test-next-confirm-card p {
    margin: 0 auto !important;
    max-width: 34rem !important;
    color: #686f86 !important;
    font-size: 1.02rem !important;
    font-weight: 760 !important;
    line-height: 1.45 !important;
}

.jd-test-next-confirm-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 28px !important;
}

.jd-test-confirm-cancel,
.jd-test-confirm-continue {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    border: 0 !important;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
}

.jd-test-confirm-cancel {
    color: #14094f !important;
    background: #efedf2 !important;
}

.jd-test-confirm-continue {
    color: #fff !important;
    background: linear-gradient(135deg, #7433ff, #5f2cff) !important;
    box-shadow: 0 22px 46px rgba(95,44,255,.26) !important;
}

@media (max-width: 640px) {
    .jd-test-foot-protected {
        min-height: 76px !important;
    }
    .jd-test-next-arrow {
        min-height: 50px !important;
        padding: 0 15px 0 18px !important;
        font-size: .98rem !important;
    }
    .jd-test-next-arrow i {
        width: 31px !important;
        height: 31px !important;
        font-size: 1.9rem !important;
    }
    .jd-test-next-confirm-card {
        width: min(390px, calc(100vw - 24px)) !important;
        padding: 30px 22px 24px !important;
        border-radius: 28px !important;
    }
    .jd-test-next-confirm-actions {
        gap: 10px !important;
    }
    .jd-test-confirm-cancel,
    .jd-test-confirm-continue {
        min-height: 52px !important;
        padding: 0 20px !important;
    }
}

/* v5 protected test confirmation + Next button hard overrides */
.jd-dashboard-test-foot.jd-test-foot-protected,
.jd-ai-test-foot.jd-test-foot-protected {
    position: relative !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 84px !important;
}

.jd-test-next-arrow {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    border: 0 !important;
    padding: 0 18px 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-weight: 950 !important;
    font-size: 1.04rem !important;
    line-height: 1 !important;
    color: #14094f !important;
    background: #f5f3ff !important;
    box-shadow: 0 14px 34px rgba(18, 11, 70, .10) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    z-index: 3 !important;
}

.jd-test-next-arrow b,
.jd-test-next-arrow i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6d35ff !important;
    background: #ece7ff !important;
    font-size: 2.45rem !important;
    font-weight: 700 !important;
    line-height: .8 !important;
    box-shadow: 0 10px 22px rgba(95,44,255,.16) !important;
    padding-bottom: 3px !important;
}

.jd-test-next-arrow:hover {
    background: #efeaff !important;
    box-shadow: 0 18px 42px rgba(18, 11, 70, .15) !important;
}

.jd-test-next-confirm-layer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 640px) {
    .jd-dashboard-test-foot.jd-test-foot-protected,
    .jd-ai-test-foot.jd-test-foot-protected {
        min-height: 78px !important;
    }
    .jd-test-next-arrow {
        min-height: 50px !important;
        padding: 0 14px 0 19px !important;
        font-size: .98rem !important;
    }
    .jd-test-next-arrow b,
    .jd-test-next-arrow i {
        width: 31px !important;
        height: 31px !important;
        font-size: 2.2rem !important;
    }
}


/* JobDropper sequential protected answer reveal v20260604-7
   Q / 1 / 2 / 3 / 4 only; no extra next button. The question has a subtle
   horizontal oil-flow veil while answers are shown one at a time. */
.jd-seq-copy-locked,
.jd-seq-copy-locked * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}
.jd-seq-copy-locked img,
.jd-seq-copy-locked .jd-ai-q-title,
.jd-seq-copy-locked .jd-ai-opt {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}
.jd-seq-protected-host {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
    box-shadow: none !important;
}
.jd-seq-protected-host.jd-test-single-q,
.jd-seq-protected-host.jd-ai-q {
    background: transparent !important;
}
.jd-seq-toolbar {
    position: relative !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.jd-seq-status {
    flex: 1 1 auto !important;
    color: #4a416f !important;
    font-size: .95rem !important;
    font-weight: 820 !important;
    line-height: 1.28 !important;
    padding: 0 !important;
    background: transparent !important;
}
.jd-seq-chips {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}
.jd-seq-chip {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(106,53,255,.16) !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #392d6f !important;
    background: rgba(248,246,255,.88) !important;
    font-size: .95rem !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(18,11,70,.05) !important;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}
.jd-seq-chip:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(95,44,255,.13) !important;
}
.jd-seq-chip.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #7433ff, #5f2cff) !important;
    box-shadow: 0 14px 30px rgba(95,44,255,.24) !important;
}
.jd-seq-next-btn { display: none !important; }
.jd-seq-hidden-piece {
    display: none !important;
    visibility: hidden !important;
}
.jd-seq-visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    animation: jdSeqPieceReveal .20s ease-out both !important;
}
.jd-ai-q-title.jd-seq-visible {
    display: block !important;
}
.jd-seq-protected-host .jd-test-soft-blur,
.jd-seq-protected-host [data-jd-blur-target].jd-test-soft-blur {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible,
.jd-seq-protected-host .jd-ai-opt.jd-seq-visible {
    position: relative !important;
    z-index: 4 !important;
    box-shadow: none !important;
}
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible {
    overflow: hidden !important;
    border-radius: 10px !important;
    padding: 4px 0 !important;
}
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible::before,
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible::after {
    content: "" !important;
    position: absolute !important;
    inset: -18% -18% !important;
    z-index: 3 !important;
    pointer-events: none !important;
    mix-blend-mode: screen !important;
    background:
        radial-gradient(ellipse at 8% 30%, rgba(255,255,255,.74) 0 13%, rgba(255,255,255,.34) 20%, transparent 36%),
        radial-gradient(ellipse at 28% 64%, rgba(255,255,255,.62) 0 10%, rgba(255,255,255,.24) 20%, transparent 34%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,.30) 18%, rgba(255,255,255,.54) 42%, rgba(255,255,255,.22) 66%, transparent 100%) !important;
    filter: blur(10px) saturate(1.12) !important;
    -webkit-filter: blur(10px) saturate(1.12) !important;
    opacity: .62 !important;
    transform: translateX(-54%) skewX(-10deg) !important;
    animation: jdSeqOilSweepRight 3.6s cubic-bezier(.46,.03,.52,.96) infinite !important;
}
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible::after {
    opacity: .46 !important;
    transform: translateX(54%) skewX(8deg) !important;
    animation: jdSeqOilSweepLeft 4.2s cubic-bezier(.46,.03,.52,.96) infinite !important;
    animation-delay: -1.4s !important;
}
@keyframes jdSeqOilSweepRight {
    0% { transform: translateX(-64%) skewX(-12deg) scaleY(1.0); }
    46% { transform: translateX(4%) skewX(7deg) scaleY(1.08); }
    100% { transform: translateX(66%) skewX(-9deg) scaleY(.96); }
}
@keyframes jdSeqOilSweepLeft {
    0% { transform: translateX(66%) skewX(10deg) scaleY(.98); }
    52% { transform: translateX(-2%) skewX(-7deg) scaleY(1.07); }
    100% { transform: translateX(-66%) skewX(8deg) scaleY(1.0); }
}
@keyframes jdSeqPieceReveal {
    from { opacity: 0; transform: translateY(8px) scale(.993); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
    .jd-seq-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .jd-seq-status { font-size: .88rem !important; }
    .jd-seq-chips { gap: 7px !important; }
    .jd-seq-chip { width: 34px !important; height: 34px !important; font-size: .86rem !important; }
}


/* JobDropper V12: question-only premium moving oil veil.
   The veil is a real overlay positioned in JS exactly over the question text. */
.jd-question-oil-stage {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.jd-question-oil-host {
    position: relative !important;
    z-index: 4 !important;
}
.jd-question-oil-veil {
    position: absolute !important;
    z-index: 80 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    display: block !important;
    opacity: 1 !important;
    contain: layout paint style !important;
    mix-blend-mode: normal !important;
}
.jd-question-oil-blob {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    pointer-events: none !important;
    will-change: transform, width, height !important;
    border-radius: 45% 55% 48% 52% / 56% 44% 58% 42% !important;
    opacity: .86 !important;
    background:
        radial-gradient(ellipse at 18% 36%, rgba(255,255,255,.98) 0 15%, rgba(255,255,255,.78) 31%, rgba(255,255,255,.34) 54%, rgba(255,255,255,0) 76%),
        radial-gradient(ellipse at 70% 58%, rgba(255,255,255,.88) 0 18%, rgba(255,255,255,.58) 38%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 82%) !important;
    filter: blur(12px) saturate(1.08) !important;
    -webkit-filter: blur(12px) saturate(1.08) !important;
    backdrop-filter: blur(2.5px) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(2.5px) brightness(1.04) !important;
    box-shadow: 0 0 34px rgba(255,255,255,.36) !important;
}
.jd-question-oil-blob-2 {
    opacity: .72 !important;
    border-radius: 58% 42% 54% 46% / 42% 58% 40% 60% !important;
    filter: blur(15px) saturate(1.08) !important;
    -webkit-filter: blur(15px) saturate(1.08) !important;
}
.jd-seq-protected-host.jd-seq-answer-mode .jd-question-oil-veil,
.jd-ai-q-title.jd-seq-hidden-piece ~ .jd-question-oil-veil {
    display: none !important;
}
@media (max-width: 640px) {
    .jd-question-oil-veil { border-radius: 18px !important; }
    .jd-question-oil-blob { opacity: .88 !important; filter: blur(10px) saturate(1.06) !important; -webkit-filter: blur(10px) saturate(1.06) !important; }
}


/* JobDropper V13: single premium right-to-left circular oil veil over question only. */
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible::before,
.jd-seq-protected-host .jd-ai-q-title.jd-seq-visible::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}
.jd-question-oil-veil {
    z-index: 2147483000 !important;
    overflow: visible !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
.jd-question-oil-blob,
.jd-question-oil-blob-main {
    border-radius: 999px !important;
    opacity: .96 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0 42%, rgba(255,255,255,.98) 51%, rgba(255,255,255,.84) 62%, rgba(255,255,255,.48) 74%, rgba(255,255,255,.18) 84%, rgba(255,255,255,0) 100%) !important;
    filter: blur(7px) saturate(1.04) !important;
    -webkit-filter: blur(7px) saturate(1.04) !important;
    backdrop-filter: blur(5px) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(5px) brightness(1.08) !important;
    box-shadow:
        0 0 36px rgba(255,255,255,.82),
        0 0 70px rgba(255,255,255,.38) !important;
}
.jd-question-oil-blob:not(.jd-question-oil-blob-main) {
    display: none !important;
}
@media (max-width: 640px) {
    .jd-question-oil-blob,
    .jd-question-oil-blob-main {
        opacity: .97 !important;
        filter: blur(6px) saturate(1.04) !important;
        -webkit-filter: blur(6px) saturate(1.04) !important;
    }
}


/* JobDropper V14: premium single question veil.
   One circular oil/glass spot stays inside the question bounds on desktop and mobile.
   It sweeps right-to-left without fully leaving, so the question is readable over time
   but never fully clean in one screenshot. */
.jd-question-oil-stage {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.jd-question-oil-veil {
    z-index: 2147483000 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.jd-question-oil-blob,
.jd-question-oil-blob-main {
    border-radius: 999px !important;
    opacity: .985 !important;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 38%,
            rgba(255,255,255,.96) 49%,
            rgba(255,255,255,.82) 61%,
            rgba(255,255,255,.48) 73%,
            rgba(255,255,255,.20) 86%,
            rgba(255,255,255,0) 100%) !important;
    filter: blur(8px) saturate(1.06) !important;
    -webkit-filter: blur(8px) saturate(1.06) !important;
    backdrop-filter: blur(7px) brightness(1.10) contrast(.98) !important;
    -webkit-backdrop-filter: blur(7px) brightness(1.10) contrast(.98) !important;
    box-shadow:
        inset 0 0 26px rgba(255,255,255,.90),
        0 0 36px rgba(255,255,255,.88),
        0 0 82px rgba(255,255,255,.42) !important;
    transform-origin: center center !important;
}

.jd-question-oil-blob::before,
.jd-question-oil-blob-main::before {
    content: "" !important;
    position: absolute !important;
    inset: 11% !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,1) 0 54%,
            rgba(255,255,255,.86) 68%,
            rgba(255,255,255,0) 100%) !important;
    opacity: .92 !important;
    filter: blur(5px) !important;
    -webkit-filter: blur(5px) !important;
}

.jd-question-oil-blob:not(.jd-question-oil-blob-main) {
    display: none !important;
}

@media (max-width: 640px) {
    .jd-question-oil-veil {
        border-radius: 16px !important;
    }

    .jd-question-oil-blob,
    .jd-question-oil-blob-main {
        opacity: .985 !important;
        filter: blur(6px) saturate(1.05) !important;
        -webkit-filter: blur(6px) saturate(1.05) !important;
        backdrop-filter: blur(6px) brightness(1.10) !important;
        -webkit-backdrop-filter: blur(6px) brightness(1.10) !important;
    }
}


/* JobDropper V15: mobile-readable premium question oil veil.
   The spot stays inside the question, is smaller on mobile, and never hides the whole text. */
.jd-question-oil-veil {
    z-index: 2147483000 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    border-radius: 18px !important;
}

.jd-question-oil-blob,
.jd-question-oil-blob-main {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    pointer-events: none !important;
    will-change: transform, width, height !important;
    border-radius: 52% 48% 54% 46% / 49% 52% 48% 51% !important;
    opacity: .93 !important;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.97) 28%,
            rgba(255,255,255,.86) 44%,
            rgba(255,255,255,.58) 59%,
            rgba(255,255,255,.25) 75%,
            rgba(255,255,255,0) 100%),
        radial-gradient(circle at 34% 32%, rgba(248,246,255,.56) 0%, rgba(248,246,255,0) 54%) !important;
    filter: blur(8px) saturate(1.05) !important;
    -webkit-filter: blur(8px) saturate(1.05) !important;
    backdrop-filter: blur(5px) brightness(1.08) contrast(.99) !important;
    -webkit-backdrop-filter: blur(5px) brightness(1.08) contrast(.99) !important;
    box-shadow:
        inset 0 0 20px rgba(255,255,255,.76),
        0 0 34px rgba(255,255,255,.70),
        0 0 68px rgba(124,92,255,.10) !important;
    transform-origin: center center !important;
}

.jd-question-oil-blob::before,
.jd-question-oil-blob-main::before {
    content: "" !important;
    position: absolute !important;
    inset: 18% !important;
    border-radius: inherit !important;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 46%, rgba(255,255,255,.42) 72%, rgba(255,255,255,0) 100%) !important;
    opacity: .70 !important;
    filter: blur(6px) !important;
    -webkit-filter: blur(6px) !important;
}

.jd-question-oil-blob:not(.jd-question-oil-blob-main) {
    display: none !important;
}

.jd-ai-test-modal .btn-close,
.jd-dashboard-test-modal .btn-close,
.jd-ai-test-modal [data-bs-dismiss="modal"].btn-close,
.jd-dashboard-test-modal [data-bs-dismiss="modal"].btn-close,
.modal .btn-close {
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

@media (max-width: 640px) {
    .jd-question-oil-veil {
        border-radius: 14px !important;
    }

    .jd-question-oil-blob,
    .jd-question-oil-blob-main {
        opacity: .92 !important;
        border-radius: 54% 46% 50% 50% / 48% 55% 45% 52% !important;
        background:
            radial-gradient(circle at 50% 50%,
                rgba(255,255,255,.985) 0%,
                rgba(255,255,255,.96) 30%,
                rgba(255,255,255,.78) 49%,
                rgba(255,255,255,.46) 67%,
                rgba(255,255,255,.16) 83%,
                rgba(255,255,255,0) 100%),
            radial-gradient(circle at 35% 34%, rgba(248,246,255,.52) 0%, rgba(248,246,255,0) 58%) !important;
        filter: blur(8px) saturate(1.05) !important;
        -webkit-filter: blur(8px) saturate(1.05) !important;
        backdrop-filter: blur(10px) brightness(1.10) contrast(.90) !important;
        -webkit-backdrop-filter: blur(10px) brightness(1.10) contrast(.90) !important;
        box-shadow:
            inset 0 0 18px rgba(255,255,255,.76),
            0 0 30px rgba(255,255,255,.68),
            0 0 54px rgba(124,92,255,.08) !important;
    }

    .jd-question-oil-blob::before,
    .jd-question-oil-blob-main::before {
        inset: 18% !important;
        opacity: .74 !important;
        background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 50%, rgba(255,255,255,.56) 74%, rgba(255,255,255,0) 100%) !important;
        filter: blur(8px) !important;
        -webkit-filter: blur(8px) !important;
    }

    .jd-ai-test-modal .btn-close,
    .jd-dashboard-test-modal .btn-close,
    .jd-ai-test-modal [data-bs-dismiss="modal"].btn-close,
    .jd-dashboard-test-modal [data-bs-dismiss="modal"].btn-close,
    .modal .btn-close {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9999px !important;
        background-size: 16px 16px !important;
        flex: 0 0 42px !important;
        overflow: hidden !important;
    }
}


/* JobDropper V17: mobile lens-grade question oil circle.
   Mobile only: the moving circular spot acts like a milky glass/lens blocker.
   Text underneath becomes unreadable: heavy backdrop blur + white core + lens haze. */
@media (max-width: 640px) {
    .jd-question-oil-veil {
        isolation: isolate !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        pointer-events: none !important;
    }

    .jd-question-oil-blob,
    .jd-question-oil-blob-main {
        opacity: .995 !important;
        border-radius: 9999px !important;
        background:
            radial-gradient(circle at 50% 50%,
                rgba(255,255,255,.995) 0%,
                rgba(255,255,255,.985) 24%,
                rgba(255,255,255,.965) 42%,
                rgba(255,255,255,.88) 58%,
                rgba(255,255,255,.58) 74%,
                rgba(255,255,255,.18) 89%,
                rgba(255,255,255,0) 100%),
            radial-gradient(circle at 37% 30%,
                rgba(248,246,255,.74) 0%,
                rgba(248,246,255,.30) 36%,
                rgba(248,246,255,0) 68%) !important;
        -webkit-backdrop-filter: blur(36px) saturate(1.85) contrast(1.22) brightness(1.14) !important;
        backdrop-filter: blur(36px) saturate(1.85) contrast(1.22) brightness(1.14) !important;
        filter: blur(7px) saturate(1.08) contrast(1.02) !important;
        -webkit-filter: blur(7px) saturate(1.08) contrast(1.02) !important;
        box-shadow:
            inset 0 0 24px rgba(255,255,255,1),
            inset 0 0 58px rgba(255,255,255,.96),
            inset 0 0 92px rgba(248,246,255,.78),
            0 0 36px rgba(255,255,255,.92),
            0 0 74px rgba(255,255,255,.66),
            0 20px 48px rgba(36,18,95,.08) !important;
        mix-blend-mode: normal !important;
        pointer-events: none !important;
        will-change: transform, width, height !important;
    }

    .jd-question-oil-blob::before,
    .jd-question-oil-blob-main::before {
        content: "" !important;
        position: absolute !important;
        inset: -10% !important;
        border-radius: inherit !important;
        background:
            radial-gradient(circle at 50% 50%,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.99) 38%,
                rgba(255,255,255,.82) 62%,
                rgba(255,255,255,.28) 82%,
                rgba(255,255,255,0) 100%) !important;
        -webkit-backdrop-filter: blur(46px) saturate(1.95) contrast(1.28) brightness(1.16) !important;
        backdrop-filter: blur(46px) saturate(1.95) contrast(1.28) brightness(1.16) !important;
        filter: blur(11px) !important;
        -webkit-filter: blur(11px) !important;
        opacity: .98 !important;
        transform: scale(1.18) !important;
    }

    .jd-question-oil-blob::after,
    .jd-question-oil-blob-main::after {
        content: "" !important;
        position: absolute !important;
        inset: 18% !important;
        border-radius: inherit !important;
        background:
            radial-gradient(circle at 52% 48%,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,.995) 48%,
                rgba(255,255,255,.62) 74%,
                rgba(255,255,255,0) 100%) !important;
        -webkit-backdrop-filter: blur(56px) saturate(2.05) contrast(1.35) brightness(1.18) !important;
        backdrop-filter: blur(56px) saturate(2.05) contrast(1.35) brightness(1.18) !important;
        filter: blur(14px) !important;
        -webkit-filter: blur(14px) !important;
        opacity: .98 !important;
        transform: scale(1.28) !important;
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .jd-question-oil-blob,
        .jd-question-oil-blob-main {
            background:
                radial-gradient(circle at 50% 50%,
                    rgba(255,255,255,1) 0%,
                    rgba(255,255,255,.995) 46%,
                    rgba(255,255,255,.92) 68%,
                    rgba(255,255,255,.38) 88%,
                    rgba(255,255,255,0) 100%) !important;
            filter: blur(13px) !important;
            -webkit-filter: blur(13px) !important;
        }
    }
}

/* V17 cache marker */

/* JobDropper V19: clean premium mobile oil circle.
   Keep the previous soft/oil style, but make the inside unreadable with stronger
   milky opacity and heavier backdrop blur. No duplicated magnifier text. */
@media (max-width: 640px) {
    .jd-question-oil-veil {
        isolation: isolate !important;
        overflow: hidden !important;
        border-radius: 14px !important;
        pointer-events: none !important;
    }

    .jd-question-oil-blob,
    .jd-question-oil-blob-main {
        opacity: .998 !important;
        border-radius: 54% 46% 50% 50% / 48% 55% 45% 52% !important;
        background:
            radial-gradient(circle at 50% 50%,
                rgba(255,255,255,1) 0%,
                rgba(255,255,255,1) 34%,
                rgba(255,255,255,.985) 48%,
                rgba(255,255,255,.90) 62%,
                rgba(255,255,255,.58) 76%,
                rgba(255,255,255,.20) 90%,
                rgba(255,255,255,0) 100%),
            radial-gradient(circle at 35% 34%, rgba(248,246,255,.58) 0%, rgba(248,246,255,0) 60%) !important;
        -webkit-backdrop-filter: blur(52px) saturate(1.75) contrast(.72) brightness(1.16) !important;
        backdrop-filter: blur(52px) saturate(1.75) contrast(.72) brightness(1.16) !important;
        filter: blur(9px) saturate(1.05) !important;
        -webkit-filter: blur(9px) saturate(1.05) !important;
        box-shadow:
            inset 0 0 24px rgba(255,255,255,1),
            inset 0 0 64px rgba(255,255,255,.96),
            0 0 34px rgba(255,255,255,.86),
            0 0 68px rgba(124,92,255,.10) !important;
        mix-blend-mode: normal !important;
        pointer-events: none !important;
        will-change: transform, width, height !important;
    }

    .jd-question-oil-blob::before,
    .jd-question-oil-blob-main::before {
        content: "" !important;
        position: absolute !important;
        inset: 12% !important;
        border-radius: inherit !important;
        background: radial-gradient(circle at 50% 50%,
            rgba(255,255,255,1) 0 58%,
            rgba(255,255,255,.78) 76%,
            rgba(255,255,255,0) 100%) !important;
        -webkit-backdrop-filter: blur(64px) saturate(1.85) contrast(.62) brightness(1.18) !important;
        backdrop-filter: blur(64px) saturate(1.85) contrast(.62) brightness(1.18) !important;
        filter: blur(13px) !important;
        -webkit-filter: blur(13px) !important;
        opacity: .96 !important;
        transform: none !important;
    }

    .jd-question-oil-blob::after,
    .jd-question-oil-blob-main::after {
        content: "" !important;
        position: absolute !important;
        inset: 25% !important;
        border-radius: inherit !important;
        background: rgba(255,255,255,.92) !important;
        -webkit-backdrop-filter: blur(76px) saturate(1.9) contrast(.55) brightness(1.20) !important;
        backdrop-filter: blur(76px) saturate(1.9) contrast(.55) brightness(1.20) !important;
        filter: blur(18px) !important;
        -webkit-filter: blur(18px) !important;
        opacity: .92 !important;
        transform: none !important;
    }
}

/* V19 cache marker */
html { --jd-question-oil-mobile-version: "v19-clean-superblur"; }


/* JobDropper V20: draggable pale-purple question circle.
   This must stay at the end of site.css because older mobile rules set pointer-events:none. */
.jd-question-oil-veil,
.jd-question-oil-veil * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
.jd-question-oil-veil {
    pointer-events: auto !important;
    touch-action: none !important;
    cursor: grab !important;
    z-index: 9998 !important;
}
.jd-question-oil-veil.jd-question-oil-dragging {
    cursor: default !important;
}
.jd-question-oil-blob,
.jd-question-oil-blob-main {
    pointer-events: auto !important;
    touch-action: none !important;
    cursor: grab !important;
    border-radius: 9999px !important;
    opacity: .96 !important;
    background:
        radial-gradient(circle at 36% 30%, rgba(255,255,255,.96) 0 14%, rgba(255,255,255,.52) 32%, rgba(255,255,255,0) 58%),
        radial-gradient(circle at 50% 50%, rgba(244,239,255,.98) 0%, rgba(232,222,255,.94) 42%, rgba(210,194,255,.72) 64%, rgba(184,164,245,.34) 82%, rgba(184,164,245,0) 100%) !important;
    box-shadow:
        inset 0 0 22px rgba(255,255,255,.86),
        inset 0 0 46px rgba(235,225,255,.72) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.45) brightness(1.08) !important;
    backdrop-filter: blur(30px) saturate(1.45) brightness(1.08) !important;
    filter: none !important;
    -webkit-filter: none !important;
    overflow: hidden !important;
}
.jd-question-oil-blob.jd-question-oil-dragging,
.jd-question-oil-blob-main.jd-question-oil-dragging {
    cursor: default !important;
}
.jd-question-oil-blob::before,
.jd-question-oil-blob-main::before,
.jd-question-oil-blob::after,
.jd-question-oil-blob-main::after {
    pointer-events: none !important;
}
html { --jd-question-oil-mobile-version: "v21-draggable-purple-no-outside-shadow"; }

/* AI Career Twin entry point: keep the same white ghost treatment on every viewport. */
.jd-ai-career-twin-btn,
.jd-ai-career-twin-btn:link,
.jd-ai-career-twin-btn:visited {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: var(--jd-ink) !important;
    box-shadow: none !important;
}

.jd-ai-career-twin-btn i {
    color: var(--jd-ink) !important;
}

.jd-ai-career-twin-btn:hover,
.jd-ai-career-twin-btn:focus-visible,
.jd-ai-career-twin-btn:active {
    background: #FFFFFF !important;
    border-color: rgba(124,92,255,.22) !important;
    color: var(--jd-ink) !important;
    box-shadow: var(--jd-shadow) !important;
}

/* Real-device mobile override: never recolor the AI Career Twin entry pink/purple. */
@media (max-width: 991.98px) {
    .jd-ai-career-twin-btn,
    .jd-ai-career-twin-btn:link,
    .jd-ai-career-twin-btn:visited,
    .jd-ai-career-twin-btn:hover,
    .jd-ai-career-twin-btn:focus-visible,
    .jd-ai-career-twin-btn:active {
        background: #fff !important;
        border-color: rgba(0,0,0,.08) !important;
        color: #130B46 !important;
        text-decoration: none !important;
    }

    .jd-ai-career-twin-btn i {
        color: #130B46 !important;
    }
}

/* JobDropper V21: no external halo/shadow outside the draggable question circle. */
.jd-question-oil-blob,
.jd-question-oil-blob-main {
    box-shadow:
        inset 0 0 22px rgba(255,255,255,.86),
        inset 0 0 46px rgba(235,225,255,.72) !important;
    filter: none !important;
    -webkit-filter: none !important;
    overflow: hidden !important;
}
.jd-question-oil-blob::before,
.jd-question-oil-blob-main::before,
.jd-question-oil-blob::after,
.jd-question-oil-blob-main::after {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}
html { --jd-question-oil-mobile-version: "v21-draggable-purple-no-outside-shadow"; }


/* FINAL FIX 2026-06-05: word-by-word question reveal, no moving veil. */
.jd-question-oil-veil,
.jd-question-oil-blob,
[data-jd-question-oil-veil],
.jd-oil-flow-veil,
.jd-privacy-veil,
.jd-capture-veil {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.jd-seq-status,
.jd-seq-protected-host .jd-seq-status,
.jd-word-reveal-host .jd-seq-status {
    color: #7b61ff !important;
}

.jd-word-reveal-title {
    white-space: normal !important;
}

.jd-word-reveal-running .jd-ai-q-title {
    color: #120b46 !important;
}

/* FINAL FROM ARCHIVE: exact thin serpentine curves on the three Start cards (Insights / Job / Talent). */
.jd-home-entry-grid {
    position: relative !important;
    isolation: isolate !important;
}

/* Disable the old full-row SVG layer: the curves must be clipped inside each card. */
.jd-home-card-wave-layer {
    display: none !important;
}

.jd-home-entry-grid > .jd-feature-link {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 1 !important;
}

.jd-home-entry-grid > .jd-feature-link .jd-feature-icon,
.jd-home-entry-grid > .jd-feature-link .jd-feature-title,
.jd-home-entry-grid > .jd-feature-link .jd-muted {
    position: relative !important;
    z-index: 3 !important;
}

.jd-card-local-waves,
.jd-home-entry-grid > .jd-feature-link .jd-card-local-waves,
.jd-home-entry-grid .jd-feature-insights .jd-card-local-waves,
a.jd-feature.jd-feature-link.jd-feature-insights .jd-card-local-waves {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 8px !important;
    height: 108px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: .88 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: calc(300% + 96px) 108px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1500 108' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-35 44 C80 12 178 12 290 43 C405 75 510 74 630 42 C750 10 855 10 975 42 C1095 75 1210 74 1340 42 C1415 24 1475 28 1540 46' fill='none' stroke='%23D86FA9' stroke-width='1.75' stroke-opacity='.42' stroke-linecap='round'/%3E%3Cpath d='M-38 57 C72 34 155 84 270 58 C390 30 485 28 608 58 C728 88 828 88 948 58 C1075 27 1190 31 1310 58 C1400 78 1465 74 1538 55' fill='none' stroke='%237C5CFF' stroke-width='1.35' stroke-opacity='.28' stroke-linecap='round'/%3E%3Cpath d='M-40 72 C86 99 178 48 306 72 C432 95 528 96 655 72 C786 46 890 48 1018 72 C1146 96 1260 96 1395 70 C1452 59 1498 58 1540 66' fill='none' stroke='%23F4A7D0' stroke-width='1.15' stroke-opacity='.24' stroke-linecap='round'/%3E%3Cpath d='M-30 31 C96 58 190 58 315 31 C440 5 540 6 665 31 C792 58 900 58 1030 31 C1160 4 1285 5 1415 31 C1468 42 1515 42 1545 34' fill='none' stroke='%23B8A7FF' stroke-width='1.05' stroke-opacity='.20' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.jd-home-entry-grid .jd-card-local-waves-1 { background-position: left top !important; }
.jd-home-entry-grid .jd-card-local-waves-2 { background-position: center top !important; }
.jd-home-entry-grid .jd-card-local-waves-3 { background-position: right top !important; }

@media (max-width: 992px) {
    .jd-home-entry-grid {
        gap: 1.05rem !important;
    }

    .jd-home-entry-grid > .jd-feature-link {
        min-height: auto !important;
        padding-top: 1.35rem !important;
    }

    .jd-card-local-waves,
    .jd-home-entry-grid > .jd-feature-link .jd-card-local-waves,
    .jd-home-entry-grid .jd-feature-insights .jd-card-local-waves,
    a.jd-feature.jd-feature-link.jd-feature-insights .jd-card-local-waves {
        display: block !important;
        top: 18px !important;
        left: -2px !important;
        right: -2px !important;
        height: 58px !important;
        opacity: .78 !important;
        background-size: 112% 58px !important;
        background-position: center top !important;
    }

    .jd-card-local-waves-1 {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 460 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-34 24 C42 15 102 15 176 24 C252 33 312 33 388 24 C424 20 448 20 494 25' fill='none' stroke='%23D86FA9' stroke-width='1.35' stroke-opacity='.40' stroke-linecap='round'/%3E%3Cpath d='M-36 34 C40 28 102 28 178 34 C258 41 320 41 400 34 C430 31 456 31 496 34' fill='none' stroke='%237C5CFF' stroke-width='1.05' stroke-opacity='.25' stroke-linecap='round'/%3E%3Cpath d='M-30 42 C48 47 110 47 188 42 C268 37 334 37 414 42 C444 44 468 44 492 42' fill='none' stroke='%23F4A7D0' stroke-width='.85' stroke-opacity='.18' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .jd-card-local-waves-2 {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 460 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-34 31 C36 38 98 38 168 31 C244 23 306 23 382 31 C426 36 456 36 494 30' fill='none' stroke='%23D86FA9' stroke-width='1.30' stroke-opacity='.38' stroke-linecap='round'/%3E%3Cpath d='M-36 22 C42 16 108 16 186 22 C266 29 330 29 410 22 C438 20 462 20 496 23' fill='none' stroke='%23B8A7FF' stroke-width='1.00' stroke-opacity='.27' stroke-linecap='round'/%3E%3Cpath d='M-30 40 C46 36 108 36 184 40 C264 45 328 45 408 40 C440 38 466 38 492 40' fill='none' stroke='%237C5CFF' stroke-width='.85' stroke-opacity='.20' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    .jd-card-local-waves-3 {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 460 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-34 27 C38 21 100 21 172 27 C250 34 314 34 392 27 C426 24 454 24 494 28' fill='none' stroke='%237C5CFF' stroke-width='1.05' stroke-opacity='.29' stroke-linecap='round'/%3E%3Cpath d='M-36 36 C44 42 106 42 186 36 C266 30 330 30 410 36 C440 39 466 39 496 36' fill='none' stroke='%23D86FA9' stroke-width='1.35' stroke-opacity='.40' stroke-linecap='round'/%3E%3Cpath d='M-30 20 C48 16 112 16 190 20 C270 25 334 25 414 20 C442 18 466 18 492 20' fill='none' stroke='%23F4A7D0' stroke-width='.85' stroke-opacity='.18' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }
}



/* FINAL FIX FROM REFERENCE ARCHIVE: exact thin serpentine curves on all three start cards.
   Uses a real pseudo layer per card, so Insights does not depend on fragile span ordering. */
html body .jd-home-entry-grid {
    position: relative !important;
    isolation: isolate !important;
}

html body .jd-home-card-wave-layer {
    display: none !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 1 !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link .jd-card-local-waves {
    display: none !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 8px !important;
    width: auto !important;
    height: 108px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: .88 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: calc(300% + 96px) 108px !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1500 108' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-35 44 C80 12 178 12 290 43 C405 75 510 74 630 42 C750 10 855 10 975 42 C1095 75 1210 74 1340 42 C1415 24 1475 28 1540 46' fill='none' stroke='%23D86FA9' stroke-width='1.75' stroke-opacity='.42' stroke-linecap='round'/%3E%3Cpath d='M-38 57 C72 34 155 84 270 58 C390 30 485 28 608 58 C728 88 828 88 948 58 C1075 27 1190 31 1310 58 C1400 78 1465 74 1538 55' fill='none' stroke='%237C5CFF' stroke-width='1.35' stroke-opacity='.28' stroke-linecap='round'/%3E%3Cpath d='M-40 72 C86 99 178 48 306 72 C432 95 528 96 655 72 C786 46 890 48 1018 72 C1146 96 1260 96 1395 70 C1452 59 1498 58 1540 66' fill='none' stroke='%23F4A7D0' stroke-width='1.15' stroke-opacity='.24' stroke-linecap='round'/%3E%3Cpath d='M-30 31 C96 58 190 58 315 31 C440 5 540 6 665 31 C792 58 900 58 1030 31 C1160 4 1285 5 1415 31 C1468 42 1515 42 1545 34' fill='none' stroke='%23B8A7FF' stroke-width='1.05' stroke-opacity='.20' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link:nth-of-type(1)::before {
    background-position: left top !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link:nth-of-type(2)::before {
    background-position: center top !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link:nth-of-type(3)::before {
    background-position: right top !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link > *:not(.jd-card-local-waves) {
    position: relative !important;
    z-index: 2 !important;
}

html body .jd-home-entry-grid > a.jd-feature.jd-feature-link .jd-feature-icon {
    position: relative !important;
    z-index: 3 !important;
}

@media (max-width: 992px) {
    html body .jd-home-entry-grid > a.jd-feature.jd-feature-link {
        min-height: auto !important;
        padding-top: 1.35rem !important;
    }

    html body .jd-home-entry-grid > a.jd-feature.jd-feature-link::before {
        top: 18px !important;
        left: -2px !important;
        right: -2px !important;
        height: 58px !important;
        opacity: .78 !important;
        background-size: 112% 58px !important;
        background-position: center top !important;
    }

    html body .jd-home-entry-grid > a.jd-feature.jd-feature-link:nth-of-type(1)::before {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 460 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-34 24 C42 15 102 15 176 24 C252 33 312 33 388 24 C424 20 448 20 494 25' fill='none' stroke='%23D86FA9' stroke-width='1.35' stroke-opacity='.40' stroke-linecap='round'/%3E%3Cpath d='M-36 34 C40 28 102 28 178 34 C258 41 320 41 400 34 C430 31 456 31 496 34' fill='none' stroke='%237C5CFF' stroke-width='1.05' stroke-opacity='.25' stroke-linecap='round'/%3E%3Cpath d='M-30 42 C48 47 110 47 188 42 C268 37 334 37 414 42 C444 44 468 44 492 42' fill='none' stroke='%23F4A7D0' stroke-width='.85' stroke-opacity='.18' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    html body .jd-home-entry-grid > a.jd-feature.jd-feature-link:nth-of-type(2)::before {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 460 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-34 31 C36 38 98 38 168 31 C244 23 306 23 382 31 C426 36 456 36 494 30' fill='none' stroke='%23D86FA9' stroke-width='1.30' stroke-opacity='.38' stroke-linecap='round'/%3E%3Cpath d='M-36 22 C42 16 108 16 186 22 C266 29 330 29 410 22 C438 20 462 20 496 23' fill='none' stroke='%23B8A7FF' stroke-width='1.00' stroke-opacity='.27' stroke-linecap='round'/%3E%3Cpath d='M-30 40 C46 36 108 36 184 40 C264 45 328 45 408 40 C440 38 466 38 492 40' fill='none' stroke='%237C5CFF' stroke-width='.85' stroke-opacity='.20' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }

    html body .jd-home-entry-grid > a.jd-feature.jd-feature-link:nth-of-type(3)::before {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 460 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-34 27 C38 21 100 21 172 27 C250 34 314 34 392 27 C426 24 454 24 494 28' fill='none' stroke='%237C5CFF' stroke-width='1.05' stroke-opacity='.29' stroke-linecap='round'/%3E%3Cpath d='M-36 36 C44 42 106 42 186 36 C266 30 330 30 410 36 C440 39 466 39 496 36' fill='none' stroke='%23D86FA9' stroke-width='1.35' stroke-opacity='.40' stroke-linecap='round'/%3E%3Cpath d='M-30 20 C48 16 112 16 190 20 C270 25 334 25 414 20 C442 18 466 18 492 20' fill='none' stroke='%23F4A7D0' stroke-width='.85' stroke-opacity='.18' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    }
}

/* JD FIX: only the instruction text "Press Q ... Next button" purple. Nothing else changed. */
html body .jd-seq-status,
html body [data-jd-seq-status],
html body .jd-seq-toolbar > .jd-seq-status,
html body .jd-ai-test-modal .jd-seq-toolbar > .jd-seq-status,
html body .jd-dashboard-test-modal .jd-seq-toolbar > .jd-seq-status,
html body #jdAiTestBody .jd-seq-status,
html body #jdDashboardTestBody .jd-seq-status {
    color: #7b61ff !important;
}


/* JD FINAL MOBILE TEST MODAL FIX: only helper text purple + close X perfectly round. */
html body .jd-ai-test-modal .jd-seq-toolbar > .jd-seq-status,
html body .jd-dashboard-test-modal .jd-seq-toolbar > .jd-seq-status,
html body .jd-test-single-q .jd-seq-toolbar > .jd-seq-status,
html body .jd-ai-q .jd-seq-toolbar > .jd-seq-status,
html body [data-jd-seq-toolbar] > [data-jd-seq-status],
html body [data-jd-seq-status].jd-seq-status {
    color: #7b61ff !important;
}

html body .jd-ai-test-modal .jd-seq-toolbar > .jd-seq-status *,
html body .jd-dashboard-test-modal .jd-seq-toolbar > .jd-seq-status *,
html body [data-jd-seq-status].jd-seq-status * {
    color: inherit !important;
}

html body button.jd-ai-x,
html body button.jd-dashboard-test-x,
html body .jd-ai-test-modal button.jd-ai-x,
html body .jd-dashboard-test-modal button.jd-dashboard-test-x {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    background: #f5f3ff !important;
}

html body button.jd-ai-x i,
html body button.jd-dashboard-test-x i {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
}

@media (max-width: 640px) {
    html body button.jd-ai-x,
    html body button.jd-dashboard-test-x,
    html body .jd-ai-test-modal button.jd-ai-x,
    html body .jd-dashboard-test-modal button.jd-dashboard-test-x {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex-basis: 48px !important;
        border-radius: 50% !important;
    }
}

/* SQL search info helper: tiny info dot + searchable fields guide */
.jd-sql-info {
    margin: .65rem 0 .15rem !important;
    max-width: 100% !important;
}
.jd-sql-info > summary {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    cursor: pointer !important;
    color: #5d35e8 !important;
    font-weight: 950 !important;
    font-size: .86rem !important;
    user-select: none !important;
}
.jd-sql-info > summary::-webkit-details-marker { display: none !important; }
.jd-sql-info-dot {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, #7b61ff, #b89cff) !important;
    box-shadow: 0 8px 18px rgba(123,97,255,.22) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}
.jd-sql-info-panel {
    margin-top: .62rem !important;
    padding: .82rem !important;
    border-radius: 20px !important;
    border: 1px solid rgba(123,97,255,.16) !important;
    background: linear-gradient(180deg, rgba(250,248,255,.98), rgba(255,255,255,.98)) !important;
    box-shadow: 0 14px 34px rgba(74,48,160,.09) !important;
    color: #241657 !important;
    overflow-x: auto !important;
}
.jd-sql-info-panel p {
    margin: 0 0 .7rem !important;
    color: #5f5a7b !important;
    font-weight: 760 !important;
    line-height: 1.45 !important;
    font-size: .88rem !important;
}
.jd-sql-info-grid {
    display: grid !important;
    gap: .35rem !important;
    min-width: 690px !important;
}
.jd-sql-info-row {
    display: grid !important;
    grid-template-columns: 1.05fr 1.55fr 1fr !important;
    gap: .55rem !important;
    align-items: start !important;
    padding: .45rem .55rem !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(123,97,255,.08) !important;
    font-size: .8rem !important;
    font-weight: 820 !important;
}
.jd-sql-info-head {
    background: rgba(123,97,255,.1) !important;
    color: #4f22f2 !important;
    font-weight: 950 !important;
}
.jd-sql-info-row code,
.jd-sql-info-examples code {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    color: #4f22f2 !important;
    background: rgba(123,97,255,.08) !important;
    border: 1px solid rgba(123,97,255,.12) !important;
    border-radius: 10px !important;
    padding: .08rem .28rem !important;
    font-weight: 900 !important;
}
.jd-sql-info-examples {
    display: grid !important;
    gap: .42rem !important;
    margin-top: .7rem !important;
    color: #5f5a7b !important;
    font-size: .82rem !important;
    font-weight: 780 !important;
}
@media (max-width: 640px) {
    .jd-sql-info-panel { padding: .68rem !important; border-radius: 18px !important; }
    .jd-sql-info-grid { min-width: 560px !important; }
    .jd-sql-info-row { grid-template-columns: 1fr 1.35fr 1fr !important; font-size: .74rem !important; padding: .4rem .48rem !important; }
}

/* JobDropper SQL helper polish v20260606 */
.jd-sql-close,
.jd-home-sql-close,
#jdSqlCloseBtn,
#jdHomeSqlClose {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3efff !important;
    border: 1px solid rgba(123, 97, 255, .10) !important;
    color: #161142 !important;
    line-height: 1 !important;
    box-shadow: 0 14px 30px rgba(28, 18, 74, .08) !important;
}
.jd-sql-close i,
.jd-home-sql-close i,
#jdSqlCloseBtn i,
#jdHomeSqlClose i {
    line-height: 1 !important;
    font-size: 1.12rem !important;
}
.jd-sql-info {
    margin: .75rem 0 .2rem !important;
    max-width: min(900px, 100%) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.jd-sql-info > summary,
.jd-sql-info-summary {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .52rem !important;
    min-height: 34px !important;
    padding: .38rem .62rem .38rem .42rem !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    color: #4f22f2 !important;
    background: linear-gradient(135deg, rgba(123, 97, 255, .10), rgba(255, 255, 255, .88)) !important;
    border: 1px solid rgba(123, 97, 255, .16) !important;
    box-shadow: 0 10px 24px rgba(74, 48, 160, .08) !important;
    font-weight: 900 !important;
    font-size: .9rem !important;
    user-select: none !important;
}
.jd-sql-info > summary::-webkit-details-marker,
.jd-sql-info-summary::-webkit-details-marker {
    display: none !important;
}
.jd-sql-info-icon,
.jd-sql-info-dot {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6f3aff, #9d7cff) !important;
    box-shadow: 0 9px 18px rgba(111, 58, 255, .24) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}
.jd-sql-info-chevron {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7b61ff !important;
    transition: transform .18s ease !important;
}
.jd-sql-info[open] .jd-sql-info-chevron {
    transform: rotate(180deg) !important;
}
.jd-sql-info-panel {
    margin-top: .75rem !important;
    padding: .95rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(123, 97, 255, .16) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(123, 97, 255, .10), transparent 34%),
        linear-gradient(180deg, rgba(252, 250, 255, .98), rgba(255, 255, 255, .98)) !important;
    box-shadow: 0 18px 44px rgba(34, 20, 90, .10) !important;
    color: #19133f !important;
    overflow: hidden !important;
}
.jd-sql-info-intro {
    display: grid !important;
    gap: .22rem !important;
    margin: 0 0 .85rem !important;
    padding: .75rem .85rem !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(123, 97, 255, .10) !important;
}
.jd-sql-info-intro strong {
    color: #100b3f !important;
    font-size: .96rem !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
}
.jd-sql-info-intro span {
    color: #67627f !important;
    font-size: .86rem !important;
    line-height: 1.45 !important;
    font-weight: 720 !important;
}
.jd-sql-info-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .55rem !important;
}
.jd-sql-info-field {
    display: grid !important;
    gap: .42rem !important;
    align-content: start !important;
    min-width: 0 !important;
    padding: .72rem .78rem !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(123, 97, 255, .11) !important;
    box-shadow: 0 10px 24px rgba(31, 20, 84, .045) !important;
}
.jd-sql-info-field-wide {
    grid-column: 1 / -1 !important;
}
.jd-sql-info-label {
    color: #100b3f !important;
    font-weight: 950 !important;
    font-size: .84rem !important;
    letter-spacing: -.01em !important;
}
.jd-sql-info-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .28rem !important;
    min-width: 0 !important;
}
.jd-sql-info-chips code,
.jd-sql-info-field code,
.jd-sql-info-examples code {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    color: #5b2cff !important;
    background: rgba(123, 97, 255, .09) !important;
    border: 1px solid rgba(123, 97, 255, .13) !important;
    border-radius: 999px !important;
    padding: .16rem .42rem !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}
.jd-sql-info-real {
    color: #77718d !important;
    font-size: .72rem !important;
    font-weight: 820 !important;
}
.jd-sql-info-real::before {
    content: "Card field: " !important;
    color: #a097ba !important;
    font-weight: 900 !important;
}
.jd-sql-info-examples {
    display: grid !important;
    gap: .46rem !important;
    margin-top: .75rem !important;
    padding: .75rem .85rem !important;
    border-radius: 18px !important;
    color: #5f5a7b !important;
    background: rgba(246, 242, 255, .72) !important;
    border: 1px solid rgba(123, 97, 255, .10) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
}
.jd-sql-info-examples > span {
    color: #100b3f !important;
    font-weight: 950 !important;
}
.jd-sql-info-examples code {
    justify-self: start !important;
    border-radius: 13px !important;
    padding: .28rem .48rem !important;
}
@media (max-width: 760px) {
    .jd-sql-close,
    .jd-home-sql-close,
    #jdSqlCloseBtn,
    #jdHomeSqlClose {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex-basis: 48px !important;
        border-radius: 9999px !important;
    }
    .jd-sql-info-panel {
        padding: .72rem !important;
        border-radius: 20px !important;
        max-height: min(52vh, 520px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .jd-sql-info-fields {
        grid-template-columns: 1fr !important;
        gap: .48rem !important;
    }
    .jd-sql-info-field {
        padding: .62rem .66rem !important;
        border-radius: 16px !important;
    }
    .jd-sql-info > summary,
    .jd-sql-info-summary {
        max-width: 100% !important;
        font-size: .86rem !important;
    }
}


/* SQL Search help panel polished layout - v20260606 */
.jd-sql-modal .jd-sql-info,
.jd-home-sql-modal .jd-sql-info,
.jd-sql-help-card {
    display: block !important;
    margin: 1rem 0 1.35rem !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.jd-sql-modal .jd-sql-help-summary,
.jd-home-sql-modal .jd-sql-help-summary,
.jd-sql-help-summary {
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .48rem .7rem .48rem .52rem !important;
    border: 1px solid rgba(123, 97, 255, .22) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(123, 97, 255, .08), rgba(255, 255, 255, .94)) !important;
    color: #171047 !important;
    cursor: pointer !important;
    list-style: none !important;
    line-height: 1 !important;
    box-shadow: 0 14px 32px rgba(52, 34, 130, .08) !important;
}

.jd-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-home-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-sql-help-summary::-webkit-details-marker { display: none !important; }

.jd-sql-help-arrow {
    width: 1.7rem !important;
    height: 1.7rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    background: linear-gradient(135deg, #7b3cff, #5b2bff) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(91, 43, 255, .28) !important;
    font-size: 1.25rem !important;
}

.jd-sql-help-title {
    font-size: .98rem !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
    color: #171047 !important;
    white-space: nowrap !important;
}

.jd-sql-help-chevron {
    width: 1.45rem !important;
    height: 1.45rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6c4cff !important;
    background: rgba(123, 97, 255, .09) !important;
    transition: transform .18s ease !important;
}

.jd-sql-info[open] .jd-sql-help-chevron { transform: rotate(180deg) !important; }

.jd-sql-help-panel,
.jd-sql-modal .jd-sql-help-panel,
.jd-home-sql-modal .jd-sql-help-panel {
    margin-top: .85rem !important;
    padding: 1rem !important;
    border: 1px solid rgba(123, 97, 255, .16) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 22px 60px rgba(36, 23, 90, .10) !important;
    color: #171047 !important;
    max-height: min(52vh, 540px) !important;
    overflow: auto !important;
}

.jd-sql-help-intro {
    display: grid !important;
    gap: .2rem !important;
    margin-bottom: .9rem !important;
    padding: .85rem .95rem !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(123, 97, 255, .10), rgba(255, 255, 255, .92)) !important;
    border: 1px solid rgba(123, 97, 255, .10) !important;
}

.jd-sql-help-intro strong {
    display: block !important;
    color: #171047 !important;
    font-size: .98rem !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

.jd-sql-help-intro span {
    display: block !important;
    color: rgba(23, 16, 71, .68) !important;
    font-size: .88rem !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
}

.jd-sql-help-groups {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .68rem !important;
}

.jd-sql-help-group {
    min-width: 0 !important;
    display: grid !important;
    gap: .38rem !important;
    padding: .82rem .9rem !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(218, 208, 255, .95) !important;
    box-shadow: 0 12px 30px rgba(26, 12, 76, .045) !important;
}

.jd-sql-help-group-wide { grid-column: 1 / -1 !important; }

.jd-sql-help-label {
    color: #171047 !important;
    font-size: .92rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

.jd-sql-help-desc {
    color: rgba(23, 16, 71, .62) !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.jd-sql-help-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .35rem !important;
    min-width: 0 !important;
}

.jd-sql-help-tags code,
.jd-sql-help-examples code {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    padding: .27rem .48rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(123, 97, 255, .18) !important;
    background: rgba(123, 97, 255, .075) !important;
    color: #6136ff !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .73rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.jd-sql-help-examples {
    display: grid !important;
    gap: .45rem !important;
    margin-top: .95rem !important;
    padding-top: .95rem !important;
    border-top: 1px solid rgba(123, 97, 255, .14) !important;
}

.jd-sql-help-examples-title {
    color: #171047 !important;
    font-size: .88rem !important;
    font-weight: 900 !important;
}

.jd-sql-help-examples code {
    justify-content: flex-start !important;
    border-radius: 14px !important;
    padding: .55rem .7rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    color: #4930d8 !important;
}

.jd-sql-info-field,
.jd-sql-info-fields,
.jd-sql-info-real,
.jd-sql-info-label,
.jd-sql-info-chips,
.jd-sql-info-icon,
.jd-sql-info-dot { all: unset; }

.jd-sql-close,
.jd-home-sql-close,
#jdSqlCloseBtn,
#jdHomeSqlClose {
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
    max-width: 3.75rem !important;
    max-height: 3.75rem !important;
    flex: 0 0 3.75rem !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    border: 0 !important;
    background: #f3efff !important;
    color: #171047 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.jd-sql-close i,
.jd-home-sql-close i,
#jdSqlCloseBtn i,
#jdHomeSqlClose i {
    display: block !important;
    line-height: 1 !important;
    font-size: 1.28rem !important;
}

@media (max-width: 720px) {
    .jd-sql-modal .jd-sql-info,
    .jd-home-sql-modal .jd-sql-info,
    .jd-sql-help-card { margin: .9rem 0 1.05rem !important; }

    .jd-sql-help-title { font-size: .9rem !important; white-space: normal !important; }
    .jd-sql-help-arrow { width: 1.55rem !important; height: 1.55rem !important; font-size: 1.1rem !important; }
    .jd-sql-help-panel { padding: .78rem !important; border-radius: 20px !important; max-height: 48vh !important; }
    .jd-sql-help-groups { grid-template-columns: 1fr !important; gap: .55rem !important; }
    .jd-sql-help-group { padding: .72rem .78rem !important; border-radius: 16px !important; }
    .jd-sql-help-tags code { font-size: .68rem !important; padding: .25rem .42rem !important; }
    .jd-sql-help-examples code { font-size: .68rem !important; }

    .jd-sql-close,
    .jd-home-sql-close,
    #jdSqlCloseBtn,
    #jdHomeSqlClose {
        width: 3rem !important;
        height: 3rem !important;
        min-width: 3rem !important;
        min-height: 3rem !important;
        max-width: 3rem !important;
        max-height: 3rem !important;
        flex-basis: 3rem !important;
    }
}

/* JobDropper SQL Search helper - professional compact layout v20260606-final */
.jd-sql-modal .jd-sql-help-card,
.jd-home-sql-modal .jd-sql-help-card,
.jd-sql-help-card {
    display: block !important;
    margin: .9rem 0 1.15rem !important;
    max-width: min(880px, 100%) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.jd-sql-modal .jd-sql-help-summary,
.jd-home-sql-modal .jd-sql-help-summary,
.jd-sql-help-summary {
    list-style: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .62rem !important;
    margin: 0 !important;
    padding: .46rem .72rem .46rem .5rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(123, 97, 255, .20) !important;
    background: linear-gradient(135deg, rgba(123,97,255,.10), rgba(255,255,255,.96)) !important;
    color: #171047 !important;
    box-shadow: 0 12px 28px rgba(36, 23, 90, .08) !important;
    cursor: pointer !important;
    user-select: none !important;
}

.jd-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-home-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-sql-help-summary::-webkit-details-marker { display: none !important; }
.jd-sql-modal .jd-sql-help-summary::marker,
.jd-home-sql-modal .jd-sql-help-summary::marker,
.jd-sql-help-summary::marker { content: "" !important; }

.jd-sql-help-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    flex: 0 0 1.85rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #6f3aff 0%, #8b65ff 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(111, 58, 255, .26) !important;
    line-height: 1 !important;
}
.jd-sql-help-icon i {
    display: block !important;
    font-size: .98rem !important;
    line-height: 1 !important;
}

.jd-sql-help-title {
    display: inline-block !important;
    color: #171047 !important;
    font-size: .98rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
}
.jd-sql-help-summary::after {
    content: "▾" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: .08rem !important;
    color: #6f3aff !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transition: transform .16s ease !important;
}
.jd-sql-help-card[open] .jd-sql-help-summary::after { transform: rotate(180deg) !important; }

.jd-sql-help-panel,
.jd-sql-modal .jd-sql-help-panel,
.jd-home-sql-modal .jd-sql-help-panel {
    display: block !important;
    margin-top: .78rem !important;
    padding: 1rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(123,97,255,.16) !important;
    background: linear-gradient(180deg, rgba(252,250,255,.98), rgba(255,255,255,.98)) !important;
    box-shadow: 0 18px 48px rgba(29, 18, 76, .10) !important;
    color: #171047 !important;
    max-height: min(54vh, 560px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.jd-sql-help-lead {
    display: block !important;
    margin: 0 0 .85rem !important;
    padding: .85rem .95rem !important;
    border-radius: 18px !important;
    background: rgba(123,97,255,.07) !important;
    border: 1px solid rgba(123,97,255,.10) !important;
    color: rgba(23,16,71,.72) !important;
    font-size: .9rem !important;
    line-height: 1.48 !important;
    font-weight: 680 !important;
}
.jd-sql-help-lead strong {
    color: #171047 !important;
    font-weight: 950 !important;
}

.jd-sql-help-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .72rem !important;
}
.jd-sql-help-item {
    display: flex !important;
    flex-direction: column !important;
    gap: .48rem !important;
    min-width: 0 !important;
    padding: .86rem .92rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(218,208,255,.92) !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 12px 28px rgba(29, 18, 76, .045) !important;
}
.jd-sql-help-item-title {
    display: block !important;
    color: #171047 !important;
    font-size: .93rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
}
.jd-sql-help-item-copy {
    display: block !important;
    color: rgba(23,16,71,.64) !important;
    font-size: .8rem !important;
    line-height: 1.38 !important;
    font-weight: 720 !important;
}
.jd-sql-help-chipline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .36rem !important;
    min-width: 0 !important;
}
.jd-sql-help-chipline code,
.jd-sql-help-examples code {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .25rem .48rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(123,97,255,.16) !important;
    background: rgba(123,97,255,.075) !important;
    color: #5c2fff !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
.jd-sql-help-examples {
    display: grid !important;
    gap: .5rem !important;
    margin-top: .9rem !important;
    padding-top: .9rem !important;
    border-top: 1px solid rgba(123,97,255,.14) !important;
}
.jd-sql-help-examples > span {
    color: #171047 !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
}
.jd-sql-help-examples code {
    justify-self: start !important;
    border-radius: 14px !important;
    padding: .5rem .65rem !important;
    line-height: 1.42 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: #3c2fb3 !important;
    background: #f7f3ff !important;
}

.jd-sql-help-arrow,
.jd-sql-help-chevron,
.jd-sql-info-dot,
.jd-sql-info-icon,
.jd-sql-info-fields,
.jd-sql-info-grid,
.jd-sql-info-row,
.jd-sql-info-real,
.jd-sql-info-chips { display: none !important; }

.jd-sql-close,
.jd-home-sql-close,
#jdSqlCloseBtn,
#jdHomeSqlClose {
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
    max-width: 3.75rem !important;
    max-height: 3.75rem !important;
    flex: 0 0 3.75rem !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3efff !important;
    color: #171047 !important;
    border: 1px solid rgba(123,97,255,.10) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

@media (max-width: 720px) {
    .jd-sql-help-card { margin: .75rem 0 1rem !important; }
    .jd-sql-help-summary { padding: .42rem .62rem .42rem .45rem !important; }
    .jd-sql-help-icon { width: 1.65rem !important; height: 1.65rem !important; flex-basis: 1.65rem !important; }
    .jd-sql-help-title { font-size: .9rem !important; }
    .jd-sql-help-panel { padding: .78rem !important; border-radius: 20px !important; max-height: 48vh !important; }
    .jd-sql-help-lead { padding: .72rem .78rem !important; font-size: .84rem !important; }
    .jd-sql-help-list { grid-template-columns: 1fr !important; gap: .55rem !important; }
    .jd-sql-help-item { padding: .72rem .78rem !important; border-radius: 16px !important; }
    .jd-sql-help-chipline code { font-size: .68rem !important; padding: .23rem .42rem !important; }
    .jd-sql-help-examples code { font-size: .68rem !important; }
    .jd-sql-close,
    .jd-home-sql-close,
    #jdSqlCloseBtn,
    #jdHomeSqlClose {
        width: 3rem !important;
        height: 3rem !important;
        min-width: 3rem !important;
        min-height: 3rem !important;
        max-width: 3rem !important;
        max-height: 3rem !important;
        flex-basis: 3rem !important;
    }
}

/* SQL help clean professional layout - final override */
.jd-sql-modal .jd-sql-info,
.jd-home-sql-modal .jd-sql-info,
.jd-sql-help-card {
    margin: .65rem 0 1.05rem !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.jd-sql-modal .jd-sql-help-summary,
.jd-home-sql-modal .jd-sql-help-summary,
.jd-sql-help-summary {
    appearance: none !important;
    -webkit-appearance: none !important;
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: .35rem !important;
    padding: .22rem 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color: #171047 !important;
    line-height: 1.2 !important;
}

.jd-sql-help-summary::marker,
.jd-sql-help-summary::-webkit-details-marker,
.jd-sql-modal .jd-sql-help-summary::marker,
.jd-home-sql-modal .jd-sql-help-summary::marker,
.jd-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-home-sql-modal .jd-sql-help-summary::-webkit-details-marker {
    content: "" !important;
    display: none !important;
}

.jd-sql-help-toggle {
    width: 1.55rem !important;
    height: 1.55rem !important;
    min-width: 1.55rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255, 46, 137, .10) !important;
    border: 1px solid rgba(255, 46, 137, .22) !important;
    color: #ff2e89 !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-1px) rotate(0deg) !important;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.jd-sql-info[open] .jd-sql-help-toggle {
    transform: translateY(-1px) rotate(90deg) !important;
    background: #ff2e89 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(255, 46, 137, .22) !important;
}

.jd-sql-help-title {
    color: #171047 !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
}

.jd-sql-help-icon,
.jd-sql-help-chevron,
.jd-sql-help-arrow,
.jd-sql-help-lead,
.jd-sql-help-intro,
.jd-sql-help-list,
.jd-sql-help-item,
.jd-sql-help-item-title,
.jd-sql-help-item-copy,
.jd-sql-help-chipline,
.jd-sql-help-groups,
.jd-sql-help-group,
.jd-sql-help-label,
.jd-sql-help-desc {
    all: revert !important;
}

.jd-sql-help-panel,
.jd-sql-modal .jd-sql-help-panel,
.jd-home-sql-modal .jd-sql-help-panel {
    display: block !important;
    margin-top: .8rem !important;
    padding: 1rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(218, 208, 255, .95) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 22px 60px rgba(36, 23, 90, .10) !important;
    color: #171047 !important;
    max-height: min(54vh, 560px) !important;
    overflow: auto !important;
}

.jd-sql-help-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

.jd-sql-help-section {
    min-width: 0 !important;
    display: grid !important;
    gap: .42rem !important;
    padding: .9rem .95rem !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(248, 245, 255, .74) 100%) !important;
    border: 1px solid rgba(218, 208, 255, .9) !important;
    box-shadow: 0 12px 28px rgba(26, 12, 76, .045) !important;
}

.jd-sql-help-section h4 {
    margin: 0 !important;
    color: #171047 !important;
    font-size: .93rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

.jd-sql-help-section p {
    margin: 0 !important;
    color: rgba(23, 16, 71, .66) !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
}

.jd-sql-help-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .34rem !important;
    min-width: 0 !important;
}

.jd-sql-help-tags code,
.jd-sql-help-examples code {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .28rem .5rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 46, 137, .16) !important;
    background: rgba(255, 46, 137, .07) !important;
    color: #e81e78 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .72rem !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.jd-sql-help-examples {
    display: grid !important;
    gap: .5rem !important;
    margin-top: .9rem !important;
    padding-top: .9rem !important;
    border-top: 1px solid rgba(123, 97, 255, .14) !important;
}

.jd-sql-help-examples-title {
    margin: 0 !important;
    color: #171047 !important;
    font-size: .9rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.jd-sql-help-examples code {
    justify-content: flex-start !important;
    width: 100% !important;
    border-radius: 14px !important;
    padding: .62rem .75rem !important;
    background: rgba(123, 97, 255, .055) !important;
    border-color: rgba(123, 97, 255, .15) !important;
    color: #4e31d8 !important;
    line-height: 1.38 !important;
    white-space: normal !important;
}

.jd-sql-close,
.jd-home-sql-close,
#jdSqlCloseBtn,
#jdHomeSqlClose {
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
    max-width: 3.75rem !important;
    max-height: 3.75rem !important;
    flex: 0 0 3.75rem !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    border: 0 !important;
    background: #f3efff !important;
    color: #171047 !important;
}

@media (max-width: 640px) {
    .jd-sql-help-grid { grid-template-columns: 1fr !important; gap: .62rem !important; }
    .jd-sql-help-panel { padding: .78rem !important; border-radius: 20px !important; max-height: 50vh !important; }
    .jd-sql-help-section { padding: .78rem .82rem !important; border-radius: 16px !important; }
    .jd-sql-help-title { font-size: .94rem !important; }
    .jd-sql-help-toggle { width: 1.45rem !important; height: 1.45rem !important; min-width: 1.45rem !important; font-size: 1.3rem !important; }
    .jd-sql-close, .jd-home-sql-close, #jdSqlCloseBtn, #jdHomeSqlClose {
        width: 3rem !important; height: 3rem !important; min-width: 3rem !important; min-height: 3rem !important; max-width: 3rem !important; max-height: 3rem !important; flex-basis: 3rem !important;
    }
}

/* JobDropper SQL help - clean caret + readable help v20260606-caret-final */
.jd-sql-modal .jd-sql-help-card,
.jd-home-sql-modal .jd-sql-help-card,
.jd-sql-help-card {
    display: block !important;
    margin: .72rem 0 1.05rem !important;
    max-width: min(850px, 100%) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.jd-sql-modal .jd-sql-help-summary,
.jd-home-sql-modal .jd-sql-help-summary,
.jd-sql-help-summary {
    list-style: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: 0 !important;
    padding: .34rem .56rem .34rem .4rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #171047 !important;
    cursor: pointer !important;
    user-select: none !important;
}
.jd-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-home-sql-modal .jd-sql-help-summary::-webkit-details-marker,
.jd-sql-help-summary::-webkit-details-marker { display: none !important; }
.jd-sql-modal .jd-sql-help-summary::marker,
.jd-home-sql-modal .jd-sql-help-summary::marker,
.jd-sql-help-summary::marker { content: "" !important; }
.jd-sql-help-summary::before,
.jd-sql-help-summary::after { content: none !important; display: none !important; }

.jd-sql-help-icon {
    width: 1.6rem !important;
    height: 1.6rem !important;
    flex: 0 0 1.6rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(236, 38, 132, .10) !important;
    color: #ec2684 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.jd-sql-help-icon i {
    display: block !important;
    font-size: .92rem !important;
    line-height: 1 !important;
    transition: transform .16s ease !important;
    transform-origin: center !important;
}
.jd-sql-help-card[open] .jd-sql-help-icon i { transform: rotate(90deg) !important; }

.jd-sql-help-title {
    color: #171047 !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
}

.jd-sql-help-panel,
.jd-sql-modal .jd-sql-help-panel,
.jd-home-sql-modal .jd-sql-help-panel {
    display: block !important;
    margin-top: .6rem !important;
    padding: .95rem !important;
    border-radius: 22px !important;
    border: 1px solid rgba(218,208,255,.90) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 18px 44px rgba(29,18,76,.08) !important;
    color: #171047 !important;
    max-height: min(54vh, 540px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}
.jd-sql-help-intro-line {
    margin: 0 0 .78rem !important;
    color: rgba(23,16,71,.68) !important;
    font-size: .88rem !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
}
.jd-sql-help-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .68rem !important;
}
.jd-sql-help-item {
    display: flex !important;
    flex-direction: column !important;
    gap: .42rem !important;
    min-width: 0 !important;
    padding: .78rem .82rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(218,208,255,.76) !important;
    background: linear-gradient(180deg, rgba(252,250,255,.98), rgba(255,255,255,.96)) !important;
    box-shadow: none !important;
}
.jd-sql-help-item-title {
    color: #171047 !important;
    font-size: .9rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
}
.jd-sql-help-item-copy {
    color: rgba(23,16,71,.64) !important;
    font-size: .78rem !important;
    line-height: 1.36 !important;
    font-weight: 650 !important;
}
.jd-sql-help-chipline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .34rem !important;
    min-width: 0 !important;
}
.jd-sql-help-chipline code {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .22rem .43rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(236,38,132,.14) !important;
    background: rgba(236,38,132,.07) !important;
    color: #ec2684 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .68rem !important;
    line-height: 1.12 !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
}
.jd-sql-help-examples {
    display: grid !important;
    gap: .45rem !important;
    margin-top: .78rem !important;
    padding-top: .78rem !important;
    border-top: 1px solid rgba(123,97,255,.12) !important;
}
.jd-sql-help-examples > span,
.jd-sql-help-examples-title {
    color: #171047 !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
}
.jd-sql-help-examples code {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .56rem .68rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(218,208,255,.80) !important;
    background: #faf8ff !important;
    color: #171047 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .74rem !important;
    line-height: 1.42 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.jd-sql-help-toggle,
.jd-sql-help-arrow,
.jd-sql-help-chevron,
.jd-sql-info-dot,
.jd-sql-info-icon,
.jd-sql-info-fields,
.jd-sql-info-grid,
.jd-sql-info-row,
.jd-sql-info-real,
.jd-sql-info-chips,
.jd-sql-help-grid,
.jd-sql-help-section { display: none !important; }

.jd-sql-close,
.jd-home-sql-close,
#jdSqlCloseBtn,
#jdHomeSqlClose {
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
    max-width: 3.75rem !important;
    max-height: 3.75rem !important;
    flex: 0 0 3.75rem !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3efff !important;
    color: #171047 !important;
    border: 1px solid rgba(123,97,255,.10) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .jd-sql-help-card { margin: .62rem 0 .9rem !important; }
    .jd-sql-help-summary { padding: .28rem .42rem .28rem .32rem !important; gap: .42rem !important; }
    .jd-sql-help-icon { width: 1.45rem !important; height: 1.45rem !important; flex-basis: 1.45rem !important; }
    .jd-sql-help-title { font-size: .94rem !important; }
    .jd-sql-help-panel { padding: .78rem !important; border-radius: 18px !important; max-height: 50vh !important; }
    .jd-sql-help-list { grid-template-columns: 1fr !important; gap: .52rem !important; }
    .jd-sql-help-item { padding: .68rem .72rem !important; border-radius: 15px !important; }
    .jd-sql-help-chipline code { font-size: .64rem !important; padding: .2rem .38rem !important; }
    .jd-sql-help-examples code { font-size: .67rem !important; }
    .jd-sql-close, .jd-home-sql-close, #jdSqlCloseBtn, #jdHomeSqlClose {
        width: 3rem !important; height: 3rem !important; min-width: 3rem !important; min-height: 3rem !important;
        max-width: 3rem !important; max-height: 3rem !important; flex-basis: 3rem !important;
    }
}

/* SQL help: clean caret-only professional override */
.jd-sql-modal .jd-sql-info.jd-sql-help-card,
.jd-home-sql-modal .jd-sql-info.jd-sql-help-card {
    margin: .75rem 0 1.15rem !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary,
.jd-sql-modal .jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary,
.jd-home-sql-modal .jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary {
    list-style: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .15rem 0 !important;
    margin: .22rem 0 .35rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color: #171047 !important;
    line-height: 1.1 !important;
}

.jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::marker,
.jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::-webkit-details-marker,
.jd-sql-modal .jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::marker,
.jd-sql-modal .jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::-webkit-details-marker,
.jd-home-sql-modal .jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::marker,
.jd-home-sql-modal .jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::-webkit-details-marker {
    content: "" !important;
    display: none !important;
}

.jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::before,
.jd-sql-info.jd-sql-help-card > summary.jd-sql-help-summary::after {
    content: none !important;
    display: none !important;
}

.jd-sql-help-toggle {
    all: unset !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    min-width: 1.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #e81e78 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
}

.jd-sql-help-toggle i {
    display: inline-flex !important;
    color: #e81e78 !important;
    transform: rotate(0deg) !important;
    transition: transform .18s ease !important;
}

.jd-sql-info.jd-sql-help-card[open] .jd-sql-help-toggle i {
    transform: rotate(90deg) !important;
}

.jd-sql-help-title {
    color: #171047 !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
}

.jd-sql-help-panel,
.jd-sql-modal .jd-sql-help-panel,
.jd-home-sql-modal .jd-sql-help-panel {
    margin-top: .72rem !important;
    padding: 1rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(218, 208, 255, .95) !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 22px 60px rgba(36, 23, 90, .10) !important;
    color: #171047 !important;
    max-height: min(52vh, 560px) !important;
    overflow: auto !important;
}

.jd-sql-help-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
}

.jd-sql-help-section {
    min-width: 0 !important;
    padding: .85rem .9rem !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(249, 246, 255, .82) 100%) !important;
    border: 1px solid rgba(218, 208, 255, .82) !important;
    box-shadow: 0 12px 28px rgba(26, 12, 76, .045) !important;
}

.jd-sql-help-section h4 {
    margin: 0 0 .3rem !important;
    color: #171047 !important;
    font-size: .93rem !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
}

.jd-sql-help-section p {
    margin: 0 0 .55rem !important;
    color: rgba(23, 16, 71, .68) !important;
    font-size: .82rem !important;
    line-height: 1.38 !important;
    font-weight: 620 !important;
}

.jd-sql-help-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .35rem !important;
}

.jd-sql-help-tags code {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: .28rem .5rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(232, 30, 120, .16) !important;
    background: rgba(232, 30, 120, .065) !important;
    color: #e81e78 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .72rem !important;
    line-height: 1.05 !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
}

.jd-sql-help-examples {
    display: grid !important;
    gap: .5rem !important;
    margin-top: .95rem !important;
    padding-top: .95rem !important;
    border-top: 1px solid rgba(123, 97, 255, .14) !important;
}

.jd-sql-help-examples-title {
    margin: 0 !important;
    color: #171047 !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
}

.jd-sql-help-examples code {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .62rem .75rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(123, 97, 255, .15) !important;
    background: rgba(123, 97, 255, .055) !important;
    color: #4e31d8 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .73rem !important;
    line-height: 1.38 !important;
    font-weight: 760 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

@media (max-width: 700px) {
    .jd-sql-help-panel,
    .jd-sql-modal .jd-sql-help-panel,
    .jd-home-sql-modal .jd-sql-help-panel {
        padding: .82rem !important;
        border-radius: 20px !important;
        max-height: 48vh !important;
    }

    .jd-sql-help-grid {
        grid-template-columns: 1fr !important;
        gap: .58rem !important;
    }

    .jd-sql-help-section {
        padding: .72rem .78rem !important;
        border-radius: 16px !important;
    }

    .jd-sql-help-tags code,
    .jd-sql-help-examples code {
        font-size: .68rem !important;
    }
}

/* JobDropper SQL help - final clean override v20260606 */
.jd-sql-help-card,
.jd-sql-modal .jd-sql-help-card,
.jd-home-sql-modal .jd-sql-help-card {
    display: block !important;
    margin: .62rem 0 1rem !important;
    max-width: 900px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.jd-sql-help-card > summary,
.jd-sql-help-summary,
.jd-sql-modal .jd-sql-help-summary,
.jd-home-sql-modal .jd-sql-help-summary {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .48rem !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .28rem .62rem .28rem .34rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(235, 46, 134, .18) !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #171047 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    user-select: none !important;
}

.jd-sql-help-card > summary::-webkit-details-marker,
.jd-sql-help-summary::-webkit-details-marker,
.jd-sql-help-summary::marker {
    display: none !important;
    content: "" !important;
}

.jd-sql-help-summary::before,
.jd-sql-help-summary::after {
    display: none !important;
    content: none !important;
}

.jd-sql-help-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: 0 0 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(235, 46, 134, .10) !important;
    color: #eb2e86 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: transform .16s ease, background .16s ease !important;
}

.jd-sql-help-icon i {
    display: block !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    color: #eb2e86 !important;
}

.jd-sql-help-card[open] .jd-sql-help-icon {
    transform: rotate(90deg) !important;
    background: rgba(235, 46, 134, .15) !important;
}

.jd-sql-help-title {
    display: inline-block !important;
    color: #171047 !important;
    font-size: .96rem !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
}

.jd-sql-help-panel,
.jd-sql-modal .jd-sql-help-panel,
.jd-home-sql-modal .jd-sql-help-panel {
    display: block !important;
    margin-top: .75rem !important;
    padding: .9rem !important;
    border-radius: 22px !important;
    border: 1px solid rgba(218, 208, 255, .95) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,248,255,.96)) !important;
    box-shadow: 0 18px 46px rgba(29, 18, 76, .08) !important;
    color: #171047 !important;
    max-height: min(52vh, 520px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.jd-sql-help-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
}

.jd-sql-help-item {
    display: flex !important;
    flex-direction: column !important;
    gap: .42rem !important;
    min-width: 0 !important;
    padding: .82rem .9rem !important;
    border-radius: 17px !important;
    border: 1px solid rgba(218, 208, 255, .86) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 24px rgba(29, 18, 76, .045) !important;
}

.jd-sql-help-item-title {
    color: #171047 !important;
    font-size: .94rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
}

.jd-sql-help-item-copy {
    color: rgba(23,16,71,.66) !important;
    font-size: .82rem !important;
    line-height: 1.38 !important;
    font-weight: 650 !important;
}

.jd-sql-help-chipline {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .36rem !important;
    min-width: 0 !important;
}

.jd-sql-help-chipline code {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .24rem .46rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(235, 46, 134, .16) !important;
    background: rgba(235, 46, 134, .06) !important;
    color: #d62074 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: .7rem !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

.jd-sql-help-examples {
    display: grid !important;
    gap: .48rem !important;
    margin-top: .85rem !important;
    padding-top: .85rem !important;
    border-top: 1px solid rgba(123,97,255,.14) !important;
}

.jd-sql-help-examples > span {
    color: #171047 !important;
    font-size: .9rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
}

.jd-sql-help-examples code {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .58rem .68rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(218, 208, 255, .9) !important;
    background: #faf8ff !important;
    color: #4d2fff !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    font-size: .74rem !important;
    line-height: 1.45 !important;
    font-weight: 750 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 720px) {
    .jd-sql-help-card { margin: .55rem 0 .9rem !important; }
    .jd-sql-help-summary { padding: .24rem .54rem .24rem .3rem !important; gap: .42rem !important; }
    .jd-sql-help-icon { width: 1.18rem !important; height: 1.18rem !important; flex-basis: 1.18rem !important; }
    .jd-sql-help-title { font-size: .9rem !important; }
    .jd-sql-help-panel { padding: .75rem !important; max-height: 48vh !important; border-radius: 20px !important; }
    .jd-sql-help-list { grid-template-columns: 1fr !important; gap: .55rem !important; }
    .jd-sql-help-item { padding: .72rem .78rem !important; border-radius: 16px !important; }
    .jd-sql-help-chipline code { font-size: .67rem !important; padding: .22rem .4rem !important; }
    .jd-sql-help-examples code { font-size: .67rem !important; }
}

/* Technical test start gate v20260610-start-before-timer */
.jd-test-start-panel {
    width: min(760px, 100%);
    margin: 12px auto 8px;
    padding: 34px 28px;
    border: 1px solid rgba(123, 97, 255, .18);
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(248,247,255,.96), rgba(255,255,255,.98));
    box-shadow: 0 24px 62px rgba(18, 11, 70, .10);
    text-align: center;
    color: #160d4f;
}
.jd-test-start-kicker {
    margin-bottom: 8px;
    color: #7b61ff;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.jd-test-start-panel h3 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.04em;
}
.jd-test-start-panel p {
    max-width: 580px;
    margin: 12px auto 0;
    color: rgba(22, 13, 79, .72);
    font-weight: 700;
    line-height: 1.45;
}
.jd-test-start-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px auto 24px;
}
.jd-test-start-stats span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(123, 97, 255, .10);
    color: #21145f;
    font-weight: 900;
}
.jd-test-start-btn {
    min-height: 58px;
    border: 0;
    border-radius: 999px;
    padding: 0 20px 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #fff;
    background: linear-gradient(135deg, #7b35ff, #5227ff);
    box-shadow: 0 18px 38px rgba(95, 44, 255, .24);
    font-size: 1.06rem;
    font-weight: 950;
    cursor: pointer;
}
.jd-test-start-btn b {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5227ff;
    background: rgba(255,255,255,.90);
    font-size: 2.35rem;
    font-weight: 800;
    line-height: .78;
    padding-bottom: 4px;
}
.jd-test-start-btn:hover { transform: translateY(-1px); }
.jd-test-start-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (max-width: 640px) {
    .jd-test-start-panel { padding: 26px 18px; border-radius: 24px; }
    .jd-test-start-btn { width: 100%; }
}

/* Technical test start gate polish v20260610-premium-ui */
.jd-dashboard-test-body .jd-test-start-panel-premium,
.jd-ai-test-body .jd-test-start-panel-premium,
.jd-test-start-panel-premium {
    position: relative !important;
    width: min(820px, calc(100% - 24px)) !important;
    margin: 14px auto 10px !important;
    padding: 38px 30px 34px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    text-align: center !important;
    color: #120b46 !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(123,97,255,.18), transparent 34%),
        radial-gradient(circle at 88% 14%, rgba(217,119,194,.14), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,246,255,.96)) !important;
    border: 1px solid rgba(124,58,237,.16) !important;
    box-shadow: 0 26px 76px rgba(18,11,70,.13) !important;
}
.jd-test-start-panel-premium::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.64), transparent) !important;
    transform: translateX(-72%) rotate(8deg) !important;
    opacity: .45 !important;
}
.jd-test-start-orb {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 14px !important;
    border-radius: 20px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, #120b46, #6337ff) !important;
    box-shadow: 0 20px 44px rgba(95,44,255,.28) !important;
    font-size: 1.45rem !important;
}
.jd-test-start-panel-premium .jd-test-start-kicker {
    margin-bottom: 9px !important;
    color: #6d35ff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}
.jd-test-start-panel-premium h3 {
    margin: 0 !important;
    color: #120b46 !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: .98 !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
}
.jd-test-start-panel-premium p {
    max-width: 640px !important;
    margin: 14px auto 0 !important;
    color: rgba(18,11,70,.68) !important;
    font-size: 1.02rem !important;
    font-weight: 760 !important;
    line-height: 1.5 !important;
}
.jd-test-start-panel-premium .jd-test-start-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: min(560px, 100%) !important;
    margin: 26px auto 26px !important;
}
.jd-test-start-panel-premium .jd-test-start-stat {
    min-height: 76px !important;
    padding: 12px 14px !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: #120b46 !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(124,58,237,.14) !important;
    box-shadow: 0 14px 36px rgba(18,11,70,.07) !important;
    white-space: normal !important;
}
.jd-test-start-panel-premium .jd-test-start-stat strong {
    display: block !important;
    font-size: 1.28rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
}
.jd-test-start-panel-premium .jd-test-start-stat em {
    display: block !important;
    color: rgba(18,11,70,.58) !important;
    font-style: normal !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}
.jd-test-start-panel-premium .jd-test-start-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 62px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 20px 0 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5327ff 56%, #321078 100%) !important;
    box-shadow: 0 22px 46px rgba(95,44,255,.30) !important;
    font-size: 1.08rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.jd-test-start-panel-premium .jd-test-start-btn b {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #5f2cff !important;
    background: #fff !important;
    font-size: 2.35rem !important;
    font-weight: 900 !important;
    line-height: .58 !important;
    transform: translateY(-1px) scaleX(1.18) !important;
    box-shadow: 0 12px 24px rgba(18,11,70,.16) !important;
    padding-bottom: 5px !important;
}
.jd-test-start-panel-premium .jd-test-start-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 28px 58px rgba(95,44,255,.36) !important;
    filter: saturate(1.05) !important;
}
.jd-test-start-panel-premium .jd-test-start-btn:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
@media (max-width: 720px) {
    .jd-dashboard-test-body .jd-test-start-panel-premium,
    .jd-ai-test-body .jd-test-start-panel-premium,
    .jd-test-start-panel-premium {
        width: 100% !important;
        margin: 8px auto !important;
        padding: 28px 18px 24px !important;
        border-radius: 26px !important;
    }
    .jd-test-start-panel-premium .jd-test-start-stats {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin: 20px auto 22px !important;
    }
    .jd-test-start-panel-premium .jd-test-start-stat {
        min-height: 62px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
    }
    .jd-test-start-panel-premium .jd-test-start-btn {
        width: 100% !important;
    }
}

/* Technical test start gate final premium design v20260610-site-spirit */
.jd-test-start-gate{position:relative;isolation:isolate;width:min(880px,calc(100% - 18px));margin:10px auto 8px;padding:0;border-radius:34px;overflow:hidden;color:#130a4d;background:linear-gradient(135deg,#ffffff 0%,#fbfaff 46%,#f5f1ff 100%);border:1px solid rgba(124,58,237,.16);box-shadow:0 30px 90px rgba(18,11,70,.14)}
.jd-test-start-gate:before{content:"";position:absolute;inset:-42% -14% auto -14%;height:72%;background:radial-gradient(circle at 20% 35%,rgba(123,97,255,.24),transparent 35%),radial-gradient(circle at 78% 16%,rgba(217,119,194,.22),transparent 34%);filter:blur(4px);z-index:-1}.jd-test-start-gate:after{content:"";position:absolute;right:-72px;bottom:-98px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(123,97,255,.18),transparent 62%);z-index:-1}
.jd-test-start-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:stretch;padding:34px}.jd-test-start-main{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.jd-test-start-badge{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 13px;border-radius:999px;background:rgba(123,97,255,.11);color:#6d35ff;font-size:.78rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.jd-test-start-badge i{font-size:1rem}.jd-test-start-main h3{margin:20px 0 0;color:#120b46;font-size:clamp(2.1rem,4.2vw,3.35rem);line-height:.95;font-weight:950;letter-spacing:-.06em}.jd-test-start-main p{max-width:650px;margin:14px 0 0;color:rgba(18,11,70,.66);font-size:1.06rem;font-weight:740;line-height:1.52}.jd-test-start-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}.jd-test-start-btn{appearance:none;-webkit-appearance:none;min-height:62px;border:0;border-radius:999px;padding:0 18px 0 28px;display:inline-flex;align-items:center;justify-content:center;gap:14px;color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#5327ff 58%,#321078 100%);box-shadow:0 22px 48px rgba(95,44,255,.32);font-size:1.08rem;font-weight:950;line-height:1;cursor:pointer;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.jd-test-start-btn i{width:38px;height:38px;border-radius:999px;display:inline-grid;place-items:center;color:#5f2cff;background:#fff;font-size:1.2rem;font-weight:950;box-shadow:0 12px 24px rgba(18,11,70,.16)}.jd-test-start-btn:hover{transform:translateY(-2px);box-shadow:0 28px 58px rgba(95,44,255,.38);filter:saturate(1.04)}.jd-test-start-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.jd-test-start-note{color:rgba(18,11,70,.50);font-size:.92rem;font-weight:800}.jd-test-start-side{display:grid;gap:12px;align-content:center}.jd-test-start-stat{min-height:92px;padding:17px 18px;border-radius:24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;background:rgba(255,255,255,.78);border:1px solid rgba(124,58,237,.14);box-shadow:0 16px 38px rgba(18,11,70,.075);backdrop-filter:blur(12px)}.jd-test-start-stat strong{display:block;color:#120b46;font-size:1.45rem;font-weight:950;line-height:1;letter-spacing:-.035em}.jd-test-start-stat em{display:block;color:rgba(18,11,70,.58);font-style:normal;font-size:.82rem;font-weight:950;line-height:1.18;text-transform:uppercase;letter-spacing:.06em}.jd-test-start-footer{padding:16px 34px 28px;display:flex;gap:10px;align-items:center;color:rgba(18,11,70,.55);font-size:.9rem;font-weight:800}.jd-test-start-footer i{color:#6d35ff}.jd-test-start-warning{margin-top:14px;color:#b45309;font-weight:900}.jd-test-start-panel,.jd-test-start-panel-premium{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;width:100%!important}.jd-test-start-panel-premium:before{display:none!important}
@media(max-width:820px){.jd-test-start-shell{grid-template-columns:1fr;padding:26px 18px}.jd-test-start-side{grid-template-columns:repeat(3,minmax(0,1fr))}.jd-test-start-stat{min-height:78px;align-items:center;text-align:center;padding:12px 10px}.jd-test-start-footer{padding:4px 18px 22px}.jd-test-start-actions,.jd-test-start-btn{width:100%}.jd-test-start-btn{justify-content:space-between}}@media(max-width:520px){.jd-test-start-gate{border-radius:26px;width:100%;}.jd-test-start-main h3{font-size:2.05rem}.jd-test-start-side{grid-template-columns:1fr}.jd-test-start-stat{min-height:62px;flex-direction:row;justify-content:space-between;text-align:left;padding:13px 16px}.jd-test-start-note{display:none}}

/* pages-v41: hide only the browser/page vertical scrollbar; scrolling still works. */
html,
body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}


/* gallery-nav-v42: robust Gallery navbar auto-hide class. */
body.jd-gallery-page .jd-navbar-wrap {
    transform: translateY(0);
    transition: transform .18s ease !important;
    will-change: transform;
}

body.jd-gallery-page .jd-navbar-wrap.nav-hidden {
    transform: translateY(calc(-100% - 2px)) !important;
}


/* v45 Friends drawer: open over the current page, but do not lock or auto-scroll the page.
   The page scrolls outside the right drawer; the drawer body scrolls when hovered/touched. */
.jd-friends-overlay,
.jd-friends-overlay.is-open {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

html.jd-friends-open-passive,
body.jd-friends-open-passive,
html.jd-friends-scroll-locked,
body.jd-friends-scroll-locked {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    padding-right: 0 !important;
    overscroll-behavior: auto !important;
}

.jd-friends-drawer,
.jd-friends-drawer.is-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.jd-friends-drawer-body {
    height: calc(100dvh - 70px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

.jd-friends-drawer-body::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

.jd-friends-drawer-body::-webkit-scrollbar-thumb {
    background: rgba(18, 11, 70, .24) !important;
    border-radius: 999px !important;
}

.jd-friends-drawer-body::-webkit-scrollbar-track {
    background: rgba(18, 11, 70, .05) !important;
}

/* Friends close button mirrors Advanced filters X. */
.jd-friends-close {
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #f3f0ff !important;
    color: #160f43 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.jd-friends-close:hover {
    transform: translateY(-1px) !important;
    background: #eee8ff !important;
    box-shadow: 0 14px 30px rgba(19, 11, 70, .10) !important;
}

.jd-friends-close i {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* v46 Friends drawer/modal scroll polish:
   - Friends opens exactly over the current page position, without body locking/autoscroll.
   - Scroll inside Friends stays inside the drawer and does not affect Gallery navbar autohide.
   - Page scrollbar remains hidden, modal scrollbars remain visible. */
html.jd-friends-open-passive,
body.jd-friends-open-passive {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding-right: 0 !important;
    scroll-behavior: auto !important;
}

.jd-friends-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    transform: translateX(100%) !important;
    transition: none !important;
    will-change: auto !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.jd-friends-drawer.is-open {
    transform: translateX(0) !important;
}

.jd-friends-drawer-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
}

.jd-friends-drawer-body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
}

.jd-friends-drawer-body::-webkit-scrollbar-thumb {
    background: rgba(18, 11, 70, .24) !important;
    border-radius: 999px !important;
}

.jd-friends-drawer-body::-webkit-scrollbar-track {
    background: rgba(18, 11, 70, .05) !important;
}

/* FINAL Friends drawer mobile layout: avatar first, text full-width, actions underneath. */
@media (max-width: 640px) {
    .jd-friends-drawer {
        width: min(100vw, 430px) !important;
        max-width: 100vw !important;
    }

    .jd-friends-drawer-body {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .jd-friends-v3 .jd-friend-row,
    .jd-friends-v3 .jd-friend-row.is-friend,
    .jd-friends-v3 .jd-friend-row.is-pending {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 18px 14px !important;
        text-align: center !important;
        min-height: auto !important;
    }

    .jd-friends-v3 .jd-friend-row > .jd-avatar-gallery-link,
    .jd-friends-v3 .jd-friend-row > a.jd-avatar-gallery-link {
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .jd-friends-v3 .jd-friend-row > .jd-avatar-gallery-link img,
    .jd-friends-v3 .jd-friend-row > img,
    .jd-friends-v3 .jd-friend-avatar-round {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
    }

    .jd-friends-v3 .jd-friend-row .jd-friend-main {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friend-row .jd-friend-main strong,
    .jd-friends-v3 .jd-friend-row .jd-friend-main span,
    .jd-friends-v3 .jd-friend-row .jd-friend-main time {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friend-actions-subtle,
    .jd-friends-v3 .jd-friend-row > .jd-friend-mini,
    .jd-friends-v3 .jd-friend-row > form,
    .jd-friends-v3 .jd-friend-row > button,
    .jd-friends-v3 .jd-friend-row > a.jd-friend-mini {
        order: 3 !important;
    }

    .jd-friends-v3 .jd-friend-actions-subtle {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 2px !important;
    }

    .jd-friends-v3 .jd-friend-mini,
    .jd-friends-v3 .jd-friend-icon-action {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .jd-friends-v3 .jd-friend-group-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 18px 14px !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-group-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-group-avatar {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
    }

    .jd-friends-v3 .jd-friend-group-row .jd-friend-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friend-group-row .jd-friend-main strong,
    .jd-friends-v3 .jd-friend-group-row .jd-friend-main span {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friend-group-row > .jd-group-chat-btn,
    .jd-friends-v3 .jd-friend-group-row > .jd-group-more {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 !important;
    }

    .jd-friends-v3 .jd-friend-group-row > .jd-group-chat-btn + .jd-group-more,
    .jd-friends-v3 .jd-friend-group-row > .jd-group-more + .jd-group-chat-btn {
        margin-left: 0 !important;
    }
}

/* Keep the left brand visually stable during navbar clicks/navigation. */
.jd-navbar .navbar-brand,
.jd-navbar .navbar-brand *,
.jd-brand-text {
    transition: none !important;
    animation: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.jd-navbar .navbar-brand:focus,
.jd-navbar .navbar-brand:active,
.jd-navbar .navbar-brand:hover {
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
}

.jd-friends-v3 .jd-group-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

@media (max-width: 640px) {
    .jd-friends-v3 .jd-group-row-actions {
        order: 3 !important;
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .jd-friends-v3 .jd-group-row-actions .jd-group-chat-btn,
    .jd-friends-v3 .jd-group-row-actions .jd-group-more {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 !important;
    }
}

/* FINAL MOBILE POLISH: Friends wall hero follows the same centered card rule
   as friend/group cards: avatar first, text under it, actions centered below. */
@media(max-width:640px) {
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim {
        text-align: center !important;
        align-items: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-hero-copy {
        text-align: left !important;
        align-self: stretch !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean,
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-actions.jd-fw-actions-clean {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 6px !important;
    }

    .jd-friends-v3 .jd-fw-summary {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-fw-copy {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-fw-copy strong,
    .jd-friends-v3 .jd-fw-copy small {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-fw-copy strong {
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    .jd-friends-v3 .jd-fw-copy small {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean > .jd-fw-chat-btn,
    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean > .jd-wall-avatar-form {
        display: inline-flex !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean {
        position: relative !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean::after {
        content: "" !important;
        display: block !important;
        clear: both !important;
    }

    .jd-friends-v3 .jd-fw-chat-btn,
    .jd-friends-v3 .jd-wall-avatar-pick {
        width: 46px !important;
        height: 46px !important;
    }

    .jd-friends-v3 .jd-wall-avatar-form {
        margin: 0 !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean .jd-fw-chat-btn {
        order: 2 !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean .jd-wall-avatar-form {
        order: 3 !important;
        margin-top: -56px !important;
        margin-left: 62px !important;
    }

    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean .jd-fw-summary {
        order: 1 !important;
    }
}

/* FINAL FIX: mobile Friends "Your circle" card: avatar on top, text centered, buttons below. */
@media (max-width: 640px) {
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-actions.jd-fw-actions-clean {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
        margin: 12px auto 0 !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-summary {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto 4px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-avatar {
        margin: 0 auto !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-copy {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-copy strong,
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-copy small {
        display: block !important;
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-chat-btn,
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-wall-avatar-form {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: inline-flex !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-chat-btn,
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-wall-avatar-pick {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
}

/* v49 FINAL: Friends mobile first card and avatars.
   The Your circle / Friends wall card must match the mobile card pattern:
   avatar on top, centered text, buttons centered underneath. */
@media (max-width: 640px) {
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        padding: 18px 14px !important;
        gap: 12px !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-hero-copy h3,
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-friends-hero-copy p {
        width: 100% !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-actions.jd-fw-actions-clean,
    .jd-friends-v3 .jd-fw-actions.jd-fw-actions-clean {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 52px 52px !important;
        grid-template-areas:
            "summary summary"
            "chat image" !important;
        justify-content: center !important;
        justify-items: center !important;
        align-items: center !important;
        column-gap: 14px !important;
        row-gap: 12px !important;
        margin: 4px auto 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-summary,
    .jd-friends-v3 .jd-fw-summary {
        grid-area: summary !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-avatar,
    .jd-friends-v3 .jd-fw-avatar {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        margin: 0 auto !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 / 1 !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-copy,
    .jd-friends-v3 .jd-fw-copy {
        width: 100% !important;
        max-width: 280px !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 2px !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-copy strong,
    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-copy small,
    .jd-friends-v3 .jd-fw-copy strong,
    .jd-friends-v3 .jd-fw-copy small {
        width: 100% !important;
        max-width: 280px !important;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-fw-chat-btn,
    .jd-friends-v3 .jd-fw-chat-btn {
        grid-area: chat !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        float: none !important;
        position: static !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-wall-avatar-form,
    .jd-friends-v3 .jd-wall-avatar-form {
        grid-area: image !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .jd-friends-v3 .jd-friends-hero.jd-friends-hero-slim .jd-wall-avatar-pick,
    .jd-friends-v3 .jd-wall-avatar-pick {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* v49 FINAL: make every Friends avatar a true circle on mobile, including broken-image fallbacks. */
@media (max-width: 640px) {
    .jd-friends-v3 .jd-fw-avatar,
    .jd-friends-v3 .jd-group-avatar,
    .jd-friends-v3 .jd-group-modal-avatar,
    .jd-friends-v3 .jd-friend-avatar-round,
    .jd-friends-v3 .jd-friend-row > img,
    .jd-friends-v3 .jd-avatar-gallery-link,
    .jd-friends-v3 .jd-avatar-gallery-link > img,
    .jd-group-modal .jd-friend-avatar-round,
    .jd-rejoin-request-row .jd-friend-avatar-round {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        flex: 0 0 64px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        object-fit: cover !important;
        object-position: center !important;
        text-align: center !important;
        line-height: 64px !important;
    }

    .jd-friends-v3 .jd-fw-avatar img,
    .jd-friends-v3 .jd-group-avatar img,
    .jd-friends-v3 .jd-group-modal-avatar img,
    .jd-friends-v3 .jd-avatar-gallery-link > img,
    .jd-friends-v3 img.jd-friend-avatar-round,
    .jd-group-modal img.jd-friend-avatar-round,
    .jd-rejoin-request-row img.jd-friend-avatar-round {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 50% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        aspect-ratio: 1 / 1 !important;
    }
}


/* v53: Comments avatar zoom must preserve the real source ratio. The source may be portrait or landscape; never square-crop in the viewer. */
.jd-zoom-modal.is-natural .jd-zoom-avatar {
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: 86vh !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.jd-zoom-modal.is-natural .jd-zoom-avatar img,
#jdZoomOverlay.is-natural #jdZoomImg {
    display: block !important;
    width: auto;
    height: auto;
    max-width: min(92vw, 1180px) !important;
    max-height: 86vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
}

@media (max-width: 640px) {
    .jd-zoom-modal.is-natural .jd-zoom-avatar img,
    #jdZoomOverlay.is-natural #jdZoomImg {
        max-width: 94vw !important;
        max-height: 82vh !important;
    }
}


/* v54: comment avatar zoom uses the exact clicked image source and must never be forced into a square frame. */
#jdZoomOverlay.is-natural .jd-zoom-avatar {
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: 86vh !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: transparent !important;
}

#jdZoomOverlay.is-natural #jdZoomImg {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(92vw, 1180px) !important;
    max-height: 86vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
}


/* v56 native back safety: no visual freeze, no hidden body, no animated scroll restore */
html.jd-restore-pending,
html.jd-scroll-restore-pending,
html.jd-restore-freeze,
html.jd-restoring-position,
html.jd-ajax-popstate-restoring,
html.jd-restore-pending body,
html.jd-scroll-restore-pending body,
html.jd-restore-freeze body,
html.jd-restoring-position body,
html.jd-ajax-popstate-restoring body {
    scroll-behavior: auto !important;
}

html.jd-restore-pending body,
html.jd-scroll-restore-pending body,
html.jd-restore-freeze body,
html.jd-restoring-position body,
html.jd-ajax-popstate-restoring body {
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

#jdRestoreVisualLock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* ===== Gallery image top pills: responsive left-aligned ellipsis ===== */
.jd-card-clean .jd-card-badges {
    min-width: 0 !important;
}

.jd-card-clean .jd-card-badges .jd-pill {
    min-width: 0 !important;
}

.jd-card-clean .jd-card-badges .jd-pill:first-child {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
    direction: ltr !important;
    max-width: min(58%, calc(100% - 118px)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.jd-card-clean .jd-card-badges .jd-pill.jd-pill-accent {
    flex: 0 1 auto !important;
    max-width: 46% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 576px) {
    .jd-card-clean .jd-card-badges .jd-pill:first-child {
        max-width: min(56%, calc(100% - 104px)) !important;
    }

    .jd-card-clean .jd-card-badges .jd-pill.jd-pill-accent {
        max-width: 44% !important;
    }
}


/* ===== FINAL FIX: Gallery top image pills responsive ellipsis ===== */
.jd-card-clean .jd-card-badges {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: hidden !important;
}

.jd-card-clean .jd-card-badges .jd-pill {
    min-width: 0 !important;
    height: 34px !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.jd-card-clean .jd-card-badges .jd-card-company-pill,
.jd-card-clean .jd-card-badges .jd-pill:first-child {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: calc(100% - 124px) !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.jd-card-clean .jd-card-badges .jd-pill.jd-pill-accent {
    flex: 0 1 auto !important;
    max-width: 48% !important;
    justify-content: center !important;
    text-align: center !important;
}

.jd-card-clean .jd-card-badges .jd-card-badge-text {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    direction: ltr !important;
}

.jd-card-clean .jd-card-badges .jd-card-company-pill .jd-card-badge-text,
.jd-card-clean .jd-card-badges .jd-pill:first-child .jd-card-badge-text {
    text-align: left !important;
}

@media (max-width: 576px) {
    .jd-card-clean .jd-card-badges {
        left: 10px !important;
        right: 10px !important;
        gap: 6px !important;
    }

    .jd-card-clean .jd-card-badges .jd-pill {
        height: 30px !important;
        font-size: 11px !important;
    }

    .jd-card-clean .jd-card-badges .jd-card-company-pill,
    .jd-card-clean .jd-card-badges .jd-pill:first-child {
        max-width: calc(100% - 108px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .jd-card-clean .jd-card-badges .jd-pill.jd-pill-accent {
        max-width: 46% !important;
    }
}

/* ===== ABSOLUTE FINAL: Gallery top-left company pill must ellipsize ===== */
.jd-card-clean .jd-card-media .jd-card-badges,
.jd-card-clean .jd-card-badges {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, max-content) max-content !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 8px !important;
    overflow: hidden !important;
}

.jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill,
.jd-card-clean .jd-card-badges > .jd-card-company-pill,
.jd-card-clean .jd-card-media .jd-card-badges > .jd-pill:first-child,
.jd-card-clean .jd-card-badges > .jd-pill:first-child {
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 160px !important;
    max-width: clamp(76px, 42%, 160px) !important;
    flex: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    box-sizing: border-box !important;
}

.jd-card-clean .jd-card-media .jd-card-badges > .jd-pill.jd-pill-accent,
.jd-card-clean .jd-card-badges > .jd-pill.jd-pill-accent {
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 128px !important;
    flex: none !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill > .jd-card-badge-text,
.jd-card-clean .jd-card-badges > .jd-card-company-pill > .jd-card-badge-text,
.jd-card-clean .jd-card-media .jd-card-badges > .jd-pill:first-child > .jd-card-badge-text,
.jd-card-clean .jd-card-badges > .jd-pill:first-child > .jd-card-badge-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    direction: ltr !important;
}

@media (max-width: 576px) {
    .jd-card-clean .jd-card-media .jd-card-badges,
    .jd-card-clean .jd-card-badges {
        left: 10px !important;
        right: 10px !important;
        column-gap: 6px !important;
    }

    .jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill,
    .jd-card-clean .jd-card-badges > .jd-card-company-pill,
    .jd-card-clean .jd-card-media .jd-card-badges > .jd-pill:first-child,
    .jd-card-clean .jd-card-badges > .jd-pill:first-child {
        max-width: 136px !important;
        max-width: clamp(62px, 39%, 136px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .jd-card-clean .jd-card-media .jd-card-badges > .jd-pill.jd-pill-accent,
    .jd-card-clean .jd-card-badges > .jd-pill.jd-pill-accent {
        max-width: 116px !important;
    }
}

/* ===== FINAL HARD FIX: Gallery image top-left pill ellipsis, left aligned =====
   This targets ONLY the company pill rendered over Gallery card images.
   The pill must have a real maximum width; otherwise text-overflow cannot produce ...
*/
.jd-card-clean .jd-card-media .jd-card-badges > .jd-gallery-company-pill,
.jd-card-clean .jd-card-badges > .jd-gallery-company-pill,
.jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill,
.jd-card-clean .jd-card-badges > .jd-card-company-pill {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 150px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.jd-card-clean .jd-card-media .jd-card-badges > .jd-gallery-company-pill > .jd-gallery-company-text,
.jd-card-clean .jd-card-badges > .jd-gallery-company-pill > .jd-gallery-company-text,
.jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill > .jd-card-badge-text,
.jd-card-clean .jd-card-badges > .jd-card-company-pill > .jd-card-badge-text {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    direction: ltr !important;
}

@media (max-width: 576px) {
    .jd-card-clean .jd-card-media .jd-card-badges > .jd-gallery-company-pill,
    .jd-card-clean .jd-card-badges > .jd-gallery-company-pill,
    .jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill,
    .jd-card-clean .jd-card-badges > .jd-card-company-pill {
        max-width: 118px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 390px) {
    .jd-card-clean .jd-card-media .jd-card-badges > .jd-gallery-company-pill,
    .jd-card-clean .jd-card-badges > .jd-gallery-company-pill,
    .jd-card-clean .jd-card-media .jd-card-badges > .jd-card-company-pill,
    .jd-card-clean .jd-card-badges > .jd-card-company-pill {
        max-width: 96px !important;
    }
}

/* jd-scroll-v417: single clean scrollbar system.
   Page scrollbar is a purple overlay thumb only; the native reserved white gutter is hidden.
   Internal modal/drawer scrollbars keep a purple thumb but transparent track/no white rail. */
:root {
    --jd-scroll-thumb: rgba(124, 92, 255, .76);
    --jd-scroll-thumb-hover: rgba(95, 44, 255, .92);
}

@media (min-width: 769px) {
    html,
    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scrollbar-gutter: auto !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    html::-webkit-scrollbar-track-piece,
    body::-webkit-scrollbar-track-piece,
    html::-webkit-scrollbar-corner,
    body::-webkit-scrollbar-corner,
    html::-webkit-scrollbar-button,
    body::-webkit-scrollbar-button {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #jd-page-scroll-thumb-v417 {
        position: fixed !important;
        top: 4px;
        right: 2px;
        width: 6px;
        min-height: 34px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(166, 137, 255, .98), rgba(124, 92, 255, .86));
        border: 0 !important;
        box-shadow: 0 6px 18px rgba(95, 44, 255, .18);
        z-index: 2147483000;
        opacity: 0;
        pointer-events: auto;
        cursor: default !important;
        transform: translate3d(0,0,0);
        transition: opacity .12s ease;
    }

    html.jd-page-scrollbar-ready #jd-page-scroll-thumb-v417,
    body.jd-page-scrollbar-dragging #jd-page-scroll-thumb-v417,
    body.jd-page-scrollbar-hover #jd-page-scroll-thumb-v417 {
        opacity: 1;
    }

    body.jd-page-scrollbar-dragging,
    body.jd-page-scrollbar-dragging * {
        user-select: none !important;
        cursor: default !important;
    }

    body.jd-page-scrollbar-hidden #jd-page-scroll-thumb-v417,
    body.jd-media-modal-open #jd-page-scroll-thumb-v417,
    body.modal-open #jd-page-scroll-thumb-v417 {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .jd-adv-drawer,
    .jd-adv-body,
    .jd-admin-broadcast-filter-drawer,
    .jd-admin-broadcast-filter-drawer .jd-adv-body,
    .insights-sidebar__body,
    .jd-card-comments,
    .jd-card-comments .jd-comments-list,
    .jd-author-panel,
    .jd-author-posts,
    .jd-friends-drawer-body,
    .jd-group-modal,
    .jd-group-modal-card,
    .jd-wow-modal-root.jd-wow-mode-match .jd-wow-body,
    .jd-wow-ajax-body,
    .jd-wow-page-body,
    .jd-details-overlay-scroller,
    .jd-ai-test-body,
    .jd-dashboard-test-body,
    .jd-contact-modal,
    .jd-contact-card,
    .jd-sql-modal,
    .jd-home-sql-modal,
    .jd-thread-list,
    .jd-chat-body,
    .jd-chat-details-body {
        scrollbar-width: thin !important;
        scrollbar-color: var(--jd-scroll-thumb) transparent !important;
        -ms-overflow-style: auto !important;
        scrollbar-gutter: auto !important;
    }

    .jd-adv-drawer::-webkit-scrollbar,
    .jd-adv-body::-webkit-scrollbar,
    .jd-admin-broadcast-filter-drawer::-webkit-scrollbar,
    .jd-admin-broadcast-filter-drawer .jd-adv-body::-webkit-scrollbar,
    .insights-sidebar__body::-webkit-scrollbar,
    .jd-card-comments::-webkit-scrollbar,
    .jd-card-comments .jd-comments-list::-webkit-scrollbar,
    .jd-author-panel::-webkit-scrollbar,
    .jd-author-posts::-webkit-scrollbar,
    .jd-friends-drawer-body::-webkit-scrollbar,
    .jd-group-modal::-webkit-scrollbar,
    .jd-group-modal-card::-webkit-scrollbar,
    .jd-wow-modal-root.jd-wow-mode-match .jd-wow-body::-webkit-scrollbar,
    .jd-wow-ajax-body::-webkit-scrollbar,
    .jd-wow-page-body::-webkit-scrollbar,
    .jd-details-overlay-scroller::-webkit-scrollbar,
    .jd-ai-test-body::-webkit-scrollbar,
    .jd-dashboard-test-body::-webkit-scrollbar,
    .jd-contact-modal::-webkit-scrollbar,
    .jd-contact-card::-webkit-scrollbar,
    .jd-sql-modal::-webkit-scrollbar,
    .jd-home-sql-modal::-webkit-scrollbar,
    .jd-thread-list::-webkit-scrollbar,
    .jd-chat-body::-webkit-scrollbar,
    .jd-chat-details-body::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
        display: block !important;
        background: transparent !important;
    }

    .jd-adv-drawer::-webkit-scrollbar-thumb,
    .jd-adv-body::-webkit-scrollbar-thumb,
    .jd-admin-broadcast-filter-drawer::-webkit-scrollbar-thumb,
    .jd-admin-broadcast-filter-drawer .jd-adv-body::-webkit-scrollbar-thumb,
    .insights-sidebar__body::-webkit-scrollbar-thumb,
    .jd-card-comments::-webkit-scrollbar-thumb,
    .jd-card-comments .jd-comments-list::-webkit-scrollbar-thumb,
    .jd-author-panel::-webkit-scrollbar-thumb,
    .jd-author-posts::-webkit-scrollbar-thumb,
    .jd-friends-drawer-body::-webkit-scrollbar-thumb,
    .jd-group-modal::-webkit-scrollbar-thumb,
    .jd-group-modal-card::-webkit-scrollbar-thumb,
    .jd-wow-modal-root.jd-wow-mode-match .jd-wow-body::-webkit-scrollbar-thumb,
    .jd-wow-ajax-body::-webkit-scrollbar-thumb,
    .jd-wow-page-body::-webkit-scrollbar-thumb,
    .jd-details-overlay-scroller::-webkit-scrollbar-thumb,
    .jd-ai-test-body::-webkit-scrollbar-thumb,
    .jd-dashboard-test-body::-webkit-scrollbar-thumb,
    .jd-contact-modal::-webkit-scrollbar-thumb,
    .jd-contact-card::-webkit-scrollbar-thumb,
    .jd-sql-modal::-webkit-scrollbar-thumb,
    .jd-home-sql-modal::-webkit-scrollbar-thumb,
    .jd-thread-list::-webkit-scrollbar-thumb,
    .jd-chat-body::-webkit-scrollbar-thumb,
    .jd-chat-details-body::-webkit-scrollbar-thumb {
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(166, 137, 255, .96), rgba(124, 92, 255, .84)) !important;
        border: 0 !important;
        box-shadow: none !important;
        min-height: 36px !important;
    }

    .jd-adv-drawer::-webkit-scrollbar-track,
    .jd-adv-body::-webkit-scrollbar-track,
    .jd-admin-broadcast-filter-drawer::-webkit-scrollbar-track,
    .jd-admin-broadcast-filter-drawer .jd-adv-body::-webkit-scrollbar-track,
    .insights-sidebar__body::-webkit-scrollbar-track,
    .jd-card-comments::-webkit-scrollbar-track,
    .jd-card-comments .jd-comments-list::-webkit-scrollbar-track,
    .jd-author-panel::-webkit-scrollbar-track,
    .jd-author-posts::-webkit-scrollbar-track,
    .jd-friends-drawer-body::-webkit-scrollbar-track,
    .jd-group-modal::-webkit-scrollbar-track,
    .jd-group-modal-card::-webkit-scrollbar-track,
    .jd-wow-modal-root.jd-wow-mode-match .jd-wow-body::-webkit-scrollbar-track,
    .jd-wow-ajax-body::-webkit-scrollbar-track,
    .jd-wow-page-body::-webkit-scrollbar-track,
    .jd-details-overlay-scroller::-webkit-scrollbar-track,
    .jd-ai-test-body::-webkit-scrollbar-track,
    .jd-dashboard-test-body::-webkit-scrollbar-track,
    .jd-contact-modal::-webkit-scrollbar-track,
    .jd-contact-card::-webkit-scrollbar-track,
    .jd-sql-modal::-webkit-scrollbar-track,
    .jd-home-sql-modal::-webkit-scrollbar-track,
    .jd-thread-list::-webkit-scrollbar-track,
    .jd-chat-body::-webkit-scrollbar-track,
    .jd-chat-details-body::-webkit-scrollbar-track,
    .simplebar-track,
    .ps__rail-y,
    .ps__rail-x,
    .os-scrollbar-track,
    .jd-fake-scrollbar,
    .jd-scrollbar-rail,
    .jd-page-scrollbar-rail,
    .jd-page-scroll-thumb,
    #jd-page-scroll-thumb {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    html,
    body,
    html *,
    body * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    html *::-webkit-scrollbar,
    body *::-webkit-scrollbar {
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    #jd-page-scroll-thumb-v417 {
        display: none !important;
    }
}

body.jd-delete-modal-open,
body.jd-delete-modal-open.modal-open {
    overflow-y: auto !important;
    position: static !important;
    padding-right: 0 !important;
    scrollbar-gutter: auto !important;
}

#jdDeleteForeverModal {
    overflow: hidden !important;
}

#jdDeleteForeverModal .modal-dialog {
    transform: none !important;
}

#jdDeleteForeverModal.jd-delete-keep-open {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

#jdDeleteForeverModal.jd-delete-keep-open .modal-dialog {
    transform: none !important;
}

.modal-backdrop.jd-delete-keep-backdrop {
    opacity: 1 !important;
    background: rgba(232, 232, 242, .72) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

/* v418: card-launched modal policy. When a real modal is opened from a card,
   the page underneath stays fixed; only the modal surface scrolls. */
body.jd-card-modal-open:not(.jd-delete-modal-open) {
    overflow: hidden !important;
    padding-right: 0 !important;
}

body.jd-card-modal-open:not(.jd-delete-modal-open) .modal.show {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

html.jd-restoring-modal-context,
html.jd-restoring-modal-context body {
    scroll-behavior: auto !important;
}

/* v419: live-panel details layer. Opens Details above Comments/Public-cards/Match side panels without closing them. */
.jd-live-panel-page-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:2147482500!important;
    display:none!important;
    pointer-events:none!important;
    background:rgba(19,13,44,.14)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
}
.jd-live-panel-page-overlay.is-open{
    display:block!important;
    pointer-events:auto!important;
}
.jd-live-panel-page-panel{
    position:absolute!important;
    inset:18px 18px 18px auto!important;
    width:min(920px, calc(100vw - 36px))!important;
    border-radius:28px!important;
    background:#fff!important;
    box-shadow:0 30px 90px rgba(27,18,77,.24)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}
.jd-live-panel-page-head{
    height:64px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:12px 16px!important;
    border-bottom:1px solid rgba(119,91,255,.14)!important;
    background:rgba(255,255,255,.96)!important;
}
.jd-live-panel-page-back,
.jd-live-panel-page-close{
    border:0!important;
    background:#fff!important;
    color:#21164f!important;
    font-weight:900!important;
    border-radius:999px!important;
    min-height:40px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    box-shadow:0 12px 28px rgba(79,54,190,.14)!important;
}
.jd-live-panel-page-back{padding:0 16px!important;}
.jd-live-panel-page-close{width:42px!important;height:42px!important;}
.jd-live-panel-page-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:auto!important;
    padding:18px!important;
    scrollbar-width:none!important;
}
.jd-live-panel-page-body::-webkit-scrollbar{width:0!important;height:0!important;background:transparent!important;}
.jd-live-panel-page-loading,
.jd-live-panel-page-error{
    min-height:260px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#6f6792!important;
    font-weight:900!important;
}
@media (max-width:768px){
    .jd-live-panel-page-panel{inset:8px!important;width:auto!important;border-radius:22px!important;}
}

/* v420: freeze the whole navbar/brand visually while a navbar click is being resolved.
   Prevents logo/text flash, focus-shadow flash and tiny transform flicker during rapid random clicks. */
html.jd-navbar-click-stable .jd-navbar-wrap,
body.jd-navbar-click-stable .jd-navbar-wrap,
html.jd-navbar-click-stable .jd-navbar,
body.jd-navbar-click-stable .jd-navbar,
html.jd-navbar-click-stable .navbar-brand,
body.jd-navbar-click-stable .navbar-brand,
html.jd-navbar-click-stable .navbar-brand *,
body.jd-navbar-click-stable .navbar-brand *,
html.jd-navbar-click-stable .jd-logo,
body.jd-navbar-click-stable .jd-logo,
html.jd-navbar-click-stable .jd-logo *,
body.jd-navbar-click-stable .jd-logo *,
html.jd-navbar-click-stable .jd-brand-text,
body.jd-navbar-click-stable .jd-brand-text,
html.jd-navbar-click-stable .jd-navbar a,
body.jd-navbar-click-stable .jd-navbar a,
html.jd-navbar-click-stable .jd-navbar button,
body.jd-navbar-click-stable .jd-navbar button {
    transition: none !important;
    animation: none !important;
    transform: translateZ(0) !important;
    filter: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html.jd-navbar-click-stable .jd-navbar-wrap.nav-hidden,
body.jd-navbar-click-stable .jd-navbar-wrap.nav-hidden,
html.jd-navbar-click-stable .jd-navbar-wrap.jd-gallery-nav-hidden,
body.jd-navbar-click-stable .jd-navbar-wrap.jd-gallery-nav-hidden {
    transform: translateY(0) translateZ(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.jd-navbar .navbar-brand,
.jd-navbar .navbar-brand:focus,
.jd-navbar .navbar-brand:focus-visible,
.jd-navbar .navbar-brand:active,
.jd-navbar .navbar-brand:hover,
.jd-navbar .navbar-brand *,
.jd-navbar .jd-logo,
.jd-navbar .jd-logo *,
.jd-navbar .jd-brand-text {
    transition: none !important;
    animation: none !important;
    filter: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* v100 clean global rules: consolidated navbar, Gallery infinite scroll, Insights drawer scroll and video glass backdrop. */
html.jd-nav-hard-navigating,
body.jd-nav-hard-navigating {
    scroll-behavior: auto !important;
}

html.jd-nav-hard-navigating #jdSpinner,
body.jd-nav-hard-navigating #jdSpinner,
html.jd-navbar-click-stable #jdSpinner,
body.jd-navbar-click-stable #jdSpinner {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.jd-navbar-click-stable .jd-navbar-wrap,
body.jd-navbar-click-stable .jd-navbar-wrap,
html.jd-nav-hard-navigating .jd-navbar-wrap,
body.jd-nav-hard-navigating .jd-navbar-wrap,
html.jd-navbar-click-stable .jd-navbar,
body.jd-navbar-click-stable .jd-navbar,
html.jd-nav-hard-navigating .jd-navbar,
body.jd-nav-hard-navigating .jd-navbar {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    filter: none !important;
    will-change: auto !important;
    transition: none !important;
    animation: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

.jd-navbar-wrap .navbar-brand.jd-scroll-brand,
.jd-navbar-wrap .navbar-brand.jd-scroll-brand:visited,
.jd-navbar-wrap .navbar-brand.jd-scroll-brand:hover,
.jd-navbar-wrap .navbar-brand.jd-scroll-brand:focus,
.jd-navbar-wrap .navbar-brand.jd-scroll-brand:focus-visible,
.jd-navbar-wrap .navbar-brand.jd-scroll-brand:active,
html.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
body.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
html.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
body.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    min-width: 190px !important;
    height: 72px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    contain: layout paint !important;
    color: #212529 !important;
    background: transparent !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    will-change: auto !important;
    transition: none !important;
    animation: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    text-rendering: auto !important;
}

.jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-logo-img,
.jd-navbar-wrap .navbar-brand.jd-scroll-brand img.jd-brand-logo-img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    flex: 0 0 30px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

.jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
html.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
body.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
html.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
body.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text {
    flex: 0 0 auto !important;
    display: inline-block !important;
    min-width: 142px !important;
    margin-left: .5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    color: #212529 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
    font-synthesis: none !important;
    transition: none !important;
    animation: none !important;
}

@media (max-width: 767.98px) {
    .jd-navbar-wrap .navbar-brand.jd-scroll-brand {
        min-width: 40px !important;
        height: 64px !important;
    }
    .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text {
        display: none !important;
        min-width: 0 !important;
    }
}

.jd-navbar a[data-jd-nav-clicked],
.jd-navbar a[data-jd-nav-locked] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#jd-page-scroll-thumb-v417,
#jd-page-scroll-thumb-v417 *,
.jd-page-scrollbar,
.jd-page-scrollbar * {
    cursor: default !important;
}

.jd-infinite-scroll-reserve,
.jd-infinite-scroll-reserve.is-active,
body.jd-gallery-page .jd-infinite-scroll-reserve,
body.jd-gallery-page .jd-infinite-scroll-reserve.is-active,
html.jd-gallery-page .jd-infinite-scroll-reserve,
html.jd-gallery-page .jd-infinite-scroll-reserve.is-active {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.jd-gallery-page #jdGalleryGrid,
html.jd-gallery-page #jdGalleryGrid,
body.jd-gallery-page #jdGalleryGrid.jd-gallery-infinite-loading,
html.jd-gallery-page #jdGalleryGrid.jd-gallery-infinite-loading {
    overflow-anchor: none !important;
    content-visibility: visible !important;
}

body.jd-gallery-page #jdGalleryGrid .jd-skeleton-card,
html.jd-gallery-page #jdGalleryGrid .jd-skeleton-card,
body.jd-gallery-page #jdGalleryGrid [data-jd-skeleton="1"],
html.jd-gallery-page #jdGalleryGrid [data-jd-skeleton="1"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 430px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 18px 45px rgba(18,17,58,.055) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    overflow-anchor: none !important;
}

body.jd-gallery-page #jdGalleryGrid .jd-skeleton-media,
html.jd-gallery-page #jdGalleryGrid .jd-skeleton-media,
body.jd-gallery-page #jdGalleryGrid .jd-skeleton-line,
html.jd-gallery-page #jdGalleryGrid .jd-skeleton-line {
    animation: none !important;
    transition: none !important;
    background-size: 100% 100% !important;
}

body.jd-gallery-page .jd-footer,
html.jd-gallery-page .jd-footer,
body.jd-gallery-page.jd-gallery-infinite-loading .jd-footer,
html.jd-gallery-page.jd-gallery-infinite-loading .jd-footer {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

html.jd-video-closing-stable,
body.jd-video-closing-stable,
html.jd-video-closing-stable .jd-main,
body.jd-video-closing-stable .jd-main,
html.jd-video-closing-stable .jd-gallery-grid,
body.jd-video-closing-stable .jd-gallery-grid,
html.jd-video-closing-stable .jd-dashboard-grid,
body.jd-video-closing-stable .jd-dashboard-grid {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
}

html.jd-video-closing-stable #jdVideoModal,
body.jd-video-closing-stable #jdVideoModal,
#jdVideoModal.jd-video-closing-now,
#jdVideoModal.jd-video-closing-now .modal-dialog,
#jdVideoModal.jd-video-closing-now .modal-content,
html.jd-video-closing-stable .modal-backdrop.jd-video-backdrop,
body.jd-video-closing-stable .modal-backdrop.jd-video-backdrop,
html.jd-video-closing-stable .modal-backdrop.jd-video-manual-backdrop,
body.jd-video-closing-stable .modal-backdrop.jd-video-manual-backdrop {
    transition: none !important;
    animation: none !important;
}

.modal-backdrop.show.jd-video-backdrop,
.modal-backdrop.jd-video-backdrop,
.modal-backdrop.show.jd-video-manual-backdrop,
.modal-backdrop.jd-video-manual-backdrop {
    background: rgba(255, 255, 255, .52) !important;
    opacity: 1 !important;
    backdrop-filter: blur(17px) saturate(172%) brightness(1.07) !important;
    -webkit-backdrop-filter: blur(17px) saturate(172%) brightness(1.07) !important;
}

body.jd-video-closing-stable .modal-backdrop.jd-video-backdrop,
body.jd-video-closing-stable .modal-backdrop.jd-video-manual-backdrop {
    background: rgba(255, 255, 255, .58) !important;
    backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
    -webkit-backdrop-filter: blur(19px) saturate(176%) brightness(1.10) !important;
}

html.jd-insights-sidebar-open #jd-page-scroll-thumb-v417,
body.jd-insights-sidebar-open #jd-page-scroll-thumb-v417 {
    pointer-events: auto !important;
}

body.jd-media-modal-open .jd-navbar-wrap {
    z-index: var(--jd-app-under-media-z, 2147483000) !important;
}

/* v101: photo/image modal uses the inverted counterpart of the bright video glass backdrop.
   Video stays white/glass; photos get a dark inverted glass layer only. */
#jdZoomOverlay.jd-zoom-modal,
.jd-zoom-modal {
    background: rgba(0, 0, 0, .52) !important;
    backdrop-filter: blur(17px) saturate(172%) brightness(.86) invert(1) !important;
    -webkit-backdrop-filter: blur(17px) saturate(172%) brightness(.86) invert(1) !important;
}

#jdZoomOverlay.jd-zoom-modal.is-open,
.jd-zoom-modal.is-open {
    background: rgba(0, 0, 0, .52) !important;
}



/* v102: global defensive wrapping. Long URLs/tokens must never escape cards, modals, drawers or details. */
:where(.jd-main, main, .modal, .jd-details-overlay, #jdDetailsOverlay, .jd-card-clean, .jd-card-comments, .jd-author-panel, .insights-sidebar, .insights-sidebar__panel, .insights-sidebar__body, .jd-live-panel-page-overlay, .jd-wow-modal-root, .jd-wow-page-root) :where(p, span, div, a, li, td, th, dd, dt, label, small, strong, em, h1, h2, h3, h4, h5, h6, .jd-card-title, .jd-card-desc, .jd-field-value, .jd-detail-value) {
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
}

:where(.jd-main, main, .modal, .jd-details-overlay, #jdDetailsOverlay, .jd-card-clean, .jd-card-comments, .jd-author-panel, .insights-sidebar) :where(a[href]) {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* Keep the navbar brand exempt from global wrapping/word-break rules. */
.jd-navbar-wrap,
.jd-navbar-wrap * {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* v102: when video opens above the Insights side drawer, keep navbar under the drawer. */
body.jd-media-modal-open .insights-sidebar,
body.jd-media-modal-open .insights-sidebar.is-open,
body.jd-media-modal-open .insights-sidebar__panel {
    z-index: 2147483200 !important;
}

body.jd-media-modal-open .insights-sidebar.is-open ~ .jd-navbar-wrap,
body.jd-media-modal-open:has(.insights-sidebar.is-open) .jd-navbar-wrap,
html:has(.insights-sidebar.is-open) body.jd-media-modal-open .jd-navbar-wrap {
    z-index: 1100 !important;
}

/* v419 Friends drawer scroll: keep page behavior untouched, make Friends panel itself scroll on the same right-side rail as the page. */
.jd-friends-drawer,
.jd-friends-drawer.is-open {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.jd-friends-drawer-head {
    flex: 0 0 70px !important;
}

.jd-friends-drawer-body,
#jdFriendsDrawerBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 70px) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--jd-scroll-thumb, rgba(124, 92, 255, .9)) transparent !important;
    scrollbar-gutter: auto !important;
}

.jd-friends-drawer-body::-webkit-scrollbar,
#jdFriendsDrawerBody::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
    background: transparent !important;
}

.jd-friends-drawer-body::-webkit-scrollbar-thumb,
#jdFriendsDrawerBody::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(166, 137, 255, .96), rgba(124, 92, 255, .84)) !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 36px !important;
}

.jd-friends-drawer-body::-webkit-scrollbar-track,
#jdFriendsDrawerBody::-webkit-scrollbar-track {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .jd-friends-drawer-body,
    #jdFriendsDrawerBody {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .jd-friends-drawer-body::-webkit-scrollbar,
    #jdFriendsDrawerBody::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }
}


/* JD technical test external-assistance acknowledgement */
.jd-ai-external-help-check{
    display:flex;
    align-items:flex-start;
    gap:18px;
    column-gap:18px;
    margin:14px 0 16px;
    padding:12px 14px;
    border:1px solid rgba(124,58,237,.18);
    border-radius:16px;
    background:rgba(255,255,255,.86);
    box-shadow:0 10px 28px rgba(31,21,60,.08);
    color:#2f235c;
    font-weight:800;
    line-height:1.35;
    cursor:pointer;
}
.jd-ai-external-help-check input{
    width:20px;
    height:20px;
    margin-top:1px;
    margin-right:2px;
    accent-color:#7c3aed;
    flex:0 0 auto;
}
.jd-ai-external-help-check span{
    display:block;
}
@media (max-width: 576px){
    .jd-ai-external-help-check{
        font-size:13px;
        padding:11px 12px;
    }
}

/* Gallery media filters: keep the two media switches visible and clear inside Advanced filters. */
.jd-gallery-media-filter-field {
    gap: 10px;
}

.jd-gallery-media-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(104, 78, 255, .18);
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    color: #050044;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.jd-gallery-media-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #6b4cff;
    flex: 0 0 auto;
}

.jd-gallery-media-check:has(input:checked) {
    border-color: rgba(104, 78, 255, .42);
    background: linear-gradient(135deg, rgba(104,78,255,.13), rgba(255,255,255,.94));
    box-shadow: 0 14px 32px rgba(104,78,255,.13);
}

.jd-test-external-assistance,
.jd-ai-external-help-saved {
    margin-top: 4px;
    color: #6b4cff;
    font-weight: 900;
}

.jd-ai-external-help-saved {
    margin-top: 10px;
}


/* Gallery card media flags: make video/photo cards obvious when media filters are active. */
.jd-gallery-media-flags{
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:6;
    display:flex;
    align-items:center;
    gap:7px;
    pointer-events:none;
}
.jd-gallery-media-flag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.88);
    color:#110646;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 10px 24px rgba(12,8,44,.18);
    backdrop-filter:blur(8px);
    font-size:.78rem;
    font-weight:900;
    line-height:1;
}
.jd-gallery-media-video{
    background:linear-gradient(135deg, rgba(96,45,255,.98), rgba(53,93,255,.94));
    color:#fff;
    border-color:rgba(255,255,255,.34);
}
.jd-card-clean .jd-card-media .jd-play-overlay{
    z-index:7;
    box-shadow:0 18px 42px rgba(12,8,44,.24);
}
.jd-card-clean .jd-card-media:not(:has(img)) .jd-play-overlay{
    transform:translateY(-4px);
    background:rgba(18,10,73,.54);
}
@media (max-width:576px){
    .jd-gallery-media-flags{left:10px;bottom:10px;gap:5px;}
    .jd-gallery-media-flag{min-height:25px;padding:5px 8px;font-size:.72rem;}
}


/* JD v66 media filter + test acknowledgement polish */
.jd-ai-external-help-check{
    gap:24px !important;
    column-gap:24px !important;
}
.jd-ai-external-help-check input[type="checkbox"]{
    margin-right:14px !important;
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
}
.jd-ai-external-help-check span{
    padding-left:2px !important;
}
.jd-card-clean.jd-card-has-video .jd-card-media{
    box-shadow:inset 0 0 0 2px rgba(109,77,255,.22);
}
.jd-card-video-thumb{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:linear-gradient(135deg,#170950,#1167f1 55%,#f7f4ff);
}
.jd-card-clean.jd-card-has-video .jd-play-overlay{
    opacity:1 !important;
    visibility:visible !important;
    background:linear-gradient(135deg,rgba(109,77,255,.95),rgba(36,89,255,.9)) !important;
    border:2px solid rgba(255,255,255,.78) !important;
    box-shadow:0 18px 48px rgba(67,56,202,.38) !important;
}
.jd-card-clean.jd-card-has-video .jd-gallery-media-video{
    box-shadow:0 12px 30px rgba(77,54,255,.34) !important;
}
.jd-card-clean.jd-card-has-gallery-photos .jd-gallery-media-flag:not(.jd-gallery-media-video){
    background:rgba(255,255,255,.94) !important;
}


/* JD v66 final: unmistakable test acknowledgement spacing and live media surfaces */
.jd-ai-external-help-check{
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
    column-gap:0 !important;
}
.jd-ai-external-help-check .jd-ai-help-box{
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}
.jd-ai-external-help-check input[type="checkbox"]{
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    margin:0 !important;
}
.jd-ai-external-help-check .jd-ai-help-text{
    display:block !important;
    padding-left:10px !important;
    line-height:1.35 !important;
}
.jd-card-video-fallback-inline{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.82);
    font-size:2.4rem;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(21,10,76,.18),rgba(70,80,255,.18));
}
.jd-card-video-thumb[src]:not([src=""])+.jd-card-video-fallback-inline{
    opacity:.38;
}
.jd-card-clean[data-jd-wow-test-completed="true"]:not(.jd-card-dusty) .jd-card-auto-delete-warning,
.jd-card-clean.jd-card-test-completed:not(.jd-card-dusty) .jd-card-auto-delete-warning{
    display:none !important;
}

/* Talent lifecycle cue: cards without a test, or with a result below 5/10,
   look deliberately "dusty" in card listings. Details pages do not use this
   class. The score/result pill remains fully coloured and readable. */
.jd-card-clean.jd-card-dusty{
    border-color:rgba(51,65,85,.22) !important;
    background:
        radial-gradient(circle at 14% 18%,rgba(15,23,42,.045) 0 1px,transparent 1.55px) 0 0/15px 15px,
        linear-gradient(148deg,#ffffff 0%,#f7f8fa 46%,#e9edf2 100%) !important;
    box-shadow:0 20px 48px rgba(15,23,42,.14),0 1px 0 rgba(255,255,255,.96) inset !important;
}
.jd-card-clean.jd-card-dusty > .jd-card-media{
    filter:grayscale(1) saturate(0) contrast(1.18) brightness(1.08);
    opacity:.96;
}
.jd-card-clean.jd-card-dusty > .jd-card-clean-body{
    background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(239,242,246,.99)) !important;
}
.jd-card-clean.jd-card-dusty > .jd-card-clean-body > :not(.jd-card-signal-row):not(.jd-card-test-strip){
    filter:grayscale(1) saturate(0) contrast(1.10);
    opacity:.94;
}
.jd-card-clean.jd-card-dusty > .jd-card-clean-body > .jd-card-signal-row > :not(.jd-signal-pill){
    filter:grayscale(1) saturate(0) contrast(1.10);
    opacity:.92;
}
.jd-card-clean.jd-card-dusty > .jd-card-clean-body > .jd-card-signal-row .jd-signal-pill{
    filter:none !important;
    opacity:1 !important;
}
.jd-card-clean.jd-card-dusty > .jd-card-clean-body > .jd-card-test-strip{
    filter:none !important;
    opacity:1 !important;
}
html.jd-fast-page-entry *,
body.jd-fast-page-entry *{
    transition-duration:.01ms !important;
}
@media (max-width:576px){
    .jd-ai-external-help-check .jd-ai-help-box{flex-basis:40px !important;width:40px !important;min-width:40px !important;}
    .jd-ai-external-help-check .jd-ai-help-text{padding-left:8px !important;}
}


/* JD v66 hard final: visible media cards and real checkbox spacing */
.jd-ai-external-help-check{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
    column-gap:18px !important;
}
.jd-ai-external-help-check .jd-ai-help-box{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}
.jd-ai-external-help-check input[type="checkbox"]{
    flex:0 0 22px !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    margin:0 !important;
}
.jd-ai-external-help-check .jd-ai-help-text{
    padding-left:4px !important;
    line-height:1.35 !important;
}
.jd-card-clean.jd-card-has-video .jd-card-media::after{
    content:'VIDEO';
    position:absolute;
    right:14px;
    top:58px;
    z-index:9;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:7px 12px;
    border-radius:999px;
    color:#fff;
    font-weight:1000;
    letter-spacing:.04em;
    font-size:.76rem;
    background:linear-gradient(135deg,rgba(105,73,255,.98),rgba(39,92,255,.95));
    border:1px solid rgba(255,255,255,.62);
    box-shadow:0 14px 34px rgba(55,45,180,.34);
    pointer-events:none;
}
.jd-card-clean.jd-card-has-video .jd-play-overlay{
    display:grid !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:10 !important;
}

/* JD v66 media visual rollback: video cards keep the normal cover image shape; play stays as overlay only. */
.jd-card-clean.jd-card-has-video .jd-card-video-cover,
.jd-card-clean.jd-card-has-video .jd-card-media img.jd-card-video-cover {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    background: transparent !important;
    filter: none !important;
    opacity: 1 !important;
}
.jd-card-clean.jd-card-has-video .jd-card-video-fallback-inline:not(.jd-card-video-fallback-only) {
    display: none !important;
}
.jd-card-clean.jd-card-has-video .jd-card-video-fallback-only {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #170950, #1167f1 58%, #f7f4ff) !important;
    color: rgba(255,255,255,.86) !important;
}
.jd-card-clean.jd-card-has-video .jd-card-media::after {
    display: none !important;
    content: none !important;
}
.jd-card-clean.jd-card-has-video .jd-play-overlay {
    transform: none !important;
}

/* JD v66 advanced filters scrollbar restore: a single purple rail, not double/shifted. */
body.jd-adv-open .jd-adv-drawer {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
body.jd-adv-open .jd-adv-drawer::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
body.jd-adv-open .jd-adv-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(124, 92, 255, .82) transparent !important;
}
body.jd-adv-open .jd-adv-body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
    background: transparent !important;
}
body.jd-adv-open .jd-adv-body::-webkit-scrollbar-track {
    background: transparent !important;
}
body.jd-adv-open .jd-adv-body::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(151, 122, 255, .96), rgba(95, 44, 255, .88)) !important;
    border: 2px solid rgba(255,255,255,.86) !important;
    min-height: 42px !important;
}


/* JD v66: final technical-test acknowledgement spacing */
.jd-ai-confirm .jd-ai-external-help-check{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
    column-gap:18px !important;
}
.jd-ai-confirm .jd-ai-external-help-check .jd-ai-help-box{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}
.jd-ai-confirm .jd-ai-external-help-check > input[type="checkbox"]{
    margin-right:22px !important;
}
.jd-ai-confirm .jd-ai-external-help-check .jd-ai-help-text,
.jd-ai-confirm .jd-ai-external-help-check > span:not(.jd-ai-help-box){
    padding-left:0 !important;
    line-height:1.35 !important;
}


/* JD final mobile navbar hard lock: never reveal JobDropper text on phone during fast navbar taps. */
@media (max-width: 767.98px) {
    html .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    body .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    html.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    body.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    html.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    body.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand {
        min-width: 40px !important;
        width: 40px !important;
        max-width: 40px !important;
        overflow: hidden !important;
        gap: 0 !important;
        flex-basis: 40px !important;
    }

    html .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    body .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    html.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    body.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    html.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    body.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
}


/* JD v67 follow-up: mobile/tablet navbar brand is icon-only under every click/nav state. */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
    html .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    body .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    html.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    body.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    html.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    body.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand,
    html .jd-navbar .navbar-brand.jd-scroll-brand,
    body .jd-navbar .navbar-brand.jd-scroll-brand {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 64px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        gap: 0 !important;
        justify-content: flex-start !important;
        contain: strict !important;
    }

    html .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    body .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    html.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    body.jd-navbar-click-stable .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    html.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    body.jd-nav-hard-navigating .jd-navbar-wrap .navbar-brand.jd-scroll-brand .jd-brand-text,
    html .jd-navbar .navbar-brand.jd-scroll-brand .jd-brand-text,
    body .jd-navbar .navbar-brand.jd-scroll-brand .jd-brand-text {
        display: block !important;
        position: absolute !important;
        left: 42px !important;
        top: 50% !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        transform: translateY(-50%) scaleX(0) !important;
        pointer-events: none !important;
        user-select: none !important;
    }
}

/* JD v680 launch polish: one clean purple scrollbar for advanced drawers, organized two-column filters. */
@media (min-width: 769px) {
    body.jd-adv-open .jd-adv-drawer,
    .jd-admin-broadcast-filter-drawer.is-open {
        width: min(820px, 92vw) !important;
        max-width: 92vw !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        padding: 0 !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(124, 58, 237, .92) rgba(124, 58, 237, .08) !important;
        -ms-overflow-style: auto !important;
        overscroll-behavior: contain !important;
    }

    body.jd-adv-open .jd-adv-drawer::-webkit-scrollbar,
    .jd-admin-broadcast-filter-drawer.is-open::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
        display: block !important;
        background: rgba(124, 58, 237, .08) !important;
    }

    body.jd-adv-open .jd-adv-drawer::-webkit-scrollbar-thumb,
    .jd-admin-broadcast-filter-drawer.is-open::-webkit-scrollbar-thumb {
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(162, 132, 255, .98), rgba(86, 36, 255, .92)) !important;
        border: 2px solid rgba(255, 255, 255, .82) !important;
        min-height: 42px !important;
    }

    body.jd-adv-open .jd-adv-drawer::-webkit-scrollbar-track,
    .jd-admin-broadcast-filter-drawer.is-open::-webkit-scrollbar-track {
        border-radius: 999px !important;
        background: rgba(124, 58, 237, .08) !important;
    }

    body.jd-adv-open .jd-adv-body,
    .jd-admin-broadcast-filter-drawer.is-open .jd-adv-body {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px 18px !important;
        padding: 18px 22px 8px !important;
        overflow: visible !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.jd-adv-open .jd-adv-body::-webkit-scrollbar,
    .jd-admin-broadcast-filter-drawer.is-open .jd-adv-body::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    body.jd-adv-open .jd-adv-head,
    .jd-admin-broadcast-filter-drawer.is-open .jd-adv-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        padding: 16px 22px 14px !important;
        background: rgba(255,255,255,.96) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    body.jd-adv-open .jd-adv-actions,
    .jd-admin-broadcast-filter-drawer.is-open .jd-adv-actions {
        position: static !important;
        margin: 8px 0 0 !important;
        width: auto !important;
        padding: 14px 22px 22px !important;
        border-top: 1px solid rgba(23, 21, 63, .07) !important;
        background: #fff !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.jd-adv-open .jd-gallery-media-filter-field,
    body.jd-adv-open .jd-adv-field.jd-gallery-media-filter-field {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {
    body.jd-adv-open .jd-adv-drawer,
    .jd-admin-broadcast-filter-drawer.is-open {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    body.jd-adv-open .jd-adv-drawer::-webkit-scrollbar,
    .jd-admin-broadcast-filter-drawer.is-open::-webkit-scrollbar,
    body.jd-adv-open .jd-adv-body::-webkit-scrollbar,
    .jd-admin-broadcast-filter-drawer.is-open .jd-adv-body::-webkit-scrollbar {
        width: 0 !important;
        display: none !important;
    }
    body.jd-adv-open .jd-adv-body,
    .jd-admin-broadcast-filter-drawer.is-open .jd-adv-body {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
    }
}


/* JD v681: Advanced filters scroll under mouse/touch without moving the page behind. */
body.jd-adv-open .jd-adv-drawer,
.jd-admin-broadcast-filter-drawer.is-open {
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}
body.jd-adv-open .jd-adv-drawer .jd-adv-body,
.jd-admin-broadcast-filter-drawer.is-open .jd-adv-body {
    pointer-events: auto !important;
    touch-action: pan-y !important;
}
@media (max-width: 768px) {
    body.jd-adv-open .jd-adv-drawer,
    .jd-admin-broadcast-filter-drawer.is-open {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
}

/* v433: stable Gallery media viewer on mobile + explicit video decode state. */
.jd-video-stage {
    position: relative !important;
    min-height: min(56.25vw, 680px);
    background: #080b16 !important;
    border-radius: 18px;
    overflow: hidden;
}

.jd-video-status {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
    background: linear-gradient(180deg, rgba(8,11,22,.93), rgba(15,23,42,.96));
    color: #fff;
    font-weight: 800;
    line-height: 1.4;
}

.jd-video-status[hidden] {
    display: none !important;
}

.jd-video-status i {
    font-size: 34px;
    opacity: .9;
}

html.jd-image-modal-freeze .jd-navbar-wrap,
body.jd-image-modal-freeze .jd-navbar-wrap,
html.jd-video-navbar-freeze .jd-navbar-wrap,
body.jd-video-navbar-freeze .jd-navbar-wrap,
html.jd-image-close-stable .jd-navbar-wrap,
body.jd-image-close-stable .jd-navbar-wrap,
body.jd-media-modal-open .jd-navbar-wrap {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}

@media (max-width: 767.98px) {
    #jdZoomOverlay,
    #jdVideoModal,
    #jdVideoModal .modal-dialog,
    #jdVideoModal .modal-content,
    #jdVideoModal .modal-body {
        transition: none !important;
        animation: none !important;
    }

    #jdVideoModal {
        position: fixed !important;
        inset: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #jdVideoModal .modal-dialog {
        width: min(100vw - 20px, 760px) !important;
        max-width: none !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    #jdVideoModal .modal-content {
        width: 100% !important;
        transform: none !important;
    }

    #jdZoomOverlay.is-open,
    #jdVideoModal.show {
        touch-action: none !important;
        overscroll-behavior: none !important;
    }

    /* Keep the navbar out of the translucent media layer. It becomes visible only after
       the exact Gallery card scroll position has been restored. */
    body.jd-media-modal-open .jd-navbar-wrap {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .jd-video-stage {
        min-height: min(56.25vw, 420px);
        border-radius: 14px;
    }

    .jd-video-status {
        padding: 22px;
        font-size: .92rem;
    }
}

/* JD v682: clear loading feedback while the desktop/mobile browser initializes video. */
@keyframes jd-video-status-spin {
    to { transform: rotate(360deg); }
}

.jd-video-status-spinner {
    animation: jd-video-status-spin .85s linear infinite;
}

.jd-video-status.is-error .jd-video-status-spinner {
    animation: none;
}

#jdVideoPlayer {
    background: #080b16 !important;
    object-fit: contain !important;
    max-height: calc(100dvh - 32px);
}


/* JD v425 mobile media responsiveness: immediate paint, no expensive full-screen GPU blur. */
@media (max-width: 767.98px), (pointer: coarse) {
    #jdZoomOverlay,
    #jdVideoModal,
    #jdVideoModal .modal-dialog,
    #jdVideoModal .modal-content,
    #jdVideoModal .modal-body,
    #jdVideoModal video,
    .modal-backdrop.jd-video-backdrop,
    .modal-backdrop.jd-video-manual-backdrop,
    [data-jd-media-backdrop="v3"] {
        transition: none !important;
        animation: none !important;
    }

    .modal-backdrop.show.jd-video-backdrop,
    .modal-backdrop.jd-video-backdrop,
    .modal-backdrop.show.jd-video-manual-backdrop,
    .modal-backdrop.jd-video-manual-backdrop,
    body.jd-media-modal-open .modal-backdrop.show.jd-video-backdrop,
    body.jd-media-modal-open .modal-backdrop.show.jd-video-manual-backdrop,
    [data-jd-media-backdrop="v3"] {
        background: rgba(246,248,255,.94) !important;
        opacity: 1 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #jdZoomOverlay.jd-zoom-modal,
    #jdZoomOverlay.jd-zoom-modal.is-open,
    .jd-zoom-modal,
    .jd-zoom-modal.is-open {
        background: rgba(8,7,22,.92) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #jdVideoModal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        contain: layout paint !important;
    }

    #jdVideoModal .modal-dialog {
        width: calc(100% - 12px) !important;
        max-width: 760px !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: 6px 0 !important;
        box-sizing: border-box !important;
    }

    #jdVideoModal .modal-content,
    #jdVideoModal .modal-body,
    .jd-video-stage {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        contain: layout paint !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #jdVideoPlayer {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        object-fit: contain !important;
        transform: translateZ(0) !important;
    }

    #jdZoomOverlay .jd-zoom-avatar,
    #jdZoomOverlay #jdZoomImg {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        box-sizing: border-box !important;
    }
}

/* JD v683: compact incoming friend request card on mobile. */
@media (max-width: 640px) {
    .jd-friends-v3 .jd-incoming-friend-request {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        column-gap: 11px !important;
        row-gap: 0 !important;
        min-height: 76px !important;
        padding: 11px 12px !important;
        text-align: left !important;
        border-radius: 22px !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request > .jd-avatar-gallery-link,
    .jd-friends-v3 .jd-incoming-friend-request > a.jd-avatar-gallery-link {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: initial !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        flex: 0 0 52px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: normal !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request > .jd-avatar-gallery-link .jd-friend-avatar-round,
    .jd-friends-v3 .jd-incoming-friend-request > a.jd-avatar-gallery-link > img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        flex: 0 0 52px !important;
        line-height: normal !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: initial !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 2px !important;
        text-align: left !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-main strong,
    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-main span {
        max-width: 100% !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-main strong {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-main span {
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-actions-subtle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        order: initial !important;
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-mini {
        width: auto !important;
        min-width: 67px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .84rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request [data-friend-accept] {
        background: #140b46 !important;
        color: #fff !important;
        border-color: #140b46 !important;
        box-shadow: 0 9px 20px rgba(20, 11, 70, .18) !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request [data-friend-decline] {
        background: #f0eff4 !important;
        color: #140b46 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
}

@media (max-width: 370px) {
    .jd-friends-v3 .jd-incoming-friend-request {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        row-gap: 10px !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-actions-subtle {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    .jd-friends-v3 .jd-incoming-friend-request .jd-friend-mini {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}


/* JD v684: force the incoming request into a compact, readable mobile row.
   Kept outside the generic Friends-row rules so Accept/Reject never become circles. */
@media (max-width: 760px) {
    .jd-incoming-friend-request {
        display: grid !important;
        grid-template-columns: 54px minmax(90px, 1fr) auto !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        justify-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 78px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        border-radius: 22px !important;
    }

    .jd-incoming-friend-request > .jd-avatar-gallery-link {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 0 !important;
        display: block !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        overflow: hidden !important;
        border-radius: 50% !important;
    }

    .jd-incoming-friend-request > .jd-avatar-gallery-link > .jd-friend-avatar-round {
        display: block !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    .jd-incoming-friend-request > .jd-friend-main {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 3px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: left !important;
    }

    .jd-incoming-friend-request > .jd-friend-main strong,
    .jd-incoming-friend-request > .jd-friend-main span {
        display: block !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .jd-incoming-friend-request > .jd-friend-main strong {
        font-size: 16px !important;
        line-height: 1.18 !important;
        font-weight: 900 !important;
    }

    .jd-incoming-friend-request > .jd-friend-main span {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .jd-incoming-friend-request > .jd-friend-actions-subtle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        order: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .jd-incoming-friend-request > .jd-friend-actions-subtle > .jd-friend-mini {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 68px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .jd-incoming-friend-request > .jd-friend-actions-subtle > [data-friend-accept] {
        background: #140b46 !important;
        color: #fff !important;
        border-color: #140b46 !important;
        box-shadow: 0 8px 18px rgba(20, 11, 70, .18) !important;
    }

    .jd-incoming-friend-request > .jd-friend-actions-subtle > [data-friend-decline] {
        background: #f0eff4 !important;
        color: #140b46 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
}

@media (max-width: 420px) {
    .jd-incoming-friend-request {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        row-gap: 10px !important;
    }

    .jd-incoming-friend-request > .jd-friend-actions-subtle {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    .jd-incoming-friend-request > .jd-friend-actions-subtle > .jd-friend-mini {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

/* Mobile search hardening: Safari auto-zooms focused text controls rendered
   below 16 CSS pixels. Keep every platform search surface readable and stable
   without disabling the user's normal pinch-zoom accessibility. */
@media (max-width: 991.98px), (pointer: coarse) {
    input[type="search"],
    input[inputmode="search"],
    input[aria-label*="search" i],
    input[placeholder*="search" i],
    [role="search"] input,
    .jd-chat-search,
    .jd-copilot-search-input,
    .jd-import-input,
    .jd-adv-drawer input.jd-input,
    [data-jd-wow-match-search],
    [data-jd-author-search="1"],
    [data-jd-friends-search],
    [data-pilot-drawer-input="1"],
    #jdWallSearchInput {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100% !important;
        touch-action: manipulation;
    }
}

/* Small helper under both rotating banner placements. */
.jd-banner-rotation-note {
    width: 100%;
    margin: 5px 0 0;
    padding: 0 2px;
    color: rgba(19, 11, 70, .56);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

/* Desktop right-edge wheel fix:
   the off-canvas Friends drawer is still a full-height, 440px-wide element
   while translated outside the viewport. Older overrides left it interactive
   in its closed state, so its hidden scroll body captured wheel events near
   the right edge instead of letting the document scroll. */
#jdFriendsDrawer[aria-hidden="true"]:not(.is-open) {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
}

#jdFriendsDrawer.is-open[aria-hidden="false"] {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

@media (max-width: 767.98px) {
    .jd-banner-rotation-note {
        margin-top: 4px;
        font-size: .68rem;
    }
}