@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/noto-sans-thai-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/noto-sans-thai-600.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/noto-sans-thai-700.woff2') format('woff2')}

:root {
  color-scheme: light;
  --yl-bg:#f3ecff;
  --yl-surface:#fff;
  --yl-surface-alt:#f6f1ff;
  --yl-ink:#2b145a;
  --yl-ink-muted:#5e4890;
  --yl-primary:#6d28d9;
  --yl-primary-hover:#5b21b6;
  --yl-border:#e4dcff;
  --yl-control-border:#8b78b8;
  --yl-focus:#6d28d9;
  --yl-danger:#a62b28;
  --yl-danger-soft:#fbedea;
  --pf-v5-global--FontFamily--sans-serif:Inter,'Noto Sans Thai',sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif:Inter,'Noto Sans Thai',sans-serif;
  --pf-v5-global--Color--100:var(--yl-ink);
  --pf-v5-global--Color--200:var(--yl-ink-muted);
  --pf-v5-global--primary-color--100:var(--yl-primary);
  --pf-v5-global--primary-color--200:var(--yl-primary-hover);
  --pf-v5-global--link--Color:var(--yl-primary);
  --pf-v5-global--danger-color--100:var(--yl-danger);
}

html,body { min-width:0; min-height:100%; background:var(--yl-bg); }
.login-pf body,#keycloak-bg { background:var(--yl-bg); background-image:none; height:auto; font-family:Inter,'Noto Sans Thai',sans-serif; color:var(--yl-ink); font-size:1rem; line-height:1.65; }
*,*::before,*::after { box-sizing:border-box; }
button,input,select,textarea { font:inherit; }
a { color:var(--yl-primary); text-underline-offset:4px; }
a:hover { color:var(--yl-primary-hover); text-decoration:underline; }
:focus-visible { outline:3px solid var(--yl-focus); outline-offset:3px; }

.pf-v5-c-login { min-height:100vh; min-height:100svh; padding:0; background:none; display:flex; flex-direction:column; justify-content:flex-start; }
.pf-v5-c-login__container { display:flex; flex-direction:column; align-items:center; width:100%; max-width:none; padding:0; margin:0; gap:0; }

.pf-v5-c-login__main { align-self:center; width:min(480px,calc(100% - 48px)); max-width:100%; min-width:0; margin:clamp(28px,7vh,64px) 24px 40px; border:1px solid var(--yl-border); border-top:3px solid var(--yl-primary); border-radius:16px; background:var(--yl-surface); box-shadow:none; overflow:visible; }
.pf-v5-c-login__main-header { padding:28px 32px 20px; border-top:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; }
#kc-page-title { flex:1 1 220px; min-width:0; margin:0; font-family:inherit; font-size:1.75rem; font-weight:600; line-height:1.45; color:var(--yl-ink); overflow-wrap:anywhere; }
.pf-v5-c-login__main-header-utilities { margin:0; max-width:100%; }
#login-select-toggle { min-height:44px; max-width:100%; padding:8px 32px 8px 12px; font-size:.875rem; }
.pf-v5-c-login__main-body { padding:0 32px 28px; min-width:0; }
#kc-form,#kc-form-wrapper,#kc-form-login { min-width:0; width:100%; }
#kc-form-login { display:flex; flex-direction:column; gap:20px; }
.pf-v5-c-form__group { min-width:0; margin:0; gap:6px; }
.pf-v5-c-form__label { color:var(--yl-ink); font-size:.875rem; font-weight:600; line-height:1.65; }
.pf-v5-c-form__label-text { font-size:inherit; line-height:inherit; }
.pf-v5-c-form-control { min-width:0; min-height:48px; border:1px solid var(--yl-control-border); border-radius:10px; background:var(--yl-surface); color:var(--yl-ink); }
.pf-v5-c-form-control::before,.pf-v5-c-form-control::after { display:none; }
.pf-v5-c-form-control:focus-within { outline:3px solid var(--yl-focus); outline-offset:3px; }
.pf-v5-c-form-control>input,.pf-v5-c-form-control>select { min-width:0; min-height:46px; padding:10px 12px; font-size:1rem; line-height:1.6; color:var(--yl-ink); border:0; border-radius:inherit; background:transparent; box-shadow:none; }
.pf-v5-c-form-control>input:focus-visible { outline:none; }
.pf-v5-c-input-group,.pf-v5-c-input-group__item { min-width:0; }
.pf-v5-c-input-group { gap:8px; align-items:stretch; }
.pf-v5-c-form-control.pf-m-error,.pf-v5-c-form-control:has(input[aria-invalid="true"]) { border-color:var(--yl-danger); background:var(--yl-danger-soft); }
.pf-v5-c-helper-text,.pf-v5-c-helper-text__item,.pf-v5-c-helper-text__item-text { font-family:inherit; font-size:.8125rem; line-height:1.65; }
.pf-v5-c-helper-text__item-text.pf-m-error,.kc-feedback-text { color:var(--yl-danger); overflow-wrap:anywhere; }

.pf-v5-c-button { font-family:inherit; font-size:.9375rem; line-height:1.6; border-radius:10px; min-height:44px; padding:10px 16px; box-shadow:none; white-space:normal; overflow-wrap:anywhere; }
.pf-v5-c-button::after { border-radius:inherit; }
.pf-v5-c-button.pf-m-control { display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:48px; padding:10px; color:var(--yl-ink-muted); background:var(--yl-surface-alt); border:1px solid var(--yl-control-border); }
.pf-v5-c-button.pf-m-primary,#kc-login { width:100%; min-height:48px; padding:12px 16px; border:1px solid var(--yl-primary); background:var(--yl-primary); color:#fff; font:600 .9375rem/1.65 Inter,'Noto Sans Thai',sans-serif; border-radius:12px; box-shadow:none; white-space:normal; cursor:pointer; }
.pf-v5-c-button.pf-m-primary:hover,#kc-login:hover { background:var(--yl-primary-hover); border-color:var(--yl-primary-hover); color:#fff; }
.pf-v5-c-button.pf-m-primary:disabled,#kc-login:disabled { background:var(--yl-surface-alt); border-color:var(--yl-border); color:var(--yl-ink-muted); cursor:wait; }
#kc-form-buttons { margin:4px 0 0; }
.pf-v5-c-login__main-footer { margin:0; padding:0; }
.yl-login-footer { margin:0 32px 28px; padding:24px 0 0; border-top:1px solid var(--yl-border); }
.yl-account-note { margin:0 0 12px; font-size:.875rem; line-height:1.7; color:var(--yl-ink-muted); }
.yl-login-links { display:flex; flex-wrap:wrap; gap:4px 18px; }
.yl-login-links a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; font-size:.875rem; font-weight:600; line-height:1.65; overflow-wrap:anywhere; }
.yl-scope-note { margin:16px 0 0; font-size:.8125rem; line-height:1.75; color:var(--yl-ink-muted); }
.pf-v5-c-alert { padding:14px; border:1px solid var(--yl-border); border-radius:10px; background:var(--yl-surface-alt); box-shadow:none; font-family:inherit; line-height:1.7; }
.pf-v5-c-alert.pf-m-danger { background:var(--yl-danger-soft); border-color:var(--yl-danger); color:var(--yl-danger); }
.pf-v5-c-alert__title { font-size:.9375rem; line-height:1.7; overflow-wrap:anywhere; }
#kc-info,#kc-info-wrapper { margin:16px 0 0; padding:0; background:transparent; }
#kc-content-wrapper,#kc-error-message { min-width:0; overflow-wrap:anywhere; }

@media(max-width:600px){
 .pf-v5-c-login__main{width:calc(100% - 40px);margin:24px 20px 28px}
 .pf-v5-c-login__main-header{padding:24px 24px 18px}
 .pf-v5-c-login__main-body{padding:0 24px 24px}
 #kc-page-title{font-size:1.625rem}
 .yl-login-footer{margin:0 24px 24px;padding-top:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Landing look shared with the Web: grid background, portal header, violet card. */
html.login-pf {
 background-color:#f3ecff;
 background-image:
  radial-gradient(rgba(124,58,237,.13) 1px,transparent 1.5px),
  radial-gradient(circle at 14% 18%,rgba(196,181,253,.58) 0%,transparent 45%),
  radial-gradient(circle at 86% 22%,rgba(245,208,254,.52) 0%,transparent 46%),
  radial-gradient(circle at 76% 84%,rgba(199,210,254,.55) 0%,transparent 48%),
  linear-gradient(145deg,#f6f1ff 0%,#ebe1ff 50%,#f7f0ff 100%);
 background-size:22px 22px,auto,auto,auto,auto;
 background-position:11px 11px,center,center,center,center;
 background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
 background-attachment:fixed;
}
html.login-pf body,#keycloak-bg { background:transparent; }
.yl-signal-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.pf-v5-c-login { position:relative; z-index:1; }

.portal-header { align-self:stretch; flex:none; width:100%; position:relative; z-index:30; margin:0; padding:0;
 background-color:#faf6ff; background-image:linear-gradient(90deg,#fbf8ff 0%,#f3ecff 50%,#faf5ff 100%);
 color:#2b145a; border-bottom:1px solid #dfd3ff; box-shadow:0 4px 20px -12px rgba(109,40,217,.12);
 font-family:Inter,'Noto Sans Thai',sans-serif; font-size:14px; font-weight:500; line-height:1.5; }
.portal-header-inner { width:min(100%,1248px); min-height:84px; padding:16px 24px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; }
.portal-header .portal-brand { display:inline-flex; align-items:center; flex:none; gap:8px; min-height:44px; color:#2b145a; text-decoration:none; }
.portal-brand-mark { flex:none; color:#6d28d9; }
.portal-brand-word { font-size:24px; font-weight:600; letter-spacing:-.05em; line-height:1.2; white-space:nowrap; }
.portal-brand-word>span { color:#6d28d9; }
.portal-navigation { display:flex; align-items:stretch; flex-wrap:wrap; gap:0 24px; min-width:0; max-width:100%; }
.portal-header .portal-navigation a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:10px 0; border-bottom:2px solid transparent; color:#4c3779; font-weight:600; text-decoration:none; white-space:nowrap; }
.portal-header .portal-navigation a[aria-current="page"] { color:#5b21b6; border-bottom-color:#6d28d9; font-weight:700; }
.portal-header .portal-navigation a:hover { color:#5b21b6; text-decoration:underline; text-underline-offset:5px; }
.portal-header a:focus-visible { outline:3px solid #6d28d9; outline-offset:3px; }
.portal-link-arrow { flex:none; }

.pf-v5-c-login__main { border-color:#e4dcff; border-top:3px solid var(--yl-primary); border-radius:0 0 16px 16px; box-shadow:0 24px 52px -18px rgba(109,40,217,.13); }

@media(max-width:760px){
 .portal-header-inner{padding:10px 20px 0;gap:4px;align-items:flex-start;flex-direction:column}
 .portal-navigation{width:100%;gap:0 16px}
 .portal-header .portal-navigation a{font-size:12px;gap:4px}
 .portal-link-arrow{display:none}
}
@media(forced-colors:active){
 html.login-pf,html.login-pf body,#keycloak-bg{background-image:none}
 .yl-signal-canvas{display:none}
 .portal-header .portal-navigation a[aria-current="page"]{color:LinkText;border-bottom-color:LinkText}
 .portal-header a:focus-visible{outline-color:Highlight}
}