.dk-privacy-tls {
    position: relative;
    z-index: 30;
    flex: none;
}

.dk-privacy-tls details {
    position: relative;
}

.dk-privacy-tls summary {
    list-style: none;
    cursor: pointer;
}

.dk-privacy-tls summary::-webkit-details-marker {
    display: none;
}

.dk-privacy-tls-square {
    position: relative;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(66, 212, 124, .56);
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 20%, rgba(66, 212, 124, .15), transparent 42%),
        linear-gradient(145deg, rgba(9, 31, 17, .98), rgba(8, 9, 11, .99));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .42),
        0 0 20px rgba(66, 212, 124, .10),
        inset 0 0 18px rgba(66, 212, 124, .04);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.dk-privacy-tls summary:hover .dk-privacy-tls-square,
.dk-privacy-tls summary:focus-visible .dk-privacy-tls-square {
    transform: translateY(-1px);
    border-color: rgba(102, 232, 151, .94);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .48),
        0 0 28px rgba(66, 212, 124, .18);
}

.dk-privacy-tls-square small {
    align-self: end;
    color: #b9f2cf;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}

.dk-privacy-tls-square strong {
    align-self: center;
    color: #42d47c;
    font: 700 34px/1 Georgia, serif;
    text-shadow: 0 0 14px rgba(66, 212, 124, .36);
}

.dk-privacy-tls-square > span {
    align-self: start;
    color: #77dd9b;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.dk-privacy-tls-square i {
    position: absolute;
    right: 6px;
    bottom: 4px;
    color: #8ce8ae;
    font-style: normal;
    font-size: 12px;
    transition: transform .18s ease;
}

.dk-privacy-tls details[open] .dk-privacy-tls-square i {
    transform: rotate(180deg);
}

.dk-privacy-tls-panel {
    position: absolute;
    width: min(320px, calc(100vw - 28px));
    padding: 16px;
    border: 1px solid rgba(66, 212, 124, .34);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0, rgba(66, 212, 124, .08), transparent 38%),
        linear-gradient(145deg, rgba(9, 30, 17, .99), rgba(9, 9, 13, .99));
    box-shadow: 0 24px 62px rgba(0, 0, 0, .54);
}

.dk-privacy-tls--header .dk-privacy-tls-panel {
    top: calc(100% + 12px);
    right: 0;
}

.dk-privacy-tls--landing .dk-privacy-tls-panel {
    left: calc(100% + 12px);
    bottom: 0;
}

.dk-privacy-tls-panel header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.dk-privacy-tls-shield {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(66, 212, 124, .48);
    border-radius: 12px;
    color: #42d47c;
    font-size: 25px;
    background: rgba(5, 28, 15, .82);
}

.dk-privacy-tls-panel h2 {
    margin: 0 0 3px;
    color: #67e492;
    font-size: 17px;
}

.dk-privacy-tls-panel header p,
.dk-privacy-tls-protocols,
.dk-privacy-tls-checked,
.dk-privacy-tls-disclaimer {
    margin: 0;
}

.dk-privacy-tls-panel header p,
.dk-privacy-tls-protocols {
    color: #c7d2cb;
    font-size: 12px;
    line-height: 1.45;
}

.dk-privacy-tls-protocols {
    margin-top: 12px;
}

.dk-privacy-tls-checked {
    margin-top: 8px;
    color: #aeb9b1;
    font-size: 12px;
}

.dk-privacy-tls-checked span {
    color: #42d47c;
}

.dk-privacy-tls-panel ul {
    display: grid;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.dk-privacy-tls-panel li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 9px;
    background: rgba(255, 255, 255, .022);
    font-size: 11px;
}

.dk-privacy-tls-panel li span {
    color: #b8b8c0;
}

.dk-privacy-tls-panel li strong {
    color: #82dfa4;
    text-align: right;
}

.dk-privacy-tls-disclaimer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(66, 212, 124, .14);
    color: #8f9691;
    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .dk-privacy-tls-square {
        width: 62px;
        height: 62px;
    }

    .dk-privacy-tls--header .dk-privacy-tls-panel {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .dk-privacy-tls--landing .dk-privacy-tls-panel {
        left: 50%;
        bottom: calc(100% + 12px);
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dk-privacy-tls-square,
    .dk-privacy-tls-square i {
        transition: none;
    }
}

/* DK-UNITED TLS + DK-GUARD HORIZONTAL ALIGNMENT FIX */
.dk-site-header .dk-header-trust {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    width: auto !important;
}

.dk-site-header .dk-header-trust > .dk-privacy-tls,
.dk-site-header .dk-header-trust > .dk-guard {
    flex: 0 0 auto !important;
}

@media (max-width: 700px) {
    .dk-site-header .dk-header-trust {
        gap: 10px !important;
        justify-content: flex-end !important;
    }
}

/* DK-UNITED TLS / DK-GUARD POPOVER SEPARATION */
.dk-site-header .dk-header-trust {
    position: relative;
    z-index: 80;
}

.dk-site-header .dk-header-trust .dk-privacy-tls {
    z-index: 90;
}

.dk-site-header .dk-header-trust .dk-privacy-tls-panel {
    top: calc(100% + 12px) !important;
    right: 82px !important;
    left: auto !important;
    z-index: 120 !important;
}

.dk-site-header .dk-header-trust .dk-guard {
    position: relative;
    z-index: 85;
}

.dk-site-header .dk-header-trust .dk-guard-popover {
    top: calc(100% + 10px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 110 !important;
}


/* DK-EZYRO accessibility compatibility.
   The screen-reader label must never be visibly rendered. */

.dk-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* DK-EZYRO TLS non-native disclosure and desktop hover interaction v7.
   A new physical asset path avoids stale public cache responses.
   Native closed details rendering is no longer used. */

.dk-privacy-tls,
.dk-privacy-tls-disclosure {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
}

.dk-privacy-tls {
    cursor: help !important;
}

.dk-privacy-tls-trigger {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: help !important;
    touch-action: manipulation;
}

.dk-privacy-tls-trigger:focus-visible {
    outline: none;
}

.dk-privacy-tls-trigger:focus-visible .dk-privacy-tls-square {
    outline: 3px solid rgba(91, 245, 150, .70);
    outline-offset: 3px;
}

.dk-privacy-tls-panel {
    display: block !important;
    z-index: 2200 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity .18s ease,
        visibility .18s ease !important;
}

.dk-privacy-tls:focus-within .dk-privacy-tls-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.dk-privacy-tls:focus-within .dk-privacy-tls-square,
.dk-privacy-tls:hover .dk-privacy-tls-square {
    transform: translateY(-1px);
    border-color: rgba(102, 232, 151, .94);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .48),
        0 0 28px rgba(66, 212, 124, .18);
}

.dk-privacy-tls:focus-within .dk-privacy-tls-square i,
.dk-privacy-tls:hover .dk-privacy-tls-square i {
    transform: rotate(180deg) !important;
}

.dk-site-header
.dk-header-trust
.dk-privacy-tls-panel {
    top: calc(100% + 12px) !important;
    z-index: 2200 !important;
}

.dk-site-header
.dk-header-trust,
.dk-site-header
.dk-header-trust
.dk-privacy-tls,
.dk-site-header
.dk-header-trust
.dk-privacy-tls-disclosure {
    overflow: visible !important;
}

.dk-privacy-tls,
.dk-privacy-tls-panel,
.dk-site-header .dk-header-trust .dk-guard,
.dk-site-header .dk-header-trust .dk-guard-popover {
    -webkit-user-select: none !important;
    user-select: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .dk-privacy-tls-trigger {
        pointer-events: none !important;
    }

    .dk-privacy-tls:hover .dk-privacy-tls-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 761px) {
    .dk-site-header
    .dk-header-trust
    .dk-privacy-tls--header
    .dk-privacy-tls-panel {
        right: 0 !important;
        left: auto !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .dk-privacy-tls-trigger {
        pointer-events: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dk-privacy-tls-panel {
        transition: none !important;
    }
}

/* DK-EZYRO TLS V8 — header stacking correction.
   The TLS panel must render above the navigation and page content.
   Widget dimensions, DK-Guard styling and maintenance layout remain unchanged. */

.dk-site-header {
    z-index: 5000 !important;
    overflow: visible !important;
}

@media (min-width: 701px) {
    .dk-site-header {
        position: relative !important;
    }
}

.dk-site-header .dk-header-trust {
    position: relative !important;
    z-index: 5100 !important;
    overflow: visible !important;
}

.dk-site-header
.dk-header-trust
.dk-privacy-tls,
.dk-site-header
.dk-header-trust
.dk-privacy-tls-disclosure {
    position: relative !important;
    z-index: 5200 !important;
    overflow: visible !important;
}

.dk-site-header
.dk-header-trust
.dk-privacy-tls-panel {
    z-index: 5300 !important;
}

/* DK-EZYRO shared landing TLS integration v1.
   The canonical DK-EZYRO TLS component is rendered beside DK-Guard.
   Landing artwork, footer content and About Me layout remain unchanged. */

body.dk-landing-page
.dk-site-header.dk-header-no-nav
.dk-header-trust {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    position: relative !important;
    z-index: 5100 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
    overflow: visible !important;
    pointer-events: auto !important;
}

body.dk-landing-page
.dk-site-header
.dk-header-trust
.dk-privacy-tls,
body.dk-landing-page
.dk-site-header
.dk-header-trust
.dk-guard {
    flex: 0 0 auto;
}

body.dk-landing-page
.dk-site-header
.dk-header-trust
.dk-privacy-tls {
    pointer-events: auto !important;
}

body.dk-landing-page
.dk-site-header
.dk-header-trust
.dk-privacy-tls-panel {
    z-index: 5300 !important;
}

@media (max-width: 700px) {
    body.dk-landing-page
    .dk-site-header.dk-header-no-nav
    .dk-header-trust {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
        justify-content: center;
        gap: 8px;
    }
}

/* DK-EZYRO shared landing TLS JavaScript hover-intent state v4.
   Desktop fine-pointer only. Existing panel position and dimensions remain unchanged. */

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
    body.dk-landing-page
    .dk-site-header
    .dk-header-trust
    .dk-privacy-tls--landing.dk-privacy-tls--js-open
    .dk-privacy-tls-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }
}

/* DK-EZYRO shared landing TLS visible idle-active contrast v8.
   Idle is dark on every input type. Keyboard focus and JavaScript-open
   are bright on every input type. True hover is bright on fine pointers only. */

.dk-privacy-tls--landing
.dk-privacy-tls-square {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(102, 232, 151, .07),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(10, 20, 14, .99),
            rgba(5, 7, 8, .99)
        ) !important;

    transform: translateY(0) !important;
    border-color: rgba(102, 232, 151, .44) !important;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, .46),
        0 0 16px rgba(66, 212, 124, .08),
        inset 0 0 16px rgba(66, 212, 124, .03) !important;
}

.dk-privacy-tls--landing:focus-within
.dk-privacy-tls-square,

.dk-privacy-tls--landing.dk-privacy-tls--js-open
.dk-privacy-tls-square {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(176, 255, 202, .42),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(31, 174, 88, .99),
            rgba(8, 88, 39, .99)
        ) !important;

    transform: translateY(-1px) !important;
    border-color: rgba(170, 255, 200, 1) !important;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, .48),
        0 0 40px rgba(66, 245, 140, .62),
        inset 0 0 20px rgba(176, 255, 202, .20) !important;
}

.dk-privacy-tls--landing:focus-within
.dk-privacy-tls-square i,

.dk-privacy-tls--landing.dk-privacy-tls--js-open
.dk-privacy-tls-square i {
    transform: rotate(180deg) !important;
}

@media (hover: hover) and (pointer: fine) {
    .dk-privacy-tls--landing:hover
    .dk-privacy-tls-square {
        background:
            radial-gradient(
                circle at 30% 20%,
                rgba(176, 255, 202, .42),
                transparent 44%
            ),
            linear-gradient(
                145deg,
                rgba(31, 174, 88, .99),
                rgba(8, 88, 39, .99)
            ) !important;

        transform: translateY(-1px) !important;
        border-color: rgba(170, 255, 200, 1) !important;

        box-shadow:
            0 16px 38px rgba(0, 0, 0, .48),
            0 0 40px rgba(66, 245, 140, .62),
            inset 0 0 20px rgba(176, 255, 202, .20) !important;
    }

    .dk-privacy-tls--landing:hover
    .dk-privacy-tls-square i {
        transform: rotate(180deg) !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .dk-privacy-tls--landing:hover:not(:focus-within):not(
        .dk-privacy-tls--js-open
    )
    .dk-privacy-tls-square {
        transform: translateY(0) !important;
    }

    .dk-privacy-tls--landing:hover:not(:focus-within):not(
        .dk-privacy-tls--js-open
    )
    .dk-privacy-tls-square i {
        transform: rotate(0deg) !important;
    }
}

/* DK-EZYRO shared landing TLS original green panel background v1.
   Scope: the opened TLS panel on the shared landing only.
   Badge states, panel geometry, JavaScript and DK-Guard remain unchanged. */

body.dk-landing-page
.dk-privacy-tls--landing
.dk-privacy-tls-panel {
    background-color: rgb(9, 18, 13) !important;
    background-image:
        radial-gradient(
            circle at 100% 0,
            rgba(66, 212, 124, .08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgb(9, 30, 17),
            rgb(9, 9, 13)
        ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* DK-EZYRO shared landing TLS panel intrinsic-height correction v1.
   The desktop header rule sets top while the legacy landing rule still sets
   bottom. Reset the opposite inset so the absolute panel uses content height.
   Mobile keeps its intended above-badge bottom positioning. */

@media (min-width: 761px) {
    body.dk-landing-page
    .dk-site-header
    .dk-header-trust
    .dk-privacy-tls--landing
    .dk-privacy-tls-panel {
        bottom: auto !important;
        height: auto !important;
    }
}

@media (max-width: 760px) {
    body.dk-landing-page
    .dk-site-header
    .dk-header-trust
    .dk-privacy-tls--landing
    .dk-privacy-tls-panel {
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        height: auto !important;
    }
}