/* Nativity Christmas login: local artwork, responsive form, a seamless background and static stars. */
:root {
    color-scheme: dark;
    --bg:#070f20;
    --surface:#101d34;
    --surface-2:#0b172b;
    --border:#3d4756;
    --text:#faf6ee;
    --muted:#b9c4d4;
    --accent:#f0ce89;
    --accent-dark:#ffdda0;
    --danger:#ffc2bd;
    --danger-bg:#361d26;
    --danger-bd:#824751;
    --warning:#f4d99f;
    --warning-bg:#2b261d;
    --warning-bd:#73603b;
    --radius:10px;
    --page-bottom:20px;
    --scene-width:calc((100vw + min(1180px, calc(100vw - 56px))) / 2 - 440px);
}
*,*::before,*::after { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { position:relative; isolation:isolate; margin:0; min-height:100svh; color:var(--text); background:radial-gradient(ellipse at 15% 25%,#172b50 0%,transparent 50%),radial-gradient(ellipse at 85% 90%,#202234 0%,transparent 45%),var(--bg); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; display:flex; flex-direction:column; align-items:center; padding:40px 28px 20px; }
button,input { font:inherit; }
button { touch-action:manipulation; }
button:focus-visible,input:focus-visible { outline:3px solid #f4d99f; outline-offset:4px; }
.night-sky { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.sky-star { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffebbd; opacity:.55; box-shadow:0 0 12px #eac77e66; }
.star-1 { top:12%; left:8%; }.star-2 { top:7%; left:44%; }.star-3 { top:24%; left:65%; }.star-4 { top:15%; right:5%; }.star-5 { bottom:11%; left:7%; }.star-6 { bottom:32%; right:4%; }.star-7 { top:49%; left:3%; }.star-8 { bottom:6%; right:24%; }
.login-layout { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,420px); align-items:center; gap:64px; width:100%; max-width:1180px; margin:auto; }
.nativity-panel { min-width:0; text-align:center; }
.christmas-intro { position:relative; z-index:2; padding:8px 0 20px; }
.christmas-eyebrow { margin:0 0 12px; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--accent); }
.christmas-eyebrow span { font-size:1rem; padding-right:7px; }
#christmasTitle { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.5rem,4.2vw,4.2rem); font-weight:400; line-height:1.12; letter-spacing:-.04em; color:#fff9eb; }
#christmasTitle em { font-weight:400; color:var(--accent); }
.christmas-subtitle { color:#c0cce0; font-size:.93rem; line-height:1.6; margin:14px 0 0; }
.nativity-space { position:relative; height:calc(var(--scene-width) * .66640625); pointer-events:none; }
/* Flow placement keeps the background star below the full heading at every height. */
.nativity-space::before {
    content:''; position:absolute; pointer-events:none; z-index:0; top:0;
    left:calc((min(1180px, calc(100vw - 56px)) - 100vw) / 2);
    width:var(--scene-width); aspect-ratio:1280/853;
    background:url('../../image/christmas-nativity-three-camels.webp') center bottom / 100% auto no-repeat;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 92%,transparent 100%),linear-gradient(to right,#000 90%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 92%,transparent 100%),linear-gradient(to right,#000 90%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
}
.scene-description { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wrap { position:relative; z-index:2; width:100%; min-width:0; }
.card { position:relative; background:linear-gradient(160deg,#14233beF,#0c182cf5); border:1px solid #ae8d554f; border-radius:20px; padding:28px 30px; box-shadow:0 24px 85px #0005,inset 0 1px 0 #ffffff08; }
.header { text-align:center; margin-bottom:24px; }
.logo { display:block; width:132px; height:132px; border-radius:18px; margin:0 auto 16px; box-shadow:0 6px 28px #0003; }
.portal-tag { display:inline-flex; align-items:center; gap:7px; font-size:.59rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border:1px solid #b795554f; border-radius:30px; color:#edcf96; background:#d1aa5e0c; margin-bottom:12px; }
.portal-dot { width:4px; height:4px; border-radius:50%; background:#edcf96; }
.header-title { margin:0; font-size:1.45rem; font-weight:700; letter-spacing:-.035em; line-height:1.3; }
.header-sub { margin:6px 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }
.form-group { margin-bottom:18px; }
.form-label { display:block; color:#c5d0df; font-size:.69rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; }
.input-wrap { position:relative; }
.form-control { width:100%; min-height:46px; padding:11px 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); font-size:.9rem; transition:border-color .15s,box-shadow .15s; }
.form-control::placeholder { color:#9ba9bd; opacity:1; }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px #f0ce8912; }
.form-control.has-toggle { padding-right:52px; }
.form-control:-webkit-autofill { -webkit-text-fill-color:var(--text); box-shadow:0 0 0 1000px var(--surface-2) inset; caret-color:var(--text); }
.toggle-pw { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--muted); background:none; border:0; border-radius:6px; cursor:pointer; }
.toggle-pw:hover { color:var(--accent); }
.btn-submit { display:flex; width:100%; min-height:46px; align-items:center; justify-content:center; gap:8px; margin-top:22px; padding:12px; background:linear-gradient(115deg,#f5d99e,#e9be70); color:#1b2331; border:1px solid #f6d99c; border-radius:var(--radius); font-size:.91rem; font-weight:700; cursor:pointer; box-shadow:0 5px 20px #e8b95d19; }
.btn-submit:hover:not(:disabled) { background:var(--accent-dark); }
.btn-submit:disabled { opacity:.65; cursor:not-allowed; }
.spinner { display:none; width:16px; height:16px; border:2px solid #1b233144; border-top-color:#1b2331; border-radius:50%; animation:spin .65s linear infinite; }
.btn-submit.loading .spinner { display:block; }
.notice { display:flex; align-items:flex-start; gap:9px; padding:12px; margin-top:18px; background:#ffffff04; border:1px solid #c8b07928; border-radius:8px; color:#b7c3d3; font-size:.69rem; line-height:1.6; }
.notice svg { flex-shrink:0; margin-top:3px; color:var(--accent); }
.alert { display:flex; align-items:flex-start; gap:9px; padding:12px; margin:0 0 18px; border-radius:var(--radius); font-size:.8rem; line-height:1.5; overflow-wrap:anywhere; }
.alert svg { flex-shrink:0; margin-top:2px; }
.alert[hidden] { display:none; }
.alert-danger { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-bd); }
.alert-warning { background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-bd); }
.login-footer { min-height:36px; position:relative; z-index:2; text-align:center; font-size:.67rem; line-height:1.5; color:#adbbce; padding-top:20px; }
.login-footer p { margin:0; }
.login-footer p span { padding:0 6px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1000px) { .nativity-space::before { left:-24px; } .login-layout { gap:32px; grid-template-columns:minmax(0,1fr) minmax(330px,400px); } body { padding:28px 24px 20px; } .card { padding:24px; } }
@media (max-width:900px) {
    :root { --page-bottom:max(20px,env(safe-area-inset-bottom)); --scene-width:min(900px,100vw); }
    .nativity-space::before { left:50%; transform:translateX(-50%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 92%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 92%,transparent 100%); -webkit-mask-composite:source-over; mask-composite:add; }
    body { padding:24px 18px var(--page-bottom); }
    .login-layout { grid-template-columns:minmax(0,1fr); max-width:420px; gap:28px; margin:0 auto; }
    .wrap { grid-row:1; }
    .nativity-panel { grid-row:2; }
    .christmas-intro { position:relative; z-index:2; padding:0 0 14px; }
    .christmas-eyebrow { font-size:.59rem; margin-bottom:8px; }
    #christmasTitle { font-size:2.25rem; }
    .christmas-subtitle { font-size:.8rem; margin-top:8px; }
    .nativity-space { height:min(600px,66.640625vw); }
    .card { border-radius:16px; padding:24px; }
    .logo { width:112px; height:112px; border-radius:15px; margin-bottom:14px; }
    .header { margin-bottom:22px; }
    .form-control { font-size:1rem; }
    .login-footer { padding-top:20px; }
}
@media (max-width:360px) { body { padding-inline:12px; } .card { padding:20px; } .logo { width:100px; height:100px; } .header-title { font-size:1.3rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }