/* Active LabResultNew login/selectrole CSS, scoped to auth pages. Source projects are read-only. */
/* DataS 2027 ยท Synthetic UI prototype
   Design authority: approved blue/white/navy reference + continuous-reader UX.
   No external fonts or libraries. Change tokens here, not individual components. */
/* Local Sarabun: only installed weights are declared. */
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/sarabun/Sarabun-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/sarabun/Sarabun-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Sarabun";
  src: url("../fonts/sarabun/Sarabun-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.auth-page--login *{
  box-sizing: border-box;
}
.auth-page--login{
  min-height: 100%;
}
.auth-page--login{
  margin: 0;

  min-height: 100vh;
  min-height: 100svh;

  padding: 32px 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: #f3f6fa;
  color: #172b4d;

  font-family: "Sarabun", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.auth-page--login ::selection{
  background: #d4e5fc;
  color: #082b68;
}
.auth-page--login .login-layout{
  width: min(440px, 100%);
  padding: 32px;

  background: #ffffff;

  border: 1px solid #d9e3ef;
  border-radius: 16px;

  text-align: center;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.015);
}
.auth-page--login .login-brand{
  padding-bottom: 24px;
  border-bottom: 1px solid #d9e3ef;
}
.auth-page--login .login-brand img{
  display: block;

  width: 64px;
  height: 64px;

  margin: 0 auto 14px;

  object-fit: contain;
}
.auth-page--login .login-brand h1{
  margin: 0 0 8px;

  color: #0b3d91;

  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.035em;
}
.auth-page--login .login-brand p{
  margin: 0 0 4px;

  color: #172b4d;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.auth-page--login .login-brand span{
  display: block;

  color: #64748b;

  font-size: 12px;
  line-height: 1.5;
}
.auth-page--login .login-panel{
  padding: 24px 0 26px;
}
.auth-page--login .login-heading h2{
  margin: 0;

  color: #0f2747;

  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
}
.auth-page--login .login-explanation{
  margin: 10px 0 22px;

  color: #64748b;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
.auth-page--login .login-action{
  width: 100%;
}
.auth-page--login .login-action a{
  font-family: "Sarabun", Tahoma, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.auth-page--login #providerLoginButton{
  width: 100%;
  min-height: 72px;

  padding: 12px 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  background: #ffffff;
  color: #0f172a;

  border: 1.5px solid #18a765;
  border-radius: 14px;

  box-shadow: none;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.auth-page--login #providerLoginButton:hover{
  background: #f7fcf9;
  border-color: #0f9257;

  box-shadow: 0 8px 20px rgba(15, 146, 87, 0.1);

  transform: translateY(-1px);
}
.auth-page--login #providerLoginButton:active{
  transform: translateY(0);
}
.auth-page--login #providerLoginButton:focus-visible{
  outline: 3px solid rgba(24, 167, 101, 0.18);
  outline-offset: 3px;
}
.auth-page--login #providerLoginButton .provider-login-logo{
  display: block;

  width: 96px;
  max-width: 96px;
  height: auto;

  margin: 0;

  object-fit: contain;

  flex: 0 0 auto;
}
.auth-page--login .provider-login-copy{
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;

  line-height: 1.25;
}
.auth-page--login .provider-login-copy strong{
  color: #073b2a;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.auth-page--login .provider-login-copy small{
  margin-top: 2px;

  color: #168457;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.auth-page--login .login-help{
  padding-top: 20px;

  border-top: 1px solid #e3eaf2;

  color: #172b4d;

  font-size: 12px;
  line-height: 1.55;
}
.auth-page--login .login-help strong{
  font-size: 13px;
  font-weight: 600;
}
.auth-page--login .login-help p{
  margin: 6px 0 0;

  color: #64748b;
}
.auth-page--login .login-footer{
  padding-top: 20px;

  color: #64748b;

  text-align: center;

  font-size: 12px;
  line-height: 1.5;
}
@media (min-width: 1200px){.auth-page--login{
    padding: 40px 24px;
  }
.auth-page--login .login-layout{
    width: 540px;
    padding: 40px 44px;
  }
.auth-page--login .login-brand{
    padding-bottom: 28px;
  }
.auth-page--login .login-brand img{
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
  }
.auth-page--login .login-brand h1{
    font-size: 42px;
  }
.auth-page--login .login-brand p{
    font-size: 17px;
  }
.auth-page--login .login-brand span{
    font-size: 14px;
  }
.auth-page--login .login-panel{
    padding: 28px 0 28px;
  }
.auth-page--login .login-heading h2{
    font-size: 25px;
  }
.auth-page--login .login-explanation{
    margin-top: 10px;
    margin-bottom: 26px;

    font-size: 16px;
  }
.auth-page--login #providerLoginButton{
    min-height: 76px;
    padding: 12px 26px;
  }
.auth-page--login #providerLoginButton .provider-login-logo{
    width: 104px;
    max-width: 104px;
  }
.auth-page--login .provider-login-copy strong{
    font-size: 17px;
  }
.auth-page--login .provider-login-copy small{
    font-size: 13px;
  }
.auth-page--login .login-help{
    padding-top: 24px;

    font-size: 14px;
  }
.auth-page--login .login-help strong{
    font-size: 15px;
  }
}
@media (max-width: 420px){.auth-page--login{
    padding: 24px 16px;
  }
.auth-page--login .login-layout{
    padding: 28px 22px;

    border-radius: 14px;
  }
.auth-page--login .login-brand{
    padding-bottom: 22px;
  }
.auth-page--login .login-brand img{
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }
.auth-page--login .login-brand h1{
    font-size: 32px;
  }
.auth-page--login .login-brand p{
    font-size: 14px;
  }
.auth-page--login .login-brand span{
    font-size: 11px;
  }
.auth-page--login .login-panel{
    padding: 22px 0 24px;
  }
.auth-page--login .login-heading h2{
    font-size: 21px;
  }
.auth-page--login .login-explanation{
    margin-bottom: 20px;

    font-size: 13px;
  }
.auth-page--login #providerLoginButton{
    min-height: 68px;

    padding: 10px 16px;

    gap: 14px;

    border-radius: 12px;
  }
.auth-page--login #providerLoginButton .provider-login-logo{
    width: 82px;
    max-width: 82px;
  }
.auth-page--login .provider-login-copy strong{
    font-size: 14px;
  }
.auth-page--login .provider-login-copy small{
    font-size: 11px;
  }
.auth-page--login .login-help{
    padding-top: 18px;

    font-size: 11px;
  }
.auth-page--login .login-help strong{
    font-size: 12px;
  }
.auth-page--login .login-footer{
    padding-top: 16px;

    font-size: 11px;
  }
}
@media (max-width: 350px){.auth-page--login .login-layout{
    padding-left: 18px;
    padding-right: 18px;
  }
.auth-page--login #providerLoginButton{
    padding-left: 12px;
    padding-right: 12px;

    gap: 10px;
  }
.auth-page--login #providerLoginButton .provider-login-logo{
    width: 72px;
    max-width: 72px;
  }
.auth-page--login .provider-login-copy strong{
    font-size: 13px;
  }
.auth-page--login .provider-login-copy small{
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce){.auth-page--login #providerLoginButton{
    transition: none;
  }
.auth-page--login #providerLoginButton:hover{
    transform: none;
  }
}
.auth-page--login .login-help{
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-top: 26px;
  padding: 14px 16px;

  background: #f7fbff;
  border: 1px solid #d7e6f3;
  border-radius: 12px;

  text-align: left;
}
.auth-page--login .login-help-icon{
  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  background: #eaf5ff;
  color: #0865bb;

  border-radius: 10px;
}
.auth-page--login .login-help-icon svg{
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--login .login-help-body{
  min-width: 0;
  flex: 1;
}
.auth-page--login .login-help-title{
  margin-bottom: 2px;

  color: #193754;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}
.auth-page--login .login-help-text{
  color: #718196;

  font-size: 11.5px;
  line-height: 1.55;
}
.auth-page--login .login-help-text strong{
  color: #50657a;
  font-weight: 600;
}
.auth-page--login .login-help-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 7px;

  font-size: 11.5px;
  font-weight: 600;
}
.auth-page--login .help-phone{
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: #0759a6;
}
.auth-page--login .help-phone svg{
  width: 14px;
  height: 14px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--login .help-divider{
  width: 1px;
  height: 12px;

  background: #cfdae4;
}
.auth-page--login .help-time{
  color: #168457;
}
.auth-page--login .login-fallback{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #dce5ea;
  text-align: center;
  color: #526477;
}
.auth-page--login .login-fallback p{
  margin: 0 0 10px;
  font-size: 0.9rem;
}
.auth-page--login #thaidFallbackButton{
  width: 100%;
  min-height: 72px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1.5px solid #1e448e;
  border-radius: 14px;
  color: #1e448e;
  background: #ffffff;
  box-shadow: none;
  transition: background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s ease;
}
.auth-page--login #thaidFallbackButton:hover{
  background: #f6f8fd;
  border-color: #183a79;
  box-shadow: 0 8px 20px rgba(30, 68, 142, 0.1);
  transform: translateY(-1px);
}
.auth-page--login #thaidFallbackButton:focus-visible{
  outline: 3px solid rgba(30, 68, 142, 0.18);
  outline-offset: 3px;
}
.auth-page--login #thaidFallbackButton:active{
  transform: translateY(0);
}
.auth-page--login #thaidFallbackButton .thaid-login-logo{
  display: block;
  width: 72px;
  max-width: 72px;
  height: 46px;
  margin: 0;
  object-fit: contain;
  flex: 0 0 auto;
}
.auth-page--login .thaid-login-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.25;
}
.auth-page--login .thaid-login-copy strong{
  color: #1e448e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.auth-page--login .thaid-login-copy small{
  margin-top: 2px;
  color: #1e448e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.auth-page--login .login-fallback > small{
  display: block;
  margin-top: 9px;
  line-height: 1.4;
}
@media (min-width: 1200px){.auth-page--login #thaidFallbackButton{ min-height: 76px; padding: 12px 26px; }
.auth-page--login #thaidFallbackButton .thaid-login-logo{ width: 78px; max-width: 78px; }
.auth-page--login .thaid-login-copy strong{ font-size: 17px; }
.auth-page--login .thaid-login-copy small{ font-size: 13px; }
}
@media (max-width: 420px){.auth-page--login #thaidFallbackButton{ min-height: 68px; padding: 10px 16px; gap: 14px; border-radius: 12px; }
.auth-page--login #thaidFallbackButton .thaid-login-logo{ width: 62px; max-width: 62px; height: 40px; }
.auth-page--login .thaid-login-copy strong{ font-size: 14px; }
.auth-page--login .thaid-login-copy small{ font-size: 11px; }
}
@media (max-width: 350px){.auth-page--login #thaidFallbackButton{ padding-left: 12px; padding-right: 12px; gap: 10px; }
.auth-page--login #thaidFallbackButton .thaid-login-logo{ width: 56px; max-width: 56px; }
.auth-page--login .thaid-login-copy strong{ font-size: 13px; }
.auth-page--login .thaid-login-copy small{ font-size: 10px; }
}
@media (prefers-reduced-motion: reduce){.auth-page--login #thaidFallbackButton{ transition: none; }
.auth-page--login #thaidFallbackButton:hover{ transform: none; }
}
.auth-page--roles *{
  box-sizing: border-box;
}
.auth-page--roles{
  --blue: #0759a6;
  --blue-dark: #064985;
  --blue-deep: #0c2d55;
  --blue-soft: #eef6fd;

  --provider: #16a563;
  --provider-dark: #087b48;
  --provider-soft: #edf9f2;

  --text: #14243a;
  --secondary: #5f7084;
  --muted: #8a98a9;

  --border: #d7e2ed;
  --surface: #ffffff;

  --background: #f3f7fb;

  --danger: #b02a37;
  --danger-soft: #fff0f1;
}
.auth-page--roles, .auth-page--roles{
  margin: 0;
  min-height: 100%;
}
.auth-page--roles{
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(7, 89, 166, 0.09),
      transparent 520px
    ),
    #f3f7fb;

  color: var(--text);

  font-family: "Sarabun", Tahoma, sans-serif;

  -webkit-font-smoothing: antialiased;
}
.auth-page--roles button{
  font: inherit;
}
.auth-page--roles svg{
  display: block;
}
.auth-page--roles .app-header{
  color: #fff;

  background: linear-gradient(135deg, #0759a6 0%, #0871c7 100%);

  box-shadow: 0 3px 16px rgba(5, 58, 111, 0.13);
}
.auth-page--roles .app-header-inner{
  width: min(1180px, calc(100% - 48px));
  min-height: 78px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}
.auth-page--roles .brand{
  display: flex;
  align-items: center;

  gap: 14px;
}
.auth-page--roles .brand-icon{
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  background: #ffffff;

  border-radius: 14px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.09);
}
.auth-page--roles .brand-icon img{
  display: block;

  width: 42px;
  height: 42px;

  object-fit: contain;
}
.auth-page--roles .brand-icon svg{
  width: 28px;
  height: 28px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .brand-name{
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
}
.auth-page--roles .brand-subtitle{
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 13px;
}
.auth-page--roles .header-hospital{
  color: rgba(255, 255, 255, 0.96);

  font-size: 16px;
  font-weight: 600;
}
.auth-page--roles .role-page{
  width: min(1040px, calc(100% - 40px));

  margin: 40px auto 48px;
}
.auth-page--roles .role-hero{
  display: flex;
  align-items: center;

  gap: 20px;

  margin-bottom: 26px;
  padding: 4px 4px 0;
}
.auth-page--roles .role-hero-icon{
  width: 74px;
  height: 74px;

  flex: 0 0 74px;

  display: grid;
  place-items: center;

  border-radius: 22px;

  color: var(--blue);

  background: linear-gradient(135deg, #e9f4ff 0%, #eefaf3 100%);

  box-shadow: 0 12px 30px rgba(7, 89, 166, 0.08);
}
.auth-page--roles .role-hero-icon svg{
  width: 36px;
  height: 36px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .role-kicker{
  display: block;

  margin-bottom: 4px;

  color: var(--provider-dark);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.09em;
}
.auth-page--roles .role-hero h1{
  margin: 0;

  color: var(--blue-deep);

  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.025em;
}
.auth-page--roles .role-hero p{
  margin: 7px 0 0;

  color: var(--secondary);

  font-size: 17px;
  line-height: 1.65;
}
.auth-page--roles .identity-card{
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  margin-bottom: 34px;
  padding: 24px 28px;

  overflow: hidden;

  background: linear-gradient(120deg, #ffffff 0%, #ffffff 70%, #f0fbf5 100%);

  border: 1px solid #cde2d6;
  border-radius: 20px;

  box-shadow: 0 12px 32px rgba(19, 48, 77, 0.055);
}
.auth-page--roles .identity-card::before{
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 5px;

  background: linear-gradient(180deg, #1fba72, #0c8750);
}
.auth-page--roles .identity-left{
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 20px;
}
.auth-page--roles .identity-avatar{
  width: 70px;
  height: 70px;

  flex: 0 0 70px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: linear-gradient(135deg, #0759a6, #0a78d3);

  color: #fff;

  font-size: 27px;
  font-weight: 700;

  box-shadow: 0 10px 24px rgba(7, 89, 166, 0.2);
}
.auth-page--roles .identity-info{
  min-width: 0;
}
.auth-page--roles .provider-verified{
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 7px;
  padding: 6px 12px;

  border-radius: 999px;

  background: var(--provider-soft);
  color: var(--provider-dark);

  font-size: 13px;
  font-weight: 700;
}
.auth-page--roles .provider-verified img{
  width: 72px;
  height: auto;

  display: block;
}
.auth-page--roles .provider-check{
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--provider);
  color: #fff;
}
.auth-page--roles .provider-check svg{
  width: 14px;
  height: 14px;

  fill: none;
  stroke: currentColor;

  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .identity-info h2{
  margin: 0;

  color: #102840;

  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}
.auth-page--roles .identity-info p{
  margin: 4px 0 0;

  color: var(--secondary);

  font-size: 14px;
}
.auth-page--roles .identity-provider{
  flex: 0 0 auto;

  min-width: 210px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding-left: 24px;

  border-left: 1px solid #dbe7e1;
}
.auth-page--roles .identity-provider-icon{
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background: #fff;
  color: var(--provider);

  box-shadow: 0 5px 14px rgba(20, 120, 75, 0.08);
}
.auth-page--roles .identity-provider-icon svg{
  width: 27px;
  height: 27px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .identity-provider strong, .auth-page--roles .identity-provider span{
  display: block;
}
.auth-page--roles .identity-provider strong{
  color: #375068;

  font-size: 15px;
}
.auth-page--roles .identity-provider span{
  margin-top: 2px;

  color: var(--muted);

  font-size: 12px;
}
.auth-page--roles .role-section{
  margin-top: 30px;
}
.auth-page--roles .role-section-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 22px;

  margin-bottom: 14px;
}
.auth-page--roles .role-section-title{
  display: flex;
  align-items: center;

  gap: 13px;
}
.auth-page--roles .section-icon{
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  color: var(--blue);

  background: var(--blue-soft);
}
.auth-page--roles .section-icon.muted{
  color: #7b8795;

  background: #e9edf2;
}
.auth-page--roles .section-icon svg{
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .role-section-heading h2{
  margin: 0;

  color: var(--blue-deep);

  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
}
.auth-page--roles .role-section-heading p{
  margin: 3px 0 0;

  color: var(--secondary);

  font-size: 13px;
}
.auth-page--roles .count-badge{
  min-width: 76px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 0 14px;

  border-radius: 999px;

  background: var(--blue-soft);
  color: var(--blue);

  font-size: 17px;
  font-weight: 700;
}
.auth-page--roles .count-badge small{
  font-size: 11px;
  font-weight: 600;
}
.auth-page--roles .count-badge.muted{
  background: #e9edf2;
  color: #687586;
}
.auth-page--roles .role-list{
  display: grid;

  gap: 14px;
}
.auth-page--roles .role-card{
  position: relative;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 22px;

  min-height: 140px;
  padding: 22px 22px;

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: 18px;

  box-shadow: 0 8px 26px rgba(20, 48, 76, 0.05);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.auth-page--roles .role-card.allowed{
  border-left: 5px solid var(--blue);
}
.auth-page--roles .role-card.allowed::before{
  content: "";

  position: absolute;

  left: -5px;
  bottom: 0;

  width: 5px;
  height: 45%;

  background: var(--provider);
}
.auth-page--roles .role-card.allowed:hover{
  transform: translateY(-2px);

  border-color: #b8cee3;

  box-shadow: 0 14px 34px rgba(19, 57, 94, 0.09);
}
.auth-page--roles .role-card.denied{
  background: #fafbfc;
  box-shadow: none;
}
.auth-page--roles .role-card-icon{
  width: 68px;
  height: 68px;

  display: grid;
  place-items: center;

  border-radius: 18px;

  color: var(--blue);

  background: linear-gradient(135deg, #eaf4ff 0%, #edf9f2 100%);
}
.auth-page--roles .role-card-icon.muted{
  color: #7c8896;

  background: #e9edf1;
}
.auth-page--roles .role-card-icon svg{
  width: 34px;
  height: 34px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .role-card-content{
  min-width: 0;
}
.auth-page--roles .role-status{
  display: inline-flex;

  margin-bottom: 7px;
  padding: 4px 10px;

  border-radius: 999px;

  background: var(--provider-soft);
  color: var(--provider-dark);

  font-size: 11px;
  font-weight: 700;
}
.auth-page--roles .role-card-content h3{
  margin: 0;

  color: #102840;

  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;

  white-space: normal;
}
.auth-page--roles .role-position{
  margin-top: 3px;

  color: var(--blue);

  font-size: 18px;
  font-weight: 700;
}
.auth-page--roles .role-position.muted{
  color: #687586;
}
.auth-page--roles .role-meta{
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 10px;

  color: var(--secondary);

  font-size: 13px;
}
.auth-page--roles .role-meta strong{
  color: #354b61;

  font-weight: 700;
}
.auth-page--roles .role-meta-icon{
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  color: #8293a4;
}
.auth-page--roles .role-meta-icon svg{
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .role-action{
  margin: 0;
}
.auth-page--roles .btn-enter{
  min-width: 155px;
  height: 54px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 0 22px;

  border: 0;
  border-radius: 12px;

  background: linear-gradient(135deg, #0759a6 0%, #0872c8 100%);

  color: #fff;

  cursor: pointer;

  font-size: 16px;
  font-weight: 700;

  box-shadow: 0 9px 20px rgba(7, 89, 166, 0.2);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.auth-page--roles .btn-enter:hover{
  transform: translateY(-1px);

  background: linear-gradient(135deg, #064985, #075eac);

  box-shadow: 0 13px 26px rgba(7, 89, 166, 0.25);
}
.auth-page--roles .btn-enter:active{
  transform: translateY(0);
}
.auth-page--roles .btn-enter:focus-visible{
  outline: 3px solid rgba(7, 89, 166, 0.22);
  outline-offset: 3px;
}
.auth-page--roles .btn-enter svg{
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-page--roles .role-denied{
  min-width: 144px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 0 14px;

  border-radius: 10px;

  background: #edf0f3;
  color: #6d7988;

  font-size: 13px;
  font-weight: 600;
}
.auth-page--roles .role-denied svg{
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
}
.auth-page--roles .alert{
  display: flex;
  align-items: flex-start;

  gap: 9px;

  margin-bottom: 18px;
  padding: 13px 15px;

  border-radius: 11px;

  font-size: 14px;
}
.auth-page--roles .alert svg{
  width: 19px;
  height: 19px;

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;
}
.auth-page--roles .alert-error{
  color: var(--danger);

  background: var(--danger-soft);

  border: 1px solid #efc9ce;
}
.auth-page--roles .empty-state{
  padding: 54px 28px;

  text-align: center;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: 18px;
}
.auth-page--roles .empty-icon{
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  margin: 0 auto 15px;

  border-radius: 18px;

  color: #68788b;
  background: #edf2f7;
}
.auth-page--roles .empty-icon svg{
  width: 32px;
  height: 32px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
}
.auth-page--roles .empty-state h2{
  margin: 0;

  font-size: 21px;
}
.auth-page--roles .empty-state p{
  max-width: 520px;

  margin: 7px auto 0;

  color: var(--secondary);

  font-size: 14px;
  line-height: 1.65;
}
.auth-page--roles .page-footer{
  margin-top: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding-top: 22px;

  border-top: 1px solid #dfe7ef;

  color: var(--muted);

  font-size: 12px;
}
.auth-page--roles .footer-security{
  display: flex;
  align-items: center;

  gap: 8px;
}
.auth-page--roles .footer-security svg{
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
}
.auth-page--roles .footer-brand{
  white-space: nowrap;
}
@media (max-width: 820px){.auth-page--roles .app-header-inner{
    width: calc(100% - 30px);
  }
.auth-page--roles .header-hospital{
    display: none;
  }
.auth-page--roles .role-page{
    width: calc(100% - 26px);

    margin-top: 30px;
  }
.auth-page--roles .role-hero h1{
    font-size: 32px;
  }
.auth-page--roles .identity-provider{
    display: none;
  }
.auth-page--roles .role-card{
    grid-template-columns: auto minmax(0, 1fr);

    gap: 16px;
  }
.auth-page--roles .role-action, .auth-page--roles .role-denied{
    grid-column: 1 / -1;
  }
.auth-page--roles .btn-enter, .auth-page--roles .role-denied{
    width: 100%;
  }
}
@media (max-width: 560px){.auth-page--roles .app-header-inner{
    width: calc(100% - 22px);

    min-height: 66px;
  }
.auth-page--roles .brand-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
.auth-page--roles .brand-icon img{
    width: 36px;
    height: 36px;
  }
.auth-page--roles .brand-name{
    font-size: 18px;
  }
.auth-page--roles .brand-subtitle{
    display: none;
  }
.auth-page--roles .role-page{
    width: calc(100% - 20px);

    margin-top: 24px;
  }
.auth-page--roles .role-hero{
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 22px;
  }
.auth-page--roles .role-hero-icon{
    width: 56px;
    height: 56px;

    flex-basis: 56px;

    border-radius: 17px;
  }
.auth-page--roles .role-hero-icon svg{
    width: 29px;
    height: 29px;
  }
.auth-page--roles .role-kicker{
    display: none;
  }
.auth-page--roles .role-hero h1{
    font-size: 26px;
  }
.auth-page--roles .role-hero p{
    font-size: 14px;
  }
.auth-page--roles .identity-card{
    padding: 18px 16px;

    border-radius: 16px;
  }
.auth-page--roles .identity-left{
    align-items: flex-start;

    gap: 13px;
  }
.auth-page--roles .identity-avatar{
    width: 52px;
    height: 52px;

    flex-basis: 52px;

    font-size: 20px;
  }
.auth-page--roles .provider-verified{
    padding: 4px 8px;

    font-size: 10px;
  }
.auth-page--roles .provider-verified img{
    width: 52px;
  }
.auth-page--roles .provider-check{
    width: 18px;
    height: 18px;
  }
.auth-page--roles .identity-info h2{
    font-size: 19px;
  }
.auth-page--roles .identity-info p{
    display: none;
  }
.auth-page--roles .role-section-heading{
    align-items: flex-start;
  }
.auth-page--roles .section-icon{
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }
.auth-page--roles .role-section-heading h2{
    font-size: 21px;
  }
.auth-page--roles .role-section-heading p{
    font-size: 12px;
  }
.auth-page--roles .count-badge{
    min-width: 38px;
    height: 38px;

    padding: 0 10px;
  }
.auth-page--roles .count-badge small{
    display: none;
  }
.auth-page--roles .role-card{
    min-height: auto;

    padding: 18px 15px;

    border-radius: 16px;
  }
.auth-page--roles .role-card-icon{
    width: 54px;
    height: 54px;

    border-radius: 15px;
  }
.auth-page--roles .role-card-icon svg{
    width: 29px;
    height: 29px;
  }
.auth-page--roles .role-card-content h3{
    font-size: 19px;
  }
.auth-page--roles .role-position{
    font-size: 16px;
  }
.auth-page--roles .role-status{
    font-size: 10px;
  }
.auth-page--roles .btn-enter{
    height: 50px;

    font-size: 15px;
  }
.auth-page--roles .page-footer{
    flex-direction: column;

    align-items: center;

    gap: 8px;

    text-align: center;
  }
.auth-page--roles .footer-security{
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce){.auth-page--roles .role-card, .auth-page--roles .btn-enter{
    transition: none;
  }
.auth-page--roles .role-card.allowed:hover, .auth-page--roles .btn-enter:hover{
    transform: none;
  }
}

/* DataS-owned adaptations: safe states, local development, server capability badges and readable supporting text. */
.auth-page { box-sizing: border-box; font-size: 16px; line-height: 1.6; }
.auth-page a { text-underline-offset: 4px; }
.auth-page a:focus-visible, .auth-page button:focus-visible, .auth-page input:focus-visible { outline: 3px solid #0759a6; outline-offset: 4px; }
.auth-page .auth-feedback, .auth-page .auth-denied { padding: 16px; border: 1px solid #d7e2ed; border-radius: 12px; background: #eef6fd; color: #14243a; text-align: left; overflow-wrap: anywhere; }
.auth-page .auth-feedback { margin: 0 0 20px; }
.auth-page .auth-development { margin-top: 20px; padding-top: 16px; border-top: 1px solid #d9e3ef; color: #526477; font-size: 15px; }
.auth-page .auth-development p { margin: 0; }
.auth-page .auth-secondary { display: inline-flex; align-items: center; min-height: 44px; color: #0759a6; }
.auth-page .auth-capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.auth-page .auth-capability { display: inline-flex; padding: 3px 10px; border-radius: 999px; color: #0759a6; background: #eef6fd; font-size: 14px; font-weight: 600; }
.auth-page .auth-hospital { overflow-wrap: anywhere; }
.auth-page .auth-logout { margin-top: 24px; }
.auth-page .auth-logout button, .auth-page .auth-message-action { padding: 10px 16px; min-height: 44px; border: 1px solid #b8cee3; border-radius: 8px; background: white; color: #0759a6; font: inherit; text-decoration: none; }
.auth-page .auth-form { display: grid; gap: 16px; text-align: left; }
.auth-page .auth-form label { display: grid; gap: 6px; }
.auth-page .auth-form input { width: 100%; box-sizing: border-box; min-height: 48px; font: inherit; padding: 8px 12px; border: 1px solid #b8cee3; border-radius: 8px; }
.auth-page .auth-form button { min-height: 48px; font: inherit; }
.auth-page--login .login-explanation, .auth-page--login .login-brand p { font-size: 16px; }
.auth-page--login .login-brand .auth-brand-description { font-size: 16px; }
.auth-page--login .provider-login-copy strong { font-size: 16px; }
.auth-page--login .provider-login-copy small, .auth-page--login .login-help-title, .auth-page--login .login-help-text, .auth-page--login .login-help-meta, .auth-page--login .login-help strong, .auth-page--login .login-footer { font-size: 14px; }
.auth-page--login .login-help-text { color: #526477; }
.auth-page--roles .role-section-heading p, .auth-page--roles .role-status, .auth-page--roles .role-meta, .auth-page--roles .count-badge small, .auth-page--roles .footer-security, .auth-page--roles .footer-brand, .auth-page--roles .brand-subtitle { font-size: 14px; }
.auth-page--roles .role-card.allowed:focus-within { outline: 2px solid #0759a6; outline-offset: 3px; }

/* Active LabResultNew DevSession presentation, same local-only DataS gates. */
.auth-page--dev *{
            box-sizing: border-box;
        }
.auth-page--dev{
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 24px;
            font-family: "Sarabun", Tahoma, sans-serif;
            background: #f2f5f9;
            color: #172033;
        }
.auth-page--dev .card{
            width: min(620px, 100%);
            background: #fff;
            border: 1px solid #dce4ed;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(20, 45, 75, .07);
        }
.auth-page--dev .header{
            padding: 20px 22px;
            background: #0759a6;
            color: #fff;
        }
.auth-page--dev .header strong{
            display: block;
            font-size: 20px;
        }
.auth-page--dev .header span{
            display: block;
            margin-top: 3px;
            font-size: 13px;
            opacity: .82;
        }
.auth-page--dev .dev-badge{
            display: inline-block;
            margin-bottom: 10px;
            padding: 4px 9px;
            background: #fff3cd;
            color: #765700;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
        }
.auth-page--dev .body{
            padding: 22px;
        }
.auth-page--dev .description{
            margin: 0 0 20px;
            color: #657386;
            line-height: 1.65;
            font-size: 14px;
        }
.auth-page--dev .status{
            margin-bottom: 20px;
            padding: 14px 16px;
            border-radius: 10px;
            background: #f4f7fa;
            border: 1px solid #e0e6ed;
        }
.auth-page--dev .status.active{
            background: #eaf7ef;
            border-color: #c9e6d3;
        }
.auth-page--dev .status strong{
            display: block;
            font-size: 14px;
        }
.auth-page--dev .status span{
            display: block;
            margin-top: 4px;
            color: #687586;
            font-size: 13px;
        }
.auth-page--dev .actions{
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
.auth-page--dev button, .auth-page--dev .btn-link{
            min-height: 44px;
            padding: 10px 16px;
            border-radius: 9px;
            font: inherit;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
        }
.auth-page--dev .btn-primary{
            border: 0;
            background: #0759a6;
            color: #fff;
        }
.auth-page--dev .btn-primary:hover{
            background: #064985;
        }
.auth-page--dev .btn-secondary{
            border: 1px solid #ced7e1;
            background: #fff;
            color: #334155;
        }
.auth-page--dev .btn-link{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ced7e1;
            color: #334155;
            background: #fff;
        }
.auth-page--dev .message{
            margin-bottom: 16px;
            padding: 11px 13px;
            border-radius: 8px;
            background: #eaf7ef;
            color: #25663d;
            font-size: 13px;
        }
.auth-page--dev .note{
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #e6ebf0;
            color: #8994a3;
            font-size: 11px;
            line-height: 1.6;
        }
.auth-page--dev code{
            padding: 2px 5px;
            background: #edf1f5;
            border-radius: 4px;
        }
@media (max-width: 520px){.auth-page--dev .actions{
                display: grid;
            }
.auth-page--dev button, .auth-page--dev .btn-link{
                width: 100%;
            }
}

.auth-page--dev { font-family: "Sarabun", Tahoma, sans-serif; font-size: 16px; }
.auth-page--dev .description, .auth-page--dev .header span, .auth-page--dev .status strong, .auth-page--dev .status span, .auth-page--dev .dev-badge { font-size: 14px; }
.auth-page--dev h1 { font-size: 20px; margin: 0; }
.auth-page--dev .auth-form { gap: 12px; }
/* Active SelectRole presentation parity; every adaptation stays on this page. */
.auth-page--roles { line-height: normal; }
.auth-page--roles .auth-dev-identity { border-color: #cbdfee; background: linear-gradient(120deg, #fff 0%, #fff 70%, #eef6fd 100%); }
.auth-page--roles .auth-dev-identity::before { background: linear-gradient(180deg, #0a78d3, #0759a6); }
.auth-page--roles .auth-dev-identity .provider-verified { color: #0759a6; background: #eef6fd; }
.auth-page--roles .identity-dev-label { font-weight: 700; }
.auth-page--roles .identity-provider span { color: var(--secondary); }
.auth-page--roles .identity-info h2,
.auth-page--roles .auth-position,
.auth-page--roles .role-hero-copy,
.auth-page--roles .role-section-title > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.auth-page--roles .provider-verified { max-width: 100%; flex-wrap: wrap; }
.auth-page--roles .provider-verified img,
.auth-page--roles .provider-check { flex-shrink: 0; }
.auth-page--roles .role-section-title { min-width: 0; }
.auth-page--roles .count-badge { flex-shrink: 0; }
.auth-page--roles .empty-state.auth-denied { padding: 54px 28px; text-align: center; background: #fff; border-radius: 18px; }
.auth-page--roles .footer-security, .auth-page--roles .footer-brand { color: #526477; }
.auth-page--login .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; border: 1px solid #b8cee3; border-radius: 9px; background: white; color: #0759a6; text-decoration: none; }
/* Secondary manual identity action; absent markup leaves the original login geometry intact. */
.auth-page--login .auth-login-separator { margin: 18px 0 12px; color: #526477; font-size: 16px; }
.auth-page--login #thaidFallbackButton { width: 100%; min-height: 64px; padding: 12px 16px; gap: 16px; border: 1px solid #1e448e; border-radius: 12px; background: #fff; color: #1e448e; box-shadow: none; text-decoration: none; }
.auth-page--login #thaidFallbackButton:hover { background: #f3f6fa; border-color: #183a79; transform: none; }
.auth-page--login #thaidFallbackButton:focus-visible { outline: 3px solid #1e448e; outline-offset: 3px; }
.auth-page--login .thaid-login-icon { width: 36px; height: 36px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
.auth-page--login .thaid-login-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.auth-page--login .thaid-login-copy strong { font-size: 18px; line-height: 1.4; }
.auth-page--login .thaid-login-copy small { font-size: 14px; line-height: 1.5; }
.auth-page--roles .identity-thaid-label { font-weight: 700; }
@media (max-width: 420px) { .auth-page--login #thaidFallbackButton { padding: 12px; gap: 12px; } .auth-page--login .thaid-login-copy strong { font-size: 16px; } }