/* Standalone account entry. Keep its layout and motion out of public/panel UI. */
body.pnlt-login-page {
    --pnlt-login-bg: color-mix(in srgb, var(--jds-color-primary, #008a90) 5%, var(--jds-color-surface, #fff));
    --pnlt-login-surface: var(--jds-color-surface, #fff);
    --pnlt-login-text: var(--jds-color-text, #18343d);
    --pnlt-login-muted: var(--jds-color-muted, #536972);
    --pnlt-login-line: var(--jds-color-border, #dce5e9);
    --pnlt-login-action: var(--jds-action-start, #006d78);
    --pnlt-login-on-action: var(--jds-action-text, #fff);
    --pnlt-login-radius: var(--jds-radius-group, 18px);
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: var(--pnlt-login-bg);
    color: var(--pnlt-login-text);
    font-family: var(--jds-font-family, 'Abar', sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: start;
    direction: rtl;
}
body.pnlt-login-page :where(*, *::before, *::after) { box-sizing: border-box; }
body.pnlt-login-page:is(.dark-mode-shkrn, [data-jds-color-mode="dark"], [data-theme="dark"]),
html[data-theme="dark"] body.pnlt-login-page {
    --pnlt-login-bg: var(--jds-night-page);
    --pnlt-login-surface: var(--jds-night-surface);
    --pnlt-login-text: var(--jds-night-text);
    --pnlt-login-muted: var(--jds-night-muted);
    --pnlt-login-line: var(--jds-night-control-border);
    --jaygah-control-bg: var(--pnlt-login-bg);
    --jaygah-control-border: var(--pnlt-login-line);
    --jaygah-text: var(--pnlt-login-text);
}
body.pnlt-login-page a { color: var(--jds-color-accent-text, #006d78); text-decoration: none; }
body.pnlt-login-page :is(a, button, input, select, textarea):focus-visible {
    outline: var(--jds-focus-width, 2px) solid var(--jds-focus-color, #007b91);
    outline-offset: 3px;
}
body.pnlt-login-page .flex-center { display: flex; align-items: center; justify-content: center; }
body.pnlt-login-page .form-structor {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(100%, 350px);
    min-width: 0;
    margin: auto;
    padding: 64px 20px 28px;
    border: 1px solid var(--pnlt-login-line);
    border-radius: var(--jds-radius-card, 24px);
    background: var(--pnlt-login-surface);
    box-shadow: var(--jds-shadow-card, 0 12px 40px rgba(20, 45, 54, .08));
    /* The form stays still and opaque; moving shapes belong to the page behind it. */
}
body.pnlt-login-page .pnlt-login-home {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--jds-radius-control, 12px);
    color: var(--pnlt-login-muted);
    transition: background-color .18s ease, color .18s ease;
}
body.pnlt-login-page .pnlt-login-home:hover { background: var(--pnlt-login-bg); color: var(--pnlt-login-text); }
body.pnlt-login-page .pnlt-login-home svg { display: block; }
body.pnlt-login-page .form-structor > .form-login-pnlt,
body.pnlt-login-page .form-structor > form.login:has(.otp-mobile-pnlt) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.pnlt-login-page .logo-pnlt-login {
    display: block;
    width: auto;
    max-width: min(190px, 100%);
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin: 0 auto 32px;
}
body.pnlt-login-page .pnlt-login-site-name { margin: 0 auto 32px; font-size: 26px; font-weight: 800; }
body.pnlt-login-page :is(.woocommerce-form-row, .form-row) { width: 100%; margin: 0; padding: 0; font-size: 15px; }
body.pnlt-login-page label { display: block; margin-block-end: 6px; color: var(--pnlt-login-text); }
body.pnlt-login-page :is(input[type="email"], input[type="tel"], input[type="password"], input[type="text"]):not(.jaygah-otp-input) {
    width: 100%;
    min-width: 0;
    min-height: var(--jds-control-height, 48px);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--pnlt-login-line);
    border-radius: var(--jaygah-control-radius, 12px);
    background: var(--jaygah-control-bg, var(--pnlt-login-bg));
    color: var(--pnlt-login-text);
    font: inherit;
    -webkit-appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
body.pnlt-login-page :is(input[type="email"], input[type="tel"]) { direction: ltr; text-align: left; }
body.pnlt-login-page .form-structor :is(button[type="submit"], input[type="submit"], .submit-btn-pnlt) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--jds-control-height, 48px);
    padding: 12px 16px;
    border: 0;
    border-radius: var(--jds-radius-group, 18px);
    background: var(--pnlt-login-action);
    color: var(--pnlt-login-on-action);
    font: 700 17px/1.6 var(--jds-font-family, 'Abar', sans-serif);
    cursor: pointer;
    box-shadow: none;
    transition: filter .18s ease;
}
body.pnlt-login-page .form-structor :is(button[type="submit"], input[type="submit"]):hover { filter: brightness(.94); }
body.pnlt-login-page .form-structor :is(button, input):disabled { cursor: not-allowed; opacity: .65; }
body.pnlt-login-page .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
body.pnlt-login-page .go-home-btn-pnlt { display: flex; min-height: 44px; padding: 8px 16px; font-size: 15px; text-align: center; }
body.pnlt-login-page .woocommerce-LostPassword { font-size: 14px; line-height: 1.9; }
body.pnlt-login-page :is(.error-text, .success-text, .woocommerce-error) { width: 100%; padding: 10px 12px; border-radius: var(--jds-radius-control, 12px); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
body.pnlt-login-page :is(.error-text, .success-text) { display: none; }
body.pnlt-login-page :is(.error-text, .woocommerce-error) { background: #fce8eb; color: #9e2337; }
body.pnlt-login-page .success-text { background: #e3f2e9; color: #215c37; }
body.pnlt-login-page .woocommerce-error[role="alert"]::before { display: none; }
body.pnlt-login-page .error-refresh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; color: inherit; text-decoration: underline; }
body.pnlt-login-page :is(#otp-box, #otp-box-signup) { display: none; }
body.pnlt-login-page .show-hide-btn { position: absolute; inset-inline-end: 8px; top: 50%; min-width: 44px; min-height: 44px; cursor: pointer; background: var(--pnlt-login-surface); border-radius: 50%; }
body.pnlt-login-page input[type="password"] ~ .show-pass,
body.pnlt-login-page input[type="text"] ~ .hide-pass { display: none; }
/* Existing timer IDs are also used by optional OTP integrations. */
body.pnlt-login-page .timer-otp { position: absolute; inset-inline-end: 12px; top: 8px; display: flex; align-items: center; justify-content: center; background: var(--pnlt-login-surface); border-radius: 50%; }
body.pnlt-login-page :is(#countdown, #countdown-signup) { position: relative; width: 30px; height: 30px; text-align: center; }
body.pnlt-login-page :is(#countdown-number, #countdown-number-signup) { display: inline-block; margin-top: 2px; color: var(--pnlt-login-text); font-size: 15px; font-weight: 700; }
body.pnlt-login-page :is(#countdown-svg, #countdown-svg-signup) { position: absolute; inset: 0; width: 30px; height: 30px; transform: rotateY(-180deg) rotateZ(-90deg); }
body.pnlt-login-page :is(#countdown-svg, #countdown-svg-signup) path { opacity: 0; }
body.pnlt-login-page :is(#countdown-cross, #countdown-cross-signup) { visibility: hidden; }
/* Full-viewport decoration never receives pointer or keyboard input. */
body.pnlt-login-page > .circles-pnlt {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    pointer-events: none;
    user-select: none;
}
body.pnlt-login-page > .circles-pnlt li {
    position: absolute;
    bottom: -160px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 20%;
    background: var(--var-pnlt-main-color, var(--jds-color-primary, #008a90));
    opacity: 0;
    animation: pnlt-page-circles 25s linear infinite;
}
body.pnlt-login-page > .circles-pnlt li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: -5s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(2) { left: 10%; animation-delay: -2s; animation-duration: 12s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(3) { left: 70%; animation-delay: -14s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: -8s; animation-duration: 18s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(5) { left: 65%; animation-delay: -17s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: -3s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: -7s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: -15s; animation-duration: 45s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: -12s; animation-duration: 35s; }
body.pnlt-login-page > .circles-pnlt li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: -9s; animation-duration: 21s; }
@keyframes pnlt-page-circles {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    12% { opacity: .12; }
    85% { opacity: .12; }
    100% { transform: translateY(calc(-100vh - 200px)) rotate(720deg); opacity: 0; }
}
@media (max-height: 600px) {
    body.pnlt-login-page { align-items: flex-start; }
    body.pnlt-login-page .form-structor { margin-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.pnlt-login-page > .circles-pnlt { display: none; }
    body.pnlt-login-page :is(a, button, input, select, textarea) { transition: none; }
}
body.pnlt-login-page.jaygah-reduced-motion > .circles-pnlt { display: none; }

/* Login-only visual feedback; authentication and panel styles retain their contracts. */
body.pnlt-login-page > .circles-pnlt--circles li{border-radius:50%}
body.pnlt-login-page > :is(.circles-pnlt--custom,.circles-pnlt--learning) li{background:transparent}
body.pnlt-login-page > .circles-pnlt li img{display:block;width:100%;height:100%;object-fit:contain}
body.pnlt-login-page .form-structor button{transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease}
body.pnlt-login-page .form-structor button:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.08)}
body.pnlt-login-page .form-structor button:active:not(:disabled){transform:scale(.97)}
body.pnlt-login-page .form-structor button.pnlt-button-pressed{animation:pnlt-button-press 340ms ease}
body.pnlt-login-page .error-text{align-items:flex-start;gap:10px;text-align:start}
body.pnlt-login-page .pnlt-error-icon{flex:0 0 22px;width:22px;height:22px;margin-top:3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.pnlt-login-page .pnlt-error-copy{min-width:0;line-height:1.9}
body.pnlt-login-page .pnlt-error-next{display:block}
@keyframes pnlt-button-press{0%,100%{transform:scale(1)}40%{transform:scale(.96)}70%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){
 body.pnlt-login-page .form-structor button{transition:none}
 body.pnlt-login-page .form-structor button:is(:hover,:active){transform:none}
 body.pnlt-login-page .form-structor button.pnlt-button-pressed{animation:none;filter:brightness(1.1)}
}
body.pnlt-login-page.jaygah-reduced-motion .form-structor button{animation:none;transition:none}