/* style.css */
:root { --primary: #0b3e8c; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#ECECEC; font-family:'Inter',sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; transition:background .3s; }
html.dark body { background:#2a2f3d; }

/* เพิ่ม class นี้สำหรับซ่อน element */
.hidden { display: none !important; }

.screen { width:100%; max-width:400px; background:#fff; border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,0.1); overflow:hidden; transition:background .3s; display:flex; flex-direction:column; }
html.dark .screen { background:#1e2230; }
.top-bar { display:flex; justify-content:space-between; padding:12px 16px; }
.top-bar button { background:none; border:none; font-size:1rem; cursor:pointer; color: var(--primary); transition:color .3s; }
html.dark .top-bar button { color:#ccc; }
.logo { display:flex; justify-content:center; align-items:center; padding:16px; }
.logo img { width:260px; max-width:90%; }
.enter-label { margin:8px 24px; font-size:0.75rem; color: var(--primary); transition:color .3s; }
html.dark .enter-label { color:#ccc; }
.form-container { padding:0 24px 24px; display:flex; flex-direction:column; }
.form-group { position:relative; margin-bottom:16px; }
.form-group input { width:100%; height:56px; font-size:1rem; padding:0 16px 0 48px; border:1px solid #DDD; border-radius:24px; background:#fff; transition:background .3s,color .3s; }
html.dark .form-group input { background:#2a2f3d; color:#ccc; border-color:#555; }
.form-group .icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:1.3rem; color: var(--primary); transition:color .3s; }
html.dark .form-group .icon { color:#ccc; }
.form-links a#toSignup { font-size:0.85rem; text-decoration:none; cursor:pointer; }
.prompt-text { color:#888; }
.register-text { color:var(--primary); }
.form-container button[type="submit"] { width:100%; height:48px; background: var(--primary); color:#fff; border:none; border-radius:24px; font-size:1.125rem; cursor:pointer; margin-top:8px; }
.form-container button[type="submit"]:disabled { opacity:0.6; cursor:not-allowed; }
.form-links { display:flex; justify-content:space-between; margin-top:8px; font-size:0.85rem; }
.form-links a { text-decoration:none; color: var(--primary); }
html.dark .form-links a { color:#ccc; }
.quick-services { padding:16px; display:flex; flex-direction:column; }
.quick-services .title { display:flex; align-items:center; justify-content:center; color:#4A4A4A; font-size:1rem; margin-bottom:8px; }
.quick-services .title::before, .quick-services .title::after { content:''; flex:1; height:1px; background:#DDD; margin:0 8px; }
.services-list { display:flex; justify-content:space-around; flex-wrap:wrap; }
.service.contact-us { padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:1rem; text-decoration:none; }
.service.contact-us i { font-size:2rem; color: var(--primary); }
.service.contact-us span { font-size:0.85rem; font-weight:600; color: var(--primary); }
html.dark .service.contact-us i, html.dark .service.contact-us span { color:#ccc; }
.password-requirements ul { list-style:none; padding-left:20px; margin-bottom:8px; }
.password-requirements li { position:relative; font-size:0.7rem; color:#999; margin-bottom:4px; }
.password-requirements li::before { content:'\2022'; position:absolute; left:-15px; color:#999; }
.password-requirements .met { color:#2E8B57; }
.password-requirements .met::before { color:#2E8B57; }
.progress-bar { width:100%; height:8px; background:#e0e0e0; border-radius:4px; overflow:hidden; margin-bottom:8px; }
.progress-fill { width:0%; height:100%; background:#ccc; transition:width .3s ease, background .3s ease; }
#passwordStrengthText { font-size:0.85rem; text-align:right; margin-bottom:12px; color:#4A4A4A; }
.captcha-group { margin-bottom:16px; }
.captcha-box { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
#captchaCanvas { border:1px solid #DDD; border-radius:4px; }
.refresh-icon { cursor:pointer; font-size:1.2rem; color: var(--primary); }
html.dark .refresh-icon { color:#ccc; }
.captcha-info { font-size:0.85rem; color:#555; max-width:120px; margin-left:8px; }
html.dark .captcha-info { color:#ccc; }
#captchaInput { width:100%; height:48px; padding:0 16px; border:1px solid #DDD; border-radius:24px; background:#fff; font-size:1rem; }
html.dark #captchaInput { background:#2a2f3d; color:#ccc; border-color:#555; }
.main-footer { text-align:center; padding:12px; font-size:0.75rem; color:#4A4A4A; border-top:1px solid #EEE; }
.main-footer span { color: var(--primary); }
.main-footer a { color:inherit; text-decoration:none; margin:0 4px; }
.loading-spinner { display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
.error-message { display: none; background: #ffebee; color: #c62828; padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
html.dark .error-message { background: #4a1c1c; color: #ff8a80; }
.success-message { display: none; background: #e8f5e9; color: #2e7d32; padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
html.dark .success-message { background: #1b3a1c; color: #81c784; }