@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root { --hospital-50:#effcfb; --hospital-100:#d6f7f3; --hospital-200:#afece4; --hospital-500:#14a89a; --hospital-600:#0d897f; --hospital-700:#0f6f68; --hospital-800:#115b55; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:320px; background:#f8fafc; color:#1e293b; font-family:'Noto Sans Thai',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { cursor:pointer; border:0; }
button:disabled { cursor:wait; }
button:focus-visible { outline:2px solid var(--hospital-500); outline-offset:3px; }
::selection { background:var(--hospital-200); color:var(--hospital-800); }
.auth-page { display:grid; min-height:100vh; min-height:100svh; place-items:center; padding:32px 16px; background:linear-gradient(135deg,var(--hospital-50),#f8fafc,#fff); }
.auth-card { display:grid; width:100%; max-width:1024px; overflow:hidden; border:1px solid var(--hospital-100); border-radius:24px; background:#fff; box-shadow:0 20px 70px -25px rgba(15,118,110,.2); }
.brand { display:flex; flex-direction:column; justify-content:space-between; padding:24px; border-bottom:1px solid var(--hospital-100); background:rgba(239,252,251,.6); }
.hospital { display:flex; align-items:center; gap:12px; margin-bottom:24px; color:var(--hospital-800); font-size:14px; font-weight:600; }
.hospital-icon { display:grid; flex-shrink:0; width:40px; height:40px; place-items:center; border-radius:12px; background:var(--hospital-600); box-shadow:0 10px 15px -3px rgba(13,137,127,.2),0 4px 6px -4px rgba(13,137,127,.2); }
.hospital-icon svg { width:24px; height:24px; fill:#fff; }
h1,h2,p { margin:0; }
h1 { max-width:384px; color:#0f172a; font-size:24px; font-weight:700; line-height:1.625; }
.brand-description { max-width:320px; margin-top:16px; color:#64748b; font-size:14px; line-height:28px; }
.brand-note { display:none; margin-top:40px; padding-top:20px; border-top:1px solid var(--hospital-100); color:var(--hospital-800); font-size:14px; line-height:28px; }
.auth-content { min-width:0; padding:24px; }
.preview-note { margin-bottom:20px; }
.review-page { max-width:960px; margin:0 auto; padding:32px 24px; }
.review-page h1 { margin-top:24px; }
.review-request { margin-top:24px; padding:24px; border:1px solid var(--hospital-100); border-radius:16px; background:white; }
.review-request dl { display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:8px 20px; font-size:14px; }
.review-request dt { color:#64748b; }
.review-request dd { margin:0; overflow-wrap:anywhere; }
.review-actions { display:flex; flex-wrap:wrap; gap:12px; }
.review-actions .submit { width:auto; margin:0; }
.reject-button { padding:12px; border:1px solid #fecdd3; border-radius:12px; background:#fff1f2; color:#be123c; font-weight:600; }
.auth-tabs { display:flex; gap:4px; margin-bottom:28px; padding:4px; border-radius:12px; background:#f1f5f9; }
.auth-tabs button { flex:1; padding:10px 12px; border-radius:8px; background:transparent; color:#64748b; font-size:14px; font-weight:600; transition:background .15s,color .15s; }
.auth-tabs button[aria-selected=true] { background:#fff; color:var(--hospital-700); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.auth-tabs button:hover { color:var(--hospital-700); }
h2 { color:#0f172a; font-size:24px; font-weight:700; line-height:32px; }
.intro { margin:8px 0 24px; color:#64748b; font-size:14px; line-height:24px; }
fieldset { display:grid; min-width:0; gap:16px; padding:0; margin:0; border:0; }
.name-fields { display:grid; gap:16px; min-width:0; }
.name-fields > div { min-width:0; }
@media (min-width:640px) { .name-fields { grid-template-columns:1fr 1fr; } }
.field-label { display:block; margin-bottom:8px; color:#334155; font-size:14px; font-weight:600; }
.required-mark { color:#dc2626; font-weight:600; }
.required-note { margin:-12px 0 20px; color:#64748b; font-size:13px; line-height:24px; }
.field { width:100%; min-height:50px; padding:12px 14px; border:1px solid #e2e8f0; border-radius:12px; outline:none; background:#fff; color:#1e293b; font-size:16px; line-height:24px; transition:border-color .15s,box-shadow .15s; caret-color:var(--hospital-700); }
.field::placeholder { color:#64748b; opacity:1; }
.field:focus,.select-trigger[aria-expanded=true] { border-color:var(--hospital-500); box-shadow:0 0 0 4px var(--hospital-100); }
.password-field { position:relative; }
.password-field .field { padding-right:56px; }
.password-toggle { position:absolute; right:4px; top:50%; display:grid; width:44px; height:44px; padding:0; transform:translateY(-50%); place-items:center; border-radius:8px; background:transparent; color:#64748b; }
.password-toggle svg { width:20px; height:20px; }
.password-toggle:hover { background:var(--hospital-50); color:var(--hospital-700); }
.hint { margin-top:8px; color:#64748b; font-size:12px; }
.submit { width:100%; margin-top:16px; padding:12px; border-radius:12px; background:var(--hospital-600); color:#fff; font-weight:600; transition:background .15s; }
.submit:hover { background:var(--hospital-700); }
.submit:disabled { opacity:.5; }
.approval-note { padding:12px 16px; border:1px solid var(--hospital-100); border-radius:12px; background:var(--hospital-50); color:var(--hospital-800); font-size:12px; line-height:24px; }
.switch-note { margin-top:24px; color:#64748b; font-size:14px; text-align:center; }
.text-button { padding:0; background:transparent; color:var(--hospital-700); font-size:14px; font-weight:600; text-underline-offset:4px; }
.text-button:hover { text-decoration:underline; }
.first-login,.credit { margin-top:12px; color:#64748b; font-size:12px; text-align:center; }
.credit { margin-top:8px; }
.feedback { margin-bottom:16px; padding:12px; border-radius:12px; background:#fff1f2; color:#be123c; font-size:14px; }
.feedback.success { background:#ecfdf5; color:#065f46; }
.custom-select { position:relative; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.selected-label { color:#64748b; }
.selected-label.has-value { color:#1e293b; font-weight:500; }
.select-trigger svg { width:16px; height:16px; flex-shrink:0; color:#64748b; transition:transform .2s; }
.select-trigger[aria-expanded=true] svg { transform:rotate(180deg); color:var(--hospital-600); }
.select-menu { position:absolute; top:100%; left:0; right:0; z-index:120; max-height:288px; overflow:auto; margin-top:8px; padding:8px; border:1px solid var(--hospital-200); border-radius:16px; background:#fff; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
.select-menu.upward { top:auto; bottom:100%; margin:0 0 8px; }
.select-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; padding:8px 12px; border-bottom:1px solid #f1f5f9; color:#64748b; font-size:12px; font-weight:600; }
.select-heading span:last-child { font-size:11px; font-weight:400; }
.select-option { display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; padding:12px; border-radius:12px; background:#fff; color:#1e293b; text-align:left; font-size:14px; font-weight:500; line-height:1.375; }
.select-option.active,.select-option[aria-selected=true] { background:var(--hospital-50); color:var(--hospital-800); }
.option-copy { display:flex; align-items:center; gap:10px; min-width:0; }
.option-number { flex-shrink:0; color:#64748b; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:400; }
.option-badge { flex-shrink:0; padding:2px 10px; border-radius:999px; background:var(--hospital-100); color:var(--hospital-800); font-size:11px; font-weight:600; }
.select-option[aria-selected=true] .option-badge { background:var(--hospital-600); color:#fff; }
.select-menu::-webkit-scrollbar { width:8px; }
.select-menu::-webkit-scrollbar-thumb { background:var(--hospital-200); border-radius:8px; }
.auth-fade-in { animation:auth-fade-in 260ms ease-out both; }
.auth-fade-out { animation:auth-fade-out 160ms ease-in both; pointer-events:none; }
@keyframes auth-fade-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes auth-fade-out { from { opacity:1; } to { opacity:0; } }
@media (min-width:640px) { .auth-page { padding-top:48px; padding-bottom:48px; } .brand,.auth-content { padding:36px; } h1 { font-size:30px; } }
@media (min-width:1024px) { .auth-card { grid-template-columns:.9fr 1.1fr; } .brand,.auth-content { padding:48px; } .brand { border-bottom:0; border-right:1px solid var(--hospital-100); } .brand-note { display:block; } }
@media (prefers-reduced-motion:reduce) { .auth-fade-in,.auth-fade-out { animation:none; } * { transition:none!important; } }