@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Outfit:wght@300;400;500;600;700&display=swap";
:root{--primary-red:#c5222e;--primary-red-hover:#a71823;--bg-porcelain:#faf8f5;--bg-silk:#f4efea;--surface-card:#fff;--surface-border:#e8e2d9;--surface-border-hover:#d5c9b8;--gold-accent:#b8860b;--gold-light:#f9f3e5;--gold-border:#b8860b40;--text-primary:#1c1917;--text-secondary:#57534e;--text-muted:#8c827a;--font-display:"Cinzel", serif;--font-body:"Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-porcelain);color:var(--text-primary);flex-direction:column;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.chinese-background{z-index:0;background:radial-gradient(circle at 50% 18%,#f5ebe0d9 0%,#faf8f5f2 55%),linear-gradient(#fdfcfb 0%,#f5efe6 100%);position:fixed;inset:0;overflow:hidden}.oriental-grid{pointer-events:none;background-image:radial-gradient(#c5222e0b 1.2px,#0000 1.2px);background-size:28px 28px;position:absolute;inset:0}.login-container{z-index:10;justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex;position:relative}.login-card{background:var(--surface-card);border:1px solid var(--surface-border);border-radius:28px;width:100%;max-width:420px;padding:2.8rem 2.2rem 2.2rem;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;box-shadow:0 25px 50px -12px #8b0a1614,0 10px 25px -5px #0000000a,0 0 0 1px #ffffffe6}.login-card:before{content:"";background:linear-gradient(90deg,#0000,#c5222e66,#0000);height:2px;position:absolute;top:-1px;left:20%;right:20%}.logo-wrapper{justify-content:center;margin-bottom:2rem;display:flex;position:relative}.logo-glow{filter:blur(14px);z-index:0;background:radial-gradient(circle,#e5be5e59 0%,#c5222e26 55%,#0000 75%);border-radius:50%;width:155px;height:155px;animation:4s ease-in-out infinite alternate pulseGlow;position:absolute}.logo-img{object-fit:cover;z-index:1;border:4px solid #fff;border-radius:50%;width:138px;height:138px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:0 12px 28px #8b0a1624,0 4px 10px #0000000f}.logo-img:hover{transform:scale(1.05)rotate(2deg)}.form-group{margin-bottom:1.25rem}.input-label{color:var(--text-secondary);letter-spacing:.02rem;margin-bottom:.5rem;font-size:.88rem;font-weight:600;display:block}.input-container{align-items:center;display:flex;position:relative}.input-icon{color:var(--primary-red);opacity:.85;pointer-events:none;align-items:center;display:flex;position:absolute;left:1rem}.custom-input{color:#1c1917;width:100%;font-size:.98rem;font-family:var(--font-body);background:#fafaf9;border:1.5px solid #e7e2da;border-radius:14px;outline:none;padding:.95rem 1rem .95rem 2.9rem;font-weight:500;transition:all .25s}.custom-input::placeholder{color:#a8a29e;font-size:.92rem;font-weight:400}.custom-input:focus{border-color:var(--primary-red);background:#fff;box-shadow:0 0 0 3.5px #c5222e1a,0 2px 8px #c5222e0f}.toggle-password-btn{color:#a8a29e;cursor:pointer;background:0 0;border:none;align-items:center;padding:.35rem;transition:color .2s;display:flex;position:absolute;right:.85rem}.toggle-password-btn:hover{color:var(--primary-red)}.submit-btn{color:#fff;width:100%;font-family:var(--font-display);letter-spacing:.12rem;cursor:pointer;background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);border:none;border-radius:14px;justify-content:center;align-items:center;gap:.6rem;margin-top:1rem;padding:1.05rem;font-size:1.05rem;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 22px #b71c1c52,inset 0 1px 1px #ffffff40}.submit-btn:after{content:"";background:linear-gradient(90deg,#0000,#ffffff40,#0000);width:100%;height:100%;transition:all .5s;position:absolute;top:0;left:-100%}.submit-btn:hover{background:linear-gradient(135deg,#e53935 0%,#c62828 100%);transform:translateY(-2px);box-shadow:0 12px 28px #b71c1c66}.submit-btn:hover:after{left:100%}.submit-btn:active{transform:translateY(1px)}.submit-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.alert-error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;align-items:center;gap:.6rem;margin-bottom:1.25rem;padding:.85rem 1rem;font-size:.88rem;font-weight:500;animation:.4s ease-in-out shake;display:flex}.alert-success{color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;align-items:center;gap:.6rem;margin-bottom:1.25rem;padding:.85rem 1rem;font-size:.88rem;font-weight:500;display:flex}.quick-login-badge{color:var(--text-muted);border-top:1px solid #f0ece4;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.25rem;font-size:.82rem;display:flex}.quick-btn{background:var(--gold-light);border:1px solid var(--gold-border);color:var(--gold-accent);cursor:pointer;border-radius:8px;padding:.4rem .85rem;font-size:.78rem;font-weight:600;transition:all .2s}.quick-btn:hover{border-color:var(--gold-accent);color:#8c6506;background:#f3e7ca}@keyframes pulseGlow{0%{opacity:.6;transform:scale(.96)}to{opacity:.95;transform:scale(1.08)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}