/* WealthSight public pages (sign-in, phone confirmation, pending): the brand around the existing sign-in controls.
   Loaded AFTER auth.css and only by those pages; the account page and the application are not touched.
   Flat colours only: forest green, warm white, charcoal. No gradient, glow or effect. */
:root { color-scheme: light; --bg: #f2f3f0; --card: #fdfbf9; --fg: #111d19; --muted: #6c7470; --line: #dcdfd8; --accent: #213f32;
        --warn: #8a5a00; --bad: #b3261e; }
body.brand { background: var(--bg); color: var(--fg);
             font-family: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", "PingFang HK", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.brand-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.brand-hero { display: none; }
.brand-side { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
body.brand .auth-card { width: 100%; max-width: 420px; margin: 0; padding: 40px 32px 34px; background: var(--card); border: 1px solid #e8eae4; border-radius: 16px; }
.brand-mark { display: block; width: 94px; height: auto; margin: 0 auto 16px; }
body.brand h1 { margin: 0 0 6px; text-align: center; font-size: 32px; font-weight: 400; letter-spacing: .01em; line-height: 1.2; }
.brand-tag { margin: 0 0 22px; text-align: center; text-transform: uppercase; letter-spacing: .3em; font-size: 11px; line-height: 2.1; color: var(--muted); }
.brand-foot { margin: 26px 0 0; text-align: center; text-transform: uppercase; letter-spacing: .3em; font-size: 10.5px; line-height: 2.1; color: var(--muted); }
body.brand .state { text-align: center; font-weight: 500; color: var(--muted); }
body.brand .state.ok { color: var(--accent); } body.brand .state.warn { color: var(--warn); } body.brand .state.bad { color: var(--bad); }
body.brand label { color: var(--muted); letter-spacing: .02em; }
body.brand input { min-height: 48px; padding: 10px 14px; border-color: var(--line); border-radius: 10px; background: #fff; color: var(--fg); }
body.brand .btn { min-height: 48px; border-color: var(--line); border-radius: 10px; background: #fff; color: var(--fg); }
body.brand .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; letter-spacing: .02em; }
body.brand .btn.danger { border-color: var(--bad); color: var(--bad); }
body.brand .btn.link { border: 0; background: none; color: var(--muted); }
body.brand .btn:focus-visible, body.brand input:focus-visible, body.brand a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.brand .qr { border: 1px solid var(--line); }
body.brand a { color: var(--accent); }

/* Wide screens: the approved image beside the sign-in card. The panel keeps the image's own proportion, so nothing in
   it is cut; the card takes the rest. A narrower or taller window shows the card alone. */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) {
  .brand-hero { display: block; flex: 0 1 calc(100vh * 950 / 1024); background: #1c2a25 url(/auth/static/hero.webp) left bottom / cover no-repeat; }
  .brand-tag { display: none; }              /* the image carries the line */
  .brand-foot { position: absolute; right: 56px; bottom: 44px; margin: 0; text-align: right; }
}
@media (max-width: 480px) {
  .brand-side { justify-content: flex-start; padding: 28px 14px 24px; }
  body.brand .auth-card { padding: 30px 20px 26px; border-radius: 14px; }
  .brand-mark { width: 78px; margin-bottom: 12px; }
  body.brand h1 { font-size: 28px; }
}