html,body{margin:0;padding:0;height:100%;font-family:Sarabun,TH Sarabun New,sans-serif}.wrap.svelte-1x05zx6{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:#0e1f4d;position:relative;overflow:hidden}.wrap.svelte-1x05zx6:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.35) 0%,transparent 70%);top:-150px;left:-150px;pointer-events:none}.wrap.svelte-1x05zx6:after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.18) 0%,transparent 70%);bottom:-100px;right:-80px;pointer-events:none}.card.svelte-1x05zx6{position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px #ffffff14,0 20px 60px #0006,0 4px 16px #0003}.top-bar.svelte-1x05zx6{height:5px;background:linear-gradient(90deg,#10b981,#3b82f6,#6366f1)}.logo-area.svelte-1x05zx6{display:flex;flex-direction:column;align-items:center;padding:28px 28px 12px;gap:10px}.logo-ring.svelte-1x05zx6{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#1e3a8a,#2563eb);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #2563eb66}.logo-ring.svelte-1x05zx6 svg:where(.svelte-1x05zx6){width:30px;height:30px}.org-name.svelte-1x05zx6{text-align:center}.org-name.svelte-1x05zx6 h1:where(.svelte-1x05zx6){font-size:17px;font-weight:800;color:#0f172a;margin:0 0 2px;line-height:1.35}.org-name.svelte-1x05zx6 p:where(.svelte-1x05zx6){font-size:12px;color:#64748b;margin:0}.tabs.svelte-1x05zx6{display:flex;margin:16px 24px 0;background:#f1f5f9;border-radius:10px;padding:3px;gap:3px}.tab.svelte-1x05zx6{flex:1;padding:9px 0;border:none;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;color:#64748b;background:transparent}.tab.act.svelte-1x05zx6{background:#fff;color:#1e40af;box-shadow:0 1px 4px #0000001f}.tab.svelte-1x05zx6 svg:where(.svelte-1x05zx6){width:14px;height:14px;flex-shrink:0}.form-area.svelte-1x05zx6{padding:16px 24px 0}.err.svelte-1x05zx6{display:flex;align-items:center;gap:8px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:10px 13px;color:#dc2626;font-size:13px;margin-bottom:14px}.field.svelte-1x05zx6{margin-bottom:14px}.field.svelte-1x05zx6 label:where(.svelte-1x05zx6){display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px}.input-row.svelte-1x05zx6{position:relative;display:flex;align-items:center}.input-ico.svelte-1x05zx6{position:absolute;left:12px;color:#94a3b8;width:16px;height:16px;pointer-events:none;flex-shrink:0}input[type=text].svelte-1x05zx6,input[type=password].svelte-1x05zx6{width:100%;padding:11px 40px 11px 38px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;font-family:inherit;color:#0f172a;background:#fff;outline:none;transition:all .2s;box-sizing:border-box}input[type=text].svelte-1x05zx6:focus,input[type=password].svelte-1x05zx6:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}input.svelte-1x05zx6::placeholder{color:#94a3b8}.eye-btn.svelte-1x05zx6{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px;display:flex;align-items:center;transition:color .15s}.eye-btn.svelte-1x05zx6:hover{color:#475569}.eye-btn.svelte-1x05zx6 svg:where(.svelte-1x05zx6){width:16px;height:16px}.btn-login.svelte-1x05zx6{width:100%;padding:13px;background:linear-gradient(135deg,#1e40af,#2563eb);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px #2563eb59;transition:all .2s;margin-bottom:4px}.btn-login.svelte-1x05zx6:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#3b82f6);box-shadow:0 6px 18px #2563eb73;transform:translateY(-1px)}.btn-login.svelte-1x05zx6:disabled{opacity:.65;cursor:not-allowed}@keyframes svelte-1x05zx6-spin{to{transform:rotate(360deg)}}.spin.svelte-1x05zx6{animation:svelte-1x05zx6-spin .7s linear infinite}.divider.svelte-1x05zx6{display:flex;align-items:center;margin:14px 0 12px;font-size:12px;color:#94a3b8}.divider.svelte-1x05zx6:before,.divider.svelte-1x05zx6:after{content:"";flex:1;height:1px;background:#e2e8f0}.divider.svelte-1x05zx6 span:where(.svelte-1x05zx6){padding:0 10px}.btn-thaid.svelte-1x05zx6{width:100%;display:flex;align-items:center;gap:12px;padding:11px 16px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;text-decoration:none;color:#1e293b;font-size:14px;font-family:inherit;cursor:pointer;transition:all .2s;box-sizing:border-box}.btn-thaid.svelte-1x05zx6:hover{border-color:#2563eb;background:#eff6ff;box-shadow:0 2px 8px #2563eb1f}.thaid-ico.svelte-1x05zx6{width:32px;height:32px;flex-shrink:0;background:#2563eb;border-radius:8px;display:flex;align-items:center;justify-content:center}.thaid-ico.svelte-1x05zx6 svg:where(.svelte-1x05zx6){width:18px;height:18px}.btn-thaid.svelte-1x05zx6 .lbl:where(.svelte-1x05zx6){flex:1;font-weight:500}.btn-thaid.svelte-1x05zx6 strong:where(.svelte-1x05zx6){color:#2563eb;font-weight:700}.btn-thaid.svelte-1x05zx6 .arr:where(.svelte-1x05zx6){color:#94a3b8;width:16px;height:16px;transition:transform .2s}.btn-thaid.svelte-1x05zx6:hover .arr:where(.svelte-1x05zx6){transform:translate(3px);color:#2563eb}.links.svelte-1x05zx6{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 0 8px;font-size:13px}.links.svelte-1x05zx6 span:where(.svelte-1x05zx6){color:#cbd5e1}.links.svelte-1x05zx6 a:where(.svelte-1x05zx6){color:#3b82f6;text-decoration:underline;text-underline-offset:2px;font-weight:500;transition:color .15s}.links.svelte-1x05zx6 a:where(.svelte-1x05zx6):hover{color:#1d4ed8}.courses-banner.svelte-1x05zx6{margin:8px 24px 24px;display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;border-radius:12px;text-decoration:none;color:#15803d;transition:all .2s}.courses-banner.svelte-1x05zx6:hover{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-color:#4ade80;box-shadow:0 3px 10px #22c55e33;transform:translateY(-1px)}.courses-banner.svelte-1x05zx6 .cb-ico:where(.svelte-1x05zx6){width:36px;height:36px;flex-shrink:0;background:#16a34a;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px}.courses-banner.svelte-1x05zx6 .cb-text:where(.svelte-1x05zx6){flex:1}.courses-banner.svelte-1x05zx6 .cb-text:where(.svelte-1x05zx6) p:where(.svelte-1x05zx6){margin:0}.courses-banner.svelte-1x05zx6 .cb-text:where(.svelte-1x05zx6) .cb-t1:where(.svelte-1x05zx6){font-size:13px;font-weight:700;color:#15803d}.courses-banner.svelte-1x05zx6 .cb-text:where(.svelte-1x05zx6) .cb-t2:where(.svelte-1x05zx6){font-size:11px;color:#4ade80;margin-top:1px;font-weight:500}.courses-banner.svelte-1x05zx6 .cb-arr:where(.svelte-1x05zx6){color:#4ade80;width:16px;height:16px;transition:transform .2s}.courses-banner.svelte-1x05zx6:hover .cb-arr:where(.svelte-1x05zx6){transform:translate(4px)}