.device-card.gate-controller-card.gate-access-card {
    --gc-ink: #edf7f5;
    --gc-muted: #a2b9be;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    align-self: start;
    padding: 22px !important;
    border: 1px solid #91c2bb33 !important;
    border-radius: 28px;
    color: var(--gc-ink) !important;
    background: radial-gradient(ellipse at 95% 0, #28605b70, transparent 65%), linear-gradient(155deg, #18353b, #12212e 65%, #14232d) !important;
    box-shadow: 0 16px 38px #0c28342b;
    overflow: hidden;
    isolation: isolate;
}
.device-card.gate-access-card::before,
.device-card.gate-access-card::after { display: none !important; }
.device-card.gate-access-card:hover { transform: none; box-shadow: 0 20px 44px #0c283438; }
.gate-access-card * { box-sizing: border-box; }
.gate-access-card svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.gate-access-card .gc-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gate-access-card .gc-category { color: #98b4b8; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.gate-access-card .gc-connection { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 9px; border-radius: 30px; background: #efb6b110; color: #edb6af; font-size: 11px; font-weight: 600; }
.gate-access-card .gc-connection i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gate-access-card .gc-connection.is-online { color: #88dec2; background: #8adebc15; }
.gate-access-card .gc-title { padding: 18px 0 24px; }
.gate-access-card .gc-title h2 { margin: 0; color: var(--gc-ink); font-size: clamp(20px, 1.7vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: -.5px; overflow-wrap: anywhere; }
.gate-access-card .gc-title p { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; color: var(--gc-muted); font-size: 12px; }
.gate-access-card .gc-title svg { width: 14px; height: 14px; color: #75a69f; }
.gate-access-card .gc-controls { display: grid; gap: 14px; }
.gate-access-card .gc-channel { min-width: 0; padding: 14px; border: 1px solid #abc9ca1c; border-radius: 19px; background: #b5d5cf06; }
.gate-access-card .gc-channel-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.gate-access-card .gc-channel-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #7ab7b414; color: #add5d0; }
.gate-access-card .gc-channel-heading h3 { margin: 0; color: #ecf5f2; font-size: 16px; font-weight: 650; }
.gate-access-card .gc-channel-heading p { margin: 4px 0 0; color: #8da7b0; font-size: 11px; }
.gate-access-card .gc-direction { margin-left: auto; color: #65858b; }
.gate-access-card .gc-direction svg { width: 18px; height: 18px; }
.gate-access-card .gc-slider { --gc-x: 0px; --gc-progress: 0%; position: relative; height: 62px; border: 1px solid #bdd7d626; border-radius: 34px; background: #09171f85; user-select: none; -webkit-user-select: none; }
.gate-access-card .gc-slider-fill { position: absolute; inset: 5px auto 5px 5px; width: calc(var(--gc-x) + 50px); max-width: calc(100% - 10px); border-radius: 30px; background: #62c5ad2b; transition: width .25s; }
.gate-access-card .gc-slider-label { position: absolute; inset: 0 30px 0 59px; display: flex; align-items: center; justify-content: center; color: #b7cfce; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; }
.gate-access-card .gc-slider-end { position: absolute; right: 12px; top: 20px; color: #6c938e; pointer-events: none; }
.gate-access-card .gc-slider-end svg { width: 20px; height: 20px; }
.gate-access-card .gc-slider-thumb { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; width: 50px; height: 50px; min-height: 0; margin: 0; padding: 0; border: 1px solid #c3efe155; border-radius: 50%; color: #0f3937; background: linear-gradient(145deg, #c2edda, #79cdb8); box-shadow: 0 3px 10px #0004, inset 0 1px #fff5; cursor: grab; touch-action: none; transform: translate3d(var(--gc-x),0,0); transition: transform .25s, background .2s; z-index: 2; }
.gate-access-card .gc-slider-thumb svg { width: 23px; height: 23px; }
.gate-access-card .gc-slider-thumb:focus-visible { outline: 3px solid #d2f6e7; outline-offset: 3px; }
.gate-access-card .gc-slider.is-dragging .gc-slider-thumb { cursor: grabbing; transition: none; }
.gate-access-card .gc-slider.is-dragging .gc-slider-fill { transition: none; }
.gate-access-card .gc-slider.is-dragging .gc-slider-label { opacity: .65; }
.gate-access-card .gc-slider.is-ready { border-color: #8ad9bd88; }
.gate-access-card .gc-slider.is-ready .gc-slider-label { opacity: 1; color: #dcf5e9; }
.gate-access-card .gc-slider.is-disabled { opacity: .55; }
.gate-access-card .gc-slider.is-disabled .gc-slider-thumb { cursor: not-allowed; }
.gate-access-card .gc-slider.is-sending .gc-slider-thumb svg { animation: gc-pulse 1s ease-in-out infinite; }
.gate-access-card .gc-guidance { display: flex; gap: 9px; align-items: flex-start; margin-top: 20px; color: #86a2ac; }
.gate-access-card .gc-guidance > svg { width: 15px; height: 15px; margin-top: 2px; }
.gate-access-card .gc-guidance p { margin: 0; font-size: 11px; line-height: 1.6; }
.gate-access-card .gc-guidance span { display: block; margin-top: 2px; color: #6f8c98; font-size: 10px; }
.gate-access-card .gc-result { min-height: 32px; display: flex; align-items: center; padding: 12px 0 2px; color: #aac4c5; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.gate-access-card .gc-result[data-kind=success] { color: #8de1be; }
.gate-access-card .gc-result[data-kind=error] { color: #f4b0a7; }
.gate-access-card .gc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #abc9ca1c; color: #6e8d99; font-size: 10px; }
@keyframes gc-pulse { 50% { opacity: .35; } }
@media(max-width: 400px) {
    .device-card.gate-controller-card.gate-access-card { padding: 18px !important; border-radius: 24px; }
    .gate-access-card .gc-channel { padding: 12px; }
    .gate-access-card .gc-category { letter-spacing: .1em; font-size: 9px; }
}
@media(prefers-reduced-motion: reduce) {
    .gate-access-card .gc-slider-thumb, .gate-access-card .gc-slider-fill { transition: none; }
    .gate-access-card .gc-slider.is-sending .gc-slider-thumb svg { animation: none; }
}

/* Reuse seasonal street scenes and any background selected in device settings. */
.gate-access-card > .gc-background {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.gate-access-card .gc-background > img.photo-v1-bg-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    opacity: .85 !important;
    filter: saturate(.75);
}
.gate-access-card > .gc-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #102b3555, #10233080 35%, #0c1c2bdd 80%, #0c1c2bf5);
}
.gate-access-card > :not(.gc-background) { position: relative; z-index: 1; }
.gate-access-card .gc-header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gate-access-card .gc-settings-button {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid #e0f3f138;
    border-radius: 11px;
    background: #d2edeb18;
    color: #edf8f5;
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.gate-access-card .gc-settings-button svg { width: 18px; height: 18px; }
.gate-access-card .gc-settings-button:hover { background: #d2edeb30; border-color: #e0f3f170; }
.gate-access-card .gc-settings-button:focus-visible { outline: 2px solid #bcf4dc; outline-offset: 3px; }
.gate-access-card .gc-category { color: #c2d6d6; text-shadow: 0 1px 5px #0009; }
.gate-access-card .gc-connection { background: #1c2a33aa; }
.gate-access-card .gc-connection.is-online { background: #153c35bb; color: #a0f2d1; }
.gate-access-card .gc-title h2 { text-shadow: 0 2px 14px #071c2880; }
.gate-access-card .gc-title p { color: #d0e4df; }
.gate-access-card .gc-channel { border-color: #c1deda2b; background: #10212cc2; backdrop-filter: blur(6px); }
.gate-access-card .gc-guidance { color: #b7ccc9; }
.gate-access-card .gc-guidance span { color: #99b2b5; }
.gate-access-card .gc-footer { color: #9fb7bc; }