/* ============================================================================
   nav-wip.css — WIP-only slim header for tool pages (2026-09-15, Scheme D).

   Every rule is scoped to body[data-nav-wip]. Production pages never carry that
   attribute, so this file can be loaded anywhere without changing them. It is
   linked AFTER {include file="header"} so it also wins on source order against
   header-1/2/3.css (which use !important in a few places — mirrored below).

   Contract (from sidebar-wip.html): --dt-rail-w (56px) / --dt-rail-wp (240px)
   and body[data-rail-pinned]. The header becomes the content area's own
   toolbar: transparent (= field colour), no border, starts at the rail's right
   edge, 56px tall. Navigation moved into the rail; only the breadcrumb, credits,
   language switch and avatar remain.
   ========================================================================== */

/* ── First-paint guard ──
   header.html links header-2.css *after* its own markup (line ~512 vs the
   logout dialog at ~242), so on a cold load the "确认退出当前登录?" box paints
   unstyled in the top-left corner until that sheet arrives. This sheet is in
   <head>, so hide the overlays here; header-behavior/login-security open them
   with jQuery .show(), whose inline display wins over this rule. */
body[data-nav-wip] .logout-cfm,
body[data-nav-wip] .logout-mask {
  display: none;
}

/* Neutral profile menu, including the interval before body theme restoration. */
html.dark-mode body[data-nav-wip] .profile-menu,
body.dark-mode[data-nav-wip] .profile-menu {
  background: #1f1f22;
  border-color: #2a2a2e;
  color: #f5f5f6;
}
html.dark-mode body[data-nav-wip] .profile-menu .pm-item:hover,
body.dark-mode[data-nav-wip] .profile-menu .pm-item:hover {
  background: #2a2a2e;
}
html.dark-mode body[data-nav-wip] .profile-menu .pm-item-theme:hover,
body.dark-mode[data-nav-wip] .profile-menu .pm-item-theme:hover {
  background: transparent;
}
html.dark-mode body[data-nav-wip] .profile-menu .pi-title,
html.dark-mode body[data-nav-wip] .profile-menu .pm-theme-icon,
body.dark-mode[data-nav-wip] .profile-menu .pi-title,
body.dark-mode[data-nav-wip] .profile-menu .pm-theme-icon {
  color: #f5f5f6;
}
html.dark-mode body[data-nav-wip] .profile-menu .theme-pills,
body.dark-mode[data-nav-wip] .profile-menu .theme-pills {
  border-color: #3f3f46;
}
html.dark-mode body[data-nav-wip] .profile-menu .theme-pill,
body.dark-mode[data-nav-wip] .profile-menu .theme-pill {
  background: #1f1f22;
  color: #a1a1aa;
}
html.dark-mode body[data-nav-wip] .profile-menu .theme-pill:hover:not(.active),
body.dark-mode[data-nav-wip] .profile-menu .theme-pill:hover:not(.active) {
  background: #2a2a2e;
  color: #f5f5f6;
}
html.dark-mode body[data-nav-wip] .profile-menu .theme-pill.active,
body.dark-mode[data-nav-wip] .profile-menu .theme-pill.active {
  background: #f5f5f6;
  color: #161618;
}

/* ── Bar geometry ── */
body[data-nav-wip] .header {
  left: var(--dt-rail-w, 56px);
  width: calc(100% - var(--dt-rail-w, 56px));
  height: 56px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: left 0.2s ease, width 0.2s ease;
}
body[data-nav-wip][data-rail-pinned] .header {
  left: var(--dt-rail-wp, 240px);
  width: calc(100% - var(--dt-rail-wp, 240px));
}
body[data-nav-wip] .header .wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
body[data-nav-wip] .head_box {
  height: 56px;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

/* ── Remove what the rail now owns ── */
body[data-nav-wip] .header .logo {
  display: none !important;
}
body[data-nav-wip] .head_left {
  display: none !important;
}
body[data-nav-wip] .hr-new.head_right .download-windows-btn {
  display: none !important;
}

/* ── Breadcrumb (injected by sidebar-wip.html from body[data-nav-crumb]) ── */
.dt-rail-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
  color: #6b7280;
  white-space: nowrap;
}
/* Display face for titles only (page title here, showcase title in the panel
   sheet) — self-hosted Space Grotesk 700, latin subsets; Google Fonts is
   unreliable from mainland China. CJK text falls back to the system stack. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-700-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-700-latin-ext.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;
}
/* page title: one step above the 18px panel tabs so the hierarchy reads top-down */
.dt-rail-crumb strong {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #111827;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.dt-rail-crumb .dt-rail-crumb-sep {
  color: #9ca3af;
}

/* ── Right cluster ── */
body[data-nav-wip] .hr-new.head_right {
  gap: 12px;
}
body[data-nav-wip] .hr-new.head_right > .head_rnav {
  margin-top: 0 !important;
}
body[data-nav-wip] .lang-switch-container .hr-text {
  color: #4b5563;
  font-size: 13px;
}
/* credits pill + "Start Free": inherit the homepage header look (header-2.css)
   except the corner radius — a full pill pairs with the round avatar beside it.
   When the rail ships to prod, mirror this one line in header-2.css. */
body[data-nav-wip] .hr-new .ai-flow.head_rnav.score {
  border-radius: 999px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  /* light: tinted amber pill instead of the solid #ffc000 block — same
     "light fill, dark text" language as the engine pill and active tab */
  background: #fef3c7 !important;
  border: 1px solid rgba(180, 83, 9, .22) !important;
  color: #111827 !important;
}
body[data-nav-wip] .hr-new .ai-flow.head_rnav.score:hover {
  background: #fde68a !important;
}
body[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text,
body[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text span {
  color: #111827 !important;
  font-weight: 600;
}
/* coin icon: the header's coin.png is a dark bitmap that vanishes on dark
   tints — swap it for an SVG coin whose colour follows the text */
body[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text img.hr-ico {
  display: none !important;
}
body[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.5 9.5a3.5 3.5 0 1 0 0 5'/%3E%3C/svg%3E") no-repeat center / contain;
}
body[data-nav-wip] .try-tools-btn {
  border-radius: 999px !important;
}

/* ── Mobile (<769px): rail is hidden, header returns to full width with logo ── */
@media (max-width: 768px) {
  body[data-nav-wip] .header,
  body[data-nav-wip][data-rail-pinned] .header {
    left: 0;
    width: 100%;
  }
  body[data-nav-wip] .header .logo {
    display: block !important;
  }
  .dt-rail-crumb {
    display: none;
  }
}

/* ── Light / dark toggle (injected by sidebar-wip.html at the foot of the rail;
   drives the site's existing window.__dt_setTheme). It carries .dt-rail-item so
   it inherits that shape, hover and pinned layout — only the icon size and the
   label, which the rail's own items get from data-rl, are set here. ── */
body[data-nav-wip] .dt-theme-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
body[data-nav-wip] .dt-theme-btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
body[data-nav-wip] .dt-theme-btn .dt-ico-moon { display: block; }
body[data-nav-wip] .dt-theme-btn .dt-ico-sun { display: none; }
body.dark-mode[data-nav-wip] .dt-theme-btn .dt-ico-moon { display: none; }
body.dark-mode[data-nav-wip] .dt-theme-btn .dt-ico-sun { display: block; }

/* ── Dark mode (opt-in body.dark-mode): Higgsfield-style neutral near-black ── */
body.dark-mode[data-nav-wip] .header {
  background: transparent !important;
}
body.dark-mode .dt-rail-crumb {
  color: #a1a1aa;
}
body.dark-mode .dt-rail-crumb strong {
  color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .logout-cfm { background: #161618; }
/* credits pill in dark: amber tint + hairline instead of the solid #ffc000
   block (too loud on near-black); light mode keeps the homepage yellow */
body.dark-mode[data-nav-wip] .hr-new .ai-flow.head_rnav.score {
  background: rgba(251, 191, 36, .14) !important;
  border: 1px solid rgba(251, 191, 36, .35) !important;
  color: #fbbf24 !important;
}
body.dark-mode[data-nav-wip] .hr-new .ai-flow.head_rnav.score:hover {
  background: rgba(251, 191, 36, .22) !important;
}
body.dark-mode[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text,
body.dark-mode[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text span {
  color: #fbbf24 !important;
}
body.dark-mode[data-nav-wip] .hr-new .ai-flow.head_rnav.score .hr-text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.5 9.5a3.5 3.5 0 1 0 0 5'/%3E%3C/svg%3E");
}
body.dark-mode[data-nav-wip] .lang-switch-container .hr-text {
  color: #cbd5e1;
}

/* ============================================================================
   Login / register modal (login_reg_tpl.html) — WIP design language
   (2026-09-27). The base markup + light-mode CSS live inline in
   login_reg_tpl.html; production dark mode lives in dark-theme.css
   (`body.dark-mode .login-panel` etc, blue brand gradient + blue accents).
   Every selector below adds the [data-nav-wip] attribute, which beats both of
   those at equal or lower specificity — no reliance on source order. A few
   properties dark-theme.css sets with !important (autofill, .smsdenglu-com,
   .layui-layer-msg) are matched with !important here too so the WIP override
   actually wins in dark mode.

   Card fill / border / text tokens mirror the WIP tool panel
   (snaprender-panel-wip.css): light card #f5f6f8, border #e5e7eb, text
   #111827, muted #6b7280; dark card #1f1f22, border #2a2a2e, text #f5f5f6,
   muted #a1a1aa. Primary action = black pill (light) / light-grey pill (dark),
   the same treatment as the panel's "Generate"/"Edit" keys. ========================================================================== */

/* ── Overlay ── */
body[data-nav-wip] .login-panel-mask {
  background: rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.dark-mode[data-nav-wip] .login-panel-mask {
  background: rgba(0, 0, 0, .55);
}

/* ── Modal shell ── */
body[data-nav-wip] .login-panel {
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .22);
  overflow: hidden;
}
body.dark-mode[data-nav-wip] .login-panel {
  background-color: #161618;
  box-shadow: 0 0 0 1px #2a2a2e, 0 20px 50px rgba(0, 0, 0, .5);
}

/* Brand side: neutral WIP surface instead of the blue gradient. A shade off
   the white right panel (light) / the modal body (dark) keeps the split
   legible without reaching for brand blue. */
body[data-nav-wip] .lp-left {
  background: #f5f6f8;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
body.dark-mode[data-nav-wip] .lp-left {
  background: #1f1f22;
}
body[data-nav-wip] .lp-right {
  background-color: #ffffff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
body.dark-mode[data-nav-wip] .lp-right {
  background-color: #161618;
}
/* logo2.png is solid white (made for the blue gradient); tint it to the brand
   blue #2563eb on the now-light card. It already reads fine on the dark card. */
body[data-nav-wip] .lpll-en img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(94%) saturate(2335%) hue-rotate(214deg) brightness(93%) contrast(95%);
  opacity: 1;
}
body.dark-mode[data-nav-wip] .lpll-en img {
  filter: none;
  opacity: 1;
}

body[data-nav-wip] .login-panel .lpr-form h2 {
  color: #111827;
}
body.dark-mode[data-nav-wip] .login-panel .lpr-form h2 {
  color: #f5f5f6;
}

/* ── Close button: a round quiet key top-right (custom-modal-close language)
   instead of a floating image outside the panel's right edge — the old
   position (right:-48px) also broke on narrow viewports. ── */
body[data-nav-wip] .lp-close {
  top: 14px;
  right: 14px !important;
  left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color .15s ease;
}
body[data-nav-wip] .lp-close:hover {
  background: #f3f4f6;
}
body.dark-mode[data-nav-wip] .lp-close:hover {
  background: #2a2a2e;
}
body[data-nav-wip] .lp-close img {
  width: 14px;
  height: 14px;
}

/* ── Email / Phone tabs: neutral text + underline instead of blue ── */
body[data-nav-wip] .lp-tab {
  color: #9ca3af;
}
body[data-nav-wip] .lp-tab:hover {
  color: #111827;
}
body[data-nav-wip] .lp-tab.active {
  color: #111827;
  border-bottom-color: #111827;
}
body[data-nav-wip] .lp-tab .tab-icon,
body[data-nav-wip] .lp-tab:hover .tab-icon,
body[data-nav-wip] .lp-tab.active .tab-icon {
  stroke: currentColor;
}
body[data-nav-wip] .lp-tabs {
  border-bottom-color: #e5e7eb;
}
/* WIP pages register by email only (owner, 2026-09-29): every "Register" link
   opens #email-reg-tpl, and this tab is the only way into #phone-reg-tpl.
   Phone *login* (password / SMS) stays. */
body[data-nav-wip] .lp-tab.reg-phone-tab {
  display: none !important;
}
body.dark-mode[data-nav-wip] .lp-tab {
  color: #71717a;
}
body.dark-mode[data-nav-wip] .lp-tab:hover {
  color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .lp-tab.active {
  color: #f5f5f6;
  border-bottom-color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .lp-tabs {
  border-bottom-color: #2a2a2e;
}

/* Email-only registration: align its heading with the form, not a tab row. */
body[data-nav-wip] .login-panel.reg .lpr-form h2 {
  text-align: center;
}
body[data-nav-wip] .login-panel.reg .lp-tabs {
  justify-content: center;
  border-bottom: 0;
}
body[data-nav-wip] .login-panel.reg .lp-tab.reg-email-tab {
  border-bottom: 0;
  cursor: default;
}

/* ── Password / SMS Code segmented control: same "light chip on grey track"
   language as the panel's reference-mode switch (#refModeButtons). ── */
body[data-nav-wip] .lp-subtabs {
  background: #f3f4f6;
}
body[data-nav-wip] .lp-subtab {
  color: #4b5563;
}
body[data-nav-wip] .lp-subtab.active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body.dark-mode[data-nav-wip] .lp-subtabs {
  background: #1f1f22;
}
body.dark-mode[data-nav-wip] .lp-subtab {
  color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .lp-subtab.active {
  background: #2a2a2e;
  color: #f5f5f6;
  box-shadow: none;
}

/* ── Inputs ── */
/* The modal's base CSS has no box-sizing reset: .lp-input is width:100% +
   padding-left:40px, the Password/SMS track has padding too. On WIP pages
   without the Tailwind preflight (RoomFlow, Auto3D, Library) those boxes are
   wider than the column and stick out on the right — the input only shows it
   once browser autofill paints its inset background. Give the whole modal the
   border-box model the Tailwind pages already render it with. */
body[data-nav-wip] .login-panel,
body[data-nav-wip] .login-panel *,
body[data-nav-wip] .login-panel *::before,
body[data-nav-wip] .login-panel *::after {
  box-sizing: border-box;
}
body[data-nav-wip] .lprfi-border {
  overflow: hidden;
}
body[data-nav-wip] .lp-input {
  border-radius: 10px;
}
body[data-nav-wip] .lprfi-border-out {
  border-color: transparent;
  border-radius: 12px;
}
body[data-nav-wip] .lprfi-border {
  background: #f5f6f8;
  border-color: #e5e7eb;
  border-radius: 12px;
}
body[data-nav-wip] .focus .lprfi-border-out {
  border-color: rgba(17, 24, 39, .08);
}
body[data-nav-wip] .focus .lprfi-border {
  border-color: #9ca3af;
}
body[data-nav-wip] .lp-input {
  color: #111827;
}
body[data-nav-wip] .lp-input::placeholder {
  color: #9ca3af;
}
body[data-nav-wip] .lp-input:-webkit-autofill,
body[data-nav-wip] .lp-input:-webkit-autofill:hover,
body[data-nav-wip] .lp-input:-webkit-autofill:focus,
body[data-nav-wip] .lp-input:-webkit-autofill:active {
  -webkit-text-fill-color: #111827 !important;
  -webkit-box-shadow: 0 0 0 1000px #f5f6f8 inset !important;
}
body.dark-mode[data-nav-wip] .lprfi-border {
  background: #1f1f22;
  border-color: #2a2a2e;
}
body.dark-mode[data-nav-wip] .focus .lprfi-border-out {
  border-color: rgba(255, 255, 255, .08);
}
body.dark-mode[data-nav-wip] .focus .lprfi-border {
  border-color: #52525b;
}
body.dark-mode[data-nav-wip] .lp-input {
  color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .lp-input::placeholder {
  color: #71717a;
}
body.dark-mode[data-nav-wip] .lp-input:-webkit-autofill,
body.dark-mode[data-nav-wip] .lp-input:-webkit-autofill:hover,
body.dark-mode[data-nav-wip] .lp-input:-webkit-autofill:focus,
body.dark-mode[data-nav-wip] .lp-input:-webkit-autofill:active {
  -webkit-text-fill-color: #f5f5f6 !important;
  -webkit-box-shadow: 0 0 0 1000px #1f1f22 inset !important;
}
/* input icons (phone/lock/email/avatar) are dark-grey bitmaps made for a white
   field; invert them so they stay legible on the dark card fill. The red
   error glyph and the neutral close glyph are untouched. */
body.dark-mode[data-nav-wip] .lprfi-border .lp-icon,
body.dark-mode[data-nav-wip] .lprfml-item .lp-icon {
  filter: invert(1);
  opacity: .82;
}

/* Error state: keep the semantic red, just line it up with the WIP radius */
body[data-nav-wip] .lprf-item.error .lprfi-border-out,
body.dark-mode[data-nav-wip] .lprf-item.error .lprfi-border-out {
  border-color: rgba(248, 113, 113, .35);
}
body[data-nav-wip] .lprf-item.error .lprfi-border {
  border-color: #fca5a5;
}
body.dark-mode[data-nav-wip] .lprf-item.error .lprfi-border {
  border-color: #f87171;
}

/* ── Get-code button: quiet secondary chip, not a blue link-button ── */
body[data-nav-wip] #btn-get-vcode {
  background: #f5f6f8;
  color: #111827;
  border-radius: 10px;
}
/* inputs sit inside a 3px focus halo (.lprfi-border-out); inset the chip by
   the same amount so its right edge lines up with the fields above/below */
body[data-nav-wip] .lprfi-right {
  padding-right: 3px;
}
body[data-nav-wip] #btn-get-vcode:hover {
  background: #eef0f3;
}
body[data-nav-wip] #btn-get-vcode:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}
body.dark-mode[data-nav-wip] #btn-get-vcode {
  background: #1f1f22;
  color: #f5f5f6;
}
body.dark-mode[data-nav-wip] #btn-get-vcode:hover {
  background: #2a2a2e;
}
body.dark-mode[data-nav-wip] #btn-get-vcode:disabled {
  color: #71717a;
}

/* ── Primary action: brand-blue pill (light) — the WIP shell's one blue key,
   same as the generate button — / light-grey pill (dark). ── */
body[data-nav-wip] #btn-login,
body[data-nav-wip] .reset-pass {
  background: #2563eb;
  background-image: none;
  color: #ffffff;
  border-radius: 999px;
  transition: background-color .15s ease;
}
body[data-nav-wip] #btn-login:hover,
body[data-nav-wip] .reset-pass:hover {
  background: #1d4ed8;
  opacity: 1;
}
body.dark-mode[data-nav-wip] #btn-login,
body.dark-mode[data-nav-wip] .reset-pass {
  background: #e5e7eb;
  color: #111827;
}
body.dark-mode[data-nav-wip] #btn-login:hover,
body.dark-mode[data-nav-wip] .reset-pass:hover {
  background: #f3f4f6;
}

/* ── Secondary action: outline pill (Enterprise Login) ── */
body[data-nav-wip] .smsdenglu-com {
  background: #ffffff !important;
  background-image: none !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px;
}
body[data-nav-wip] .smsdenglu-com:hover {
  background: #f5f6f8 !important;
  border-color: #d1d5db !important;
}
body[data-nav-wip] .smsdenglu-com:active {
  background: #eef0f3 !important;
}
body.dark-mode[data-nav-wip] .smsdenglu-com {
  background: #1f1f22 !important;
  color: #f5f5f6 !important;
  border-color: #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .smsdenglu-com:hover {
  background: #2a2a2e !important;
  border-color: #3f3f46 !important;
}
body.dark-mode[data-nav-wip] .smsdenglu-com:active {
  background: #161618 !important;
}

/* ── Links: "Forgot Password | Register", "Login existing account" ── */
body[data-nav-wip] .lprfi-reg-action,
body[data-nav-wip] .lprfi-passlogin-action,
body[data-nav-wip] .lprfi-phone-passlogin-action {
  color: #6b7280;
}
body[data-nav-wip] .lprfi-reg-action:hover {
  color: #111827;
}
body[data-nav-wip] .lprfi-reg-action a {
  color: #6b7280;
}
body[data-nav-wip] .lprfi-reg-action a:hover {
  color: #111827;
}
body[data-nav-wip] .lp-divider {
  color: #d1d5db;
}
body.dark-mode[data-nav-wip] .lprfi-reg-action,
body.dark-mode[data-nav-wip] .lprfi-passlogin-action,
body.dark-mode[data-nav-wip] .lprfi-phone-passlogin-action {
  color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .lprfi-reg-action:hover {
  color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .lprfi-reg-action a {
  color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .lprfi-reg-action a:hover {
  color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .lp-divider {
  color: #3f3f46;
}

/* ── Wechat panel: agreement line + "other login methods" icons ── */
body[data-nav-wip] .wechat .lprf-small-head,
body[data-nav-wip] .wechat .lprf-item.agreement,
body[data-nav-wip] .wechat .lprf-item.agreement a,
body[data-nav-wip] .lprfml-title {
  color: #6b7280;
}
body.dark-mode[data-nav-wip] .wechat .lprf-small-head,
body.dark-mode[data-nav-wip] .wechat .lprf-item.agreement,
body.dark-mode[data-nav-wip] .wechat .lprf-item.agreement a,
body.dark-mode[data-nav-wip] .lprfml-title {
  color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .wechat .lprfi-qrcode-area {
  background: #2a2a2e;
}

/* ── Toast (layui-layer-msg) shown over the modal on submit/validation ──
   Mirrors the neutral "progress card" toast already shipped for SnapRender
   (snaprender-panel-wip.css) so every WIP page — not only SnapRender — gets a
   themed toast instead of the default dark layui skin. */
body[data-nav-wip] .layui-layer.layui-layer-msg {
  min-width: min(280px, calc(100vw - 32px)) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body[data-nav-wip]:not(.dark-mode) .layui-layer.layui-layer-msg {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12) !important;
}
body.dark-mode[data-nav-wip] .layui-layer.layui-layer-msg {
  background: rgba(31, 31, 34, .94) !important;
  border: 1px solid #2a2a2e !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35) !important;
}
body[data-nav-wip] .layui-layer.layui-layer-msg .layui-layer-content {
  background: transparent !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word;
}
body[data-nav-wip]:not(.dark-mode) .layui-layer.layui-layer-msg .layui-layer-content {
  color: #111827 !important;
}
body.dark-mode[data-nav-wip] .layui-layer.layui-layer-msg .layui-layer-content {
  color: #f5f5f6 !important;
}

/* ── Narrow viewports (≤560px): the panel was a fixed 640×560 box with the
   close button floating outside the right edge — both broke on a phone-width
   screen. Drop the brand side, let the panel size to the viewport. ── */
@media (max-width: 560px) {
  body[data-nav-wip] .login-panel {
    width: calc(100vw - 32px);
    max-width: 400px;
    height: auto;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* `top:0; bottom:0; margin:auto` (the base rule) only shrink-wraps when
       height is a length; with height:auto on a fixed-position box with both
       top and bottom set, the used height stretches to fill the viewport
       instead of hugging the content. Re-anchor to a translateY centering
       trick instead. This same declaration also has to beat the inline
       transform: scale(...) that common.js `scaleLoginPanel()` writes on
       load/resize — sized for the old fixed 640×560 panel against a
       1920×1080 baseline, it collapses towards ~0.2 at phone width and
       shrinks the panel (already correctly sized by width/max-width above)
       down to a postage stamp — hence !important. */
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) !important;
  }
  body[data-nav-wip] .lp-left {
    display: none;
  }
  body[data-nav-wip] .lp-right {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 100%;
  }
  body[data-nav-wip] .lpr-form {
    margin: 28px 22px;
  }
  body[data-nav-wip] .lpr-form h2 {
    margin-top: 8px;
  }
  body[data-nav-wip] .lpr-tabbed h2 {
    margin-top: 0 !important;
  }
}