:root { --primary: #ec4899; --primary-hover: #db2777; --bg-body: #fdf2f8; --box-bg: #ffffff; --text-dark: #333333; --border-color: #fbcfe8; }
body { background-color: var(--bg-body); background-image: radial-gradient(#fbcfe8 1px, transparent 1px); background-size: 20px 20px; font-family: 'Kanit', sans-serif; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; overflow-x: hidden;}

/* 🌟 ระบบ CSS Flip 🌟 */
.flip-container { perspective: 1000px; width: 100%; max-width: 380px; margin: 0 auto; }
.flipper { transition: 0.8s transform cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; position: relative; }
.flip-container.flipped .flipper { transform: rotateY(180deg); }
.front, .back { backface-visibility: hidden; width: 100%; background-color: var(--box-bg); padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(236, 72, 153, 0.15); border: 2px solid var(--border-color); text-align: center; box-sizing: border-box; }

/* ควบคุมความสูงกล่องให้อัตโนมัติ */
.front { transform: rotateY(0deg); position: relative; }
.back { transform: rotateY(180deg); position: absolute; top: 0; left: 0; }
.flip-container.flipped .front { position: absolute; }
.flip-container.flipped .back { position: relative; }

.login-icon img { width: 85px; height: auto; margin-bottom: 10px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 5px 10px rgba(236, 72, 153, 0.3));}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

h2 { margin: 0 0 10px 0; color: var(--primary); font-weight: 600; }
p.subtitle { color: #888; font-size: 14px; margin-bottom: 25px; }
.input-group { margin-bottom: 15px; text-align: left; }
.input-group label { display: block; font-size: 14px; color: var(--text-dark); margin-bottom: 8px; font-weight: 500; }
input[type="text"], input[type="password"], input[type="number"] { width: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--border-color); font-family: 'Kanit', sans-serif; font-size: 15px; color: var(--text-dark); box-sizing: border-box; outline: none; transition: 0.3s; background-color: #fffbfe; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2); background-color: #fff; }

.btn-main { background: linear-gradient(135deg, var(--primary), #f472b6); color: white; border: none; border-radius: 25px; padding: 15px; font-size: 16px; font-weight: 600; font-family: 'Kanit', sans-serif; cursor: pointer; width: 100%; transition: 0.3s; margin-top: 10px; box-shadow: 0 5px 15px rgba(236, 72, 153, 0.3); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4); }
.btn-green { background: #059669; box-shadow: 0 5px 15px rgba(5, 150, 105, 0.3); }

.error-msg { color: #ef4444; background-color: #fef2f2; padding: 12px; border-radius: 8px; font-size: 14px; margin-bottom: 20px; border: 1px solid #fecaca; line-height: 1.5; animation: popIn 0.3s;}

.flip-link { margin-top: 20px; font-size: 14px; color: #64748b; display: block; text-decoration: none; font-weight: 500; transition: 0.2s; }
.flip-link:hover { color: var(--primary); }
.flip-link b { color: var(--primary); }

.partner-notice { margin-top: 20px; font-size: 13px; color: #64748b; background: #fff; padding: 12px; border-radius: 8px; border: 1px dashed #f472b6; line-height: 1.5; }
.disclaimer-text { font-size: 11px; color: #ef4444; margin-top: 5px; display: block; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: opacity 0.25s ease; backdrop-filter: blur(3px);}
.modal-overlay.show { opacity: 1; display: flex;}
.modal-box { background-color: white; padding: 30px; border-radius: 20px; width: 90%; max-width: 350px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.3); transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.modal-overlay.show .modal-box { transform: translateY(0) scale(1); }
.modal-btn { background-color: #ef4444; color: white; border: none; padding: 12px 35px; border-radius: 25px; font-size: 16px; font-weight: 500; font-family: 'Kanit', sans-serif; cursor: pointer; transition: 0.2s; width: 100%; margin-top: 15px;}

@keyframes popIn { 0% { transform: scale(0.8) translateY(30px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }