:root { --login-navy:#082f52; --login-deep:#061f35; --login-blue:#147fba; --login-ink:#18374d; --login-muted:#708292; --login-line:#dbe5ea; }

html, body.login-page { min-height:100%; }
body.login-page { margin:0; background:#f4f7f8; font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
.login-page .app { display:block; min-height:100vh; padding:0; background:transparent; }
.login-page .container { width:100%; max-width:none; min-height:100vh; margin:0; padding:0; }

.login-shell { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr); min-height:100vh; }
.login-showcase { position:relative; min-height:100vh; padding:56px clamp(46px,7vw,112px) 42px; overflow:hidden; color:#fff; background-image:linear-gradient(90deg,rgba(3,28,50,.86) 0%,rgba(4,35,59,.72) 46%,rgba(4,35,59,.42) 100%),url('../img/login-church-community-v2.png'); background-position:center,40% center; background-size:cover; }
.login-showcase::before { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,24,43,.08),rgba(3,24,43,.28)); content:""; }
.login-showcase::after { position:absolute; right:-190px; bottom:-210px; width:540px; height:540px; border:1px solid rgba(255,255,255,.12); border-radius:50%; content:""; }
.login-showcase__word { position:absolute; z-index:0; top:17%; left:9%; width:46%; margin:0; color:rgba(255,255,255,.30); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.7rem,3vw,3.15rem); font-weight:400; line-height:1.2; letter-spacing:.08em; text-align:left; user-select:none; }
.login-showcase__word span { display:inline-block; margin-top:.18em; font-size:.68em; letter-spacing:.2em; }
.login-showcase__content { position:relative; z-index:1; max-width:none; }
.login-showcase__intro { position:absolute; top:62%; right:8%; width:40%; max-width:390px; margin:0; }
.login-showcase__eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; color:#b7e3f4; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.login-showcase__intro h2 { margin:0; color:#fff; font-size:clamp(2rem,3.2vw,3.25rem); font-weight:700; line-height:1.12; letter-spacing:-.045em; }
.login-showcase__footer { color:rgba(228,243,252,.65); font-size:.78rem; letter-spacing:.02em; }

.login-panel { display:grid; min-height:100vh; place-items:center; padding:38px; background:linear-gradient(145deg,#fff 0%,#f3f7f8 100%); }
.login-card { width:min(100%,450px); padding:42px 43px 37px; border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(15,48,71,.10); }
.login-brand { display:flex; align-items:center; flex-direction:column; margin-bottom:31px; color:var(--login-navy); text-align:center; }
.login-brand__mark { display:grid; width:64px; height:64px; place-items:center; margin-bottom:11px; overflow:hidden; border:1px solid #dbe8ed; border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(11,57,91,.11); }
.login-brand__mark img { max-width:47px; max-height:43px; object-fit:contain; }
.login-brand strong { font-size:1.28rem; font-weight:750; letter-spacing:-.03em; }
.login-brand > span:last-child { margin-top:2px; color:#78909f; font-size:.76rem; }
.login-card__heading { margin-bottom:28px; text-align:center; }
.login-card__heading h1 { margin:0 0 8px; color:var(--login-ink); font-size:1.68rem; font-weight:750; letter-spacing:-.04em; }
.login-card__heading p { margin:0; color:var(--login-muted); font-size:.91rem; }
.login-alert { margin-bottom:22px; border:0; border-radius:10px; color:#18567d; background:#e8f5fc; font-size:.88rem; }
.login-field { margin-bottom:20px; }
.login-field > label { display:block; margin:0 0 8px; color:#385268; font-size:.83rem; font-weight:650; }
.login-field__control { display:flex; align-items:center; height:53px; overflow:hidden; border:1px solid var(--login-line); border-radius:11px; background:#fff; transition:border-color .18s ease,box-shadow .18s ease; }
.login-field__control:focus-within { border-color:var(--login-blue); box-shadow:0 0 0 3px rgba(20,127,186,.12); }
.login-field__control.is-invalid { border-color:#d9534f; }
.login-field__control > i { width:46px; color:#7893a4; font-size:.95rem; text-align:center; }
.login-field__control input { width:100%; height:100%; padding:0 13px 0 0; border:0; outline:0; color:var(--login-ink); background:transparent; font-size:.94rem; }
.login-field__control input::placeholder { color:#a5b3bc; }
.login-field__toggle { display:grid; width:48px; height:100%; place-items:center; padding:0; border:0; color:#7893a4; background:transparent; cursor:pointer; }
.login-field__toggle:hover { color:var(--login-blue); }
.login-field__error { display:block; margin-top:6px; color:#c43f3b; font-size:.77rem; }
.login-card__actions { align-items:center; justify-content:space-between; gap:12px; margin:2px 0 25px; }
.login-checkbox { margin:0; color:#667d8d; font-size:.81rem; cursor:pointer; }
.custom-control-input:checked ~ .custom-control-label::before { border-color:var(--login-blue); background-color:var(--login-blue); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow:0 0 0 3px rgba(20,127,186,.12); }
.login-card__actions a { color:#0870c2; font-size:.81rem; font-weight:650; }
.login-card__actions a:hover { color:#06518c; text-decoration:none; }
.login-card__submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:53px; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,#1598df,#08619f); box-shadow:0 12px 22px rgba(7,85,143,.23); font-size:.92rem; font-weight:700; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.login-card__submit:hover,.login-card__submit:focus { color:#fff; box-shadow:0 15px 28px rgba(7,85,143,.29); outline:0; transform:translateY(-1px); }
.login-card__security { margin:24px 0 0; color:#96a6b0; font-size:.75rem; text-align:center; }
.login-card__security i { margin-right:5px; color:#6f9dba; }

@media (max-width:991.98px) { .login-shell { grid-template-columns:1fr; } .login-showcase { display:none; } .login-panel { min-height:100vh; } }
@media (max-width:520px) { .login-panel { padding:25px 18px; } .login-card { padding:34px 26px 30px; box-shadow:0 14px 34px rgba(15,48,71,.09); } .login-brand { margin-bottom:27px; } .login-card__actions { align-items:flex-start; flex-direction:column; } }
@media (max-width:350px) { .login-panel { padding-right:12px; padding-left:12px; } .login-card { padding-right:20px; padding-left:20px; } }