/* Resident login (tools/login.php). Light tokens copied from app.css (deep teal navy palette), kept here
     because this page does not load the app header. If the light palette in app.css changes, change it here too. */
  :root {
    --font-display: 'Noto Serif Thai', 'Google Sans', 'Noto Sans Thai', serif;
    --bg: #f3f5f7; --card-bg: #ffffff; --surface: rgba(0,57,82,0.04); --surface-strong: rgba(0,57,82,0.07);
    --border: #e0e6ea; --text: #1b2a35; --text-dim: #4a5464; --text-faint: #5b6773;
    --accent: #003952; --accent-ink: #003952; --accent-rgb: 0,57,82; --err: #c2261f;
    color-scheme: light;
  }
  /* This page is always light on purpose (it looks best that way), it ignores the dark mode setting of the rest of /tools. */
  * { box-sizing: border-box; font-family: 'Google Sans', 'Noto Sans Thai', sans-serif; }
  html, body { margin: 0; min-height: 100%; }
  body { background: var(--bg); color: var(--text); min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }

  .lg-wrap { width: 100%; max-width: 400px; animation: lgRise 0.35s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes lgRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  .lg-brand { display: flex; align-items: center; gap: 12px; margin: 0 4px 22px; }
  .lg-brand img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #fff; border: 1px solid var(--border); }
  .lg-brand b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
  .lg-brand span { display: block; font-size: 0.78rem; color: var(--text-faint); }

  .lg-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 22px; padding: 28px 24px 24px; }
  .lg-card h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 8px; }
  .lg-sub { font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); margin: 0 0 22px; }

  .btn-line {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px;
    background: #05813a; color: #fff; border: 0; border-radius: 14px; /* darker than LINE's own green so the white label passes 4.5:1 */
    font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s;
  }
  .btn-line:hover:not(:disabled) { background: #046b30; }
  .btn-line:active:not(:disabled) { transform: scale(0.985); }
  .btn-line:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; }
  .btn-line:disabled { opacity: 0.6; cursor: default; }
  .btn-line svg { width: 22px; height: 22px; flex-shrink: 0; }
  .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: lgSpin 0.7s linear infinite; flex-shrink: 0; }
  @keyframes lgSpin { to { transform: rotate(360deg); } }

  .msg { font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); margin: 0; }
  .msg:not(:empty) { margin-top: 14px; }
  .msg.error { color: var(--err); }
  .error-banner { background: rgba(194,38,31,0.08); border: 1px solid rgba(194,38,31,0.25); border-radius: 12px; padding: 12px 14px; font-size: 0.84rem; color: var(--err); line-height: 1.5; }

  .lg-feats { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .lg-feats li { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text-dim); }
  .lg-feats i { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink); }

  .lg-help { font-size: 0.78rem; line-height: 1.6; color: var(--text-faint); margin: 16px 6px 0; text-align: center; }
  .lg-help + .lg-help { margin-top: 6px; }
  .lg-help a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) { .lg-wrap { animation: none; } .btn-line { transition: none; } .spinner { animation-duration: 1.6s; } }