/* 版面風格：優雅奢華與現代極簡的融合。使用象牙白與香檳色作為基調，搭配細膩的金屬色系（金色、古銅色）框線與漸層。強調視覺層次感、柔和的陰影效果，以及流暢的微互動體驗。 */
:root { --color-ivory: #FFFBF7; --color-champagne: #F8F5F0; --color-navy: #1a2332; --color-gold: #D4AF37; --color-oauth-border: #f8ecc0; --color-nav-border: #9e9877; --color-dark-text: #2d2d2d; --color-muted-text: #8a8a8a; --color-border: #E8E3DC; --color-light-bg: #F5F5F5; --bg-gradient: linear-gradient(135deg, var(--color-ivory) 0%, var(--color-champagne) 100%); --gold-gradient: linear-gradient(135deg, var(--color-gold) 0%, rgba(212, 175, 55, 0.7) 100%); --line-gradient: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-gradient); color: var(--color-dark-text); }
body { overflow-x: hidden; }
.login-container { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
.bg-decoration { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url('../images/elegant-bg-main.png'); background-size: cover; background-position: center; background-attachment: fixed; opacity: 1; z-index: 0; }
.login-container::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 251, 247, 0.2); z-index: 1; }
.login-card { position: relative; z-index: 10; width: 100%; max-width: 420px; background: white; border-radius: 20px; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow: hidden; animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.card-header-section { padding: 40px 32px 24px; text-align: center; }
.welcome-title { font-size: 32px; font-weight: 300; letter-spacing: 0.5px; color: var(--color-navy); margin-bottom: 8px; }
.welcome-subtitle { font-size: 14px; font-weight: 400; color: var(--color-muted-text); letter-spacing: 0.3px; }
.decorative-line { height: 1px; background: var(--line-gradient); margin-top: 24px; }
.section-label { font-size: 12px; font-weight: 600; color: var(--color-muted-text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; display: block; }
.oauth-section { padding: 24px 32px; }
.oauth-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; margin-bottom: 12px; background: white; border: 1.5px solid var(--color-oauth-border); border-radius: 10px; text-decoration: none; color: var(--color-dark-text); transition: var(--transition-smooth); cursor: pointer; position: relative; overflow: hidden; }
.oauth-btn:hover { background: white; border-color: var(--color-gold); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.oauth-btn:active { transform: translateY(0); }
.oauth-icon { width: 20px; height: 20px; flex-shrink: 0; margin-right: 12px; }
.btn-text { flex: 1; font-size: 14px; font-weight: 500; text-align: left; }
.chevron-icon { font-size: 20px; color: var(--color-muted-text); transition: color 0.3s ease; font-style: normal; }
.oauth-btn:hover .chevron-icon { color: var(--color-gold); }
.divider-section { display: flex; align-items: center; padding: 24px 32px; gap: 12px; }
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-border), transparent); }
.divider-line:last-child { background: linear-gradient(90deg, transparent, var(--color-border)); }
.divider-text { font-size: 12px; color: var(--color-muted-text); white-space: nowrap; font-weight: 300; }
.nav-section { padding: 4px 32px; }
.nav-link-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; margin-bottom: 12px; background: white; border: 1.5px solid var(--color-nav-border); border-radius: 10px; text-decoration: none; color: var(--color-dark-text); transition: var(--transition-smooth); cursor: pointer; position: relative; overflow: hidden; }
.nav-link-btn:hover { background: rgba(245, 245, 245, 0.8); border-color: var(--color-gold); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.nav-link-btn:active { transform: translateY(0); }
.nav-icon { font-size: 18px; margin-right: 12px; flex-shrink: 0; }
.nav-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-title { font-size: 14px; font-weight: 500; display: block; }
.nav-desc { font-size: 12px; color: var(--color-muted-text); display: block; }
.card-footer-section { padding: 16px 32px; background: var(--color-light-bg); border-top: 1px solid var(--color-border); text-align: center; }
.footer-text { font-size: 11px; color: var(--color-muted-text); letter-spacing: 0.3px; margin: 0; }
.footer-text a { color: var(--color-muted-text); text-decoration: none; transition: var(--transition-smooth); }
.footer-text a:hover { color: var(--color-gold); }
@media (max-width: 576px) { .login-card { max-width: 100%; border-radius: 16px; } .card-header-section { padding: 32px 24px 20px; } .welcome-title { font-size: 28px; } .oauth-section, .nav-section, .divider-section { padding: 4px 24px; } .card-footer-section { padding: 12px 24px; } .oauth-btn, .nav-link-btn { padding: 12px 14px; font-size: 13px; } .oauth-icon { width: 18px; height: 18px; margin-right: 10px; } .nav-icon { font-size: 16px; margin-right: 10px; } }
@media (max-width: 400px) { .login-container { padding: 16px; } .welcome-title { font-size: 24px; } .welcome-subtitle { font-size: 13px; } .btn-text, .nav-title { font-size: 13px; } .nav-desc { font-size: 11px; } .divider-text { font-size: 11px; } }
.facebook-btn { background-color: #1877F2 !important; border-color: #1877F2 !important; color: white !important; }
.facebook-btn .oauth-icon path { fill: white !important; }
.facebook-btn .chevron-icon { color: rgba(255, 255, 255, 0.8) !important; }
.facebook-btn:hover { background-color: #166fe5 !important; border-color: #166fe5 !important; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3) !important; }
.oauth-btn.focused, .nav-link-btn.focused { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.ripple { position: absolute; border-radius: 50%; background: rgba(212, 175, 55, 0.3); transform: scale(0); animation: ripple-animation 0.6s ease-out; pointer-events: none; }
@keyframes ripple-animation { to { transform: scale(4); opacity: 0; } }