html.llnc-preload .llnc .llnc-area .module-login,
html.llnc-preload .llnc-footer,
html.llnc-preload .ll-clock,
html.llnc-preload .joinme-floating-button { opacity: 0 !important; animation: none !important; }
html.llnc-preload, html.llnc-preload body { overflow: hidden; }
/* [UNIFIED-CARD r13 2026-08-10] Tokens ship as plain px first so engines
   without clamp() (older iOS and Android WebViews) still resolve every
   var() to a sane value; capable engines take the fluid overrides in the
   @supports blocks below. NOTE: a second declaration is NOT a fallback for
   a var() holding clamp() - an unsupported function inside a custom
   property invalidates the property at computed-value time and resets it
   to initial. The static-tokens-first + @supports-override pattern here is
   the only safe shape; keep it when adding tokens. */
.llnc {
    --llnc-pad-page:   20px;
    --llnc-pad-card-t: 26px;
    --llnc-pad-card-b: 22px;
    --llnc-logo-w:     250px;
    --llnc-gap-header: 18px;
    --llnc-gap-field:  11px;
    --llnc-h-control:  46px;
    --llnc-pad-btn:    11px;
    --llnc-gap-links:  13px;
}
@supports (height: clamp(1px, 1vh, 3px)) {
    .llnc {
        --llnc-pad-page:   clamp(8px,  3.6vh,  32px);
        --llnc-pad-card-t: clamp(16px, 3.6vh,  32px);
        --llnc-pad-card-b: clamp(14px, 3.0vh,  26px);
        --llnc-logo-w:     clamp(170px, 28vh, 280px);
        --llnc-gap-header: clamp(10px, 2.8vh,  22px);
        --llnc-gap-field:  clamp(8px,  1.9vh,  14px);
        --llnc-h-control:  clamp(40px, 5.2vh,  48px);
        --llnc-pad-btn:    clamp(9px,  1.4vh,  12px);
        --llnc-gap-links:  clamp(10px, 2.0vh,  16px);
    }
}
@supports (height: 1svh) {
    .llnc {
        --llnc-pad-page:   clamp(8px,  3.6svh,  32px);
        --llnc-pad-card-t: clamp(16px, 3.6svh,  32px);
        --llnc-pad-card-b: clamp(14px, 3.0svh,  26px);
        --llnc-logo-w:     clamp(170px, 28svh, 280px);
        --llnc-gap-header: clamp(10px, 2.8svh,  22px);
        --llnc-gap-field:  clamp(8px,  1.9svh,  14px);
        --llnc-h-control:  clamp(40px, 5.2svh,  48px);
        --llnc-pad-btn:    clamp(9px,  1.4svh,  12px);
        --llnc-gap-links:  clamp(10px, 2.0svh,  16px);
    }
}
/* [UNIFIED-CARD r17 2026-08-10] THE photo is painted here, on the html
   element - the canvas painter - and NOWHERE else. Proven on a physical
   iPhone by the SSO hub, which paints its photo at canvas level and
   renders seamlessly behind the collapsing browser chrome, while any
   fixed-layer copy gets clipped at the layout viewport on iOS and leaves
   a mismatched band around the footer. One image, one zoom, every device.
   The body below MUST stay transparent or it covers this canvas paint.
   This sheet only loads on /login and pin_access.php, so the bare html
   selector is safe. */
html { background: #dbe1e0 url(/images/login_bg.jpg) center / cover no-repeat; }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.llnc {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100svh;
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    /* bootstrap.min.css (shared header) forces line-height 20px on the
       whole page; normalize inside the card scope so rhythm matches the
       approved design on every element. */
    line-height: 1.4;
}
.llnc .llnc-area .module-login input.llnc-control { line-height: normal; }
.llnc .llnc-area .module-login button.llnc-btn,
.llnc .llnc-area .module-login a.llnc-pk,
.llnc .llnc-area .module-login a.llnc-alt { line-height: 1.2; }
.llnc-flinks, .llnc-flinks .llnc-remember label, .llnc-flinks > a { line-height: 1.35; }
.llnc-or { line-height: 1.2; }
.llnc-footer, .llnc-footer a { line-height: 1.35; }
/* [UNIFIED-CARD r14 2026-08-10] The photo layer spans the LARGE viewport
   (100lvh), not inset:0 - a fixed inset:0 layer stops at the small layout
   viewport, and the strip behind a phone browser's collapsing chrome would
   show the plain canvas color instead of the photo. */
.llnc-bgfx { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; pointer-events: none; }
.llnc-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(10, 30, 16, 0.45) 100%);
}
.llnc .wrapper.login_panel { flex: 1; display: flex; flex-direction: column; padding: 0; margin: 0; position: relative; z-index: 1; }
.llnc-area {
    flex: 1; display: flex; align-items: center; justify-content: center;
    /* the plain px line is the fallback for engines without clamp()/env()
       (older iOS and Android WebViews); modern engines take the second. */
    padding: 16px 20px;
    padding: var(--llnc-pad-page) max(20px, env(safe-area-inset-right)) var(--llnc-pad-page) max(20px, env(safe-area-inset-left));
}
/* the shared header ships no global border-box; without this the card's
   32px side padding ADDS to max-width and the card renders 64px wider
   than the approved design. Scoped to the card subtree only. */
.llnc .llnc-area .module-login,
.llnc .llnc-area .module-login *,
.llnc .llnc-area .module-login *::before,
.llnc .llnc-area .module-login *::after { box-sizing: border-box; }
.llnc .llnc-area .module-login {
    position: relative; top: auto; bottom: auto; left: auto; right: auto;
    float: none; height: auto; width: 100%; max-width: 430px;
    overflow: visible; margin: 0 auto;
    padding: 24px 32px 20px;
    padding: var(--llnc-pad-card-t) 32px var(--llnc-pad-card-b);
    border-radius: 24px; border: 1px solid rgba(6, 89, 34, 0.15);
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(243, 246, 244, 0.93) 100%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    box-shadow: 0 40px 90px -28px rgba(10, 30, 16, 0.50), 0 12px 34px -14px rgba(10, 30, 16, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    animation: llncCardIn 780ms cubic-bezier(0.20, 0.85, 0.25, 1) both;
}
.llnc .llnc-area .module-login::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    pointer-events: none;
}
@keyframes llncCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.llnc-reveal { animation: llncRiseIn 620ms cubic-bezier(0.20, 0.85, 0.25, 1) both; }
.llnc-reveal-1 { animation-delay: 60ms; }
.llnc-reveal-2 { animation-delay: 110ms; }
@keyframes llncRiseIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.llnc-logolink { display: block; margin-bottom: 14px; margin-bottom: var(--llnc-gap-header); }
.llnc-logo {
    width: 100%; max-width: 240px; max-width: var(--llnc-logo-w); height: auto;
    margin: 4px auto 0; display: block;
    filter: drop-shadow(0 8px 18px rgba(10, 30, 16, 0.18));
}
.llnc .llnc-area .module-login .flied { margin: 0 0 10px; margin: 0 0 var(--llnc-gap-field); text-align: left; }
.llnc .llnc-area .module-login .flied + .flied { margin-top: 0; }
.llnc .llnc-area .module-login .flied input.llnc-control,
.llnc .llnc-area .module-login input.llnc-control {
    width: 100%; padding: 12px 15px; margin: 0; box-sizing: border-box;
    border: 1px solid rgba(6, 89, 34, 0.20);
    background: rgba(255, 255, 255, 0.88);
    color: #1c2b21;
    border-radius: 12px; font-family: inherit;
    font-size: 17px;
    font-size-adjust: 0.545;
    height: 44px;
    height: var(--llnc-h-control);
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.llnc .llnc-area .module-login input.llnc-control::placeholder { color: #8a9a90; }
.llnc .llnc-area .module-login input.llnc-control:hover { border-color: rgba(6, 89, 34, 0.38); }
.llnc .llnc-area .module-login input.llnc-control:focus {
    outline: none;
    border-color: rgba(6, 89, 34, 0.60);
    box-shadow: 0 0 0 4px rgba(6, 89, 34, 0.14);
}
.llnc .llnc-area .module-login input.llnc-control:-webkit-autofill,
.llnc .llnc-area .module-login input.llnc-control:-webkit-autofill:hover,
.llnc .llnc-area .module-login input.llnc-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #1c2b21;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    caret-color: #1c2b21;
    transition: background-color 9999s ease-out 0s;
}
.llnc-flinks {
    display: flex; align-items: center; justify-content: space-between;
    margin: 2px 0 10px;
    margin: 2px 0 var(--llnc-gap-field);
    font-size: 13px; color: #6b7a72; text-align: left;
}
.llnc-flinks .llnc-remember label {
    display: flex; align-items: center; gap: 7px; margin: 0;
    font-size: 13px; font-weight: 600; color: #6b7a72; cursor: pointer;
}
.llnc-flinks .llnc-remember input[type="checkbox"] { width: 15px; height: 15px; accent-color: #065922; margin: 0; }
.llnc-flinks > a {
    color: #065922; text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.llnc-flinks > a:hover { color: #0a7a34; border-bottom-color: #0a7a34; }
.llnc .llnc-area .module-login button.llnc-btn {
    position: relative; overflow: hidden;
    width: 100%; padding: 10px 30px;
    padding: var(--llnc-pad-btn) 30px;
    background: linear-gradient(135deg, #0a7a34 0%, #065922 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px; color: #ffffff;
    font-size: 16px; font-weight: 700; font-family: inherit;
    letter-spacing: 0.01em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 14px 30px -12px rgba(6, 89, 34, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease, background 0.25s ease;
}
.llnc .llnc-area .module-login button.llnc-btn::after,
.llnc .llnc-area .module-login a.llnc-pk::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-18deg);
    transition: left 0.75s cubic-bezier(0.2, 0.8, 0.25, 1);
    pointer-events: none;
}
.llnc .llnc-area .module-login button.llnc-btn:hover::after,
.llnc .llnc-area .module-login a.llnc-pk:hover::after { left: 125%; }
.llnc .llnc-area .module-login button.llnc-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0d8a3c 0%, #076b28 100%);
    box-shadow: 0 20px 40px -14px rgba(6, 89, 34, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.llnc .llnc-area .module-login button.llnc-btn:active { transform: translateY(0); }
.llnc-ico { width: 1.05em; height: 1.05em; flex: none; }
.llnc-or {
    display: flex; align-items: center; text-align: center;
    color: #6b7a72; font-size: 12px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; margin: 12px 0;
}
.llnc-or::before, .llnc-or::after { content: ""; flex: 1; height: 1px; background: rgba(6, 89, 34, 0.16); }
.llnc-or span { padding: 0 12px; }
.llnc .llnc-area .module-login a.llnc-pk {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 10px 30px;
    padding: var(--llnc-pad-btn) 30px; box-sizing: border-box;
    border: 1.5px solid rgba(6, 89, 34, 0.45); border-radius: 12px;
    background: transparent; color: #065922;
    font-weight: 700; font-size: 16px; font-family: inherit; text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease,
                background .25s ease, color .25s ease, border-color .25s ease;
}
.llnc .llnc-area .module-login a.llnc-pk:hover, .llnc .llnc-area .module-login a.llnc-pk:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0a7a34 0%, #065922 100%);
    color: #ffffff; border-color: transparent; outline: none;
    box-shadow: 0 20px 40px -14px rgba(6, 89, 34, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.llnc-row { display: flex; gap: 10px; margin-top: 12px; margin-top: var(--llnc-gap-links); }
.llnc .llnc-area .module-login a.llnc-alt {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 10px;
    padding: calc(var(--llnc-pad-btn) - 2px) 10px;
    border-radius: 12px; border: 0;
    font-size: 13.5px; font-weight: 700; font-family: inherit;
    color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.llnc .llnc-area .module-login a.llnc-alt:hover { filter: brightness(1.08); transform: translateY(-1px); }
.llnc-alt-red { background: #bb321f; }
.llnc-alt-gold { background: #bc8908; }
.llnc-footer {
    flex-shrink: 0; position: relative; z-index: 1; background: transparent;
    font-size: 12px; color: rgba(255, 255, 255, 0.38);
    line-height: 1.35; text-align: center;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    margin-top: 10px;
    animation: llncRiseIn 620ms cubic-bezier(0.20, 0.85, 0.25, 1) 160ms both;
}
.llnc-footer a { color: rgba(255, 255, 255, 0.38); text-decoration: none; transition: color 0.2s ease; }
.llnc-footer a:hover { color: rgba(255, 255, 255, 0.75); }
.llnc-fsep { padding: 0 4px; }
.llnc-fid { display: block; text-transform: uppercase; letter-spacing: 0.055em; }
.ll-clock {
    position: fixed; right: 34px; bottom: 24px; z-index: 1;
    display: none; text-align: right; pointer-events: none;
    animation: llncRiseIn 620ms cubic-bezier(0.20, 0.85, 0.25, 1) 200ms both;
}
.ll-clock-time {
    font-size: 64px; font-weight: 800; line-height: 1;
    letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.38) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 22px rgba(10, 30, 16, 0.35));
}
.ll-clock-time .ampm { font-size: 28px; font-weight: 700; margin-left: 7px; }
.ll-clock-date {
    font-size: 25px; font-weight: 600; margin-top: 4px; white-space: nowrap;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 14px rgba(10, 30, 16, 0.45);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .ll-clock-time { background: none; color: rgba(255, 255, 255, 0.75); -webkit-text-fill-color: rgba(255, 255, 255, 0.75); }
}
@media (min-width: 769px) { .ll-clock { display: block; } }
/* [UNIFIED-CARD r14 2026-08-10] Tablet widths: the centered footer and the
   right-anchored clock share the bottom edge, so the clock steps down a
   size and lifts clear of the footer band. The date line still runs wider
   than the time (house rule for the clock's taper). */
@media (min-width: 769px) and (max-width: 1180px) {
    .ll-clock { right: 26px; bottom: 60px; }
    .ll-clock-time { font-size: 44px; }
    .ll-clock-time .ampm { font-size: 20px; }
    .ll-clock-date { font-size: 16px; margin-top: 3px; }
}
@media (max-height: 600px) {
    .llnc-footer { font-size: 11px; margin-top: 6px; padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}
@media (max-height: 470px) {
    .llnc {
        --llnc-pad-page:   6px;
        --llnc-pad-card-t: 12px;
        --llnc-pad-card-b: 10px;
        --llnc-logo-w:     146px;
        --llnc-gap-header: 8px;
        --llnc-gap-field:  7px;
        --llnc-h-control:  38px;
        --llnc-pad-btn:    8px;
        --llnc-gap-links:  8px;
    }
    .llnc-footer { font-size: 10.5px; line-height: 1.3; margin-top: 4px; padding: 4px 8px; padding-bottom: max(4px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px; }
    .llnc-fid { display: inline; margin: 0; }
    .llnc .llnc-area .module-login { padding-left: 22px; padding-right: 22px; }
    .llnc-flinks { font-size: 12.5px; }
}
@media (max-width: 768px) {
    .llnc .llnc-area .module-login { padding-left: 20px; padding-right: 20px; border-radius: 20px; }
    .llnc-logo { max-width: min(240px, var(--llnc-logo-w)); }
    .llnc-area { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
@media (max-width: 767px) {
    .llnc .llnc-area .module-login input.llnc-control { font-size: 18px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .llnc .llnc-area .module-login { background: #f2f5f3; }
    .llnc .llnc-area .module-login input.llnc-control { background: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
    .llnc .llnc-area .module-login, .llnc-reveal, .llnc-footer, .ll-clock { animation: none; }
    .llnc .llnc-area .module-login button.llnc-btn, .llnc .llnc-area .module-login a.llnc-pk,
    .llnc .llnc-area .module-login input.llnc-control, .llnc .llnc-area .module-login a.llnc-alt { transition: none; }
    .llnc .llnc-area .module-login button.llnc-btn:hover, .llnc .llnc-area .module-login a.llnc-pk:hover { transform: none; }
}
/* validation labels keep their legacy tooltip styling (.login_panel
   .module-login .flied label.error_message_login) - the JS that toggles
   them targets those exact ancestors, which is why they are retained. */

/* ---- full-bleed background + phone lock [UNIFIED-CARD r17 2026-08-10] ----
   The photo lives on the html canvas (see the top of this sheet), the
   hub-proven approach that survives iOS browser-chrome collapse. The body
   is transparent so it never covers the canvas paint, and the old fixed
   .llnc-photo layer stays OFF - re-enabling it would put a second copy of
   the image on screen at a different zoom, which iOS exposes as a seam
   around the footer. The .llnc-bgfx wrapper remains only to host the
   desktop vignette. (background-attachment: fixed is NOT used on purpose;
   mobile Safari renders it at the wrong scale.) */
body.llnc { background: transparent; }
.llnc-photo { display: none; }
@media (max-width: 767px) {
    .llnc-vignette { display: none; }
}
/* Phones never scroll: the legacy portal rule, carried over. The card
   rhythm below compresses so the content always fits the visible
   viewport instead of clipping. */
@media (max-width: 767px) {
    html.llnc-lock { overflow: hidden; height: 100%; }
    html.llnc-lock body.llnc {
        overflow: hidden;
        position: fixed;
        width: 100%; left: 0; top: 0;
        min-height: 100vh; min-height: 100dvh;
        max-height: 100vh; max-height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .llnc-footer { margin-top: 4px; }
}
/* [UNIFIED-CARD r13 2026-08-10] Phone rhythm breathes with the visible
   viewport instead of sitting at fixed compressed values: tall phones open
   up, short phones settle on the floors, and the floors are sized so the
   card always fits the locked viewport without scrolling. The min-height
   560 guard is LOAD-BEARING: these blocks come after the max-height 470
   landscape block in the cascade, and without the guard a 667x375
   landscape phone would take these larger tokens and overflow the locked
   viewport. Static px first for engines without clamp(). */
@media (max-width: 767px) and (min-height: 560px) {
    .llnc {
        --llnc-pad-page:   14px;
        --llnc-pad-card-t: 20px;
        --llnc-pad-card-b: 17px;
        --llnc-gap-header: 16px;
        --llnc-gap-field:  11px;
        --llnc-h-control:  44px;
        --llnc-pad-btn:    10px;
        --llnc-gap-links:  13px;
    }
}
@supports (height: clamp(1px, 1vh, 3px)) {
    @media (max-width: 767px) and (min-height: 560px) {
        .llnc {
            --llnc-pad-page:   clamp(10px, 2.2vh, 22px);
            --llnc-pad-card-t: clamp(16px, 3.4vh, 30px);
            --llnc-pad-card-b: clamp(14px, 2.9vh, 26px);
            --llnc-gap-header: clamp(12px, 2.8vh, 24px);
            --llnc-gap-field:  clamp(9px,  1.9vh, 15px);
            --llnc-h-control:  clamp(44px, 6.2vh, 52px);
            --llnc-pad-btn:    clamp(10px, 1.6vh, 14px);
            --llnc-gap-links:  clamp(10px, 2.2vh, 18px);
        }
    }
}
@supports (height: 1svh) {
    @media (max-width: 767px) and (min-height: 560px) {
        .llnc {
            --llnc-pad-page:   clamp(10px, 2.2svh, 22px);
            --llnc-pad-card-t: clamp(16px, 3.4svh, 30px);
            --llnc-pad-card-b: clamp(14px, 2.9svh, 26px);
            --llnc-gap-header: clamp(12px, 2.8svh, 24px);
            --llnc-gap-field:  clamp(9px,  1.9svh, 15px);
            --llnc-h-control:  clamp(44px, 6.2svh, 52px);
            --llnc-pad-btn:    clamp(10px, 1.6svh, 14px);
            --llnc-gap-links:  clamp(10px, 2.2svh, 18px);
        }
    }
}
/* [UNIFIED-CARD r12 2026-08-10] Portrait phones size the logo to the card
   width so it keeps the same visual weight the desktop card carries; the
   height-keyed clamp shrinks badly in real phone browsers because their
   chrome eats ~180px of svh. Short and landscape viewports keep the
   height-keyed clamp so the page still never scrolls. */
@media (max-width: 768px) and (min-height: 560px) {
    .llnc .llnc-area .llnc-logo { max-width: 252px; max-width: min(78%, 270px); }
}

/* ---- Quick Access PIN keypad [UNIFIED-CARD r3 2026-08-10] ----
   The keypad wears the same card: the PIN box reads like the reset-code
   field (centered, letterspaced) and the keys are quiet glass squares
   that press with the same motion language as the buttons. */
.llnc .llnc-area .module-login input.llnc-pin {
    text-align: center;
    font-size: 26px;
    letter-spacing: 0.45em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.llnc .llnc-area .module-login input.llnc-pin::placeholder {
    letter-spacing: 0.02em; font-size: 15px; font-weight: 600;
}
.llnc-keypad { margin: var(--llnc-gap-field) 0 0; }
.llnc-keypad .numberline { display: flex; gap: 8px; margin-bottom: 8px; }
.llnc-keypad .numberline:last-child { margin-bottom: 0; }
.llnc-keypad .content, .llnc-keypad .contentextra { flex: 1; display: flex; }
.llnc-keypad .content div, .llnc-keypad .contentextra div {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    height: clamp(44px, 6.2vh, 54px);
    border-radius: 12px;
    border: 1px solid rgba(6, 89, 34, 0.20);
    background: rgba(255, 255, 255, 0.75);
    color: #1c2b21;
    font-size: 20px; font-weight: 700;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.llnc-keypad .content div:hover, .llnc-keypad .contentextra div:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(6, 89, 34, 0.38);
}
.llnc-keypad .content div:active, .llnc-keypad .contentextra div:active {
    transform: scale(0.96);
    background: rgba(6, 89, 34, 0.10);
}
.llnc-keypad .content div span { pointer-events: none; }
.llnc-keypad .backSpace { display: none !important; }
.llnc-keypad .content .fas, .llnc-keypad .content svg { line-height: 1; pointer-events: none; }
.llnc-remember-center { display: flex; justify-content: center; margin: var(--llnc-gap-field) 0; }
.llnc-remember-center label {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 13px; font-weight: 600; color: #6b7a72; cursor: pointer; line-height: 1.35;
}
.llnc-remember-center input[type="checkbox"] { width: 16px; height: 16px; accent-color: #065922; margin: 0; }

/* submit as <input> (the PIN page's keypad JS binds to input[type=submit]) */
.llnc .llnc-area .module-login input.llnc-btn {
    width: 100%; padding: var(--llnc-pad-btn) 30px; margin: 0; display: block;
    background: linear-gradient(135deg, #0a7a34 0%, #065922 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px; color: #ffffff;
    font-size: 16px; font-weight: 700; font-family: inherit;
    letter-spacing: 0.01em; height: auto; line-height: 1.2; cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(6, 89, 34, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease, background 0.25s ease;
}
.llnc .llnc-area .module-login input.llnc-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0d8a3c 0%, #076b28 100%);
    box-shadow: 0 20px 40px -14px rgba(6, 89, 34, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.llnc .llnc-area .module-login input.llnc-btn:active { transform: translateY(0); }
.llnc-center-link { margin-top: var(--llnc-gap-links); text-align: center; font-size: 13px; color: #6b7a72; }
.llnc-center-link a {
    color: #065922; text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.llnc-center-link a:hover { color: #0a7a34; border-bottom-color: #0a7a34; }