/* Account and support pages share a calm, readable visual system. */
body.mobile-web-parity:is(.page-login-settings,.page-my-qr,.page-contact,.page-terms,.page-about,.page-language) {
  --as-surface: #fff;
  --as-bg: #f6f5f9;
  --as-ink: #29273c;
  --as-muted: #726e82;
  --as-border: #e7e3ed;
  --as-accent: #73539f;
  --as-soft: #f4f0f9;
  background: var(--as-bg);
  color: var(--as-ink);
}
body.mobile-web-parity:is(.page-login-settings,.page-my-qr,.page-contact,.page-terms,.page-about,.page-language) main {
  background: transparent !important;
}
body.mobile-web-parity:is(.page-login-settings,.page-my-qr,.page-contact,.page-terms,.page-about,.page-language) :is(input,select,textarea) { scroll-margin: 100px; }
body.mobile-web-parity:is(.page-login-settings,.page-my-qr,.page-contact,.page-terms,.page-about,.page-language) :is(button,a,input,select,textarea):focus-visible { outline: 3px solid #ad8ed2; outline-offset: 3px; }
/* Account: a clear reading order with credentials beside device protection. */
body.mobile-web-parity.page-login-settings .ls-page { width: min(1120px, calc(100% - 48px)); max-width: 1120px; margin: 28px auto 48px; padding: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
body.mobile-web-parity.page-login-settings :is(.ls-hero-card,.ls-settings-card,.ls-security-card) { margin: 0; border: 1px solid var(--as-border) !important; border-radius: 22px !important; background: var(--as-surface) !important; box-shadow: 0 8px 30px #30234a05 !important; padding: 26px; }
body.mobile-web-parity.page-login-settings .ls-hero-card { grid-column: 1 / -1; background: linear-gradient(115deg, var(--as-surface), var(--as-soft)) !important; overflow: hidden; }
body.mobile-web-parity.page-login-settings .ls-hero-card::before { display: none; }
body.mobile-web-parity.page-login-settings .ls-hero-top { align-items: start; gap: 16px; }
body.mobile-web-parity.page-login-settings .ls-hero-copy h1 { font-size: clamp(24px,3vw,32px); color: var(--as-ink); margin: 4px 0 8px; }
body.mobile-web-parity.page-login-settings .ls-hero-kicker { color: var(--as-accent); font-size: 12px; }
body.mobile-web-parity.page-login-settings .ls-hero-subtitle { color: var(--as-muted); font-size: 14px; max-width: 650px; line-height: 1.85; }
body.mobile-web-parity.page-login-settings .ls-hero-meta { margin-top: 22px; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }
body.mobile-web-parity.page-login-settings .ls-hero-meta-item { min-width: 0; padding: 12px 16px; border: 1px solid var(--as-border); border-radius: 13px; background: var(--as-surface); }
body.mobile-web-parity.page-login-settings .ls-hero-meta-item :is(strong,span) { overflow-wrap: anywhere; color: var(--as-ink); }
body.mobile-web-parity.page-login-settings .ls-hero-meta-item span { color: var(--as-muted); font-size: 11px; }
body.mobile-web-parity.page-login-settings .ls-section-head { margin-bottom: 20px; }
body.mobile-web-parity.page-login-settings .ls-section-head h2 { font-size: 18px; color: var(--as-ink); }
body.mobile-web-parity.page-login-settings .ls-section-head p { color: var(--as-muted); line-height: 1.8; font-size: 12px; }
body.mobile-web-parity.page-login-settings :is(.ls-settings-grid,.ls-security-grid) { display: grid; grid-template-columns: 1fr; gap: 0; }
body.mobile-web-parity.page-login-settings :is(.ls-setting-item,.ls-security-item) { min-width: 0; padding: 18px 0; border: 0 !important; border-top: 1px solid var(--as-border) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; display: flex; align-items: center; gap: 12px; }
body.mobile-web-parity.page-login-settings .ls-setting-content { flex: 1; min-width: 0; }
body.mobile-web-parity.page-login-settings .ls-setting-content h3 { font-size: 14px; color: var(--as-ink); }
body.mobile-web-parity.page-login-settings .ls-setting-content p { overflow-wrap: anywhere; font-size: 12px; color: var(--as-muted); line-height: 1.8; }
body.mobile-web-parity.page-login-settings .ls-edit-btn { flex-shrink: 0; width: auto !important; max-width: 45%; min-height: 40px; padding: 8px 14px; border-radius: 10px; box-shadow: none; background: var(--as-soft); color: var(--as-accent); border: 1px solid var(--as-border); font-size: 12px; }
body.mobile-web-parity.page-login-settings .ls-security-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--as-soft); color: var(--as-accent); }
body.mobile-web-parity.page-login-settings #ls-inline-alert { grid-column: 1 / -1; margin: 0; }
body.mobile-web-parity.page-login-settings .ls-modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; width: min(520px,100%); border-radius: 22px; background: var(--as-surface); }
body.mobile-web-parity.page-login-settings .ls-modal-actions { position: sticky; bottom: -24px; background: var(--as-surface); padding-block: 14px; }
.ls-modal-feedback { margin: 12px 0; padding: 12px 14px; border: 1px solid #e8aabb; border-radius: 12px; background: #fff1f4; color: #9d304c; font-size: 13px; line-height: 1.8; }
.ls-recovery { grid-column: 1 / -1; padding: 16px; border: 1px solid var(--as-border); background: var(--as-surface); border-radius: 16px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
/* QR: high contrast code, a short explanation and clear share actions. */
body.mobile-web-parity.page-my-qr .my-qr-layout { max-width: 680px; margin: 34px auto; }
body.mobile-web-parity.page-my-qr .my-qr-card { position: relative; overflow: hidden; border: 1px solid var(--as-border); border-radius: 28px; padding: 34px; background: var(--as-surface); box-shadow: 0 20px 60px #34234d0a; }
body.mobile-web-parity.page-my-qr .my-qr-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg,#8864b4,#4a8b88,#dfb571); }
body.mobile-web-parity.page-my-qr .my-qr-title { color: var(--as-ink); font-size: 24px; margin: 4px 0 8px; }
body.mobile-web-parity.page-my-qr .my-qr-subtitle { color: var(--as-muted); }
body.mobile-web-parity.page-my-qr .my-qr-image-shell { width: min(260px,100%); padding: 18px; margin: 24px auto; background: #fff; border: 1px solid #eae5f0; border-radius: 22px; box-shadow: 0 10px 30px #2f204910; }
body.mobile-web-parity.page-my-qr .my-qr-image { display: block; width: 100%; height: auto; aspect-ratio: 1; }
body.mobile-web-parity.page-my-qr .my-qr-link { padding: 12px; background: var(--as-bg); border: 1px solid var(--as-border); color: var(--as-muted); border-radius: 10px; overflow-wrap: anywhere; font-size: 12px; }
.my-qr-help { margin: 12px auto 0; max-width: 380px; color: var(--as-muted); font-size: 13px; line-height: 1.9; }
body.mobile-web-parity.page-my-qr .my-qr-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
body.mobile-web-parity.page-my-qr .my-qr-action-btn { min-width: 0; min-height: 48px; padding: 10px 8px; border-radius: 12px; border-color: var(--as-border); color: var(--as-accent); background: var(--as-soft); font-size: 12px; }
body.mobile-web-parity.page-my-qr #share-qr-link { background: #715099; border-color: #715099; color: #fff; }
/* Support: tickets remain close to their detail panel. */
body.mobile-web-parity.page-contact.page-contact-premium .contact-container { max-width: 1200px; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-shell { gap: 20px; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-hero { padding: 26px; border: 1px solid var(--as-border); border-radius: 22px; box-shadow: none; background: linear-gradient(115deg,var(--as-surface),var(--as-soft)); color: var(--as-ink); }
body.mobile-web-parity.page-contact.page-contact-premium .contact-hero h1 { color: var(--as-ink); font-size: 28px; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-hero::before { display: none; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-stats { gap: 12px; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-stat { border: 1px solid var(--as-border); border-radius: 16px; box-shadow: none; background: var(--as-surface); }
body.mobile-web-parity.page-contact.page-contact-premium .contact-layout { grid-template-columns: minmax(300px,.85fr) minmax(0,1.5fr); gap: 20px; align-items: start; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-panel { min-width: 0; padding: 22px; border-radius: 20px; border: 1px solid var(--as-border); box-shadow: none; background: var(--as-surface); }
body.mobile-web-parity.page-contact.page-contact-premium .contact-record-tabs { gap: 6px; background: var(--as-bg); border-radius: 12px; padding: 5px; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-record-tab { min-height: 44px; border-radius: 9px; }
body.mobile-web-parity.page-contact.page-contact-premium .support-ticket-list { max-height: 660px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
body.mobile-web-parity.page-contact.page-contact-premium .support-ticket-item { border-radius: 13px; box-shadow: none; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-panel-detail { scroll-margin-top: 90px; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-description-input { min-height: 145px; resize: vertical; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-form-step { background: var(--as-soft) !important; border-color: var(--as-border) !important; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-form-step strong { color: var(--as-ink) !important; }
body.mobile-web-parity.page-contact.page-contact-premium .contact-field-count { color: var(--as-muted); font-size: 11px; text-align: end; margin-top: 6px; }
body.mobile-web-parity.page-contact.page-contact-premium :is(.support-actions,.ticket-reply-actions) button { min-height: 44px; border-radius: 12px; }
/* Published legal content keeps its text and becomes easier to navigate. */
body.mobile-web-parity.page-terms .terms-shell { max-width: 1160px; }
body.mobile-web-parity.page-terms .terms-hero { padding: 28px; min-height: 0; background: linear-gradient(115deg,var(--as-surface),var(--as-soft)); border: 1px solid var(--as-border); border-radius: 22px; box-shadow: none; }
body.mobile-web-parity.page-terms .terms-hero h1 { font-size: 30px; color: var(--as-ink); }
body.mobile-web-parity.page-terms .terms-hero p { color: var(--as-muted); }
body.mobile-web-parity.page-terms .terms-hero-meta { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.mobile-web-parity.page-terms .terms-stat { background: var(--as-surface); border-color: var(--as-border); border-radius: 12px; }
body.mobile-web-parity.page-terms .terms-stat strong { color: var(--as-ink); }
body.mobile-web-parity.page-terms .terms-stat span { color: var(--as-muted); }
body.mobile-web-parity.page-terms .terms-layout { gap: 24px; grid-template-columns: 230px minmax(0,1fr); }
body.mobile-web-parity.page-terms .terms-rail { top: 90px; border-radius: 18px; border-color: var(--as-border); background: var(--as-surface); box-shadow: none; }
body.mobile-web-parity.page-terms .terms-doc-card { border: 1px solid var(--as-border); border-radius: 20px; box-shadow: none; background: var(--as-surface); scroll-margin-top: 96px; }
body.mobile-web-parity.page-terms .terms-doc-head { background: var(--as-soft); padding: 22px; border-color: var(--as-border); }
body.mobile-web-parity.page-terms .terms-doc-body { padding: 24px; }
body.mobile-web-parity.page-terms .terms-clause p { font-size: 14px; line-height: 2.05; color: var(--as-muted); }
body.mobile-web-parity.page-terms .terms-nav-link { min-height: 44px; white-space: normal; }
/* About and language use the same spacing and surface treatment. */
body.mobile-web-parity.page-about .about-shell { max-width: 1160px; }
body.mobile-web-parity.page-about .about-hero { padding: 32px; border-radius: 24px; box-shadow: none; }
body.mobile-web-parity.page-about :is(.about-card,.about-panel) { border: 1px solid var(--as-border); border-radius: 20px; box-shadow: none; background: var(--as-surface); }
body.mobile-web-parity.page-about .about-grid { gap: 16px; }
body.mobile-web-parity.page-about .about-card p { line-height: 1.95; }
body.mobile-web-parity.page-about .about-error { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
body.mobile-web-parity.page-language .first-visit-shell { min-height: auto; padding-block: 34px; }
body.mobile-web-parity.page-language .first-visit-container { max-width: 760px; gap: 20px; }
body.mobile-web-parity.page-language .first-visit-brand { flex-direction: row; justify-content: center; gap: 12px; }
body.mobile-web-parity.page-language .first-visit-brand .nw-logo-mark { --nw-logo-size: 46px !important; }
body.mobile-web-parity.page-language .first-visit-panel { padding: 30px; border: 1px solid var(--as-border); border-radius: 24px; box-shadow: 0 18px 55px #34234d08; background: var(--as-surface); }
body.mobile-web-parity.page-language .language-option { min-height: 100px; border-radius: 16px; box-shadow: none; }
html[data-theme="dark"] body.mobile-web-parity:is(.page-login-settings,.page-my-qr,.page-contact,.page-terms,.page-about,.page-language) { --as-surface:#211d2c; --as-bg:#17141f; --as-ink:#eee9f5; --as-muted:#b8b0c5; --as-border:#393143; --as-accent:#c7a9ef; --as-soft:#2c243a; }
html[data-theme="dark"] .ls-modal-feedback { background:#3e2431; border-color:#744455; color:#ffbdce; }
html[data-theme="dark"] body.mobile-web-parity.page-contact :is(.form-error,.contact-file-preview-remove) { color: #ffb9cd !important; border-color: #754558; }
@media (max-width: 850px) {
  body.mobile-web-parity.page-login-settings .ls-page { grid-template-columns: 1fr; width: calc(100% - 32px); margin-block: 20px 36px; gap: 16px; }
  body.mobile-web-parity.page-contact.page-contact-premium .contact-layout { grid-template-columns: 1fr; }
  body.mobile-web-parity.page-contact.page-contact-premium .support-ticket-list { max-height: 320px; }
  body.mobile-web-parity.page-terms .terms-layout { grid-template-columns: 1fr; }
  body.mobile-web-parity.page-terms .terms-rail { position: static; }
  body.mobile-web-parity.page-terms .terms-nav { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; gap: 6px; }
}
@media (max-width: 540px) {
  body.mobile-web-parity.page-login-settings :is(.ls-hero-card,.ls-settings-card,.ls-security-card) { padding: 18px; border-radius: 18px !important; }
  body.mobile-web-parity.page-login-settings .ls-hero-meta { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--as-border); }
  body.mobile-web-parity.page-login-settings .ls-hero-meta-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: 0; border-bottom: 1px solid var(--as-border); border-radius: 0; padding: 12px 0; }
  body.mobile-web-parity.page-login-settings .ls-hero-meta-item strong { font-size: 12px; text-align: end; }
  body.mobile-web-parity.page-login-settings .ls-security-item { flex-wrap: wrap; }
  body.mobile-web-parity.page-login-settings .ls-security-item .ls-edit-btn { margin-inline-start: auto; }
  body.mobile-web-parity.page-my-qr .my-qr-layout { width: calc(100% - 32px); margin-block: 20px; }
  body.mobile-web-parity.page-my-qr .my-qr-card { padding: 24px 18px; border-radius: 22px; }
  body.mobile-web-parity.page-my-qr .my-qr-action-btn { flex-direction: column; gap: 6px; }
  body.mobile-web-parity.page-contact.page-contact-premium :is(.contact-panel,.contact-hero) { padding: 18px; }
  body.mobile-web-parity.page-terms :is(.terms-hero,.terms-doc-body,.terms-doc-head) { padding: 18px; }
  body.mobile-web-parity.page-terms .terms-stat { padding: 10px; }
  body.mobile-web-parity.page-terms .terms-stat strong { font-size: 13px; }
  body.mobile-web-parity.page-about .about-hero { padding: 22px; }
  body.mobile-web-parity.page-about .about-hero-grid { gap: 18px; }
  body.mobile-web-parity.page-about .about-hero-side { min-height: 0; padding: 0; }
  body.mobile-web-parity.page-about :is(.about-identity-stack,.about-hero-panel-lines) { display: none; }
  body.mobile-web-parity.page-about .about-hero-panel { padding: 12px 16px; margin: 0; border-radius: 14px; }
  body.mobile-web-parity.page-about .about-hero-panel h2 { font-size: 15px; margin: 4px 0; }
  body.mobile-web-parity.page-about .about-hero-points { gap: 6px; }
  body.mobile-web-parity.page-about .about-hero-points span { padding: 7px 9px; font-size: 11px; }
  body.mobile-web-parity.page-language .first-visit-panel { padding: 22px 18px; }
}