/* =====================================================================
   LOGIN PAGE — the pre-authentication screen (controllers/login.php).
   Loaded LAST, after inc_header's main.css / backoffice-skin.css /
   theme.css, so it wins by cascade order without !important.

   IT BUILDS ONLY ON --lv-* TOKENS and defines no colour of its own,
   so the page follows lt_sys_user.theme_pref like every other screen.
   The ONE exception is the hero, which is brand surface rather than
   chrome: it stays dark in both themes, because the brand does.

   ⚠ TYPEFACE: Manrope is self-hosted at css/fonts/manrope/ and the
   estate ships weights 400 / 600 / 700 ONLY. Do NOT write 500 or 800
   here — the browser would synthesise them and the wordmark would
   render as a faked bold. Same six faces as css/cms-nextgen.css;
   re-declared because that sheet is NOT loaded on the login page.
   ===================================================================== */

@font-face { font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/manrope/latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/manrope/latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/manrope/latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/manrope/latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/manrope/latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/manrope/latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* brand accents — the storefront's own token values (origin/lab). These are
   brand constants, not theme colours: they do not change with light/dark. */
:root{ --lv-accent-yellow:#F7E234; --lv-accent:#F79433; --lv-accent-warm:#F15A22; }

/* main.css sets body{font-family:'Roboto'} and text-align:center — both are
   overridden here rather than globally, so no other screen shifts. */
html.lg-page, html.lg-page body{ height:100%; }
html.lg-page body{
  margin:0; padding:0; text-align:left;
  background:var(--lv-bg); color:var(--lv-text);
  font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* ⛔ THE TYPEFACE NEEDS !important AND CASCADE ORDER IS NOT ENOUGH.
   backoffice-skin.css ends with

       body, body * { font-family:'Roboto',Arial,Helvetica,sans-serif !important; }

   — a deliberate estate-wide hammer, whose own comment says it is there to
   normalise "stray Arial / Helvetica Neue / Kanit". An !important declaration
   cannot be beaten by specificity or by load order, only by another
   !important. Measured, not assumed: without this block the login page renders
   entirely in Roboto while the six @font-face rules above sit "unloaded" —
   the page looks finished and is simply using the wrong face.

   The shape is copied from the precedent already in the estate,
   css/cms-nextgen.css line ~176: scope it, and keep the element list inside
   :where() so it contributes ZERO specificity — every other rule in this file
   still governs weight, size and colour normally, and third-party internals
   (jQuery UI, fancybox) keep the face they ship with. */
html.lg-page body,
html.lg-page body :where(h1,h2,h3,h4,h5,h6,p,span,div,a,em,b,strong,i,small,
  label,legend,input,select,textarea,button,option,li,nav,header,footer,section,aside,main){
  font-family:"Manrope","Noto Sans Arabic","Noto Sans Thai",system-ui,-apple-system,"Segoe UI","Roboto",Helvetica,Arial,sans-serif !important;
}
.lg-page *{ box-sizing:border-box; }

/* ── skip link ─────────────────────────────────────────────────────── */
.lv-skip-link{position:absolute; left:-9999px; top:0; z-index:20; padding:10px 16px;
  background:var(--lv-brand); color:var(--lv-brand-ink); font-weight:700; border-radius:0 0 8px 0;}
.lv-skip-link:focus{left:0;}

/* ── header (storefront grammar: header-part > nav_bar) ───────────────
   Carries the mark and nothing else; the right-hand list styles went with the
   markup that used them. ── */
#header-part{position:relative; z-index:4; height:76px; display:flex; align-items:center;
  padding:0 32px; background:var(--lv-surface); border-bottom:1px solid var(--lv-border);}
.nav_bar{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;}
.nav_bar .logo{display:flex; align-items:center; text-decoration:none;}
.nav_bar .logo img{height:40px; width:auto;}
.nav_bar .logo .mark{font-size:31px; font-weight:700; letter-spacing:-.03em; color:var(--lv-heading); line-height:1;}
.nav_bar .logo .mark em{font-style:normal; color:var(--lv-brand);}

/* ── environment colouring ─────────────────────────────────────────────
   ⭐ THE COLOURS ARE NOT CHOSEN HERE. They are the estate's, set by the owner for the
   authenticated chrome (css/main.css ~L4189, "Make the all header in the color if the
   test/qa") — #CC7A00 lab, #1E8E5A QA, #FFCC00 Test Pre-launch. Repeating them rather
   than inventing a login-page palette is the whole point: somebody glancing at the bar
   should read the same colour before and after signing in.
   ⛔ PRODUCTION IS ABSENT ON PURPOSE. It keeps the white bar it has, so a live box looks
   exactly as it does today, and the badge stays a warning instead of becoming furniture.

   ⛔ PRE-LAUNCH INVERTS THE INK, and that is not a preference. Thai royal yellow is LIGHT:
   white on #FFCC00 measures about 1.7:1, which is not low contrast, it is invisible.
   main.css already learned this for the nav bar; copying the amber rule and swapping only
   the background would produce a header with an unreadable wordmark. */
#header-part.env-lab       { background:#CC7A00; border-bottom-color:rgba(0,0,0,.18); }
#header-part.env-qa        { background:#1E8E5A; border-bottom-color:rgba(0,0,0,.18); }
#header-part.env-prelaunch { background:#FFCC00; border-bottom-color:rgba(0,0,0,.16); }
#header-part.env-hq        { background:#6B21A8; border-bottom-color:rgba(0,0,0,.18); }

#header-part.env-lab .mark, #header-part.env-qa .mark, #header-part.env-hq .mark { color:#fff; }
#header-part.env-lab .mark em, #header-part.env-qa .mark em, #header-part.env-hq .mark em { color:rgba(255,255,255,.72); }
#header-part.env-prelaunch .mark { color:#3A2C00; }
#header-part.env-prelaunch .mark em { color:#7A5C00; }

/* The chip sits ON the coloured bar now, not on white — main.css tints it for a pale
   ground, which would read as a smudge here. Solid white chip, environment ink. */
#header-part.env-lab .env-badge,
#header-part.env-qa .env-badge,
#header-part.env-prelaunch .env-badge,
#header-part.env-hq .env-badge{
  background:#fff; border-color:rgba(0,0,0,.14);
}
#header-part.env-lab .env-badge       { color:#A96400; }
#header-part.env-qa .env-badge        { color:#16704A; }
#header-part.env-prelaunch .env-badge { color:#6B5000; }
#header-part.env-hq .env-badge        { color:#5B1A8C; }

/* ── shell ─────────────────────────────────────────────────────────── */
.lg-shell{min-height:calc(100vh - 76px); display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 116px;}

/* ── hero ──────────────────────────────────────────────────────────── */
.lg-hero{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:flex-end; padding:56px 48px 106px; color:#fff;
  /* ONE definition of the scrim. The photograph sits behind --lg-hero-photo so
     the mobile block below can restate the gradients without restating the
     image — two copies of a scrim drift, and the drifting one goes unnoticed. */
  --lg-hero-ground:#0d2a38;
  /* [Note]:THE FALLBACK PHOTOGRAPH, and it is load-bearing. The page normally sets
     --lg-hero-photo to today's pick (Common\LoginHero). If the manifest is ever missing or
     malformed LoginHero returns null and sets nothing — and a var() with no value here would
     make the whole background-image declaration invalid, i.e. NO photograph and no gradients
     either. This keeps one member of the pool as the standing default so the page degrades to
     how it looked before the rotation rather than to flat ink. */
  --lg-hero-photo:image-set(
      url("../images/brand/hero/hero-lipe-longtails-2400.webp") type("image/webp") 1x,
      url("../images/brand/hero/hero-lipe-longtails-1440.jpg")  type("image/jpeg") 1x);
  background-color:var(--lg-hero-ground);
  /* ⭐ A CORNER SCRIM, NOT A CURTAIN — this is what lets the photograph stay bright.
     The earlier version darkened the whole lower half, which met contrast and threw
     away the reason for having a photograph at all. This anchors the ink at the
     bottom-left corner where the copy actually sits and releases it by 92%, so the
     top two-thirds keep the full turquoise.
     ⚠ The stops are MEASURED, not eyeballed. The image region behind the copy block
     (source x1069..1434, y640..1049 of the 2400 webp, derived from the cover-scale at
     1440x940) reads mean 0.752 sRGB behind the eyebrow — brighter than a first guess,
     which is exactly why a guess was not good enough. Linearised that is ~0.525, and
     white on it needs >= ~67% ink coverage to clear AA 4.5:1 for a 12px bold eyebrow
     (12px is NOT WCAG "large text" — that starts at 18.66px bold). These stops put
     ~75% there: composite ~0.143 linear, about 5.4:1.
     ⛔ If the photograph is ever swapped, RE-MEASURE that region. A darker image makes
     this scrim needlessly heavy; a brighter one makes it fail silently, and nothing on
     the page will say so. */
  /* ⭐ THE FIVE ALPHAS ARE PER-PHOTOGRAPH AND COME FROM THE PAGE, not from here.
     The hero rotates daily (Common\LoginHero + images/brand/hero/manifest.json), and the
     note above is exactly why they cannot be constants: a scrim tuned to one picture is
     needlessly heavy on a darker one and silently fails AA on a brighter one.
     tools/login-hero-build.php measures each photograph's copy region at mean + 1 SD —
     the MEAN alone gave one image a scrim of zero because its dark jungle contains a gold
     Buddha — and writes the stops it needs. The fallbacks below are the hand-measured
     values for the original hero, so if the manifest ever goes missing the page renders
     exactly as it did before the rotation existed. */
  background-image:
    radial-gradient(140% 86% at 0% 100%,
      rgba(35,31,32,var(--lg-hero-a1,.95))  0%,
      rgba(35,31,32,var(--lg-hero-a2,.88)) 34%,
      rgba(35,31,32,var(--lg-hero-a3,.60)) 60%,
      rgba(35,31,32,var(--lg-hero-a4,.18)) 78%,
      rgba(35,31,32,var(--lg-hero-a5,0))   92%),
    linear-gradient(180deg, rgba(35,31,32,.26) 0%, rgba(35,31,32,0) 30%),
    var(--lg-hero-photo);
  background-size:cover; background-position:var(--lg-hero-pos,72% 58%); background-repeat:no-repeat;
}
.lg-hero > *{position:relative; z-index:1;}
.lg-hero-copy{max-width:560px;}
.lg-tagline{margin:0 0 14px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; color:rgba(255,255,255,.82);}
.lg-hero-copy h1{margin:0; font-size:clamp(1.75rem,4.6vw,3rem); line-height:1.22; font-weight:700;
  letter-spacing:-.02em; color:#fff; max-width:15ch; text-shadow:0 2px 18px rgba(35,31,32,.45);}
.lg-hero-copy h1 em{font-style:normal; color:var(--lv-accent-yellow);}
.lg-hero-copy p{margin:20px 0 0; font-size:16px; line-height:1.55; color:rgba(255,255,255,.88);
  max-width:36ch; text-shadow:0 1px 10px rgba(35,31,32,.55);}
.lg-hero-foot{position:absolute; left:48px; right:48px; bottom:34px; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.88);}
.lg-hero-foot .lg-rule{width:34px; height:2px; background:var(--lv-accent-yellow); border-radius:2px;
  display:block; margin-bottom:14px; flex-basis:100%;}
.lg-hero-foot span[aria-hidden]{opacity:.45;}

/* ── card ──────────────────────────────────────────────────────────── */
.lg-main{display:flex; align-items:center; justify-content:center; padding:40px; background:var(--lv-surface-2);}
.lg-card{width:100%; max-width:500px; background:var(--lv-surface); border:1px solid var(--lv-border);
  border-radius:16px; box-shadow:var(--lv-shadow-lg); padding:44px 52px 36px;}
.lg-lock{width:44px; height:44px; margin:0 auto 18px; display:flex; align-items:center;
  justify-content:center; color:var(--lv-brand);}
.lg-card h2{margin:0; text-align:center; font-size:25px; line-height:1.25; font-weight:700;
  letter-spacing:-.022em; color:var(--lv-heading);}
.lg-card .lg-sub{margin:7px 0 26px; text-align:center; font-size:13.5px; color:var(--lv-chrome-label);}

.lg-field{margin-bottom:16px;}
.lg-field label{display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--lv-heading);}
.lg-input{position:relative; display:flex; align-items:center;}
.lg-input .lg-ico{position:absolute; left:12px; display:flex; color:var(--lv-placeholder); pointer-events:none;}
/* main.css styles input.input at 175px fixed — reset inside the card only. */
.lg-page .lg-input input.input{
  width:100%; height:44px; padding:9px 74px 9px 40px; margin:0;
  font:inherit; font-size:13.5px; color:var(--lv-input-text);
  background:var(--lv-input-bg); border:1px solid var(--lv-input-border); border-radius:9px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lg-input input.input::placeholder{color:var(--lv-placeholder);}
.lg-input input.input:focus{outline:none; border-color:var(--lv-brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lv-brand) 22%, transparent);}
/* two trailing controls: reveal (password only) + copy. Kept because the copy
   affordance is EXISTING behaviour — removing it is a behaviour change, not a
   restyle. Delete .copy-field/.copy-btn here and in the markup to drop it. */
.lg-trail{position:absolute; right:6px; display:flex; align-items:center; gap:2px;}
.lg-trail button{width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:0; padding:0; background:transparent; border-radius:7px; color:var(--lv-placeholder); cursor:pointer;}
.lg-trail button:hover{color:var(--lv-brand);}
.lg-trail button:focus-visible{outline:2px solid var(--lv-brand); outline-offset:1px;}
.lg-trail .copy-btn.copied{color:var(--lv-success);}
.lg-trail .copy-btn .copy-chk{display:none; font-size:13px; font-weight:700;}
.lg-trail .copy-btn.copied svg{display:none;}
.lg-trail .copy-btn.copied .copy-chk{display:inline;}

.lg-forgot{display:flex; justify-content:flex-end; margin:-6px 0 18px;}
.lg-forgot a{font-size:12.5px; font-weight:600; color:var(--lv-link); text-decoration:none;}
.lg-forgot a:hover{text-decoration:underline;}

.lg-page .lg-btn{width:100%; height:48px; border:1px solid transparent; border-radius:10px;
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background .15s ease, border-color .15s ease;}
.lg-page .lg-btn-primary{background:var(--lv-brand); color:var(--lv-brand-ink);}
.lg-page .lg-btn-primary:hover{background:var(--lv-brand-hover);}
.lg-page .lg-btn-ghost{background:var(--lv-surface); color:var(--lv-heading);
  border-color:var(--lv-border-strong); font-size:14px; font-weight:600;}
.lg-page .lg-btn-ghost:hover{background:var(--lv-surface-3);}
.lg-page .lg-btn:focus-visible{outline:2px solid var(--lv-brand); outline-offset:2px;}

.lg-or{display:flex; align-items:center; gap:14px; margin:20px 0;
  color:var(--lv-chrome-label); font-size:12.5px; font-weight:600;}
.lg-or::before,.lg-or::after{content:""; flex:1; height:1px; background:var(--lv-border);}

.lg-notice{margin-top:26px; display:flex; gap:11px; align-items:flex-start; padding:13px 14px;
  border-radius:10px; background:var(--lv-brand-soft);}
.lg-notice svg{flex:0 0 auto; margin-top:1px; color:var(--lv-brand-soft-ink);}
.lg-notice b{display:block; font-size:12.5px; font-weight:700; color:var(--lv-heading); margin-bottom:2px;}
.lg-notice p{margin:0; font-size:12px; line-height:1.45; color:var(--lv-chrome-label);}

/* The error region is ALWAYS rendered and revealed with data-shown, so an error
   never reflows the card; role="alert" in the markup announces it. */
.lg-error{display:none; align-items:flex-start; gap:9px; margin-bottom:18px; padding:11px 13px;
  border-radius:9px; background:var(--lv-danger-bg);
  border:1px solid color-mix(in srgb, var(--lv-danger) 35%, transparent);
  color:var(--lv-danger); font-size:12.5px; line-height:1.45;}
.lg-error[data-shown="1"]{display:flex;}
.lg-error svg{flex:0 0 auto; margin-top:1px;}

/* ── MFA step (the card's second state) ─────────────────────────────
   Deliberately reuses .lg-field / .lg-input / .lg-btn / .lg-error / .lg-or
   from the credentials step: the two states are the same card, and a second
   set of form styles would be the thing that drifts. Only what is genuinely
   new to this step is defined here. */
.lg-page .lg-input input.input.lg-code{
  padding-right:11px; text-align:center;
  font-size:21px; font-weight:700; letter-spacing:.34em; text-indent:.34em;
}
.lg-mfa-secondary{margin:14px 0 0; text-align:center;}
.lg-linkbtn{
  border:0; background:transparent; padding:4px 6px; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--lv-link);
}
.lg-linkbtn:hover{text-decoration:underline;}
.lg-linkbtn:focus-visible{outline:2px solid var(--lv-brand); outline-offset:2px; border-radius:6px;}
.lg-mfa-hint{margin:14px 0 0; text-align:center; font-size:11.5px; line-height:1.45; color:var(--lv-chrome-label);}
.lg-mfa-cancel{margin:18px 0 0; text-align:center; font-size:12.5px;}
.lg-mfa-cancel a{color:var(--lv-chrome-label); text-decoration:none;}
.lg-mfa-cancel a:hover{color:var(--lv-link); text-decoration:underline;}

/* ── two-step SET-UP (HQ 100480) ─────────────────────────────────────
   The forced set-up page (templates/common/mfasetup) is the step right after
   this card, so it IS this card: .lg-card, .lg-btn, .lg-field/.lg-input,
   .lg-error, .lg-linkbtn and .lg-mfa-* are reused as they are. Only what is
   new to choosing a method is defined here — the method row (the layout the
   owner approved for the operator portal, HQ 100423: icon, name, one line,
   the action centred on the row), the numbered steps, the QR frame and the
   setup key. Tokens only, logical properties only (RTL-safe), no new colour. */
.lg-main.lg-main--solo{min-height:100vh; padding:40px 16px;}
.lg-card.lg-card--wide{max-width:600px;}
.lg-card h1.lg-2fa-title{margin:0; text-align:center; font-size:25px; line-height:1.25; font-weight:700;
  letter-spacing:-.022em; color:var(--lv-heading);}
.lg-2fa-hero{background:var(--lv-brand-soft); color:var(--lv-brand-soft-ink); border-radius:12px; width:52px; height:52px;}
.lg-2fa-back{display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; font-size:12.5px; font-weight:600;
  color:var(--lv-link); text-decoration:none;}
.lg-2fa-back:hover{text-decoration:underline;}
.lg-2fa-back:focus-visible{outline:2px solid var(--lv-brand); outline-offset:2px; border-radius:6px;}
.lg-2fa-gap{margin-top:18px;}

.lg-method{display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  grid-template-areas:"ic t a" "ic d a"; column-gap:14px; row-gap:3px; align-items:center;
  margin:0 0 12px; padding:16px 18px; background:var(--lv-surface);
  border:1px solid var(--lv-border); border-radius:12px;}
.lg-method.is-rec{border-color:color-mix(in srgb, var(--lv-brand) 45%, var(--lv-border));
  box-shadow:0 0 0 3px var(--lv-brand-soft);}
.lg-method__ic{grid-area:ic; align-self:start; width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--lv-brand-soft); color:var(--lv-brand-soft-ink);}
.lg-method__t{grid-area:t; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  font-size:14.5px; font-weight:700; color:var(--lv-heading);}
.lg-method__d{grid-area:d; font-size:12.5px; line-height:1.5; color:var(--lv-chrome-label);}
.lg-method__a{grid-area:a; align-self:center; justify-self:end;}
.lg-page .lg-method__a .lg-btn{width:auto; min-width:96px; height:40px; padding:0 18px; font-size:13.5px; text-decoration:none;}

.lg-2fa-steps{list-style:none; margin:20px 0 6px; padding:0;}
.lg-2fa-steps li{display:flex; gap:12px; align-items:flex-start; margin:0 0 12px;
  font-size:13.5px; line-height:1.55; color:var(--lv-text);}
.lg-2fa-n{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
  background:var(--lv-brand); color:var(--lv-brand-ink);}
.lg-2fa-qr{text-align:center; margin:4px 0 8px;}
/* The QR keeps a WHITE quiet zone in both themes on purpose: a scanner needs dark-on-light (data, not chrome). */
.lg-2fa-qr > span{display:inline-block; line-height:0; padding:12px; background:#fff;
  border:1px solid var(--lv-border); border-radius:10px;}
/* The key: one 32-character word with no space to break at (HQ 100347) — it never grows past its
   box and breaks between characters only when there is no room (a phone). */
.lg-2fa-key{text-align:center; margin:0 0 14px; font-size:12px; color:var(--lv-chrome-label);}
.lg-2fa-key code{display:inline-block; max-width:100%; margin-top:6px; padding:4px 10px; box-sizing:border-box;
  overflow-wrap:anywhere; word-break:break-all; font-size:14px; letter-spacing:2px;
  background:var(--lv-surface-2); color:var(--lv-heading); border:1px solid var(--lv-border); border-radius:6px;}
.lg-page .lg-input input.input.lg-2fa-plain{padding:9px 12px;}
#wa-add-msg[data-tone="ok"]{color:var(--lv-success);}
#wa-add-msg[data-tone="bad"]{color:var(--lv-danger);}
.lg-mfa-cancel a{display:inline-flex; align-items:center; gap:6px;}

@media (max-width:560px){
  .lg-main.lg-main--solo{padding:16px 16px 28px; align-items:flex-start;}
  .lg-card.lg-card--wide{padding:26px 18px 22px;}
  .lg-method{grid-template-columns:40px minmax(0,1fr); grid-template-areas:"ic t" "ic d" "a a"; padding:14px;}
  .lg-method__ic{width:40px; height:40px;}
  .lg-method__a{justify-self:stretch; margin-top:10px;}
  .lg-page .lg-method__a .lg-btn{width:100%;}
}

/* ── rail + footer ─────────────────────────────────────────────────── */
.lg-rail{display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 16px; background:var(--lv-surface-2);}
.lg-rail-item{display:flex; flex-direction:column; align-items:center; gap:9px; padding:22px 4px;
  color:var(--lv-brand); text-align:center;}
.lg-rail-item span{font-size:11.5px; font-weight:600; line-height:1.3; color:var(--lv-chrome-label); max-width:9ch;}
.lg-rail-sep{width:34px; height:1px; background:var(--lv-border);}

.lg-footer{position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex;
  justify-content:flex-end; align-items:center; gap:30px; padding:0 48px 26px;
  font-size:12px; color:var(--lv-chrome-label); pointer-events:none;}
.lg-footer > *{pointer-events:auto;}
.lg-footer a{color:var(--lv-chrome-label); text-decoration:none;}
.lg-footer a:hover{color:var(--lv-link); text-decoration:underline;}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .lg-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .lg-rail{display:none;}
}
@media (max-width:900px){
  .lg-shell{grid-template-columns:1fr; min-height:auto;}
  #header-part{height:64px; padding:0 16px;}
  .nav_bar .logo .mark{font-size:26px;}
  .nav_bar .logo img{height:32px;}
  /* A ~170px band cannot use the tall scrim — its dark base lives at 80-100% of
     an 860px panel and never reaches the type here. Gradients only; the image
     stays in --lg-hero-photo. */
  .lg-hero{min-height:0; padding:30px 22px 34px; justify-content:center;
    background-image:
      linear-gradient(180deg,
        rgba(35,31,32,calc(var(--lg-hero-a3,.60) * .72))   0%,
        rgba(35,31,32,calc(var(--lg-hero-a2,.88) * .76))  45%,
        rgba(35,31,32,calc(var(--lg-hero-a1,.95) * .86)) 100%),
      var(--lg-hero-photo);
    background-position:58% 52%;}
  .lg-hero-copy{max-width:none;}
  .lg-hero-copy h1{font-size:26px; max-width:none;}
  .lg-hero-copy p:not(.lg-tagline), .lg-hero-foot{display:none;}
  .lg-main{padding:28px 16px 84px;}
  .lg-card{padding:30px 22px 26px; box-shadow:var(--lv-shadow-md);}
  .lg-footer{position:static; flex-direction:column; text-align:center; padding:0 16px 22px; gap:10px;}
    }
@media (prefers-reduced-motion:reduce){ .lg-page *{transition:none !important;} }