/* Sign in (Claude Design "Sign In.dc.html"): 1a desktop card, 1b phone below 900 px.
   Values are the design's; pages/auth/signin.blade.php. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body.si { min-height: 100vh; display: flex; flex-direction: column; background: #f4f6fb; font-family: 'Poppins', sans-serif; color: #1f2a44; -webkit-font-smoothing: antialiased; }
.si a { color: #1b317d; text-decoration: none; }
.si a:hover { color: #c8642a; }
.si button, .si input { font-family: 'Poppins', sans-serif; }
.si-m { display: none !important; }
@keyframes si-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .si-spin { animation-duration: 2.4s !important; } }

/* header */
.si-top { height: 68px; flex: none; display: flex; align-items: center; padding: 0 40px; background: #ffffff; border-bottom: 1px solid #e4e9f7; }
.si-logo img { height: 26px; width: auto; display: block; }
.si-top-r { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.si a.si-back { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: #495372; }
.si a.si-req { font-size: 13.5px; font-weight: 600; color: #1b317d; border: 1.5px solid #c6cfe6; border-radius: 8px; padding: 8px 14px; }
.si a.si-back:hover, .si a.si-req:hover { color: #c8642a; }
.si a.si-web { font-size: 12.5px; font-weight: 500; color: #495372; padding: 8px 0; }

/* card */
.si-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 36px 40px; }
.si-card { width: 100%; max-width: 1120px; min-height: 640px; display: grid; grid-template-columns: 45fr 55fr; background: #ffffff; border: 1px solid #e4e9f7; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(31,42,68,0.04), 0 12px 32px rgba(31,42,68,0.06); }
.si-photo { position: relative; background: #0d1a33 url('img/photo-signin.jpg') center 74% / cover no-repeat; }
.si-photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,34,0.55) 0%, rgba(8,15,34,0.12) 38%, rgba(8,15,34,0) 60%, rgba(8,15,34,0.25) 100%); }
.si-photo-t { position: absolute; left: 40px; top: 40px; right: 40px; }
.si-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f0b429; }
.si-tagline { font-size: 26px; font-weight: 600; color: #ffffff; line-height: 1.25; margin-top: 10px; max-width: 340px; letter-spacing: -0.005em; text-wrap: balance; }
.si-products { position: absolute; left: 40px; bottom: 28px; font-size: 11px; color: rgba(255,255,255,0.7); }
.si-formwrap { display: flex; align-items: center; justify-content: center; padding: 40px 56px; }
.si-form { width: 100%; max-width: 400px; }

/* type */
.si-h1 { margin: 0; font-size: 30px; font-weight: 700; color: #1f2a44; letter-spacing: -0.01em; outline: none; }
.si-h1-sm { margin-top: 14px; font-size: 28px; letter-spacing: 0; }
.si-h1-xs { margin-top: 16px; font-size: 26px; letter-spacing: 0; }
.si-sub { font-size: 14.5px; color: #495372; margin-top: 4px; }
.si-sub-2 { font-size: 14px; margin-top: 6px; }
.si-lead { font-size: 14px; color: #495372; margin-top: 6px; line-height: 1.5; }
.si-lead-2 { margin-top: 8px; line-height: 1.55; }
.si-lead strong { color: #1f2a44; }
.si-small { font-size: 12.5px; color: #69748f; margin-top: 14px; line-height: 1.5; }

/* banner */
.si-banner { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 11px 13px; margin-top: 20px; border: 1px solid; }
.si-banner > svg { flex: none; margin-top: 1px; }
.si-banner-tx { min-width: 0; }
.si-banner-t { font-size: 13px; font-weight: 600; }
.si-banner-b { font-size: 12.5px; opacity: 0.85; line-height: 1.45; margin-top: 1px; }
.si-banner-b:empty { display: none; }
.si-banner[data-kind="invalid"] { background: #fdecea; border-color: #f0c4c0; color: #8a1c15; }
.si-banner[data-kind="network"] { background: #fdf1e3; border-color: #ecd0b0; color: #7a3d0c; }
.si-banner[data-kind="notice"] { background: #e8edfb; border-color: #c6cfe6; color: #1b317d; }
.si-retry { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #7a3d0c; text-decoration: underline; }

/* fields */
.si-field { margin-top: 24px; }
.si-field-2 { margin-top: 16px; }
.si-field-lead { margin-top: 22px; }
.si-label { font-size: 12.5px; font-weight: 600; color: #1f2a44; margin-bottom: 6px; display: block; }
.si-label-row { display: flex; align-items: baseline; }
.si-link { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #1b317d; }
.si-link:hover { color: #c8642a; }
.si-input { height: 46px; width: 100%; border-radius: 9px; padding: 0 14px; font-size: 15px; color: #1f2a44; background: #ffffff; outline: none; border: 1.5px solid #d7deef; transition: border-color .12s, box-shadow .12s; }
.si-input::placeholder { color: #8a93ab; }
.si-input:focus { border-color: #1b317d; box-shadow: 0 0 0 3px rgba(27,49,125,0.16); }
.si-input[aria-invalid="true"] { border-color: #b3261e; }
.si-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179,38,30,0.14); }
.si-input:disabled { background: #f7f9fd; color: #69748f; }
.si-pw { position: relative; }
.si-pw .si-input { padding-right: 48px; }
.si-eye { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border: none; background: transparent; border-radius: 7px; color: #69748f; cursor: pointer; display: grid; place-items: center; }
.si-eye:hover { background: #f4f6fd; color: #1b317d; }
.si-eye:focus-visible { outline: none; box-shadow: 0 0 0 2px #1b317d; }
.si-eye .si-eye-slash { display: none; }
.si-eye[aria-pressed="true"] .si-eye-slash { display: inline; }
.si-err { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b3261e; margin-top: 6px; }
.si-caps { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a35414; margin-top: 6px; }

/* keep me signed in */
.si-keep { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; user-select: none; }
.si-keep input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.si-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c6cfe6; background: #ffffff; display: grid; place-items: center; flex: none; }
.si-box svg { display: none; }
.si-keep input:checked + .si-box { background: #1b317d; border-color: #1b317d; }
.si-keep input:checked + .si-box svg { display: block; }
.si-keep input:focus-visible + .si-box { box-shadow: 0 0 0 3px rgba(27,49,125,0.25); }
.si-keep-t { font-size: 13.5px; color: #1f2a44; }

/* verification (reCAPTCHA, after failed attempts) */
.si-cap { border: 1.5px solid #d7deef; border-radius: 10px; padding: 12px 14px; margin-top: 16px; background: #fbfcff; }
.si-cap.is-bad { border-color: #b3261e; }
.si-cap-t { font-size: 12.5px; font-weight: 600; color: #1f2a44; }
.si-cap-b { font-size: 12px; color: #495372; margin-top: 2px; line-height: 1.45; }
.si-cap-w { margin-top: 10px; min-height: 78px; overflow: hidden; }

/* buttons */
.si-actions { margin-top: 22px; }
.si-actions-2 { margin-top: 20px; }
.si-btn { width: 100%; height: 48px; border: none; border-radius: 9px; background: #1b317d; color: #ffffff; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.si-btn:hover { background: #16296b; }
.si-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(27,49,125,0.3); }
.si-btn.is-busy, .si-btn.is-busy:hover { background: #3a4f99; cursor: default; }
.si-btn-busy { display: inline-flex; align-items: center; gap: 10px; }
.si a.si-btn-link, .si a.si-btn-link:hover { color: #ffffff; margin-top: 22px; }
.si-outline { display: block; width: 100%; text-align: center; margin-top: 22px; border: 1.5px solid #1b317d; background: #ffffff; color: #1b317d; font-size: 14px; font-weight: 600; padding: 12px 0; border-radius: 9px; cursor: pointer; }
.si a.si-outline { margin-top: 12px; }
.si-outline:hover { background: #f4f6fd; }
.si-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #ffffff; animation: si-spin .7s linear infinite; flex: none; }
.si-spin-dark { border-color: #c6cfe6; border-top-color: #1b317d; animation-duration: .8s; }
.si-backlink { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #495372; }
.si-backlink:hover { color: #1b317d; }
.si-link:focus-visible, .si-backlink:focus-visible, .si-retry:focus-visible, .si-outline:focus-visible, .si a:focus-visible { outline: 2px solid #1b317d; outline-offset: 2px; border-radius: 4px; }

.si-protect { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #69748f; margin-top: 10px; }
.si .si-protect a { color: #69748f; text-decoration: underline; }
.si-access { border-top: 1px solid #eef1f8; margin-top: 26px; padding-top: 18px; font-size: 13px; color: #495372; }
.si-access a { font-weight: 600; }

/* status screens */
.si-badge { width: 48px; height: 48px; display: grid; place-items: center; }
.si-badge-mail { border-radius: 12px; background: #e8edfb; color: #1b317d; }
.si-badge-ok { border-radius: 50%; background: #e3f4e8; color: #1f7a45; }
.si-badge-warn { border-radius: 12px; background: #fdf1e3; color: #7a3d0c; }
.si-going { display: flex; align-items: center; gap: 10px; margin-top: 16px; background: #f7f9ff; border: 1px solid #e4e9f7; border-radius: 10px; padding: 12px 14px; }
.si-going-t { font-size: 13px; font-weight: 600; color: #1f2a44; }
.si-going-b { font-size: 11.5px; color: #69748f; }

/* 1b phone: shallow photo banner, form first */
@media (max-width: 899px) {
  .si-d { display: none !important; }
  .si-m { display: inline-block !important; }
  body.si { background: #ffffff; }
  .si-top { height: auto; padding: 14px 18px; border-bottom-color: #eef1f8; }
  .si-logo img { height: 22px; }
  .si-main { display: block; padding: 0; }
  .si-card { display: block; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .si-photo { height: 132px; background-position: center 72%; }
  .si-photo-shade { background: linear-gradient(180deg, rgba(8,15,34,0.5) 0%, rgba(8,15,34,0.05) 70%); }
  .si-photo-t { left: 18px; top: 16px; right: auto; }
  .si-tagline { font-size: 15px; line-height: 1.3; margin-top: 0; max-width: 220px; }
  .si-formwrap { display: block; padding: 24px 20px 28px; }
  .si-form { max-width: none; }
  .si-cap-w { transform-origin: 0 0; }
}
@media (max-width: 360px) { .si-cap-w { transform: scale(0.88); min-height: 70px; } }