/* admrw_v3_login 3.9.1 */
/* ============================================================================
   IT-360 CONTROL ROOM · V3 SURFACE FOR THE SIGN-IN SCREENS · it360_admin_rework
   Served on three screens and nowhere else: the admin sign-in (/admin/authentication, forgot / reset password, two-factor - six cells since 3.6.9),
   the customer sign-in (/authentication/login, forgot / reset password) and the portal's 2-step code page
   (/client_dashboard/cd_portal/challenge). The same page in the installed app (admin or client PWA) is the same screen.
   Spec: the signed showcase _current\reference\NEUMORPHIC_SHOWCASE_v0_4.html, screens "Login" (admin) and "Login" (client:
   Step 1 of 2 card, Step 2 of 2 code card). Same tokens, slabs, wells and keys as admrw_v3.css; one light source, top-left.
   Laws kept: no !important, no :has(), no harsh black. Every rule starts with the scope html.admrw-v3l: inert without it.
   The page's own words and fields are kept - this sheet only dresses them.
   ============================================================================ */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-sans-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-mono-600.woff2) format("woff2")}

/* ---------- tokens (the showcase's own values) ---------- */
html.admrw-v3l{
 --v3-ground:#E2E7F3;--v3-well:#D9DFEE;
 --v3-convex:linear-gradient(145deg,#EEF2FB,#D8DEEC);
 --v3-pressed:linear-gradient(145deg,#CFD6E8,#E4E9F5);
 --v3-nd:#B3BCD6;--v3-nl:#FFFFFF;--v3-sd:#B4BDD7;--v3-sl:#F8FAFF;
 --v3-ink:#161D2B;--v3-ink2:#2C3545;--v3-ink3:#3A4354;
 --v3-lift:12px 12px 26px var(--v3-nd),-12px -12px 26px var(--v3-nl);
 --v3-lift-md:8px 8px 18px var(--v3-nd),-8px -8px 18px var(--v3-nl);
 --v3-lift-sm:5px 5px 12px var(--v3-nd),-5px -5px 12px var(--v3-nl);
 --v3-sink:inset 6px 6px 12px var(--v3-sd),inset -6px -6px 12px var(--v3-sl);
 --v3-sink-sm:inset 3px 3px 7px var(--v3-sd),inset -3px -3px 7px var(--v3-sl);
 --v3-blue:#2F43D8;--v3-grad-blue:linear-gradient(145deg,#5B8DF8,#2456E0);
 --v3-purple:#6D28D9;--v3-grad-purple:linear-gradient(145deg,#9B6BF6,#6D28D9);
 --v3-ok:#0F5F2D;--v3-warn:#8A3F00;--v3-bad:#A81F14;--v3-focus:#3F52E6;
 --v3-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --v3-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
 color-scheme:light}

/* ---------- ground + aurora (jewel hues under the ground, pinned to the viewport; plain gradients, no blur, no animation) ---------- */
html.admrw-v3l:not(#_):not(#_){background:var(--v3-ground);min-height:100%}
html.admrw-v3l:not(#_):not(#_) body{margin:0;min-height:100vh;min-height:100dvh;background:var(--v3-ground);color:var(--v3-ink);font:15px/1.45 var(--v3-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;font-variant-numeric:tabular-nums}
html.admrw-v3l:not(#_):not(#_) body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(60% 55% at 0% 0%,rgba(170,186,255,.34),transparent 70%),radial-gradient(50% 50% at 100% 18%,rgba(255,221,150,.22),transparent 70%),radial-gradient(55% 50% at 28% 100%,rgba(150,232,196,.24),transparent 70%),radial-gradient(50% 50% at 96% 92%,rgba(212,190,255,.30),transparent 70%)}
html.admrw-v3l:not(#_) body>*{position:relative;z-index:1}
html.admrw-v3l ::selection{background:#C7D0FB;color:var(--v3-ink)}
html.admrw-v3l :focus-visible{outline:3px solid var(--v3-focus);outline-offset:3px}

/* ============================================================================
   THE CARD - one slab for every screen. .v3l-card is put on the page's own card box by the sign-in script (and matched here
   by the page's own classes as well, so the card is right before the script runs).
   Admin: the whole .authentication-form-wrapper becomes the card (logo, heading and form are its children, as the showcase).
   Client: .cd-gate-card. Code step: body.cd-gate .cd-card.
   ============================================================================ */
html.admrw-v3l:not(#_):not(#_) .v3l-card,
html.admrw-v3l:not(#_):not(#_) body.login_admin .authentication-form-wrapper,
html.admrw-v3l:not(#_):not(#_) body.authentication [class*="authentication-form-wrappe"],
html.admrw-v3l:not(#_):not(#_) .cd-gate .cd-gate-card,
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-portal>.cd-card{
 position:relative;box-sizing:border-box;width:min(100%,430px);max-width:430px;margin:0 auto;padding:30px 28px 26px;border-radius:30px;border:0;
 background:var(--v3-convex);box-shadow:var(--v3-lift);display:flex;flex-direction:column;gap:18px;text-align:center;color:var(--v3-ink)}

/* the page around the card: ground, centred, the showcase's 48px / 16px */
html.admrw-v3l:not(#_):not(#_) body.login_admin,
html.admrw-v3l:not(#_):not(#_) body.authentication{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:48px 16px;box-sizing:border-box}
html.admrw-v3l:not(#_):not(#_) body.login_admin .authentication-form-wrapper,
html.admrw-v3l:not(#_):not(#_) body.authentication [class*="authentication-form-wrappe"]{padding-top:30px}
html.admrw-v3l:not(#_):not(#_) .cd-gate{min-height:0;display:grid;place-items:center;padding:48px 0}
html.admrw-v3l:not(#_):not(#_) body.cd-gate{display:grid;place-items:center;padding:48px 0;box-sizing:border-box}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-portal{box-sizing:border-box;max-width:none;margin:0;padding:0;width:100%;display:grid;place-items:center}

/* the stock white box inside the admin card is now just a region of the card */
html.admrw-v3l:not(#_):not(#_) body.login_admin .authentication-form-wrapper>.tw-bg-white,
html.admrw-v3l:not(#_):not(#_) body.authentication [class*="authentication-form-wrappe"]>.tw-bg-white{background:none;box-shadow:none;border:0;border-radius:0;padding:0;margin:0}
html.admrw-v3l:not(#_):not(#_) body.login_admin .authentication-form-wrapper>.text-center,
html.admrw-v3l:not(#_):not(#_) body.authentication [class*="authentication-form-wrappe"]>h1{margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card .row:empty{display:none}

/* ---------- the mark: the company logo on a raised plate (the showcase's mark, carrying the real logo) ---------- */
html.admrw-v3l:not(#_):not(#_) .company-logo,
html.admrw-v3l:not(#_):not(#_) .cd-gate-logo{display:grid;place-items:center;padding:0;margin:0 auto;align-self:center;width:min(100%,250px);height:84px;border-radius:26px;background:var(--v3-convex);box-shadow:var(--v3-lift-md);position:relative}
html.admrw-v3l:not(#_):not(#_) .company-logo a{display:grid;place-items:center;width:100%;height:100%;padding:0 22px;box-sizing:border-box}
html.admrw-v3l:not(#_):not(#_) .company-logo img,
html.admrw-v3l:not(#_):not(#_) .cd-gate-logo img{display:block;max-width:100%;max-height:50px;width:auto;height:auto;margin:0 auto}
html.admrw-v3l:not(#_):not(#_) .cd-gate-logo{padding:0 22px;box-sizing:border-box}
/* the code step and a forgot page carry the showcase's jewel mark instead (no logo on the page) */
html.admrw-v3l:not(#_):not(#_) .v3l-mark{width:84px;height:84px;margin:0 auto;border-radius:26px;background:var(--v3-convex);box-shadow:var(--v3-lift-md);display:grid;place-items:center;position:relative;flex:none}
html.admrw-v3l:not(#_):not(#_) .v3l-mark::before{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--v3-well);box-shadow:var(--v3-sink)}
html.admrw-v3l:not(#_):not(#_) .v3l-mark i{position:relative;display:block;width:26px;height:26px;border-radius:8px;transform:rotate(45deg);background:linear-gradient(145deg,#5467F2,#8B5CF6);box-shadow:0 0 18px rgba(99,102,241,.6)}
html.admrw-v3l:not(#_):not(#_) .v3l-mark.v3l-pur i{background:linear-gradient(145deg,#A78BFA,#6D28D9);box-shadow:0 0 18px rgba(124,58,237,.6)}
html.admrw-v3l:not(#_):not(#_) .cd-gate-card .cd-icon{display:none}

/* ---------- step pill (client: Step 1 of 2 / code: Step 2 of 2) ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-step{align-self:center;font:600 11.5px/1 var(--v3-sans);letter-spacing:.1em;text-transform:uppercase;padding:0 12px;height:28px;display:inline-grid;place-items:center;border-radius:999px;background:var(--v3-well);box-shadow:var(--v3-sink-sm);color:#2440C8}
html.admrw-v3l:not(#_):not(#_) .v3l-step.v3l-pur{color:#6325C7}
html.admrw-v3l:not(#_):not(#_) .cd-gate-card .cd-eyebrow{align-self:center;font:600 11.5px/1 var(--v3-sans);letter-spacing:.1em;text-transform:uppercase;padding:0 12px;height:28px;display:inline-grid;place-items:center;border-radius:999px;background:var(--v3-well);box-shadow:var(--v3-sink-sm);color:#2440C8;margin:0}

/* ---------- words ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-card h1,
html.admrw-v3l:not(#_):not(#_) .v3l-card h2,
html.admrw-v3l:not(#_):not(#_) .v3l-card h3,
html.admrw-v3l:not(#_):not(#_) body.login_admin h1,
html.admrw-v3l:not(#_):not(#_) body.authentication h1,
html.admrw-v3l:not(#_):not(#_) .cd-gate-card h2,
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card h3{margin:0;text-align:center;font:700 20px/1.25 var(--v3-sans);color:var(--v3-ink);letter-spacing:0;text-wrap:balance}
html.admrw-v3l:not(#_):not(#_) body.login_admin h1+p,
html.admrw-v3l:not(#_):not(#_) .v3l-card>p,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-sec-p,
html.admrw-v3l:not(#_):not(#_) .cd-gate-card .cd-gate-sub{margin:-10px 0 0;text-align:center;font:400 15px/1.45 var(--v3-sans);color:var(--v3-ink3);text-wrap:balance}
html.admrw-v3l:not(#_):not(#_) body.login_admin .text-center.tw-mb-5{display:flex;flex-direction:column;gap:18px}
html.admrw-v3l:not(#_):not(#_) body.login_admin .text-center.tw-mb-5 h1{margin:0}
html.admrw-v3l:not(#_):not(#_) body.login_admin .text-center.tw-mb-5 p{margin:-10px 0 0}

/* ---------- form rhythm ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-card form{display:flex;flex-direction:column;gap:18px;margin:0;text-align:left}
html.admrw-v3l:not(#_):not(#_) .v3l-card form .form-group{margin:0;display:grid;gap:8px;text-align:left}
html.admrw-v3l:not(#_):not(#_) .v3l-card form .form-group>span.tw-inline-flex{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card form .form-group.tw-mt-8{margin-top:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card form>.tw-mt-6{margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card form .row:empty{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card .control-label,
html.admrw-v3l:not(#_):not(#_) .v3l-card .form-group>label,
html.admrw-v3l:not(#_):not(#_) .v3l-card .form-group>span>label{display:block;margin:0;font:600 11px/1 var(--v3-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--v3-ink3)}

/* fields: a sunk well, 50px, radius 15 */
html.admrw-v3l:not(#_):not(#_) .v3l-card .form-control,
html.admrw-v3l:not(#_):not(#_) .v3l-card input[type="email"],
html.admrw-v3l:not(#_):not(#_) .v3l-card input[type="text"],
html.admrw-v3l:not(#_):not(#_) .v3l-card input[type="password"]{display:block;width:100%;height:50px;min-height:50px;margin:0;padding:0 16px;border:0;border-radius:15px;background:var(--v3-well);box-shadow:var(--v3-sink-sm);font:500 15px/50px var(--v3-sans);color:var(--v3-ink);outline:none;transition:box-shadow .25s;box-sizing:border-box;caret-color:var(--v3-blue);-webkit-appearance:none;appearance:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card .form-control:focus,
html.admrw-v3l:not(#_):not(#_) .v3l-card input:focus{box-shadow:var(--v3-sink),0 0 0 2px var(--v3-focus);border:0;outline:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card .form-control::placeholder{color:#6B7488}
html.admrw-v3l:not(#_):not(#_) .v3l-card .form-control:-webkit-autofill{-webkit-box-shadow:var(--v3-sink-sm),0 0 0 50px var(--v3-well) inset;-webkit-text-fill-color:var(--v3-ink)}
/* a password well with the eye key: room for the key at the right */
html.admrw-v3l:not(#_):not(#_) .v3l-inw{position:relative;display:block}
html.admrw-v3l:not(#_):not(#_) .v3l-inw input{padding-right:50px}
html.admrw-v3l:not(#_):not(#_) .v3l-eye{position:absolute;right:3px;top:3px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:13px;display:grid;place-items:center;background:none;color:var(--v3-ink3);cursor:pointer;transition:box-shadow .15s}
html.admrw-v3l:not(#_):not(#_) .v3l-eye:hover{color:var(--v3-ink)}
html.admrw-v3l:not(#_):not(#_) .v3l-eye:active,
html.admrw-v3l:not(#_):not(#_) .v3l-eye.v3l-on{box-shadow:var(--v3-sink-sm);color:var(--v3-blue)}
html.admrw-v3l:not(#_):not(#_) .v3l-eye svg{width:20px;height:20px;fill:currentColor;display:block}
html.admrw-v3l:not(#_):not(#_) .v3l-eye .v3l-eye-off{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-eye.v3l-on .v3l-eye-on{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-eye.v3l-on .v3l-eye-off{display:block}
/* the browser's own reveal key is retired where the eye is drawn */
html.admrw-v3l:not(#_):not(#_) .v3l-inw input::-ms-reveal{display:none}

/* small links (Forgot password? / Login) - mono footnote lettering */
html.admrw-v3l:not(#_):not(#_) .v3l-card a.text-muted,
html.admrw-v3l:not(#_):not(#_) .v3l-card .tw-text-center a{font:500 12.5px/1.3 var(--v3-mono);color:var(--v3-ink3);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
html.admrw-v3l:not(#_):not(#_) .v3l-card a.text-muted:hover,
html.admrw-v3l:not(#_):not(#_) .v3l-card .tw-text-center a:hover{color:var(--v3-blue);border-bottom-color:var(--v3-blue)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .tw-text-center{text-align:center;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------- the tick box (Remember me): a sunk square that fills blue when ticked ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox{margin:0;padding:0;min-height:44px;display:flex;align-items:center;position:relative}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox input[type="checkbox"]{position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:24px;margin:0;opacity:0;cursor:pointer;z-index:2}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox label{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:0 0 0 36px;font:500 15px/1.3 var(--v3-sans);letter-spacing:0;text-transform:none;color:var(--v3-ink);cursor:pointer}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox label::before{content:"";position:absolute;margin:0;padding:0;border:0;left:0;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:8px;background:var(--v3-well);box-shadow:var(--v3-sink-sm);transition:background .2s,box-shadow .2s}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox label::after{content:"";position:absolute;margin:0;padding:0;background:none;font-size:0;line-height:0;left:8px;top:50%;width:6px;height:11px;margin-top:-7px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox input[type="checkbox"]:checked+label::before{background:var(--v3-grad-blue);box-shadow:3px 3px 7px rgba(47,67,216,.4),-3px -3px 7px #fff}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox input[type="checkbox"]:checked+label::after{opacity:1}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox input[type="checkbox"]:focus-visible+label::before{outline:3px solid var(--v3-focus);outline-offset:3px}
html.admrw-v3l:not(#_):not(#_) .v3l-card .checkbox.text-left{text-align:left}

/* ---------- keys: the primary (blue) key and the plain key, 50px, the house 3D edge ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;margin:0;padding:0 20px;border:0;border-radius:15px;font:600 15px/1 var(--v3-sans);color:var(--v3-ink);background:var(--v3-convex);box-shadow:var(--v3-lift-sm),0 5px 0 -1px #B3BCD6;white-space:nowrap;text-shadow:none;cursor:pointer;transition:box-shadow .15s,transform .15s cubic-bezier(.3,1.4,.5,1),background .2s,color .2s;box-sizing:border-box}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn:hover,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn:hover{transform:translateY(-2px);box-shadow:8px 8px 18px #ABB5D1,-7px -7px 16px #fff,0 7px 0 -1px #B3BCD6;color:var(--v3-ink)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn:active,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn:active{transform:translateY(4px);background:var(--v3-pressed);box-shadow:var(--v3-sink-sm),0 1px 0 -1px #B3BCD6}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn-primary,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn:not(.cd-btn-ghost){background:var(--v3-grad-blue);color:#fff;box-shadow:5px 5px 12px rgba(37,99,235,.38),-5px -5px 12px #fff,0 5px 0 -1px #1A45B8}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn-primary:hover,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn:not(.cd-btn-ghost):hover{color:#fff;background:var(--v3-grad-blue);box-shadow:7px 7px 16px rgba(37,99,235,.45),-6px -6px 14px #fff,0 7px 0 -1px #1A45B8}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn-primary:active,
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn-primary:focus,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn:not(.cd-btn-ghost):active{color:#fff;background:var(--v3-grad-blue);box-shadow:inset 3px 3px 7px rgba(10,40,120,.45),inset -2px -2px 5px rgba(255,255,255,.3),0 1px 0 -1px #1A45B8}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn-primary:focus{box-shadow:5px 5px 12px rgba(37,99,235,.38),-5px -5px 12px #fff,0 5px 0 -1px #1A45B8}
/* the code step's keys are the credential colour (purple) - the showcase's Step 2 card */
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-card .cd-btn:not(.cd-btn-ghost){background:var(--v3-grad-purple);box-shadow:5px 5px 12px rgba(124,58,237,.38),-5px -5px 12px #fff,0 5px 0 -1px #5321AD}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-card .cd-btn:not(.cd-btn-ghost):hover{background:var(--v3-grad-purple);box-shadow:7px 7px 16px rgba(124,58,237,.45),-6px -6px 14px #fff,0 7px 0 -1px #5321AD}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-card .cd-btn:not(.cd-btn-ghost):active{background:var(--v3-grad-purple);box-shadow:inset 4px 4px 10px rgba(50,20,110,.5),0 1px 0 -1px #5321AD}
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn.cd-btn-ghost{height:46px}
html.admrw-v3l:not(#_):not(#_) .v3l-card .btn[disabled],
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn[disabled]{opacity:.45;pointer-events:none}
html.admrw-v3l:not(#_):not(#_) .cd-gate-card .btn-block{margin-top:0}

/* ---------- notices (wrong password, code sent, errors) ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-card .alert,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-note-line{margin:0;padding:12px 16px;border:0;border-radius:15px;background:var(--v3-well);box-shadow:var(--v3-sink-sm);font:500 14px/1.4 var(--v3-sans);color:var(--v3-ink);text-align:left}
html.admrw-v3l:not(#_):not(#_) .v3l-card .alert-danger,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-sec-err{color:var(--v3-bad)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .alert-success,
html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-sec-ok{color:var(--v3-ok)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .alert-warning{color:var(--v3-warn)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .alert .close{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card .row .alert{margin-bottom:18px}
html.admrw-v3l:not(#_):not(#_) .v3l-card .row{margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card .row>[class*="col-"]{padding:0;float:none;width:auto}
html.admrw-v3l:not(#_):not(#_) .v3l-card .help-block,
html.admrw-v3l:not(#_):not(#_) .v3l-card .text-danger{font:500 12.5px/1.3 var(--v3-mono);color:var(--v3-bad);margin:0;text-align:left}
html.admrw-v3l:not(#_):not(#_) .v3l-card .has-error .form-control{box-shadow:var(--v3-sink-sm),0 0 0 2px var(--v3-bad)}

/* ---------- footnote (site · version) ---------- */
html.admrw-v3l:not(#_):not(#_) .v3l-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 12.5px/1.3 var(--v3-mono);color:var(--v3-ink3);margin-top:auto;text-align:left}
html.admrw-v3l:not(#_):not(#_) .v3l-foot span{min-width:0;overflow-wrap:anywhere}

/* ============================================================================
   CLIENT SIGN-IN (the customers theme's page around .cd-gate)
   ============================================================================ */
/* the theme's top bar and footer are not part of the sign-in screen (the card carries the logo; the only link is this page) */
html.admrw-v3l:not(#_):not(#_) body.customers nav.navbar.header{display:none}
html.admrw-v3l:not(#_):not(#_) body.customers #wrapper,
html.admrw-v3l:not(#_):not(#_) body.customers #content{background:none;padding:0;margin:0;min-height:0}
html.admrw-v3l:not(#_):not(#_) body.customers #content>.container,
html.admrw-v3l:not(#_):not(#_) body.customers #content>.container>.row{width:auto;max-width:none;margin:0;padding:0}
html.admrw-v3l:not(#_):not(#_) body.customers #content>.container>.row:empty{display:none}
html.admrw-v3l:not(#_):not(#_) body.customers footer.footer{background:none;border:0;padding:0 16px 24px;font:500 12.5px/1.3 var(--v3-mono);color:var(--v3-ink3)}
html.admrw-v3l:not(#_):not(#_) body.customers footer.footer .copyright-footer{font:inherit;color:inherit}
html.admrw-v3l:not(#_):not(#_) body.customers{padding:0 16px;box-sizing:border-box;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
html.admrw-v3l:not(#_):not(#_) body.customers #wrapper{flex:1;display:flex;flex-direction:column}
html.admrw-v3l:not(#_):not(#_) body.customers #content{flex:1;display:flex;flex-direction:column;justify-content:center}
html.admrw-v3l:not(#_):not(#_) body.customers #content>.container,
html.admrw-v3l:not(#_):not(#_) body.customers #content>.container>.row{display:block}
/* the portal's own phone install card (client_dashboard's cd_mobile) on this screen: a raised slab like the rest */
html.admrw-v3l:not(#_):not(#_) .cd-pwa-card{background:var(--v3-convex);border:0;border-radius:22px;box-shadow:var(--v3-lift-md);color:var(--v3-ink);font-family:var(--v3-sans)}
html.admrw-v3l:not(#_):not(#_) .cd-pwa-card small{color:var(--v3-ink3)}
html.admrw-v3l:not(#_):not(#_) .cd-pwa-card .cd-pwa-acts button{height:40px;padding:0 16px;border:0;border-radius:13px;font:600 14px/1 var(--v3-sans);color:var(--v3-ink);background:var(--v3-convex);box-shadow:var(--v3-lift-sm),0 4px 0 -1px #B3BCD6;cursor:pointer}
html.admrw-v3l:not(#_):not(#_) .cd-pwa-card .cd-pwa-acts .cd-pwa-go{background:var(--v3-grad-blue);color:#fff;box-shadow:4px 4px 10px rgba(37,99,235,.38),-4px -4px 10px #fff,0 4px 0 -1px #1A45B8}
html.admrw-v3l:not(#_):not(#_) .cd-gate .cd-gate-card{margin:0 auto}
/* the language pick (Perfex's "clients may choose a language") is kept, as a well, after the sign-in key */
html.admrw-v3l:not(#_):not(#_) .cd-gate-card form .form-group.v3l-lang{order:9}
html.admrw-v3l:not(#_):not(#_) .cd-gate-card form .tw-text-center{order:10}
html.admrw-v3l:not(#_):not(#_) .cd-gate-card form .v3l-foot{order:11}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select{width:100%;display:block;height:auto;min-height:0;padding:0;margin:0;background:none;box-shadow:none;border-radius:0;line-height:normal}
html.admrw-v3l:not(#_):not(#_) .v3l-card select.selectpicker,
html.admrw-v3l:not(#_):not(#_) .v3l-card .bs-select-hidden{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;padding:0 16px;border:0;border-radius:15px;background:var(--v3-well);box-shadow:var(--v3-sink-sm);font:500 15px/1 var(--v3-sans);color:var(--v3-ink);text-shadow:none;transform:none;transition:box-shadow .25s}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle:hover,
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle:active,
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle:focus{background:var(--v3-well);box-shadow:var(--v3-sink),0 0 0 2px var(--v3-focus);transform:none;color:var(--v3-ink);outline:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle .filter-option{position:static;flex:1;text-align:left;padding:0;height:auto;line-height:1}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle .filter-option-inner-inner{line-height:1}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-toggle::after{margin:0;border-top-color:var(--v3-ink3)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select>.dropdown-menu{border:0;border-radius:18px;background:var(--v3-convex);box-shadow:var(--v3-lift-md);padding:8px;margin-top:8px;max-width:100%}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .dropdown-menu.inner{background:none;box-shadow:none;border:0;padding:0;margin:0;border-radius:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .bs-searchbox{padding:4px 4px 8px}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .bs-searchbox .form-control{height:44px;line-height:44px;border-radius:12px}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .dropdown-menu.inner li a{border-radius:11px;padding:0 12px;min-height:40px;display:flex;align-items:center;font:500 14.5px/1 var(--v3-sans);color:var(--v3-ink)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .dropdown-menu.inner li a:hover,
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .dropdown-menu.inner li a:focus{background:var(--v3-well);box-shadow:var(--v3-sink-sm);color:var(--v3-ink)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .dropdown-menu.inner li.selected a{background:var(--v3-grad-blue);color:#fff;box-shadow:3px 3px 7px rgba(47,67,216,.4)}
html.admrw-v3l:not(#_):not(#_) .v3l-card .bootstrap-select .dropdown-menu.inner li a .check-mark{display:none}

/* ============================================================================
   THE CODE STEP (client_dashboard's challenge page, body.cd-gate) - the showcase's "Step 2 of 2" card
   ============================================================================ */
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-portal>.cd-card{padding:30px 28px 26px}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card form{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:0}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card form .cd-btn{margin:0;width:100%}
/* the six digits: one real field (the plugin reads it), drawn as a wide sunk well with spaced mono digits in the credential colour */
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card .cd-sec-code{display:block;width:100%;max-width:none;height:64px;margin:0;padding:0 0 0 .35em;border:0;border-radius:16px;background:var(--v3-well);box-shadow:var(--v3-sink);text-align:center;font:600 28px/64px var(--v3-mono);letter-spacing:.35em;color:var(--v3-purple);outline:none;transition:box-shadow .25s;box-sizing:border-box;caret-color:var(--v3-purple)}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card .cd-sec-code::placeholder{color:#8E97AD;opacity:1;letter-spacing:.35em}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card .cd-sec-code:focus{box-shadow:var(--v3-sink),0 0 0 2px #8B5CF6,0 0 16px rgba(139,92,246,.45)}

/* ============================================================================
   3.6.9 THE CODE STEP AS SIX CELLS - admin and client (Paul 06-11-2026: "make the 2FA screen more professional, show the
   6 windows for the 6 characters and animate them, auto login when entered so no click button"; read on live 06-11:
   the admin page is body.authentication.two-factor-authentication-code at /admin/authentication/two_factor/app|email -
   logo, h1 "Authentication Code", h3 "Two Factor Authentication", a white box holding the form (code field, Go back to
   login, Confirm); the client check is body.cd-gate (client_dashboard challenge: .cd-sec-code, Verify, Send a new code).
   The page's own field name="code" stays the one real field, laid transparent over six drawn cells: an empty cell is a
   sunk well, the live cell carries the credential glow and a blinking bar, a digit springs into a raised plate, the sixth
   digit lights the row green in a wave and the form sends itself. The Confirm / Verify key stands down while the script
   runs. A page that comes back with its notice (wrong or empty code) shakes the row once. One light source, same tokens.
   ============================================================================ */
/* the card: one width for the step on both pages, an even rhythm top to bottom */
html.admrw-v3l:not(#_):not(#_) body.authentication .v3l-card.v3l-otp-page,
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-card.v3l-otp-page{width:min(calc(100vw - 32px),470px);max-width:470px;padding:34px 32px 30px;gap:22px}
html.admrw-v3l:not(#_):not(#_) body.authentication .v3l-card.v3l-otp-page{margin-top:0;padding-top:34px;gap:20px}
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-card.v3l-otp-page .cd-icon{display:none}
/* the admin page's white box and its h3 stand down; the h1 is the one heading, the script's line under it says which app */
html.admrw-v3l:not(#_):not(#_) .v3l-otp-page .v3l-otp-box{background:none;border:0;box-shadow:none;margin:0;padding:0;border-radius:0;display:flex;flex-direction:column;gap:20px}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-page h3.v3l-otp-h3{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-page h1,
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-otp-page h3{margin:0;font:700 22px/1.25 var(--v3-sans);color:var(--v3-ink);text-align:center}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-page .v3l-otp-sub,
html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-otp-page .cd-sec-p{margin:-8px 0 0;text-align:center;font:400 15px/1.45 var(--v3-sans);color:var(--v3-ink3);text-wrap:balance}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-page .v3l-step{align-self:center}
/* the form: the cells block, its line, then the keys */
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form{display:flex;flex-direction:column;gap:20px;margin:0;position:relative}
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form .row:empty{display:none}
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form .v3l-otp-group{display:grid;gap:12px;margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form .v3l-otp-group>label{display:block;margin:0;text-align:center;font:600 11px/1 var(--v3-sans);letter-spacing:.12em;text-transform:uppercase;color:#6325C7}
html.admrw-v3l:not(#_):not(#_) .v3l-otp{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;cursor:text;-webkit-tap-highlight-color:transparent}
/* the real field, laid over the cells: it takes every tap, key and paste; it is never seen */
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp input.v3l-otp-in,
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp input.v3l-otp-in:focus{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-height:0;max-width:none;margin:0;padding:0;border:0;border-radius:16px;background:transparent;box-shadow:none;outline:none;opacity:.01;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;line-height:1;text-align:left;cursor:text;-webkit-text-fill-color:transparent}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp input.v3l-otp-in::placeholder{color:transparent}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp input.v3l-otp-in::selection{background:transparent}
html.admrw-v3l:not(#_):not(#_) .v3l-cell{position:relative;height:68px;min-width:0;border-radius:16px;background:var(--v3-well);box-shadow:var(--v3-sink);display:grid;place-items:center;font:600 30px/1 var(--v3-mono);color:var(--v3-purple);transition:box-shadow .25s,background .25s,transform .25s cubic-bezier(.3,1.4,.5,1);will-change:transform}
html.admrw-v3l:not(#_):not(#_) .v3l-cell b{font-weight:600;display:block;transform-origin:50% 60%}
html.admrw-v3l:not(#_):not(#_) .v3l-cell.v3l-pop b{animation:v3l-pop .34s cubic-bezier(.3,1.5,.5,1) both}
/* a filled cell rises off the surface as a plate */
html.admrw-v3l:not(#_):not(#_) .v3l-cell.v3l-fill{background:var(--v3-convex);box-shadow:var(--v3-lift-sm);transform:translateY(-2px)}
/* the live cell: the credential glow and a blinking bar */
html.admrw-v3l:not(#_):not(#_) .v3l-cell i{position:absolute;left:50%;top:50%;width:2px;height:30px;margin:-15px 0 0 -1px;border-radius:2px;background:var(--v3-purple);opacity:0}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-focus .v3l-cell.v3l-live{box-shadow:var(--v3-sink),0 0 0 2px #8B5CF6,0 0 18px rgba(139,92,246,.5);animation:v3l-breathe 1.8s ease-in-out infinite}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-focus .v3l-cell.v3l-live:not(.v3l-fill) i{animation:v3l-blink 1.05s steps(1,end) infinite}
/* the sixth digit: a green wave along the row, then the form sends itself */
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell{color:var(--v3-ok);background:linear-gradient(145deg,#EDF9F1,#D4EEDD);box-shadow:var(--v3-lift-sm),0 0 0 2px #22A35A,0 0 18px rgba(34,163,90,.45);animation:v3l-wave .5s cubic-bezier(.3,1.5,.5,1) both}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell:nth-child(2){animation-delay:.05s}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell:nth-child(3){animation-delay:.1s}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell:nth-child(4){animation-delay:.15s}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell:nth-child(5){animation-delay:.2s}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell:nth-child(6){animation-delay:.25s}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell i{display:none}
/* a wrong or empty code: the row shakes once and every cell is red-ringed until the next digit */
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-shake{animation:v3l-shake .11s ease-in-out 4}
html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-bad .v3l-cell{box-shadow:var(--v3-sink),0 0 0 2px rgba(168,31,20,.55)}
/* the line under the cells: what to do, then "Checking your code" with a ring */
html.admrw-v3l:not(#_):not(#_) .v3l-otp-msg{display:flex;align-items:center;justify-content:center;gap:10px;min-height:20px;margin:0;padding:0 6px;font:500 13.5px/1.5 var(--v3-mono);color:var(--v3-ink3);text-align:center;text-wrap:balance}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-msg.v3l-busy{color:var(--v3-ok)}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-msg.v3l-busy::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(34,163,90,.25);border-top-color:#22A35A;animation:v3l-spin .8s linear infinite}
html.admrw-v3l:not(#_):not(#_) .v3l-otp-msg.v3l-err{color:var(--v3-bad)}
/* 3.6.11: the page's own green hint stands down (the line under the heading carries it) */
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form .alert.v3l-otp-hint{display:none}
/* the page's own notice sits above the cells as the sunk red well; its words are the page's */
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form .alert,
html.admrw-v3l:not(#_):not(#_) .v3l-card.v3l-otp-page .cd-note-line{margin:0;text-align:center}
/* the Confirm / Verify key stands down while the script drives the step; Enter still sends the form */
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form .btn-primary,
html.admrw-v3l:not(#_):not(#_) .v3l-card form.v3l-otp-form button[type="submit"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;opacity:0;pointer-events:none}
/* the key row under the line: Go back to login (admin) / Send a new code (client, its own form) as plain 3D keys */
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-box .v3l-otp-keys{margin:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card.v3l-otp-page .v3l-foot{margin-top:2px}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys form{margin:0;display:contents}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys a,
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys .cd-btn,
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys .cd-btn.cd-btn-ghost{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:180px;height:46px;padding:0 22px;border:0;border-radius:15px;font:600 14px/1 var(--v3-sans);color:var(--v3-ink);background:var(--v3-convex);box-shadow:var(--v3-lift-sm),0 5px 0 -1px #B3BCD6;text-decoration:none;cursor:pointer;transition:box-shadow .15s,transform .15s cubic-bezier(.3,1.4,.5,1),color .2s}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys a:hover,
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys .cd-btn:hover{transform:translateY(-2px);color:var(--v3-purple);box-shadow:8px 8px 18px #ABB5D1,-7px -7px 16px #fff,0 7px 0 -1px #B3BCD6;border-bottom:0}
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys a:active,
html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys .cd-btn:active{transform:translateY(4px);background:var(--v3-pressed);box-shadow:var(--v3-sink-sm),0 1px 0 -1px #B3BCD6}
/* one keyframe per animation: the element's own state is the other end (the sheet's rule scanner reads a second
   keyframe selector as an unscoped rule) */
@keyframes v3l-pop{0%{transform:scale(.3) translateY(10px);opacity:0}}
@keyframes v3l-blink{50%{opacity:1}}
@keyframes v3l-breathe{50%{box-shadow:var(--v3-sink),0 0 0 2px #A78BFA,0 0 26px rgba(139,92,246,.7)}}
@keyframes v3l-wave{45%{transform:translateY(-7px) scale(1.05)}}
@keyframes v3l-shake{50%{transform:translateX(-7px)}}
@keyframes v3l-spin{to{transform:rotate(360deg)}}
@media (max-width:699px){
 html.admrw-v3l:not(#_):not(#_) body.authentication .v3l-card.v3l-otp-page,
 html.admrw-v3l:not(#_):not(#_) body.cd-gate .v3l-card.v3l-otp-page{padding:28px 20px 24px;gap:20px}
 html.admrw-v3l:not(#_):not(#_) .v3l-otp{gap:8px}
 html.admrw-v3l:not(#_):not(#_) .v3l-cell{height:60px;border-radius:14px;font-size:26px}
 html.admrw-v3l:not(#_):not(#_) .v3l-cell i{height:26px;margin-top:-13px}
 html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys a,
 html.admrw-v3l:not(#_):not(#_) .v3l-card .v3l-otp-keys .cd-btn{min-width:0;flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
 html.admrw-v3l:not(#_):not(#_) .v3l-cell,html.admrw-v3l:not(#_):not(#_) .v3l-cell b,html.admrw-v3l:not(#_):not(#_) .v3l-otp,
 html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-done .v3l-cell,html.admrw-v3l:not(#_):not(#_) .v3l-otp.v3l-focus .v3l-cell.v3l-live{animation:none;transition:none}
}

/* ============================================================================
   PHONE TIER (a phone, or the installed app on one): the showcase's phone login
   ============================================================================ */
@media (max-width:699px){
 html.admrw-v3l:not(#_):not(#_) body.login_admin,
 html.admrw-v3l:not(#_):not(#_) body.authentication{padding:calc(26px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px));place-items:start center}
 html.admrw-v3l:not(#_):not(#_) body.cd-gate{padding:calc(26px + env(safe-area-inset-top,0px)) 0 calc(40px + env(safe-area-inset-bottom,0px));place-items:start center}
 html.admrw-v3l:not(#_):not(#_) .cd-gate{padding:calc(26px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px));place-items:start center}
 html.admrw-v3l:not(#_):not(#_) .v3l-card,
 html.admrw-v3l:not(#_):not(#_) body.login_admin .authentication-form-wrapper,
 html.admrw-v3l:not(#_):not(#_) body.authentication [class*="authentication-form-wrappe"],
 html.admrw-v3l:not(#_):not(#_) .cd-gate .cd-gate-card,
 html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-portal>.cd-card{padding:26px 20px 22px}
 html.admrw-v3l:not(#_):not(#_) body.cd-gate .cd-card .cd-sec-code{font-size:26px;letter-spacing:.3em}
}
/* the installed app: the card sits under the status bar, nothing else on the screen */
@media (display-mode:standalone){
 html.admrw-v3l:not(#_):not(#_) body.customers footer.footer{display:none}
}
@media (prefers-reduced-motion:reduce){
 html.admrw-v3l:not(#_):not(#_) .v3l-card .btn,
 html.admrw-v3l:not(#_):not(#_) .v3l-card .cd-btn,
 html.admrw-v3l:not(#_):not(#_) .v3l-card .form-control{transition:none}
}

/* 3.4.6 (17-10-2026, Paul: enough room between keys and the words above them): the install prompt's keys sit 14px under its words (were 8px) */
html.admrw-v3l:not(#_):not(#_) .cd-pwa-card .cd-pwa-acts{margin-top:14px}