/* 醒目的警示卡（登入失敗、帳號到期／未生效、嘗試太多次）＋後台表單錯誤。載入於 portal 樣式最後。 */
:root{--al-c:#C81E2D;--al-bg:#FFECEC;--al-bd:#F0A3A9;--al-ink:#5C1219;--al-glow:rgba(200,30,45,.35)}
html body.fun-portal #login-form.fp-login #login-error.alert-card,
html body.fun-portal .alert-card{display:flex!important;align-items:flex-start;gap:12px;margin:2px 0 16px!important;padding:12px 14px 12px 12px!important;background:var(--al-bg)!important;background-image:none!important;border:2px solid var(--al-bd);border-left:8px solid var(--al-c);border-radius:14px!important;box-shadow:0 8px 18px var(--al-glow);color:var(--al-ink)!important;font-size:15px!important;font-weight:700!important;line-height:1.45;text-align:left}
.alert-card.pending{--al-c:#D9480F;--al-bg:#FFF1E2;--al-bd:#F8B98A;--al-ink:#5B2405;--al-glow:rgba(217,72,15,.30)}
.alert-card.locked{--al-c:#B7791F;--al-bg:#FFF8DB;--al-bd:#F1D06B;--al-ink:#4D3600;--al-glow:rgba(183,121,31,.28)}
.alert-card .al-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--al-c);color:#fff;font-size:21px;font-weight:900;line-height:1;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--al-bd)}
.alert-card .al-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.alert-card .al-tx b{font-size:18px;font-weight:900;color:var(--al-c);letter-spacing:.02em}
.alert-card .al-tx>span{color:var(--al-ink)}
.alert-card mark{background:var(--al-c);color:#fff;border-radius:6px;padding:0 6px;margin:0 2px;font-weight:900;white-space:nowrap}
.alert-card small{margin-top:3px;padding-top:6px;border-top:1px dashed var(--al-bd);font-size:14px;font-weight:900;color:var(--al-c)}
.alert-card.al-in{animation:al-shake .5s cubic-bezier(.36,.07,.19,.97),al-glow 1.1s ease-out .5s 2}
@keyframes al-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes al-glow{0%{box-shadow:0 0 0 0 var(--al-glow),0 8px 18px var(--al-glow)}100%{box-shadow:0 0 0 14px transparent,0 8px 18px var(--al-glow)}}
/* 後台與改密碼視窗的錯誤訊息也用醒目樣式 */
html body.fun-portal dialog .error:not(:empty){display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px 12px;background:#FFECEC;border:2px solid #F0A3A9;border-left:8px solid #C81E2D;border-radius:12px;color:#5C1219;font-size:15px;font-weight:800;animation:al-shake .5s}
html body.fun-portal dialog .error:not(:empty)::before{content:'!';flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#C81E2D;color:#fff;font-weight:900}
@media(prefers-reduced-motion:reduce){.alert-card.al-in,html body.fun-portal dialog .error:not(:empty){animation:none}}
html body.fun-portal #login-form.fp-login.bad-cred #login-user,html body.fun-portal #login-form.fp-login.bad-cred #login-pass{border-color:#C81E2D!important;box-shadow:0 0 0 3px rgba(200,30,45,.16)!important}
.alert-card .al-tx b{-webkit-text-stroke:.4px currentColor}.alert-card .al-tx>span{font-size:15px}
@media(max-height:720px){html body.fun-portal #login-form.fp-login #login-error.alert-card{margin:0 0 10px!important;padding:8px 10px 8px 8px!important;gap:9px;font-size:14px!important;line-height:1.35}.alert-card .al-ic{width:26px;height:26px;font-size:16px;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--al-bd)}.alert-card .al-tx b{font-size:16px}.alert-card .al-tx>span{font-size:14px}.alert-card small{font-size:13px;padding-top:4px;margin-top:1px}}

@media(max-height:720px){html body.fun-portal #login-form.fp-login:has(#login-error.alert-card)>.badge,html body.fun-portal #login-form.fp-login:has(#login-error.alert-card)>p:not(.error):not(.small){display:none!important}}