:root {
    --kiosk-corner-size: 110px;
    --securewrap-orange: #B7560A;
    --kiosk-background-start: #081522;
    --kiosk-background-middle: #102f48;
    --kiosk-background-end: #071522;
    --kiosk-text-primary: #ffffff;
    --kiosk-text-secondary: #d9e9f5;
    --kiosk-border: rgba(255,255,255,.62);
    --kiosk-error: rgba(170,30,40,.42);
    --kiosk-warning: rgba(183,86,10,.42);
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.kiosk-shell {
    position: fixed;
    inset: 0;
    background: var(--kiosk-background-end);
    color: var(--kiosk-text-primary);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.kiosk-page {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
}

.kiosk-background {
    position: absolute;
    inset: -5%;
    background:
        radial-gradient(circle at 20% 15%, rgba(42,151,255,.38), transparent 38%),
        radial-gradient(circle at 80% 85%, rgba(0,210,170,.24), transparent 36%),
        linear-gradient(145deg, var(--kiosk-background-start), var(--kiosk-background-middle) 55%, var(--kiosk-background-end));
    transform: scale(1.05);
}

.kiosk-content,
.kiosk-start-gate {
    position: relative;
    z-index: 2;
    width: min(920px, 84vw);
    text-align: center;
    padding: 48px;
}

.kiosk-header-logo {
    display: block;
    width: min(620px, 68vw);
    max-height: 112px;
    object-fit: contain;
    margin: 0 auto 22px;
}

.kiosk-client-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 0 auto 32px;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--securewrap-orange);
    color: #fff;
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 700;
    letter-spacing: .03em;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.kiosk-content h1 {
    font-size: clamp(46px, 7vw, 96px);
    line-height: 1.02;
    margin: 0 0 24px;
}

.kiosk-content p {
    font-size: clamp(22px, 2.4vw, 38px);
    line-height: 1.35;
    margin: 0 auto 42px;
    max-width: 780px;
    color: var(--kiosk-text-secondary);
}

.kiosk-primary-action,
.kiosk-start-button {
    min-width: min(720px, 80vw);
    min-height: 150px;
    border: 0;
    border-radius: 28px;
    font-size: clamp(34px, 4vw, 60px);
    font-weight: 800;
    color: #082031;
    background: linear-gradient(180deg, #fff, #d8efff);
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

.kiosk-primary-action:active,
.kiosk-start-button:active {
    transform: scale(.985);
}

.kiosk-primary-action:disabled,
.kiosk-secondary-actions button:disabled,
.kiosk-secondary-single:disabled {
    opacity: .55;
}

.kiosk-secondary-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.kiosk-secondary-actions button,
.kiosk-secondary-single {
    min-width: 280px;
    min-height: 86px;
    padding: 18px 30px;
    border: 2px solid var(--kiosk-border);
    border-radius: 18px;
    color: white;
    background: rgba(5,20,33,.45);
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
}

.kiosk-countdown-label {
    margin-bottom: 8px !important;
}

.kiosk-countdown {
    font-size: clamp(84px, 14vw, 190px);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: .04em;
    margin-bottom: 34px;
}

.kiosk-connection {
    position: fixed;
    top: 24px;
    right: 28px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 16px;
    z-index: 4;
}

.kiosk-connection.connected {
    background: rgba(0,165,115,.25);
    color: #bfffe8;
}

.kiosk-connection.reconnecting {
    background: rgba(183,86,10,.35);
    color: #fff0d8;
}

.kiosk-message {
    margin: 0 auto 28px;
    padding: 18px 24px;
    border-radius: 16px;
    max-width: 760px;
    font-size: 22px;
}

.kiosk-error {
    background: var(--kiosk-error);
    border: 1px solid rgba(255,145,150,.55);
}

.kiosk-warning {
    background: var(--kiosk-warning);
    border: 1px solid rgba(255,194,128,.55);
}

.kiosk-preloader {
    display: block;
    width: clamp(72px, 8vw, 118px);
    height: clamp(72px, 8vw, 118px);
    object-fit: contain;
    margin: 0 auto 42px;
    transform-origin: 50% 50%;
    animation: securewrap-preloader-cycle 3.2s ease-in-out infinite;
}

.kiosk-preloader.static {
    animation: none;
}

@keyframes securewrap-preloader-cycle {
    0% { transform: rotate(0deg); }
    37.5% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

.kiosk-offline-surface .kiosk-header-logo {
    opacity: .9;
}

.kiosk-service-code {
    display: inline-block;
    margin-top: 18px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 10px;
    color: rgba(255,255,255,.75);
    font-size: 16px;
}

.kiosk-corner {
    position: fixed;
    z-index: 20;
    width: var(--kiosk-corner-size);
    height: var(--kiosk-corner-size);
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    opacity: .001;
}

.corner-top-left { top: 0; left: 0; }
.corner-top-right { top: 0; right: 0; }
.corner-bottom-right { bottom: 0; right: 0; }
.corner-bottom-left { bottom: 0; left: 0; }

@media (prefers-reduced-motion: reduce) {
    .kiosk-preloader {
        animation: securewrap-preloader-pulse 2.5s ease-in-out infinite;
    }

    @keyframes securewrap-preloader-pulse {
        0%, 100% { opacity: .65; }
        50% { opacity: 1; }
    }
}

@media (max-width: 700px) {
    .kiosk-content,
    .kiosk-start-gate {
        width: 92vw;
        padding: 24px;
    }

    .kiosk-primary-action,
    .kiosk-start-button {
        min-height: 120px;
    }

    .kiosk-secondary-actions {
        flex-direction: column;
        align-items: center;
    }
}
/* HOMYN_PROOFSCREEN_RESPONSIVE_UI_V4_BEGIN
   Proof-screen geometry is driven by viewport width, viewport height and vmin.
   No customer-facing label or action text may be truncated.
*/
:root {
    --proof-safe-inline: clamp(1rem, 3.2vmin, 4rem);
    --proof-safe-block: clamp(1rem, 2.4vmin, 3rem);

    --proof-logo-width: clamp(18rem, 46vw, 58rem);
    --proof-logo-max-height: clamp(5rem, 14vh, 10.5rem);

    --proof-content-width: min(94vw, 78rem);
    --proof-content-padding-inline: clamp(1rem, 4vmin, 4.5rem);
    --proof-content-padding-block: clamp(1rem, 3vmin, 3.5rem);

    --proof-status-size: clamp(2.6rem, 5.8vmin, 6.8rem);
    --proof-body-size: clamp(1.35rem, 2.65vmin, 3rem);
    --proof-countdown-size: clamp(5.5rem, 15vmin, 13.5rem);

    /* 125% action treatment while remaining bounded by the display. */
    --proof-action-width: min(92vw, 67rem);
    --proof-action-min-height: clamp(9.4rem, 20vh, 16.5rem);
    --proof-action-padding-inline: clamp(1.5rem, 4.5vmin, 5rem);
    --proof-action-padding-block: clamp(1.35rem, 3vmin, 3rem);
    --proof-action-font-size: clamp(2.5rem, 5.2vmin, 5.7rem);

    --proof-secondary-width: min(92vw, 48rem);
    --proof-secondary-min-height: clamp(6.5rem, 14vh, 11rem);
    --proof-secondary-font-size: clamp(1.8rem, 3.7vmin, 4rem);

    --proof-kiosk-id-font-size: clamp(.78rem, 1.45vmin, 1.25rem);
    --proof-kiosk-id-bottom: clamp(.75rem, 1.7vmin, 1.75rem);
    --proof-kiosk-id-right: clamp(.75rem, 1.7vmin, 1.75rem);
}

/* The complete proof surface scales; nothing is clipped by a fixed-height box. */
.kiosk-content,
.kiosk-start-gate {
    box-sizing: border-box;
    width: var(--proof-content-width);
    max-width: 94vw;
    max-height: 96dvh;
    padding:
        var(--proof-content-padding-block)
        var(--proof-content-padding-inline);
    overflow: visible;
}

/* Brand logo is 150% of the prior intended presentation, bounded responsively. */
.kiosk-header-logo {
    width: var(--proof-logo-width);
    max-width: 86vw;
    max-height: var(--proof-logo-max-height);
    height: auto;
    object-fit: contain;
    margin:
        0 auto
        clamp(1rem, 2.8vmin, 2.4rem);
}

/* All operational status headings use the canonical SecureWrap orange. */
.kiosk-content h1,
.kiosk-start-gate h1 {
    max-width: 100%;
    margin:
        0 auto
        clamp(1rem, 2.6vmin, 2.25rem);
    color: var(--securewrap-orange);
    font-size: var(--proof-status-size);
    line-height: 1.03;
    letter-spacing: -.025em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

/* Customer copy always wraps naturally. It is never ellipsized or line-clamped. */
.kiosk-content p,
.kiosk-start-gate p,
.kiosk-message {
    max-width: min(90vw, 64rem);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--proof-body-size);
    line-height: 1.28;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* The kiosk identifier is operational metadata, not part of the customer hierarchy.
   pointer-events:none keeps the hidden bottom-right release target fully usable. */
.kiosk-client-banner {
    position: fixed;
    right: var(--proof-kiosk-id-right);
    bottom: var(--proof-kiosk-id-bottom);
    z-index: 18;
    display: inline-flex;
    width: auto;
    max-width: min(52vw, 30rem);
    min-height: 0;
    margin: 0;
    padding:
        clamp(.45rem, .9vmin, .8rem)
        clamp(.7rem, 1.4vmin, 1.25rem);
    border-radius: 999px;
    color: #fff;
    background: var(--securewrap-orange);
    font-size: var(--proof-kiosk-id-font-size);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    text-align: center;
    pointer-events: none;
}

/* Primary and start actions receive the requested 125% treatment. */
.kiosk-primary-action,
.kiosk-start-button {
    box-sizing: border-box;
    width: var(--proof-action-width);
    max-width: 92vw;
    min-width: 0;
    min-height: var(--proof-action-min-height);
    height: auto;
    padding:
        var(--proof-action-padding-block)
        var(--proof-action-padding-inline);
    font-size: var(--proof-action-font-size);
    line-height: 1.02;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

/* Every other customer action follows the same responsive geometry and no-truncation rule. */
.kiosk-secondary-single,
.kiosk-secondary-actions button {
    box-sizing: border-box;
    width: var(--proof-secondary-width);
    max-width: 92vw;
    min-width: 0;
    min-height: var(--proof-secondary-min-height);
    height: auto;
    padding:
        clamp(1rem, 2.4vmin, 2.1rem)
        clamp(1.25rem, 3.2vmin, 3.25rem);
    font-size: var(--proof-secondary-font-size);
    line-height: 1.08;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

.kiosk-secondary-actions {
    width: 100%;
    gap: clamp(.9rem, 2vmin, 1.75rem);
}

/* Countdown scales against the smaller viewport dimension so portrait,
   landscape and unusual signage ratios remain legible. */
.kiosk-countdown {
    max-width: 100%;
    margin-bottom: clamp(1.25rem, 3vmin, 3rem);
    font-size: var(--proof-countdown-size);
    line-height: .95;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Keep operational badges bounded on small displays. */
.kiosk-connection {
    top: var(--proof-safe-block);
    right: var(--proof-safe-inline);
    max-width: min(46vw, 18rem);
    font-size: clamp(.75rem, 1.45vmin, 1.15rem);
    white-space: normal;
    text-align: center;
}

/* Landscape displays with limited height scale vertically first. */
@media (orientation: landscape) and (max-height: 760px) {
    :root {
        --proof-logo-width: clamp(15rem, 32vw, 38rem);
        --proof-logo-max-height: clamp(3.5rem, 11vh, 6.5rem);
        --proof-status-size: clamp(2.15rem, 5.2vh, 4.4rem);
        --proof-body-size: clamp(1.15rem, 3.1vh, 2rem);
        --proof-countdown-size: clamp(4.8rem, 18vh, 9rem);
        --proof-action-min-height: clamp(7.2rem, 21vh, 10.5rem);
        --proof-action-font-size: clamp(2.15rem, 6.6vh, 4.25rem);
        --proof-secondary-min-height: clamp(5.4rem, 15vh, 7.5rem);
        --proof-secondary-font-size: clamp(1.55rem, 4.6vh, 2.7rem);
    }

    .kiosk-content,
    .kiosk-start-gate {
        padding-top: clamp(.75rem, 1.8vh, 1.4rem);
        padding-bottom: clamp(.75rem, 1.8vh, 1.4rem);
    }

    .kiosk-content p {
        margin-bottom: clamp(1rem, 3vh, 1.8rem);
    }
}

/* Portrait kiosks get broader, vertically stacked actions. */
@media (orientation: portrait) {
    :root {
        --proof-logo-width: clamp(17rem, 72vw, 46rem);
        --proof-status-size: clamp(2.8rem, 7.5vw, 6.2rem);
        --proof-body-size: clamp(1.4rem, 3.8vw, 2.8rem);
        --proof-action-width: 90vw;
        --proof-secondary-width: 90vw;
    }

    .kiosk-secondary-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Very small screens remain complete rather than cropping or truncating. */
@media (max-width: 520px), (max-height: 520px) {
    :root {
        --proof-content-padding-inline: clamp(.65rem, 2vmin, 1rem);
        --proof-content-padding-block: clamp(.55rem, 1.8vmin, 1rem);
        --proof-action-width: 94vw;
        --proof-secondary-width: 94vw;
    }

    .kiosk-client-banner {
        max-width: 58vw;
    }
}
/* HOMYN_PROOFSCREEN_RESPONSIVE_UI_V4_END */
/* HOMYN_PROOFSCREEN_VISUAL_CONTRACT_V6_BEGIN
   This block is intentionally last and authoritative.
*/
.kiosk-page .kiosk-content {
    width: min(96vw, 86rem) !important;
    max-width: 96vw !important;
}

/* The logo must present at 150% of the pre-v4 visual size. */
.kiosk-page .kiosk-header-logo {
    display: block !important;
    width: clamp(27rem, 58vw, 69rem) !important;
    max-width: 90vw !important;
    max-height: clamp(7.5rem, 18vh, 15rem) !important;
    height: auto !important;
    object-fit: contain !important;
    margin:
        0 auto
        clamp(1.25rem, 3vmin, 3rem) !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

/* Client status text is the primary operational heading.
   It must always use SecureWrap orange and must never inherit ghosted state styling. */
.kiosk-page .kiosk-content .kiosk-status-title,
.kiosk-page .kiosk-content h1.kiosk-status-title,
.kiosk-page.state-idle .kiosk-status-title,
.kiosk-page.state-waiting .kiosk-status-title,
.kiosk-page.state-claimed .kiosk-status-title,
.kiosk-page.state-enroute .kiosk-status-title,
.kiosk-page.state-expired .kiosk-status-title,
.kiosk-page.state-arrived .kiosk-status-title,
.kiosk-page.state-terminal .kiosk-status-title {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: min(92vw, 72rem) !important;
    margin:
        0 auto
        clamp(1.25rem, 2.8vmin, 2.75rem) !important;
    color: var(--securewrap-orange) !important;
    -webkit-text-fill-color: var(--securewrap-orange) !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    text-shadow: none !important;
    font-size: clamp(3.25rem, 7vmin, 8rem) !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-wrap: balance !important;
}

/* All customer action buttons must show the requested 125% enlargement. */
.kiosk-page .kiosk-primary-action,
.kiosk-page .kiosk-start-button {
    width: min(94vw, 76rem) !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    min-height: clamp(11.75rem, 25vh, 20.5rem) !important;
    height: auto !important;
    padding:
        clamp(1.7rem, 3.8vmin, 3.75rem)
        clamp(2rem, 5.5vmin, 6rem) !important;
    font-size: clamp(3.1rem, 6.5vmin, 7.1rem) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-wrap: balance !important;
}

.kiosk-page .kiosk-secondary-single,
.kiosk-page .kiosk-secondary-actions button {
    width: min(94vw, 58rem) !important;
    max-width: 94vw !important;
    min-width: 0 !important;
    min-height: clamp(8.1rem, 18vh, 13.75rem) !important;
    height: auto !important;
    padding:
        clamp(1.35rem, 3vmin, 2.8rem)
        clamp(1.6rem, 4.2vmin, 4.25rem) !important;
    font-size: clamp(2.25rem, 4.8vmin, 5rem) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-wrap: balance !important;
}

/* Instruction copy remains fully responsive and wraps without truncation. */
.kiosk-page .kiosk-content p {
    width: 100% !important;
    max-width: min(92vw, 70rem) !important;
    font-size: clamp(1.55rem, 3vmin, 3.4rem) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-wrap: balance !important;
}

/* Kiosk identifier remains bottom-right but clear of the hidden corner target. */
.kiosk-page .kiosk-client-banner {
    right: clamp(1rem, 2vmin, 2rem) !important;
    bottom: calc(var(--kiosk-corner-size) + clamp(.5rem, 1vmin, 1rem)) !important;
    z-index: 18 !important;
    pointer-events: none !important;
}

/* Height-constrained landscape screens must still fit without shrinking back
   to the pre-contract sizes. */
@media (orientation: landscape) and (max-height: 760px) {
    .kiosk-page .kiosk-header-logo {
        width: clamp(22rem, 44vw, 52rem) !important;
        max-height: clamp(5rem, 14vh, 8.5rem) !important;
    }

    .kiosk-page .kiosk-content .kiosk-status-title {
        font-size: clamp(2.75rem, 6.8vh, 5rem) !important;
    }

    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        min-height: clamp(8.75rem, 23vh, 12.5rem) !important;
        font-size: clamp(2.6rem, 7.2vh, 4.75rem) !important;
    }

    .kiosk-page .kiosk-secondary-single,
    .kiosk-page .kiosk-secondary-actions button {
        min-height: clamp(6.25rem, 17vh, 9rem) !important;
        font-size: clamp(2rem, 5.4vh, 3.4rem) !important;
    }
}

/* HOMYN_PROOFSCREEN_VISUAL_CONTRACT_V6_END */
/* HOMYN_PROOFSCREEN_RESPONSIVE_CONTAINMENT_V8_BEGIN
   One bounded geometry system for every proof-screen viewport.
*/
:root {
    --kiosk-safe-inline: clamp(1rem, 4vw, 4rem);
    --kiosk-safe-block: clamp(1rem, 3vh, 3rem);

    --kiosk-shell-max: 78rem;
    --kiosk-action-max: 64rem;

    --kiosk-primary-min-height: clamp(6.5rem, 15vh, 11rem);
    --kiosk-secondary-min-height: clamp(4.75rem, 11vh, 8rem);

    --kiosk-primary-font: clamp(2rem, 4.6vmin, 4.8rem);
    --kiosk-secondary-font: clamp(1.5rem, 3.3vmin, 3.4rem);
}

/* Width calculations must include border and padding. */
.kiosk-page,
.kiosk-page *,
.kiosk-page *::before,
.kiosk-page *::after {
    box-sizing: border-box !important;
}

/* The page itself must never create lateral overflow. */
.kiosk-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* One authoritative safe-area shell. */
.kiosk-page .kiosk-content,
.kiosk-page .kiosk-start-gate {
    width: min(
        var(--kiosk-shell-max),
        calc(100vw - (2 * var(--kiosk-safe-inline)))
    ) !important;
    max-width: calc(100vw - (2 * var(--kiosk-safe-inline))) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    overflow: visible !important;
}

/* Shared bounded width for all content in the shell. */
.kiosk-page .kiosk-header-logo,
.kiosk-page .kiosk-status-title,
.kiosk-page .kiosk-content > p,
.kiosk-page .kiosk-message,
.kiosk-page .kiosk-primary-action,
.kiosk-page .kiosk-start-button,
.kiosk-page .kiosk-secondary-single,
.kiosk-page .kiosk-secondary-actions,
.kiosk-page .kiosk-secondary-actions button {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Logo scales inside the same shell instead of independently against viewport width. */
.kiosk-page .kiosk-header-logo {
    width: min(72%, 42rem) !important;
    height: auto !important;
    max-height: clamp(4rem, 14vh, 10rem) !important;
    object-fit: contain !important;
    margin-inline: auto !important;
}

/* Status and instruction copy remain inside the shared border. */
.kiosk-page .kiosk-status-title {
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: clamp(.25rem, 1vw, 1rem) !important;
    font-size: clamp(2.2rem, 5.8vmin, 6rem) !important;
    line-height: 1.03 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    text-wrap: balance !important;
}

.kiosk-page .kiosk-content > p,
.kiosk-page .kiosk-message {
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: clamp(.25rem, 1vw, 1rem) !important;
    font-size: clamp(1.15rem, 2.5vmin, 2.6rem) !important;
    line-height: 1.28 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    text-wrap: balance !important;
}

/* Primary action uses the shell width, not a separate vw calculation. */
.kiosk-page .kiosk-primary-action,
.kiosk-page .kiosk-start-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(100%, var(--kiosk-action-max)) !important;
    max-width: 100% !important;
    min-height: var(--kiosk-primary-min-height) !important;
    height: auto !important;

    margin-inline: auto !important;
    padding:
        clamp(1.25rem, 2.8vmin, 2.5rem)
        clamp(1.25rem, 3.6vmin, 3.5rem) !important;

    border-width: clamp(2px, .28vmin, 4px) !important;
    border-style: solid !important;
    border-radius: clamp(1.1rem, 2.4vmin, 2.1rem) !important;

    font-size: var(--kiosk-primary-font) !important;
    line-height: 1.05 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-wrap: balance !important;
}

/* Secondary actions obey the identical containment rule. */
.kiosk-page .kiosk-secondary-actions {
    width: min(100%, var(--kiosk-action-max)) !important;
    margin-inline: auto !important;
    gap: clamp(.75rem, 1.8vmin, 1.5rem) !important;
}

.kiosk-page .kiosk-secondary-single,
.kiosk-page .kiosk-secondary-actions button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--kiosk-secondary-min-height) !important;
    height: auto !important;

    margin-inline: auto !important;
    padding:
        clamp(1rem, 2.2vmin, 2rem)
        clamp(1.1rem, 3vmin, 2.75rem) !important;

    border-width: clamp(2px, .25vmin, 4px) !important;
    border-style: solid !important;
    border-radius: clamp(.9rem, 2vmin, 1.7rem) !important;

    font-size: var(--kiosk-secondary-font) !important;
    line-height: 1.08 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-wrap: balance !important;
}

/* Short landscape displays: preserve borders and reduce vertical demand. */
@media (orientation: landscape) and (max-height: 760px) {
    :root {
        --kiosk-safe-inline: clamp(1rem, 4.25vw, 2.75rem);
        --kiosk-safe-block: clamp(.75rem, 2vh, 1.5rem);
        --kiosk-primary-min-height: clamp(5.75rem, 19vh, 8.75rem);
        --kiosk-secondary-min-height: clamp(4.25rem, 14vh, 6.5rem);
        --kiosk-primary-font: clamp(1.9rem, 6vh, 3.8rem);
        --kiosk-secondary-font: clamp(1.4rem, 4.2vh, 2.7rem);
    }

    .kiosk-page .kiosk-header-logo {
        width: min(50%, 32rem) !important;
        max-height: 11vh !important;
    }

    .kiosk-page .kiosk-status-title {
        font-size: clamp(2rem, 6.5vh, 4rem) !important;
    }

    .kiosk-page .kiosk-content > p,
    .kiosk-page .kiosk-message {
        font-size: clamp(1rem, 3.5vh, 1.7rem) !important;
    }
}

/* Portrait screens: actions remain broad but not oversized panels. */
@media (orientation: portrait) {
    :root {
        --kiosk-safe-inline: clamp(1rem, 5vw, 2.5rem);
        --kiosk-primary-min-height: clamp(7rem, 13vh, 11rem);
        --kiosk-secondary-min-height: clamp(5rem, 9vh, 7.5rem);
    }

    .kiosk-page .kiosk-header-logo {
        width: min(78%, 36rem) !important;
    }

    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        width: 100% !important;
    }
}

/* Very small screens always preserve a visible outer border. */
@media (max-width: 520px), (max-height: 520px) {
    :root {
        --kiosk-safe-inline: 1rem;
        --kiosk-primary-min-height: 5.75rem;
        --kiosk-secondary-min-height: 4.25rem;
    }

    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button,
    .kiosk-page .kiosk-secondary-single,
    .kiosk-page .kiosk-secondary-actions button {
        border-radius: 1rem !important;
    }
}
/* HOMYN_PROOFSCREEN_RESPONSIVE_CONTAINMENT_V8_END */
/* HOMYN_PROOFSCREEN_AD_SURFACE_CONSISTENCY_V9_BEGIN
   The proof screen is a controlled presentation/ad surface, not a fluid form.
*/
:root {
    --proof-utility-rail-height: clamp(3.75rem, 7vh, 5rem);
    --proof-frame-max-width: 74rem;
    --proof-action-max-width: 58rem;
    --proof-action-ratio: 5 / 1;
    --proof-frame-inline-gutter: clamp(1.25rem, 5vw, 5rem);
    --proof-frame-block-gutter: clamp(1rem, 2.5vh, 2.5rem);
}

/* Reserve the lower utility rail so metadata never occupies proof/ad content. */
.kiosk-page {
    min-height: 100dvh !important;
    padding-bottom: var(--proof-utility-rail-height) !important;
    overflow: hidden !important;
}

/* Stable central presentation frame. */
.kiosk-page .kiosk-content,
.kiosk-page .kiosk-start-gate {
    width: min(
        var(--proof-frame-max-width),
        calc(100vw - (2 * var(--proof-frame-inline-gutter)))
    ) !important;
    max-width: calc(100vw - (2 * var(--proof-frame-inline-gutter))) !important;
    max-height: calc(
        100dvh -
        var(--proof-utility-rail-height) -
        (2 * var(--proof-frame-block-gutter))
    ) !important;
    margin-inline: auto !important;
    padding: 0 !important;
}

/* Logo remains proportional to the controlled frame. */
.kiosk-page .kiosk-header-logo {
    width: min(54%, 36rem) !important;
    max-width: 100% !important;
    max-height: clamp(4rem, 12vh, 8.5rem) !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Headline and copy are capped independently of action geometry. */
.kiosk-page .kiosk-status-title {
    width: min(100%, 62rem) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

.kiosk-page .kiosk-content > p,
.kiosk-page .kiosk-message {
    width: min(100%, 62rem) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

/* Primary action: consistent branded proportion across display classes. */
.kiosk-page .kiosk-primary-action,
.kiosk-page .kiosk-start-button {
    width: clamp(24rem, 52vw, var(--proof-action-max-width)) !important;
    max-width: min(82vw, var(--proof-action-max-width)) !important;
    min-width: 0 !important;

    aspect-ratio: var(--proof-action-ratio) !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;

    margin-inline: auto !important;
    padding:
        clamp(1rem, 2.2vmin, 2rem)
        clamp(1.25rem, 3vmin, 3rem) !important;

    font-size: clamp(2rem, 4.1vmin, 4rem) !important;
    line-height: 1.05 !important;
}

/* Secondary actions preserve a related but more compact proportion. */
.kiosk-page .kiosk-secondary-actions {
    width: clamp(22rem, 46vw, 48rem) !important;
    max-width: min(82vw, 48rem) !important;
    margin-inline: auto !important;
}

.kiosk-page .kiosk-secondary-single,
.kiosk-page .kiosk-secondary-actions button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(4.75rem, 10vh, 7rem) !important;
    height: auto !important;
    aspect-ratio: auto !important;
}

/* The kiosk identifier belongs to the utility rail, never the proof canvas. */
.kiosk-page .kiosk-client-banner {
    position: fixed !important;
    right: clamp(.75rem, 1.6vw, 1.5rem) !important;
    bottom: clamp(.75rem, 1.6vh, 1.25rem) !important;
    top: auto !important;

    max-width: min(38vw, 18rem) !important;
    margin: 0 !important;

    z-index: 40 !important;
    pointer-events: none !important;
}

/* The connection badge remains in its own upper utility position. */
.kiosk-page .kiosk-connection {
    top: clamp(.75rem, 1.6vh, 1.5rem) !important;
    right: clamp(.75rem, 1.6vw, 1.5rem) !important;
}

/* Compact landscape advertising surfaces. */
@media (orientation: landscape) and (max-height: 760px) {
    :root {
        --proof-utility-rail-height: clamp(3.25rem, 8vh, 4.25rem);
        --proof-frame-inline-gutter: clamp(1.5rem, 6vw, 4rem);
        --proof-action-max-width: 48rem;
    }

    .kiosk-page .kiosk-header-logo {
        width: min(42%, 28rem) !important;
        max-height: 10vh !important;
    }

    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        width: clamp(22rem, 64vw, 48rem) !important;
        max-width: calc(100vw - (2 * var(--proof-frame-inline-gutter))) !important;
        aspect-ratio: 5.2 / 1 !important;
        font-size: clamp(1.85rem, 5.2vh, 3.25rem) !important;
    }
}

/* Portrait advertising surfaces remain centered and proportionate. */
@media (orientation: portrait) {
    :root {
        --proof-frame-inline-gutter: clamp(1.5rem, 6vw, 3rem);
        --proof-action-max-width: 44rem;
    }

    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        width: min(82vw, 44rem) !important;
        max-width: calc(100vw - (2 * var(--proof-frame-inline-gutter))) !important;
        aspect-ratio: 4.6 / 1 !important;
    }

    .kiosk-page .kiosk-secondary-actions {
        width: min(78vw, 38rem) !important;
    }
}

/* Extra-small screens retain minimum borders and usable text wrapping. */
@media (max-width: 520px) {
    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        width: calc(100vw - 2.5rem) !important;
        max-width: calc(100vw - 2.5rem) !important;
        aspect-ratio: auto !important;
        min-height: 6rem !important;
    }

    .kiosk-page .kiosk-client-banner {
        max-width: 46vw !important;
    }
}
/* HOMYN_PROOFSCREEN_AD_SURFACE_CONSISTENCY_V9_END */
/* HOMYN_PROOFSCREEN_SECONDARY_ACTION_V10_BEGIN
   Secondary actions must remain touch-safe without competing with the proof state.
*/
:root {
    --proof-secondary-max-width: 34rem;
    --proof-secondary-ratio: 6 / 1;
}

/* Single secondary actions such as Cancel Request stay compact and centered. */
.kiosk-page .kiosk-secondary-single {
    width: clamp(20rem, 32vw, var(--proof-secondary-max-width)) !important;
    max-width: min(72vw, var(--proof-secondary-max-width)) !important;
    min-width: 0 !important;

    aspect-ratio: var(--proof-secondary-ratio) !important;
    min-height: 4.75rem !important;
    max-height: 6.5rem !important;
    height: auto !important;

    margin-inline: auto !important;
    padding:
        clamp(.85rem, 1.8vmin, 1.4rem)
        clamp(1.25rem, 2.8vmin, 2.25rem) !important;

    font-size: clamp(1.35rem, 2.6vmin, 2.3rem) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
}

/* Multi-action rows preserve equal, bounded controls. */
.kiosk-page .kiosk-secondary-actions {
    width: min(100%, 46rem) !important;
    max-width: 78vw !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
}

.kiosk-page .kiosk-secondary-actions button {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 22rem !important;
    min-height: 4.75rem !important;
    max-height: 6.5rem !important;
    aspect-ratio: auto !important;
    font-size: clamp(1.25rem, 2.4vmin, 2.1rem) !important;
}

/* Compact landscape surfaces need a narrower secondary action. */
@media (orientation: landscape) and (max-height: 760px) {
    .kiosk-page .kiosk-secondary-single {
        width: clamp(18rem, 36vw, 30rem) !important;
        max-width: 62vw !important;
        min-height: 4.25rem !important;
        max-height: 5.5rem !important;
        aspect-ratio: 6.2 / 1 !important;
        font-size: clamp(1.2rem, 3.7vh, 1.9rem) !important;
    }
}

/* Portrait retains comfortable touch size without becoming a panel. */
@media (orientation: portrait) {
    .kiosk-page .kiosk-secondary-single {
        width: min(68vw, 32rem) !important;
        max-width: calc(100vw - 3rem) !important;
        aspect-ratio: 5.5 / 1 !important;
        min-height: 5rem !important;
        max-height: 6.5rem !important;
    }

    .kiosk-page .kiosk-secondary-actions {
        width: min(72vw, 36rem) !important;
        max-width: calc(100vw - 3rem) !important;
    }
}

/* Small displays fall back to bounded content height. */
@media (max-width: 520px) {
    .kiosk-page .kiosk-secondary-single {
        width: calc(100vw - 3rem) !important;
        max-width: calc(100vw - 3rem) !important;
        aspect-ratio: auto !important;
        min-height: 4.75rem !important;
    }
}
/* HOMYN_PROOFSCREEN_SECONDARY_ACTION_V10_END */



/* Database-driven active locale selector */
.kiosk-language-control {
    position: fixed;
    z-index: 45;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 14px;
    background: rgba(10, 31, 51, .78);
    backdrop-filter: blur(10px);
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.kiosk-language-control label {
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.kiosk-language-control select {
    min-width: 190px;
    min-height: 44px;
    border: 2px solid rgba(255, 255, 255, .48);
    border-radius: 10px;
    background: #fff;
    color: #102b43;
    padding: 7px 34px 7px 10px;
    font-size: 1rem;
    font-weight: 700;
}

.kiosk-language-control select:focus-visible {
    outline: 4px solid rgba(255, 205, 64, .88);
    outline-offset: 3px;
}

.kiosk-rotating-locale {
    min-height: 32px;
    margin: 4px 0 12px;
    color: #fff;
    font-size: clamp(.95rem, 1.4vw, 1.25rem);
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

@media (max-width: 720px) {
    .kiosk-language-control {
        left: 14px;
        right: 14px;
        justify-content: space-between;
    }

    .kiosk-language-control select {
        min-width: 0;
        width: min(64vw, 260px);
    }
}


/* HOMYN_KIOSK_STATUS_LANGUAGE_NODRIFT_V6_BEGIN
   Preserve the original connection pill and place the active-locale selector
   beside it. Neither control replaces the other. */
.kiosk-top-controls {
    position: fixed;
    z-index: 45;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    max-width: calc(100vw - 36px);
}

.kiosk-top-controls .kiosk-connection {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}

.kiosk-top-controls .kiosk-language-control {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    flex: 0 1 auto;
}

@media (max-width: 720px) {
    .kiosk-top-controls {
        left: 14px;
        right: 14px;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .kiosk-top-controls .kiosk-connection {
        order: 1;
    }

    .kiosk-top-controls .kiosk-language-control {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
    }
}
/* HOMYN_KIOSK_STATUS_LANGUAGE_NODRIFT_V6_END */

/* HOMYN_LOCALIZATION_FLAG_MENU_V1 */
.kiosk-language-control{position:relative}.kiosk-language-label{font-size:.86rem;font-weight:700}.kiosk-language-trigger{min-height:44px;min-width:210px;display:inline-flex;align-items:center;gap:10px;border:2px solid rgba(255,255,255,.48);border-radius:10px;background:#fff;color:#102b43;padding:7px 12px;font-size:1rem;font-weight:700}.kiosk-language-trigger img,.kiosk-language-menu img{width:30px;height:20px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.2)}.kiosk-language-menu{position:absolute;top:calc(100% + 8px);right:0;width:min(360px,calc(100vw - 28px));max-height:min(520px,70vh);overflow-y:auto;padding:8px;border-radius:14px;background:rgba(10,31,51,.98);box-shadow:0 18px 48px rgba(0,0,0,.38)}.kiosk-language-menu button{width:100%;min-height:52px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;border:0;border-radius:10px;background:transparent;color:#fff;padding:8px 10px;text-align:left;font-size:1rem}.kiosk-language-menu button:hover,.kiosk-language-menu button:focus-visible,.kiosk-language-menu button[aria-selected="true"]{background:rgba(255,255,255,.16);outline:none}.kiosk-language-menu small{opacity:.8}
/* Homyn kiosk baseline contract:
   The original blue background is always the underlying surface.
   Advertising may cover it only after media has loaded successfully. */
.kiosk-shell,
.kiosk-page {
    background:
        radial-gradient(circle at 20% 15%, rgba(42,151,255,.38), transparent 38%),
        radial-gradient(circle at 80% 85%, rgba(0,210,170,.24), transparent 36%),
        linear-gradient(
            145deg,
            var(--kiosk-background-start),
            var(--kiosk-background-middle) 55%,
            var(--kiosk-background-end)
        );
}

/* HOMYN_HYBRID_KIOSK_BASE_TEMPLATE_V1_BEGIN
   Locked protected-control template for every HYBRID kiosk surface.
   Advertising may replace only the background media layer.
*/

.kiosk-shell,
.kiosk-page {
    background: #061728;
}

.kiosk-page {
    isolation: isolate;
}

/* The protected service content floats directly over the ambient/ad layer. */
.kiosk-page .kiosk-service-overlay,
.kiosk-page .kiosk-content,
.kiosk-page .kiosk-start-gate {
    position: relative;
    z-index: 10;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Center the content and bias it slightly upward without changing state logic. */
.kiosk-page .kiosk-content,
.kiosk-page .kiosk-start-gate {
    width: min(92vw, 86rem) !important;
    max-width: 92vw !important;
    padding: clamp(1rem, 2.4vmin, 2.6rem) !important;
    transform: translateY(-3vh);
    text-align: center;
}

/* SecureWrap logo: 200% visual treatment, responsively bounded. */
.kiosk-page .kiosk-header-logo {
    width: clamp(30rem, 64vw, 82rem) !important;
    max-width: 88vw !important;
    max-height: clamp(8rem, 20vh, 16rem) !important;
    margin:
        0 auto
        clamp(1.1rem, 2.4vmin, 2.5rem) !important;
    object-fit: contain !important;
    filter: none !important;
}

/* Crisp customer hierarchy; no opaque panel behind logo or text. */
.kiosk-page .kiosk-status-title {
    max-width: min(90vw, 76rem) !important;
    margin:
        0 auto
        clamp(1.15rem, 2.4vmin, 2.4rem) !important;
    color: var(--securewrap-orange) !important;
    -webkit-text-fill-color: var(--securewrap-orange) !important;
    font-size: clamp(3.8rem, 7.6vmin, 8.4rem) !important;
    line-height: 1.01 !important;
    font-weight: 800 !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .22) !important;
}

.kiosk-page .kiosk-content p,
.kiosk-page .kiosk-start-gate p {
    max-width: min(88vw, 68rem) !important;
    margin:
        0 auto
        clamp(1.5rem, 3.3vmin, 3.4rem) !important;
    color: #eef8ff !important;
    font-size: clamp(1.55rem, 2.8vmin, 3.1rem) !important;
    line-height: 1.32 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .38);
}

/* Primary action: 150% visual treatment; icon-free by markup contract. */
.kiosk-page .kiosk-primary-action,
.kiosk-page .kiosk-start-button {
    width: min(88vw, 72rem) !important;
    max-width: 88vw !important;
    min-height: clamp(8.75rem, 18vh, 14rem) !important;
    padding:
        clamp(1.55rem, 3.1vmin, 3rem)
        clamp(2rem, 5vmin, 5.5rem) !important;
    border: 1px solid rgba(118, 211, 255, .72) !important;
    border-radius: clamp(1.3rem, 2.2vmin, 2.2rem) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(222,241,255,.98)) !important;
    color: #081f38 !important;
    font-size: clamp(3rem, 5.5vmin, 6rem) !important;
    line-height: 1.02 !important;
    font-weight: 850 !important;
    box-shadow:
        0 20px 55px rgba(0, 0, 0, .30),
        0 0 22px rgba(67, 189, 240, .18) !important;
}

/* Language control is fixed upper-right and belongs to protected chrome. */
.kiosk-top-controls {
    position: fixed !important;
    top: max(1rem, env(safe-area-inset-top)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 45 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: min(92vw, 40rem) !important;
}

.kiosk-top-controls .kiosk-language-control {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    padding: clamp(.5rem, 1vmin, .8rem) clamp(.7rem, 1.3vmin, 1.15rem) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 999px !important;
    background: rgba(4, 18, 34, .74) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.26) !important;
    backdrop-filter: blur(12px) !important;
}

.kiosk-language-trigger {
    min-width: clamp(13rem, 18vw, 20rem) !important;
    border-radius: 999px !important;
}

/* Protected lower-right kiosk identity/status, aligned with admin upload chrome. */
.kiosk-device-identity {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(var(--kiosk-corner-size) + max(.75rem, env(safe-area-inset-bottom)));
    z-index: 45;
    display: inline-grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(.55rem, 1vmin, .9rem);
    max-width: min(48vw, 30rem);
    padding:
        clamp(.6rem, 1.1vmin, .95rem)
        clamp(.85rem, 1.5vmin, 1.35rem);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(4, 18, 34, .78);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.kiosk-device-status-dot {
    width: clamp(.72rem, 1.25vmin, 1.05rem);
    height: clamp(.72rem, 1.25vmin, 1.05rem);
    border-radius: 50%;
    background: #f1b735;
    box-shadow: 0 0 0 .25rem rgba(241,183,53,.12);
}

.kiosk-device-status-icon {
    width: clamp(1.5rem, 2.3vmin, 2.25rem);
    height: clamp(1.5rem, 2.3vmin, 2.25rem);
    object-fit: contain;
    transform-origin: 50% 50%;
}

.kiosk-device-status-text {
    min-width: 0;
    font-size: clamp(.82rem, 1.45vmin, 1.25rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .015em;
    white-space: normal;
    overflow-wrap: anywhere;
}

.kiosk-device-identity.connected .kiosk-device-status-dot {
    background: #25d45a;
    box-shadow:
        0 0 0 .25rem rgba(37,212,90,.14),
        0 0 18px rgba(37,212,90,.58);
}

.kiosk-device-identity.connected .kiosk-device-status-icon {
    animation: homyn-kiosk-connected-breathe 4.2s ease-in-out infinite;
}

.kiosk-device-identity.degraded .kiosk-device-status-dot {
    background: #f1b735;
    box-shadow: 0 0 0 .25rem rgba(241,183,53,.14);
}

.kiosk-device-identity.degraded .kiosk-device-status-icon {
    animation: none;
    opacity: .88;
}

.kiosk-device-identity.offline .kiosk-device-status-dot {
    background: #ef4b4b;
    box-shadow: 0 0 0 .25rem rgba(239,75,75,.14);
}

.kiosk-device-identity.offline .kiosk-device-status-icon {
    animation: none;
    opacity: .72;
}

@keyframes homyn-kiosk-connected-breathe {
    0%, 100% {
        transform: scale(1);
        filter: brightness(.92);
    }

    50% {
        transform: scale(1.12);
        filter: brightness(1.18);
    }
}

@media (max-width: 720px) {
    .kiosk-top-controls {
        top: .7rem !important;
        right: .7rem !important;
        left: auto !important;
        max-width: calc(100vw - 1.4rem) !important;
    }

    .kiosk-language-label {
        display: none;
    }

    .kiosk-language-trigger {
        min-width: min(68vw, 18rem) !important;
    }

    .kiosk-device-identity {
        right: .7rem;
        max-width: min(66vw, 24rem);
    }

    .kiosk-page .kiosk-content,
    .kiosk-page .kiosk-start-gate {
        transform: translateY(-1.5vh);
    }
}

@media (orientation: landscape) and (max-height: 760px) {
    .kiosk-page .kiosk-header-logo {
        width: clamp(21rem, 44vw, 50rem) !important;
        max-height: 13vh !important;
    }

    .kiosk-page .kiosk-status-title {
        font-size: clamp(2.6rem, 6.8vh, 5rem) !important;
    }

    .kiosk-page .kiosk-content p {
        font-size: clamp(1.15rem, 3.4vh, 2rem) !important;
        margin-bottom: clamp(.8rem, 2.2vh, 1.5rem) !important;
    }

    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        min-height: clamp(6.4rem, 19vh, 9rem) !important;
        font-size: clamp(2.1rem, 6.4vh, 4rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-device-identity.connected .kiosk-device-status-icon {
        animation: none;
    }
}
/* HOMYN_HYBRID_KIOSK_BASE_TEMPLATE_V1_END */

/* HOMYN_KIOSK_FLOATING_DEPTH_V2_BEGIN
   Visual depth only. No layout, control-position, or workflow changes.
*/

.kiosk-page .kiosk-service-overlay {
    isolation: isolate;
}

/* A broad, transparent atmospheric halo—not a card. */
.kiosk-page .kiosk-service-overlay::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(88vw, 78rem);
    height: min(68vh, 42rem);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(3, 20, 35, .34) 0%,
            rgba(3, 18, 32, .18) 42%,
            transparent 72%
        );
    filter: blur(22px);
}

.kiosk-page .kiosk-header-logo {
    filter:
        drop-shadow(0 12px 24px rgba(0, 0, 0, .22))
        drop-shadow(0 2px 4px rgba(0, 0, 0, .18)) !important;
}

.kiosk-page .kiosk-status-title {
    text-shadow:
        0 12px 26px rgba(0, 0, 0, .28),
        0 2px 3px rgba(0, 0, 0, .22) !important;
}

.kiosk-page .kiosk-content p,
.kiosk-page .kiosk-start-gate p {
    text-shadow:
        0 8px 20px rgba(0, 0, 0, .34),
        0 1px 2px rgba(0, 0, 0, .28) !important;
}

.kiosk-page .kiosk-primary-action,
.kiosk-page .kiosk-start-button {
    box-shadow:
        0 26px 58px rgba(0, 0, 0, .34),
        0 8px 18px rgba(0, 25, 49, .24),
        inset 0 1px 0 rgba(255, 255, 255, .90) !important;
    transform: translateZ(0);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.kiosk-page .kiosk-primary-action:active,
.kiosk-page .kiosk-start-button:active {
    transform: translateY(2px) scale(.995);
    box-shadow:
        0 15px 32px rgba(0, 0, 0, .30),
        0 5px 12px rgba(0, 25, 49, .20),
        inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-page .kiosk-primary-action,
    .kiosk-page .kiosk-start-button {
        transition: none;
    }
}
/* HOMYN_KIOSK_FLOATING_DEPTH_V2_END */

/* HOMYN_KIOSK_COMPACT_CHROME_V4_BEGIN
   Preserve current protected-control positions and reduce visual footprint slightly.
*/

.kiosk-top-controls .kiosk-language-control {
    padding: clamp(.32rem, .62vmin, .52rem) clamp(.48rem, .9vmin, .78rem) !important;
}

.kiosk-language-trigger {
    min-width: clamp(10.5rem, 14vw, 16rem) !important;
    min-height: clamp(2rem, 3.4vmin, 2.7rem) !important;
    font-size: clamp(.68rem, 1.05vmin, .9rem) !important;
}

.kiosk-device-identity {
    max-width: min(34vw, 22rem) !important;
    gap: clamp(.38rem, .68vmin, .62rem) !important;
    padding: clamp(.38rem, .68vmin, .58rem) clamp(.58rem, .95vmin, .86rem) !important;
}

.kiosk-device-status-dot {
    width: clamp(.58rem, .92vmin, .78rem) !important;
    height: clamp(.58rem, .92vmin, .78rem) !important;
}

.kiosk-device-status-icon {
    width: clamp(1.1rem, 1.7vmin, 1.55rem) !important;
    height: clamp(1.1rem, 1.7vmin, 1.55rem) !important;
}

.kiosk-device-status-text {
    font-size: clamp(.66rem, 1.03vmin, .88rem) !important;
}
/* HOMYN_KIOSK_COMPACT_CHROME_V4_END */