:root{
  --login-navy:#06275f;
  --login-navy-2:#0a3f8d;
  --login-blue:#1268ef;
  --login-blue-2:#0555cf;
  --login-sky:#3aa7ff;
  --login-gold:#f7b733;
  --login-ink:#112b4d;
  --login-muted:#718198;
  --login-line:#dce5ef;
  --login-card:#ffffff;
  --login-soft:#f6f9fd;
}
*{box-sizing:border-box}
html,body{min-height:100%}
.bright-login-page{
  min-height:100vh;
  margin:0;
  color:var(--login-ink);
  background:#071f4e;
  overflow-x:hidden;
}
.strms-login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(430px,.82fr);
  background:linear-gradient(120deg,#061d49 0%,#0a3475 48%,#eaf2fb 48.1%,#f5f8fc 100%);
}
.strms-login-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  background-image:url('../img/login-personnel-v22637.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.strms-login-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 16% 14%,rgba(44,142,255,.30),transparent 25%),
    linear-gradient(90deg,rgba(3,26,70,.97) 0%,rgba(5,38,91,.84) 31%,rgba(5,39,91,.28) 65%,rgba(3,29,69,.18) 100%);
}
.strms-login-hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,#000,transparent 70%);
}
.strms-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,18,49,.24),transparent 38%,rgba(1,20,54,.16) 67%,rgba(1,17,47,.66));pointer-events:none}
.strms-hero-brand{
  position:absolute;
  top:clamp(26px,4vw,56px);
  left:clamp(28px,5vw,76px);
  z-index:2;
  display:flex;
  align-items:center;
  gap:16px;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}
.strms-hero-brand img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.strms-hero-brand strong,.strms-hero-brand span{display:block}
.strms-hero-brand strong{font-size:28px;line-height:1.08;font-weight:700}
.strms-hero-brand span{font-size:15px;letter-spacing:.06em;opacity:.88;margin-top:4px}
.strms-hero-copy{
  position:absolute;
  z-index:2;
  top:25%;
  left:clamp(30px,5vw,80px);
  width:min(620px,73%);
  color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.28);
}
.strms-hero-kicker{font-size:21px;font-weight:600;line-height:1.25;opacity:.94}
.strms-hero-copy h1{
  margin:4px 0 0;
  font-family:Arial,"TH Sarabun New Web",sans-serif!important;
  font-size:clamp(82px,9vw,144px);
  line-height:.95;
  letter-spacing:.025em;
  font-style:italic;
  background:linear-gradient(180deg,#f2f8ff 0%,#69b7ff 25%,#1473f2 63%,#0751bf 100%);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:1px rgba(255,255,255,.58);
  filter:drop-shadow(0 9px 12px rgba(0,28,89,.62));
}
.strms-hero-copy p{margin:9px 0 18px;font-size:25px;line-height:1.1;font-weight:600}
.strms-hero-copy p b{color:var(--login-gold);font-weight:700}
.strms-hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.strms-hero-tags span{
  display:inline-flex;
  align-items:center;
  min-height:35px;
  padding:5px 14px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:rgba(3,31,76,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(8px);
  font-size:17px;
}
.strms-hero-foot{
  position:absolute;
  z-index:2;
  left:clamp(30px,5vw,80px);
  bottom:clamp(28px,4vw,54px);
  display:flex;
  flex-wrap:wrap;
  gap:9px 18px;
  color:#eef7ff;
  font-size:17px;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.strms-login-side{
  position:relative;
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:clamp(28px,5vw,70px);
  background:
    radial-gradient(circle at 90% 5%,rgba(39,114,221,.08),transparent 25%),
    linear-gradient(155deg,#f7f9fc,#eef3f9);
}
.strms-login-side:before{
  content:"";
  position:absolute;
  left:-65px;
  top:0;
  bottom:0;
  width:100px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.86));
  filter:blur(8px);
  pointer-events:none;
}
.strms-login-card{
  position:relative;
  width:min(100%,520px);
  padding:clamp(28px,3.2vw,46px);
  border:1px solid rgba(203,215,230,.92);
  border-radius:30px;
  background:rgba(255,255,255,.97);
  box-shadow:0 28px 80px rgba(21,55,98,.16),0 4px 12px rgba(34,67,112,.06);
}
.strms-login-card-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid #e7edf4;
}
.strms-login-card-brand>img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(15,58,112,.12))}
.strms-login-card-title b,.strms-login-card-title span{display:block}
.strms-login-card-title b{font-family:Arial,sans-serif!important;font-size:46px;line-height:1;color:#1250b4;font-style:italic;letter-spacing:.02em}
.strms-login-card-title span{margin-top:5px;color:#415b7b;font-size:17px;line-height:1.18}
.login-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:11px 13px;border:1px solid #f4c6c6;border-radius:12px;background:#fff4f4;color:#a91e1e;font-size:17px}
.login-alert>span{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#d73b3b;color:#fff;font:bold 15px Arial}
.login-copy{text-align:center}
.login-copy .login-welcome{display:inline-block;color:#1459c4;font-size:20px;font-weight:700}
.login-copy h2{margin:2px 0 2px;font-size:37px;line-height:1.15;color:#102e55}
.login-copy p{margin:0 auto 23px;max-width:390px;color:#75849a;font-size:17px;line-height:1.35}
.bright-login-form{display:grid;gap:16px}
.login-field>span{display:block;margin:0 0 6px;color:#344f70;font-size:17px;font-weight:700}
.login-input{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  align-items:center;
  min-height:54px;
  border:1px solid #d6e0eb;
  border-radius:14px;
  background:#fbfdff;
  overflow:hidden;
  transition:border-color .17s ease,box-shadow .17s ease,background .17s ease;
}
.login-input:focus-within{border-color:#76aaf1;background:#fff;box-shadow:0 0 0 4px rgba(18,104,239,.09)}
.login-input-icon{display:grid;place-items:center;height:100%;color:#7e91aa}
.login-input input{
  width:100%;
  height:52px;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#17385f!important;
  box-shadow:none!important;
  margin:0!important;
  padding:0 14px 0 0!important;
  font-size:18px!important;
}
.login-input input::placeholder{color:#a1afbf;opacity:1}
.login-password-input{grid-template-columns:50px minmax(0,1fr) 45px}
.password-toggle{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:10px;background:transparent;color:#8798ac;cursor:pointer;transition:.16s}
.password-toggle:hover,.password-toggle:focus-visible{background:#eef5ff;color:#1a67d8;outline:none}
.password-toggle.is-visible{color:#1765d3;background:#edf5ff}
.login-form-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-2px;color:#75859a;font-size:15px}
.login-form-meta>span{display:inline-flex;align-items:center;gap:5px;color:#56718f}
.login-form-meta small{font-size:14px;color:#8391a3;text-align:right}
.bright-login-button{
  width:100%;
  min-height:56px;
  border:0;
  border-radius:14px;
  margin-top:3px;
  padding:0 18px;
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  color:#fff;
  background:linear-gradient(105deg,#2679f2 0%,#0756cd 100%);
  box-shadow:0 12px 28px rgba(8,83,203,.25);
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  transition:transform .17s ease,box-shadow .17s ease,filter .17s ease;
}
.bright-login-button:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(8,83,203,.30);filter:saturate(1.08)}
.bright-login-button:active{transform:translateY(0)}
.bright-login-button svg{justify-self:start}.button-arrow{justify-self:end;font-family:Arial,sans-serif;font-size:24px}
.login-security-note{display:flex;align-items:center;gap:10px;margin-top:21px;padding:12px 13px;border:1px solid #e0e9f2;border-radius:13px;background:#f8fbfe;color:#536c89}
.security-icon{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:50%;background:#e5f2ff;color:#0c66d8;font:bold 16px Arial}
.login-security-note b,.login-security-note small{display:block}.login-security-note b{font-size:16px}.login-security-note small{margin-top:1px;color:#8795a6;font-size:13px}
.strms-login-footer{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:15px;border-top:1px solid #e8edf3;color:#9aa7b6;font-size:13px}
.system-ready:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#20bf6b;box-shadow:0 0 0 3px rgba(32,191,107,.11)}
@media(max-width:1120px){
  .strms-login-shell{grid-template-columns:minmax(0,1fr) minmax(410px,.82fr)}
  .strms-hero-copy{top:27%;width:74%}
  .strms-hero-copy h1{font-size:clamp(74px,10vw,112px)}
  .strms-hero-brand strong{font-size:24px}
}
@media(max-width:900px){
  .strms-login-shell{display:block;background:#f4f7fb}
  .strms-login-hero{min-height:390px;background-position:center 58%}
  .strms-login-hero:before{background:linear-gradient(90deg,rgba(2,27,72,.90),rgba(3,34,82,.45),rgba(2,27,72,.26))}
  .strms-hero-brand{top:22px;left:24px}.strms-hero-brand img{width:58px;height:58px}.strms-hero-brand strong{font-size:22px}.strms-hero-brand span{font-size:12px}
  .strms-hero-copy{top:auto;left:24px;bottom:72px;width:75%}.strms-hero-kicker{font-size:17px}.strms-hero-copy h1{font-size:78px}.strms-hero-copy p{font-size:19px;margin:5px 0 10px}.strms-hero-tags{display:none}
  .strms-hero-foot{left:24px;bottom:24px;font-size:14px}.strms-hero-foot span:nth-child(n+3){display:none}
  .strms-login-side{min-height:auto;padding:28px 20px 40px}.strms-login-side:before{display:none}.strms-login-card{margin-top:-12px}
}
@media(max-width:560px){
  .strms-login-hero{min-height:310px;background-position:center 55%}
  .strms-hero-brand{left:18px;top:16px;gap:10px}.strms-hero-brand img{width:50px;height:50px}.strms-hero-brand strong{font-size:19px}.strms-hero-brand span{font-size:10px}
  .strms-hero-copy{left:18px;bottom:42px;width:88%}.strms-hero-kicker{font-size:14px}.strms-hero-copy h1{font-size:59px}.strms-hero-copy p{font-size:17px}.strms-hero-foot{display:none}
  .strms-login-side{padding:18px 13px 30px}.strms-login-card{padding:25px 20px;border-radius:22px}
  .strms-login-card-brand{justify-content:flex-start;gap:12px}.strms-login-card-brand>img{width:60px;height:60px}.strms-login-card-title b{font-size:37px}.strms-login-card-title span{font-size:14px}
  .login-copy h2{font-size:32px}.login-copy p{font-size:15px}.login-field>span{font-size:16px}.login-form-meta{display:block}.login-form-meta small{display:block;text-align:left;margin-top:5px}
  .strms-login-footer{font-size:11px}
}
@media(max-height:760px) and (min-width:901px){
  .strms-login-card{padding:28px 34px}.strms-login-card-brand{padding-bottom:15px;margin-bottom:15px}.strms-login-card-brand>img{width:62px;height:62px}.strms-login-card-title b{font-size:39px}.login-copy h2{font-size:31px}.login-copy p{margin-bottom:16px}.bright-login-form{gap:12px}.login-security-note{margin-top:14px}.strms-login-footer{margin-top:18px}.strms-hero-copy{top:22%}
}


/* STRMS 22.26.3.8 — softer personnel/dashboard background + bright seamless login */
.strms-login-shell{
  background:linear-gradient(90deg,#eaf4ff 0%,#f7fbff 58%,#ffffff 100%);
}
.strms-login-hero{
  background-color:#cfe4fa;
  background-blend-mode:normal;
}
.strms-login-hero:before{
  z-index:0;
  background:
    linear-gradient(90deg,rgba(9,55,117,.56) 0%,rgba(18,89,167,.34) 35%,rgba(222,239,255,.22) 68%,rgba(255,255,255,.70) 96%,rgba(255,255,255,.96) 100%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(218,237,255,.22));
}
.strms-login-hero:after{
  z-index:0;
  background:
    linear-gradient(90deg,transparent 0%,transparent 72%,rgba(255,255,255,.28) 86%,rgba(255,255,255,.88) 100%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;
  mask-image:none;
}
.strms-hero-shade{
  z-index:1;
  background:linear-gradient(180deg,rgba(4,30,72,.08),rgba(255,255,255,.02) 46%,rgba(6,39,88,.20));
}
.strms-hero-brand,.strms-hero-copy,.strms-hero-foot{z-index:2}
.strms-login-side{
  border-left:1px solid rgba(199,216,235,.62);
  background:
    linear-gradient(90deg,rgba(255,255,255,.86) 0%,#ffffff 11%,#ffffff 100%);
  box-shadow:-16px 0 38px rgba(255,255,255,.62);
}
.strms-login-side:before{
  left:-92px;
  width:120px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.74) 56%,rgba(255,255,255,.98));
  filter:blur(12px);
}
.strms-login-card{
  border:1px solid rgba(204,218,234,.68);
  background:rgba(255,255,255,.995);
  box-shadow:0 24px 70px rgba(37,75,120,.11),0 2px 8px rgba(36,72,114,.05);
}
.login-input{background:#fff;border-color:#dce7f2}
.login-input:focus-within{background:#fff}
@media(max-width:900px){
  .strms-login-hero:before{background:linear-gradient(180deg,rgba(7,49,110,.44),rgba(219,238,255,.18) 62%,rgba(255,255,255,.65) 100%)}
  .strms-login-side{border-left:0;border-top:1px solid rgba(205,219,235,.7);box-shadow:0 -12px 30px rgba(255,255,255,.62)}
}