/* Shared visual language for standalone and embedded Magic Login surfaces. */
body .psmagiclogin-shell, body .psmagiclogin-hook {
  --psml-bg: var(--vvp-color-page); --psml-surface: #fff; --psml-surface-muted: #f1f3f6;
  --psml-border: var(--vvp-color-panel-line); --psml-border-strong: var(--vvp-color-field-border);
  --psml-text: var(--vvp-color-action); --psml-muted: var(--vvp-color-text-secondary);
  --psml-accent: var(--vvp-color-action); --psml-accent-deep: #1e2f4f; --psml-accent-soft: #f2f5fa;
  --psml-shadow: none; --psml-shadow-soft: none;
  --psml-radius-2xl: 20px; --psml-radius-xl: 20px; --psml-radius-lg: 12px; --psml-radius-md: var(--vvp-radius-control);
  --psml-font-ui: var(--vvp-font-ui);
  color: var(--psml-text); font-family: var(--psml-font-ui); font-size: 16px; line-height: 1.5;
}
body:has(> .psmagiclogin-shell) { margin: 0; background: var(--vvp-color-page); }
/* The module also styles the native sign-in form beside it: same field border and radius there. */
body:has(.psmagiclogin-hook--embedded) #login-form { --psml-border-strong: var(--vvp-color-field-border); --psml-radius-md: var(--vvp-radius-control); }
/* Its sign-in page colours (title, links, muted text, card border) on the theme palette (lot 6). */
body:has(.psmagiclogin-hook--embedded) #wrapper { --psml-auth-title: var(--vvp-type-heading-color); --psml-auth-green: var(--vvp-color-action); --psml-auth-green-deep: var(--vvp-color-action-hover); --psml-auth-green-soft: var(--vvp-color-action-soft); --psml-auth-muted: var(--vvp-color-text-secondary); --psml-border: var(--vvp-color-panel-line); }
/* 48 px fields and button; the module's embedded rule (3.1 rem) is one class stronger than the shared one. */
body:has(.psmagiclogin-hook--embedded) .psmagiclogin-hook.psmagiclogin-hook--embedded .psmagiclogin-input { min-height: var(--vvp-control-height); padding-block: 11px; }
body:has(.psmagiclogin-hook--embedded) .psmagiclogin-hook.psmagiclogin-hook--embedded .psmagiclogin-button { min-height: var(--vvp-control-height); padding-block: 13px; line-height: 22px; }
body .psmagiclogin-shell:not(.psmagiclogin-shell--integrated) { min-height: 100vh; padding: 24px 24px 48px; }
body .psmagiclogin-shell .psmagiclogin-brand { margin-bottom: 24px; }
body .psmagiclogin-shell .psmagiclogin-panel { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 24px; align-items: start; }
body .psmagiclogin-shell .psmagiclogin-card { border: 1px solid var(--psml-border); box-shadow: none; }
body .psmagiclogin-shell :is(.psmagiclogin-card--form,.psmagiclogin-card--info) { height: auto; padding: 28px; }
body .psmagiclogin-shell .psmagiclogin-card--info { align-self: start; }
body .psmagiclogin-shell .psmagiclogin-cardeyebrow { display: none; }
body .psmagiclogin-shell :is(.psmagiclogin-cardtitle,.psmagiclogin-title) { color: var(--psml-text); font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.6px; }
body .psmagiclogin-shell .psmagiclogin-card--info .psmagiclogin-cardtitle { font-size: 24px; line-height: 1.3; letter-spacing: -.3px; }
body .psmagiclogin-shell :is(.psmagiclogin-cardhead,.psmagiclogin-infohead) { gap: 12px; margin-bottom: 24px; }
body .psmagiclogin-shell .psmagiclogin-label { font-weight: 600; font-size: 14px; text-align: left; }
body :is(.psmagiclogin-shell,.psmagiclogin-hook) .psmagiclogin-input { min-height: var(--vvp-control-height); padding: 11px 14px; border-radius: var(--vvp-radius-control); font-size: 16px; }
body :is(.psmagiclogin-shell,.psmagiclogin-hook) .psmagiclogin-input:focus { border-color: var(--psml-accent); box-shadow: var(--vvp-focus-ring); }
body .psmagiclogin-shell .psmagiclogin-input[aria-invalid="true"] { border-color: var(--psml-danger,#a03f31); }
body .psmagiclogin-shell .psmagiclogin-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(160,63,49,.12); }
body :is(.psmagiclogin-shell,.psmagiclogin-hook) .psmagiclogin-button { min-height: var(--vvp-control-height); background: var(--psml-accent); box-shadow: none; font-size: var(--vvp-control-font-size); font-weight: var(--vvp-control-weight); }
body .psmagiclogin-shell .psmagiclogin-button:hover { background: var(--psml-accent-deep); box-shadow: none; transform: none; }
body .psmagiclogin-shell .psmagiclogin-button--secondary,
body .psmagiclogin-shell .psmagiclogin-button--secondary:hover { color: var(--psml-text); background: var(--psml-surface-muted); box-shadow: none; }
body .psmagiclogin-shell .psmagiclogin-checkitem { padding: 16px; }
body .psmagiclogin-shell .psmagiclogin-checkitem__dot { box-shadow: none; }
body .psmagiclogin-hook .psmagiclogin-hook__title { color: var(--vvp-type-heading-color); font-size: var(--vvp-type-card-size); line-height: var(--vvp-type-card-line); font-weight: var(--vvp-type-card-weight); letter-spacing: var(--vvp-type-card-tracking); }
@media(max-width:767.98px) {
  body .psmagiclogin-shell:not(.psmagiclogin-shell--integrated) { padding: 20px 16px 32px; }
  body .psmagiclogin-shell .psmagiclogin-panel { grid-template-columns: minmax(0,1fr); gap: 20px; }
  body .psmagiclogin-shell :is(.psmagiclogin-card--form,.psmagiclogin-card--info) { padding: 20px; }
  body .psmagiclogin-shell :is(.psmagiclogin-cardtitle,.psmagiclogin-title) { font-size: 28px; line-height: 1.25; }
  body .psmagiclogin-shell .psmagiclogin-card--info .psmagiclogin-cardtitle { font-size: 22px; }
}