/* V需API login blueprint v2. Fonts: Chakra Petch, Noto Sans SC subset (SIL OFL 1.1). */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url("/site-extensions/login-blueprint/chakra-petch-600.4efa07169605.woff2") format("woff2")}
@font-face{font-family:"VN Login SC";font-style:normal;font-weight:700;font-display:swap;src:url("/site-extensions/login-blueprint/vn-login-sc-700.01ae0b42a7cf.woff2") format("woff2")}
@font-face{font-family:"VN Login SC";font-style:normal;font-weight:900;font-display:swap;src:url("/site-extensions/login-blueprint/vn-login-sc-900.74f47377a35d.woff2") format("woff2")}
/* ==========================================================================
   V需API login / register — blueprint v2 (dark sign-in terminal).
   Everything is scoped to body.vneedai-login-blueprint, which the controller sets only
   on /login and /register. The native Vue form is restyled in place via data-vn-login-*
   marks; nothing here hides or replaces an auth control except the app's own decorative
   brand block, background orbs and copyright line.
   ========================================================================== */

/* ---------- no flash of the app's own page ----------
   The controller can only style the form after the app has rendered it, so on an auth route
   the native page would paint first (light, old layout) and then be replaced. Until the
   controller marks <body>, keep #app hidden over the dark page colour.
   data-vn-route / data-vn-native-login are set by the console skin's boot.js, a blocking
   script in <head>, so this applies from the first paint. Fail-safe: if the controller never
   takes over (markup not recognised, script blocked), the native page is revealed after 1.6s. */
:root:is([data-vn-route="/login"], [data-vn-route="/register"], [data-vn-route="/email-verify"],
         [data-vn-route="/forgot-password"], [data-vn-route="/reset-password"]):not([data-vn-native-login]) {
  background-color: #05080f;
}
:root:is([data-vn-route="/login"], [data-vn-route="/register"], [data-vn-route="/email-verify"],
         [data-vn-route="/forgot-password"], [data-vn-route="/reset-password"]):not([data-vn-native-login]) body:not(.vneedai-login-blueprint) {
  background-color: #05080f !important;
}
:root:is([data-vn-route="/login"], [data-vn-route="/register"], [data-vn-route="/email-verify"],
         [data-vn-route="/forgot-password"], [data-vn-route="/reset-password"]):not([data-vn-native-login]) body:not(.vneedai-login-blueprint) #app {
  visibility: hidden;
  animation: vn-login-reveal 0s linear 1.6s forwards;
}
@keyframes vn-login-reveal { to { visibility: visible; } }

body.vneedai-login-blueprint {
  --lp-bg: #05080f;
  --lp-raise: #080d18;
  --lp-panel-2: #101a2d;
  --lp-line: rgba(122, 156, 255, 0.10);
  --lp-line-2: rgba(122, 156, 255, 0.18);
  --lp-fg: #e8eefb;
  --lp-fg-2: #a2adc6;
  --lp-fg-3: #66718b;
  --lp-blue: #2f6bff;
  --lp-blue-hi: #5d8dff;
  --lp-cyan: #3ad7f3;
  --lp-bad: #ff6b7f;
  --lp-warn: #f5b84a;
  --lp-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --lp-cn-display: "VN Login SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --lp-display: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;
  --lp-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --lp-curve: cubic-bezier(0.2, 0, 0, 1);

  display: grid !important;
  grid-template-columns: minmax(24px, 1fr) minmax(0, 620px) clamp(32px, 5vw, 72px) minmax(0, 460px) minmax(24px, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: center;
  min-height: 100vh; min-height: 100dvh; height: auto !important; margin: 0;
  position: relative; isolation: isolate;
  background: var(--lp-bg) !important; color: var(--lp-fg);
  font-family: var(--lp-cn);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
/* blueprint grid + one glow, fixed behind everything */
body.vneedai-login-blueprint::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--lp-line) 1px, transparent 1px), linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 35% 45%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 35% 45%, #000 25%, transparent 80%);
}
body.vneedai-login-blueprint::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; width: 760px; height: 560px; left: 6%; top: 16%;
  background: radial-gradient(closest-side, rgba(47, 107, 255, 0.20), rgba(58, 215, 243, 0.05) 60%, transparent);
}
body.vneedai-login-blueprint ::selection { background: rgba(47, 107, 255, 0.35); color: #fff; }

/* ---------- shell: header / footer ---------- */
body.vneedai-login-blueprint .lp-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.vneedai-login-blueprint > .lp-bar {
  grid-area: 1 / 1 / 2 / 6; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px max(24px, calc((100% - 1152px) / 2));
}
body.vneedai-login-blueprint .lp-brand img { display: block; width: 120px; height: auto; }
body.vneedai-login-blueprint .lp-home {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 12px; border-radius: 9px;
  font-size: 14px; color: var(--lp-fg-2); text-decoration: none;
  transition: color 150ms var(--lp-curve), background-color 150ms var(--lp-curve);
}
body.vneedai-login-blueprint .lp-home:hover { color: var(--lp-fg); background: rgba(122, 156, 255, 0.07); }
body.vneedai-login-blueprint > .lp-foot {
  grid-area: 3 / 1 / 4 / 6; box-sizing: border-box;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px max(24px, calc((100% - 1152px) / 2)); border-top: 1px solid var(--lp-line);
  font-size: 12.5px; color: var(--lp-fg-3);
}

/* ---------- shell: showcase ---------- */
body.vneedai-login-blueprint > .lp-showcase { grid-area: 2 / 2 / 3 / 3; display: grid; gap: 24px; min-width: 0; padding-block: 24px 40px; }
body.vneedai-login-blueprint .lp-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--lp-mono); letter-spacing: 0.16em; color: var(--lp-cyan); }
body.vneedai-login-blueprint .lp-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
body.vneedai-login-blueprint .lp-title { margin: 0; font: 900 clamp(34px, 4.2vw, 52px)/1.12 var(--lp-cn-display); letter-spacing: -0.025em; color: var(--lp-fg); text-wrap: balance; }
body.vneedai-login-blueprint .lp-grad { background: linear-gradient(100deg, var(--lp-blue-hi) 10%, var(--lp-cyan) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.vneedai-login-blueprint .lp-lede { margin: 0; max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--lp-fg-2); }
body.vneedai-login-blueprint .lp-router { margin: 0; border-radius: 18px; padding: 6px; background: linear-gradient(180deg, rgba(16, 26, 45, 0.7), rgba(8, 13, 24, 0.7)); box-shadow: inset 0 0 0 1px var(--lp-line-2), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
body.vneedai-login-blueprint .lp-router-stage { border-radius: 12px; overflow: hidden; background: rgba(5, 8, 15, 0.7); box-shadow: inset 0 0 0 1px var(--lp-line); }
body.vneedai-login-blueprint .lp-router svg { display: block; width: 100%; height: auto; }
body.vneedai-login-blueprint .lp-node { fill: #0b1323; stroke: rgba(122, 156, 255, 0.22); }
body.vneedai-login-blueprint .lp-core { fill: #0d1830; stroke: rgba(93, 141, 255, 0.55); transition: stroke 300ms var(--lp-curve), stroke-width 300ms var(--lp-curve); }
body.vneedai-login-blueprint .lp-core-ring { fill: none; stroke: rgba(58, 215, 243, 0.18); stroke-dasharray: 3 5; transition: stroke 300ms var(--lp-curve); }
body.vneedai-login-blueprint .lp-wire { fill: none; stroke: rgba(122, 156, 255, 0.20); stroke-width: 1.25; }
body.vneedai-login-blueprint .lp-wire-hot { fill: none; stroke: url(#lp-wire-grad); stroke-width: 1.25; }
body.vneedai-login-blueprint .lp-label { fill: var(--lp-fg); font: 500 14px var(--lp-cn); }
body.vneedai-login-blueprint .lp-vendor { fill: var(--lp-fg); font: 600 14px var(--lp-display); }
body.vneedai-login-blueprint .lp-sub { fill: var(--lp-fg-3); font: 400 11px var(--lp-mono); }
body.vneedai-login-blueprint .lp-core-text { fill: var(--lp-fg); font: 700 30px var(--lp-display); }
body.vneedai-login-blueprint .lp-core-sub { fill: var(--lp-blue-hi); font: 500 12px var(--lp-cn); letter-spacing: 0.08em; }
body.vneedai-login-blueprint .lp-model { fill: var(--lp-fg-3); font: 400 11px var(--lp-mono); transition: opacity 220ms var(--lp-curve); }
body.vneedai-login-blueprint .lp-model.lp-out { opacity: 0; }
body.vneedai-login-blueprint .lp-packet { fill: var(--lp-cyan); filter: drop-shadow(0 0 4px rgba(58, 215, 243, 0.9)); }
/* the core lights up while the visitor is in the form */
body.vneedai-login-blueprint.vn-login-typing .lp-core { stroke: var(--lp-cyan); stroke-width: 1.5; }
body.vneedai-login-blueprint.vn-login-typing .lp-core-ring { stroke: rgba(58, 215, 243, 0.5); }
body.vneedai-login-blueprint .lp-facts { display: flex; flex-wrap: wrap; gap: 10px; }
body.vneedai-login-blueprint .lp-fact { display: inline-flex; align-items: baseline; gap: 8px; height: 34px; padding-inline: 12px; border-radius: 9px; background: rgba(8, 13, 24, 0.8); box-shadow: inset 0 0 0 1px var(--lp-line-2); font-size: 12px; line-height: 34px; color: var(--lp-fg-3); }
body.vneedai-login-blueprint .lp-fact[hidden] { display: none; }
body.vneedai-login-blueprint .lp-fact b { font: 600 15px var(--lp-display); color: var(--lp-fg); font-variant-numeric: tabular-nums; }
body.vneedai-login-blueprint .lp-fact code { font: 400 12.5px var(--lp-mono); color: var(--lp-fg); background: none; padding: 0; }

/* ---------- the access panel: #app is the lit edge, the layout is the face ---------- */
body.vneedai-login-blueprint [data-vn-login-app] {
  --mx: 50%; --my: 0%;
  grid-area: 2 / 4 / 3 / 5; align-self: center; position: relative;
  width: auto !important; min-width: 0; min-height: 0 !important; height: auto !important;
  padding: 1px; border-radius: 22px;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(58, 215, 243, 0.55), rgba(47, 107, 255, 0.25) 35%, rgba(122, 156, 255, 0.12) 60%);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95), 0 0 120px -50px rgba(47, 107, 255, 0.55);
}
body.vneedai-login-blueprint [data-vn-login-layout] {
  box-sizing: border-box; display: block !important; min-height: 0 !important; width: 100%;
  padding: clamp(24px, 3.4vw, 40px) !important; overflow: visible !important;
  border-radius: 21px;
  background: radial-gradient(600px circle at var(--mx) var(--my), rgba(47, 107, 255, 0.08), transparent 45%), linear-gradient(180deg, #0c1427, #090f1d) !important;
}
body.vneedai-login-blueprint [data-vn-login-container] { width: 100%; max-width: none !important; }
body.vneedai-login-blueprint [data-vn-login-decoration],
body.vneedai-login-blueprint [data-vn-login-brand],
body.vneedai-login-blueprint [data-vn-login-copyright] { display: none !important; }
body.vneedai-login-blueprint [data-vn-login-card] { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* login / register switch (injected; navigates through the app's own links) */
body.vneedai-login-blueprint [data-vneedai-login-modes] {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 26px; padding: 4px;
  border-radius: 12px; background: var(--lp-raise); box-shadow: inset 0 0 0 1px var(--lp-line-2);
}
body.vneedai-login-blueprint [data-vneedai-login-modes] a {
  position: relative; z-index: 1; display: grid; place-items: center; height: 36px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--lp-fg-2); text-decoration: none;
  transition: color 150ms var(--lp-curve);
}
body.vneedai-login-blueprint [data-vneedai-login-modes] a:hover,
body.vneedai-login-blueprint [data-vneedai-login-modes] a[aria-current="page"] { color: var(--lp-fg); }
body.vneedai-login-blueprint [data-vneedai-login-modes] .lp-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 5px); border-radius: 8px;
  background: var(--lp-panel-2); box-shadow: inset 0 0 0 1px var(--lp-line-2), 0 6px 16px -8px rgba(0, 0, 0, 0.8);
  transition: translate 260ms var(--lp-curve);
}
body.vneedai-login-blueprint [data-vneedai-login-modes][data-mode="register"] .lp-thumb { translate: calc(100% + 2px) 0; }

/* heading */
body.vneedai-login-blueprint [data-vn-login-heading] { text-align: left !important; margin: 0 0 22px !important; }
body.vneedai-login-blueprint [data-vneedai-login-eyebrow] { display: block; margin-bottom: 10px; font: 500 12px/1 var(--lp-mono); letter-spacing: 0.12em; color: var(--lp-cyan); }
body.vneedai-login-blueprint [data-vn-login-heading] h1,
body.vneedai-login-blueprint [data-vn-login-heading] h2 { margin: 0 0 6px !important; font: 700 28px/1.25 var(--lp-cn-display) !important; letter-spacing: -0.015em; color: var(--lp-fg) !important; background: none !important; -webkit-text-fill-color: currentColor; }
body.vneedai-login-blueprint [data-vn-login-heading] p { margin: 0 !important; font-size: 14px !important; line-height: 1.6; color: var(--lp-fg-3) !important; }

/* fields */
body.vneedai-login-blueprint [data-vn-login-field] { position: relative; }
body.vneedai-login-blueprint [data-vn-login-field] > label { display: block; margin-bottom: 8px !important; font-size: 13px !important; font-weight: 500; line-height: 1.5; color: var(--lp-fg-2) !important; }
body.vneedai-login-blueprint [data-vn-login-input-wrap] { position: relative; }
/* keep the app's own field icons; recolour them, light them on focus */
body.vneedai-login-blueprint [data-vn-login-input-wrap] > div[class~="pointer-events-none"] { color: var(--lp-fg-3) !important; transition: color 150ms var(--lp-curve); }
body.vneedai-login-blueprint [data-vn-login-input-wrap] > div[class~="pointer-events-none"] svg { color: inherit !important; }
body.vneedai-login-blueprint [data-vn-login-input-wrap]:focus-within > div[class~="pointer-events-none"] { color: var(--lp-cyan) !important; }
body.vneedai-login-blueprint [data-vn-login-input] {
  box-sizing: border-box; width: 100%; height: 48px; min-width: 0;
  padding: 0 14px 0 44px !important; border: 0 !important; border-radius: 12px !important; outline: none !important;
  background: rgba(5, 8, 15, 0.75) !important; color: var(--lp-fg) !important;
  font-family: inherit; font-size: 16px !important; line-height: 1.4;
  box-shadow: inset 0 0 0 1px var(--lp-line-2) !important;
  transition: box-shadow 150ms var(--lp-curve), background-color 150ms var(--lp-curve);
}
body.vneedai-login-blueprint [data-vn-login-input="password"],
body.vneedai-login-blueprint [data-vn-login-input="confirm"] { padding-right: 50px !important; }
body.vneedai-login-blueprint [data-vn-login-input]::placeholder { color: #4d5874 !important; opacity: 1; }
body.vneedai-login-blueprint [data-vn-login-input]:hover { box-shadow: inset 0 0 0 1px rgba(122, 156, 255, 0.30) !important; }
body.vneedai-login-blueprint [data-vn-login-input]:focus { background: rgba(5, 8, 15, 0.95) !important; box-shadow: inset 0 0 0 1px var(--lp-blue-hi), 0 0 0 4px rgba(47, 107, 255, 0.18) !important; }
body.vneedai-login-blueprint [data-vn-login-input][aria-invalid="true"] { box-shadow: inset 0 0 0 1px rgba(255, 107, 127, 0.7), 0 0 0 4px rgba(255, 107, 127, 0.12) !important; }
body.vneedai-login-blueprint [data-vn-login-input]:-webkit-autofill { -webkit-text-fill-color: var(--lp-fg); -webkit-box-shadow: inset 0 0 0 1px var(--lp-line-2), inset 0 0 0 100px #0a1222; caret-color: var(--lp-fg); }
body.vneedai-login-blueprint [data-vn-login-field] .input-error-text,
body.vneedai-login-blueprint [data-vn-login-field] [class*="text-red"] { color: var(--lp-bad) !important; font-size: 12.5px; }
body.vneedai-login-blueprint [data-vn-login-field] .input-hint { color: var(--lp-fg-3) !important; font-size: 12.5px; }

body.vneedai-login-blueprint [data-vn-login-toggle] {
  position: absolute !important; inset: 6px 6px auto auto !important; width: 36px; height: 36px;
  display: grid; place-items: center; padding: 0 !important; border: 0; border-radius: 9px; background: transparent;
  color: var(--lp-fg-3) !important; cursor: pointer;
  transition: color 150ms var(--lp-curve), background-color 150ms var(--lp-curve), scale 150ms var(--lp-curve);
}
body.vneedai-login-blueprint [data-vn-login-toggle]:hover { background: rgba(122, 156, 255, 0.08); color: var(--lp-fg) !important; }
body.vneedai-login-blueprint [data-vn-login-toggle]:active { scale: 0.96; }
body.vneedai-login-blueprint [data-vn-login-toggle] svg { color: inherit !important; }

body.vneedai-login-blueprint [data-vn-login-forgot] { position: absolute; right: 0; top: -3px; margin: 0 !important; }
body.vneedai-login-blueprint [data-vn-login-forgot] a { display: inline-flex; align-items: center; min-height: 26px; font-size: 13px !important; color: var(--lp-blue-hi) !important; transition: color 150ms var(--lp-curve); }
body.vneedai-login-blueprint [data-vn-login-forgot] a:hover { color: var(--lp-cyan) !important; }

/* caps-lock hint (injected; reads the keyboard state, never the field value) */
body.vneedai-login-blueprint [data-vneedai-login-caps] { display: none; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--lp-warn); }
body.vneedai-login-blueprint [data-vneedai-login-caps].lp-on { display: flex; }
body.vneedai-login-blueprint [data-vneedai-login-caps] svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* submit */
body.vneedai-login-blueprint [data-vn-login-submit] {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 0 16px !important; border: 0 !important; border-radius: 12px !important;
  background: var(--lp-blue) !important; background-image: none !important; color: #fff !important;
  font-size: 15px !important; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px -10px rgba(47, 107, 255, 0.75) !important;
  transition-property: background-color, box-shadow, scale; transition-duration: 150ms; transition-timing-function: var(--lp-curve);
}
body.vneedai-login-blueprint [data-vn-login-submit]::after {
  content: ""; position: absolute; inset: 0; translate: -120% 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transition: translate 600ms var(--lp-curve);
}
body.vneedai-login-blueprint [data-vn-login-submit]:hover:not(:disabled) { background-color: #3b77ff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 36px -10px rgba(47, 107, 255, 0.9) !important; }
body.vneedai-login-blueprint [data-vn-login-submit]:hover:not(:disabled)::after { translate: 120% 0; }
body.vneedai-login-blueprint [data-vn-login-submit]:active:not(:disabled) { scale: 0.96; }
/* disabled covers both "working…" (the app shows its spinner) and "nothing typed yet" on the code page */
body.vneedai-login-blueprint [data-vn-login-submit]:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; }
body.vneedai-login-blueprint [data-vn-login-submit] svg { color: inherit !important; }

body.vneedai-login-blueprint [data-vn-login-register] { margin-top: 22px !important; text-align: center; font-size: 14px !important; color: var(--lp-fg-3) !important; }
body.vneedai-login-blueprint [data-vn-login-register]:empty { display: none; }
body.vneedai-login-blueprint [data-vn-login-register] p,
body.vneedai-login-blueprint [data-vn-login-register] span { color: var(--lp-fg-3) !important; }
body.vneedai-login-blueprint [data-vn-login-register] a { font-weight: 500; color: var(--lp-blue-hi) !important; transition: color 150ms var(--lp-curve); }
body.vneedai-login-blueprint [data-vn-login-register] a:hover { color: var(--lp-cyan) !important; }

/* back-to-registration on the code page is a button, not a link */
body.vneedai-login-blueprint [data-vn-login-register] > button {
  display: inline-flex !important; align-items: center; gap: 6px; margin-inline: auto; padding: 6px 10px; border-radius: 8px;
  color: var(--lp-fg-2) !important; transition: color 150ms var(--lp-curve), background-color 150ms var(--lp-curve);
}
body.vneedai-login-blueprint [data-vn-login-register] > button:hover { color: var(--lp-fg) !important; background: rgba(122, 156, 255, 0.07); }

/* ---------- result-state actions (forgot / reset) ---------- */
body.vneedai-login-blueprint [data-vn-login-cta] {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px !important;
  border: 0 !important; border-radius: 12px !important; background: var(--lp-blue) !important; background-image: none !important; color: #fff !important;
  font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px -10px rgba(47, 107, 255, 0.75) !important;
  transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: var(--lp-curve);
}
body.vneedai-login-blueprint [data-vn-login-cta]:hover { background-color: #3b77ff !important; }
body.vneedai-login-blueprint [data-vn-login-cta]:active { scale: 0.96; }
body.vneedai-login-blueprint [data-vn-login-link] { color: var(--lp-blue-hi) !important; font-weight: 500; transition: color 150ms var(--lp-curve); }
body.vneedai-login-blueprint [data-vn-login-link]:hover { color: var(--lp-cyan) !important; }
/* the reset page shows the address read-only */
body.vneedai-login-blueprint [data-vn-login-input]:disabled,
body.vneedai-login-blueprint [data-vn-login-input][readonly] { opacity: 0.65; cursor: not-allowed; }

/* ---------- /email-verify ---------- */
/* sign-up progress, in the slot the login/register switch uses */
body.vneedai-login-blueprint [data-vneedai-login-steps] {
  display: flex; align-items: center; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none;
  font-size: 13px; color: var(--lp-fg-3);
}
body.vneedai-login-blueprint [data-vneedai-login-steps] li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
body.vneedai-login-blueprint [data-vneedai-login-steps] li + li::before {
  content: ""; width: 36px; height: 1px; margin-right: 4px; background: linear-gradient(90deg, rgba(58, 215, 243, 0.6), rgba(93, 141, 255, 0.4));
}
body.vneedai-login-blueprint [data-vneedai-login-steps] span {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font: 600 11.5px/1 var(--lp-display); box-shadow: inset 0 0 0 1px var(--lp-line-2);
}
body.vneedai-login-blueprint [data-vneedai-login-steps] svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
body.vneedai-login-blueprint [data-vneedai-login-steps] .lp-done { color: var(--lp-fg-2); }
body.vneedai-login-blueprint [data-vneedai-login-steps] .lp-done span { color: var(--lp-cyan); background: rgba(58, 215, 243, 0.08); box-shadow: inset 0 0 0 1px rgba(58, 215, 243, 0.4); }
body.vneedai-login-blueprint [data-vneedai-login-steps] .lp-now { color: var(--lp-fg); font-weight: 500; }
body.vneedai-login-blueprint [data-vneedai-login-steps] .lp-now span { color: #fff; background: var(--lp-blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18); }
body.vneedai-login-blueprint [data-vneedai-login-steps] .lp-next span { color: var(--lp-fg-3); }
body.vneedai-login-blueprint [data-vneedai-login-steps] .lp-now + .lp-next::before { background: var(--lp-line-2); }
/* the address the code went to */
body.vneedai-login-blueprint [data-vn-login-heading] p span { color: var(--lp-fg) !important; font-family: var(--lp-mono); font-size: 13.5px; }

/* six-digit code: one wide field, digits spaced like a code display */
body.vneedai-login-blueprint [data-vn-login-field="code"] > label { text-align: left !important; }
body.vneedai-login-blueprint [data-vn-login-input="code"] {
  height: 62px; padding: 0 0 0 0.5em !important;
  font: 500 26px/1 var(--lp-mono) !important; letter-spacing: 0.5em !important; text-align: center !important;
}
body.vneedai-login-blueprint [data-vn-login-input="code"]::placeholder { color: #2e3851 !important; letter-spacing: 0.5em; }
body.vneedai-login-blueprint [data-vn-login-field="code"] .input-hint { margin-top: 8px; text-align: left !important; }

/* "code sent" / "session expired" notes: keep the app's tone colour, match the panel's shapes */
body.vneedai-login-blueprint [data-vn-login-note] {
  border-radius: 10px !important; border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(122, 156, 255, 0.14);
  padding: 12px 14px !important; font-size: 13px;
}
body.vneedai-login-blueprint [data-vn-login-note] p { font-size: 13px !important; line-height: 1.6; }
/* forgot / reset result boxes carry an icon and a title: give them more room */
body.vneedai-login-blueprint [data-vn-login-note]:has(h3) { padding: 22px 20px !important; }
body.vneedai-login-blueprint [data-vn-login-note] h3 { font-size: 16px !important; }

/* resend / countdown */
body.vneedai-login-blueprint [data-vn-login-resend] { text-align: center; }
body.vneedai-login-blueprint [data-vn-login-resend] button { font-size: 13.5px !important; padding: 6px 10px; border-radius: 8px; color: var(--lp-blue-hi) !important; transition: color 150ms var(--lp-curve), background-color 150ms var(--lp-curve); }
body.vneedai-login-blueprint [data-vn-login-resend] button:hover:not(:disabled) { color: var(--lp-cyan) !important; background: rgba(122, 156, 255, 0.07); }
body.vneedai-login-blueprint [data-vn-login-resend] button:disabled { color: var(--lp-fg-3) !important; font-variant-numeric: tabular-nums; }

body.vneedai-login-blueprint [data-vneedai-login-secure] {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px;
  font: 400 11.5px var(--lp-mono); letter-spacing: 0.04em; color: var(--lp-fg-3);
}
body.vneedai-login-blueprint [data-vneedai-login-secure] svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.vneedai-login-blueprint button:disabled { cursor: default; }

/* ---------- entrance: showcase, then panel — once per page load ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.vneedai-login-blueprint.vn-login-enter > .lp-showcase > * { animation: vn-login-rise 700ms var(--lp-curve) both; }
  body.vneedai-login-blueprint.vn-login-enter > .lp-showcase > :nth-child(2) { animation-delay: 100ms; }
  body.vneedai-login-blueprint.vn-login-enter > .lp-showcase > :nth-child(n+3) { animation-delay: 200ms; }
  body.vneedai-login-blueprint.vn-login-enter [data-vn-login-app] { animation: vn-login-rise 700ms 100ms var(--lp-curve) both; }
  @keyframes vn-login-rise { from { opacity: 0; translate: 0 10px; } }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  body.vneedai-login-blueprint { grid-template-columns: minmax(24px, 1fr) minmax(0, 520px) 40px minmax(0, 420px) minmax(24px, 1fr); }
}
@media (max-width: 960px) {
  body.vneedai-login-blueprint { grid-template-columns: minmax(16px, 1fr) minmax(0, 480px) minmax(16px, 1fr); grid-template-rows: auto auto auto 1fr auto; align-items: start; }
  body.vneedai-login-blueprint > .lp-bar { grid-area: 1 / 1 / 2 / 4; }
  body.vneedai-login-blueprint [data-vn-login-app] { grid-area: 2 / 2 / 3 / 3; margin-top: 8px; }
  body.vneedai-login-blueprint > .lp-showcase { grid-area: 3 / 2 / 4 / 3; gap: 14px; padding-block: 32px 24px; }
  body.vneedai-login-blueprint .lp-router,
  body.vneedai-login-blueprint .lp-lede { display: none; }
  body.vneedai-login-blueprint .lp-title { font-size: 26px; }
  body.vneedai-login-blueprint > .lp-foot { grid-area: 5 / 1 / 6 / 4; }
}
@media (max-width: 480px) {
  body.vneedai-login-blueprint .lp-home span { display: none; }
  body.vneedai-login-blueprint [data-vn-login-heading] h1,
  body.vneedai-login-blueprint [data-vn-login-heading] h2 { font-size: 24px !important; }
}
@media (pointer: coarse) {
  body.vneedai-login-blueprint [data-vn-login-forgot] a,
  body.vneedai-login-blueprint [data-vn-login-register] a { min-height: 44px; display: inline-flex; align-items: center; }
  body.vneedai-login-blueprint [data-vn-login-forgot] { top: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.vneedai-login-blueprint *, body.vneedai-login-blueprint *::before, body.vneedai-login-blueprint *::after { transition-duration: 0ms !important; animation: none !important; }
}