/* A small, isolated member sign-in layout. Colors come from Admin → Theme. */
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%}
body.auth-clean{margin:0;min-height:100vh;background:#f7f5f1;color:#33302d;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.auth-container{width:min(100% - 32px,448px);min-height:100vh;margin:auto;display:flex;align-items:center;justify-content:center;padding:30px 0}
.auth-panel{width:100%;background:#fff;border:1px solid #e5ded5;border-radius:22px;box-shadow:0 18px 48px rgba(42,38,34,.08);overflow:hidden}
.auth-panel::before{content:"";display:block;height:5px;background:var(--brand,#535353)}
.auth-inner{padding:30px 32px 26px}
.auth-brand{display:flex;align-items:center;gap:11px;min-height:40px;color:var(--brand-dark,#414141);font-size:15px;font-weight:740;overflow-wrap:anywhere}
.auth-brand-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--brand,#535353);color:#fff;border-radius:11px;font-size:18px}
.auth-brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.auth-banner{display:block;width:100%;height:auto;max-height:190px;object-fit:contain;margin:22px 0 3px;border-radius:12px;background:#f7f5f1}
.auth-intro{margin:28px 0 24px}
.auth-intro h1{font-size:26px;line-height:1.2;font-weight:750;letter-spacing:-.035em;margin:0;color:#33302d}
.auth-intro p{font-size:13px;line-height:1.5;color:#767676;margin:8px 0 0}
.auth-error{padding:11px 12px;border:1px solid #f0c7c7;border-radius:10px;background:#fff6f5;color:#983a37;font-size:13px;line-height:1.45;margin:0 0 18px}
.auth-form{display:grid;gap:17px}
.auth-field{display:grid;gap:7px}
.auth-field>label{font-size:13px;font-weight:620;color:#3f3b37}
.auth-control{height:48px;width:100%;display:flex;align-items:center;background:#fff;border:1px solid #e5ded5;border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.auth-control:focus-within{border-color:var(--brand,#535353);box-shadow:0 0 0 3px var(--brand-soft,#e9e1d5)}
.auth-control input{display:block;min-width:0;width:100%;height:100%;padding:0 13px;border:0;outline:0;background:transparent;color:#252525;font-size:15px}
.auth-control input::placeholder{color:#aaa9a5}
.auth-prefix{height:24px;display:grid;place-items:center;padding:0 12px;color:#5e5e5e;border-right:1px solid #e5e4e1;font-size:14px;white-space:nowrap}
.auth-toggle{flex:none;width:46px;height:46px;border:0;background:transparent;color:#6b6b6b;display:grid;place-items:center;font-size:18px}
.auth-toggle:focus-visible,.auth-submit:focus-visible,.auth-bottom a:focus-visible,.auth-small-link:focus-visible{outline:3px solid var(--brand,#535353);outline-offset:2px}
.auth-helper{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-2px}
.auth-remember{display:inline-flex;align-items:center;gap:9px;color:#555;font-size:13px;cursor:pointer}
.auth-remember input{width:16px;height:16px;margin:0;accent-color:var(--brand,#535353)}
.auth-small-link{font-size:12px;color:var(--brand-dark,#414141);text-decoration:none;font-weight:620}
.auth-small-link:hover,.auth-bottom a:hover{text-decoration:underline;color:var(--brand,#535353)}
.auth-submit{width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;border:0;border-radius:10px;background:var(--brand,#535353);color:#fff;font-size:15px;font-weight:680;cursor:pointer;transition:filter .15s,transform .15s}
.auth-submit:hover{filter:brightness(.92)}.auth-submit:active{transform:scale(.99)}
.auth-bottom{border-top:1px solid #e5ded5;padding:18px 22px 20px;text-align:center;font-size:13px;color:#6c6c6c}
.auth-bottom a{color:var(--brand-dark,#414141);font-weight:690;text-decoration:none}
.auth-app{display:inline-block;margin-top:12px;color:var(--brand-dark,#414141);font-size:12px;text-decoration:none}
.auth-app:hover{text-decoration:underline}
.feedback-icon{width:58px;height:58px;margin:auto;display:grid;place-items:center;border-radius:17px;font-size:25px;background:#eff3ef;color:#257143}.feedback-icon.is-error{background:#fff0ee;color:#ab4239}
@media(max-width:520px){body.auth-clean{background:#fff}.auth-container{width:100%;min-height:100dvh;align-items:flex-start;padding:0}.auth-panel{border:0;border-radius:0;box-shadow:none}.auth-inner{padding:28px 22px 22px}.auth-bottom{padding-bottom:max(22px,env(safe-area-inset-bottom))}.auth-banner{max-height:145px}.auth-intro{margin:27px 0 23px}}
@media(max-width:370px){.auth-inner{padding:25px 17px}.auth-intro h1{font-size:24px}.auth-form{gap:15px}}

/* Auth feedback uses the same premium dialog treatment as the member pages. */
.modal-content{border:1px solid #e5ded5!important;border-radius:22px!important;background:linear-gradient(145deg,#fff,#faf8f5)!important;box-shadow:0 24px 70px rgba(28,27,26,.2)!important}
.modal-backdrop.show{opacity:.56}
.premium-confirm-modal .modal-dialog{max-width:420px}
.premium-confirm-modal .modal-body{padding:28px 24px}
.premium-confirm-icon{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 15px;border-radius:16px;background:var(--brand-soft,#e9e1d5);color:var(--brand-dark,#414141);font-size:24px}
.auth-clean .btn-dark{background:var(--brand,#535353);border-color:var(--brand-dark,#414141)}


/* Final premium auth polish */
body.auth-clean{background:radial-gradient(circle at 10% 0%,#f2e5d8 0,#f8f4ef 34%,#f5f1ec 100%);}
.auth-panel{border-color:#dfcfc0;box-shadow:0 24px 70px rgba(74,46,31,.12);}
.auth-panel::before{height:6px;background:linear-gradient(90deg,var(--brand-dark,#5A3A29),var(--brand,#8B5E3C),#b88965);}
.auth-brand{color:var(--brand-dark,#5A3A29);}
.auth-brand-icon{background:linear-gradient(145deg,var(--brand-dark,#5A3A29),var(--brand,#8B5E3C));box-shadow:0 8px 20px rgba(90,58,41,.18);}
.auth-control{border-color:#ddcec0;background:#fffdfa;box-shadow:0 3px 12px rgba(74,46,31,.035);}
.auth-control:focus-within{border-color:var(--brand,#8B5E3C);box-shadow:0 0 0 4px var(--brand-soft,#efe2d5);}
.auth-submit{background:linear-gradient(135deg,var(--brand-dark,#5A3A29),var(--brand,#8B5E3C));box-shadow:0 10px 24px rgba(90,58,41,.18);}
.auth-remember{color:#5c5149;font-size:13px;min-height:28px;}
.auth-remember input{width:18px;height:18px;}
.auth-error{border-color:#e9c8c2;background:#fff8f6;color:#8d3f35;}
@media(max-width:520px){body.auth-clean{background:#fbf8f5}.auth-inner{padding-top:30px}.auth-panel{min-height:100dvh}.auth-control input{font-size:16px}.auth-submit{min-height:52px}}
.auth-submit.is-loading{opacity:.9;cursor:wait;transform:none!important}.auth-submit:disabled{pointer-events:none}

/* v1.5 — final premium brown auth treatment */
.auth-clean{--auth-ink:#34261d;--auth-muted:#8b7d72;--auth-line:#eadfd5;--auth-soft:#f8f1eb;--auth-brand:#8b5e3c;--auth-deep:#5a3a29}
body.auth-clean{background:radial-gradient(circle at 15% 0%,#f2e4d7 0,#fbf8f5 38%,#f5eee8 100%);}
.auth-container{width:min(100% - 28px,480px);padding:28px 0;}
.auth-panel{position:relative;border:1px solid #dfd0c3;border-radius:28px;box-shadow:0 28px 80px rgba(74,46,31,.14);background:rgba(255,255,255,.97)}
.auth-panel::before{height:6px;background:linear-gradient(90deg,var(--auth-deep),var(--auth-brand),#b98967)}
.auth-inner{padding:30px 30px 26px}
.auth-brand{font-size:16px;color:var(--auth-deep);letter-spacing:-.01em}
.auth-brand-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--auth-deep),var(--auth-brand));box-shadow:0 10px 22px rgba(90,58,41,.18)}
.auth-banner{margin:22px 0 0;max-height:175px;border-radius:18px;object-fit:cover;box-shadow:0 10px 28px rgba(74,46,31,.08)}
.auth-intro{text-align:center;margin:27px 0 22px}
.auth-intro h1{font-size:28px;color:var(--auth-deep);font-weight:850}
.auth-intro p{font-size:13px;color:var(--auth-muted);margin-top:8px}
.auth-form{gap:13px}
.auth-field{gap:7px}
.auth-field>label{font-size:12px;font-weight:800;color:#5f5148;margin-left:4px}
.auth-control{height:58px;border-radius:17px;border-color:var(--auth-line);background:#fffdfb;box-shadow:0 5px 16px rgba(74,46,31,.035)}
.auth-control:focus-within{border-color:#b78a6b;box-shadow:0 0 0 4px rgba(139,94,60,.09),0 8px 20px rgba(74,46,31,.045)}
.auth-leading-icon{width:44px;height:44px;display:grid;place-items:center;flex:none;margin-left:5px;border-radius:13px;background:#f4e9df;color:var(--auth-brand);font-size:18px}
.auth-prefix{height:30px;margin-left:7px;padding:0 11px;color:#5d4d43;border-right:1px solid #e7ddd5;font-weight:750}
.auth-control input{font-size:16px;font-weight:600;color:var(--auth-ink);padding:0 12px}
.auth-toggle{height:48px;width:46px;color:#8b7d72}
.auth-helper{margin:0 3px;padding:2px 0}
.auth-remember{font-size:13px;font-weight:650;color:#6a5b51}
.auth-remember input{accent-color:var(--auth-brand)}
.auth-small-link{color:var(--auth-brand)}
.auth-submit{height:56px;border-radius:17px;margin-top:5px;background:linear-gradient(135deg,var(--auth-deep),var(--auth-brand));box-shadow:0 13px 28px rgba(90,58,41,.2);font-size:16px}
.auth-bottom{background:#fffaf6;border-top:1px solid #eee3da;border-radius:0 0 28px 28px;padding:19px 22px 21px;color:#796b61}
.auth-bottom a{color:var(--auth-brand)}
.auth-error{border-radius:14px}
@media(max-width:520px){body.auth-clean{background:#fbf8f5}.auth-container{width:100%;padding:0;align-items:flex-start}.auth-panel{min-height:100dvh;border:0;border-radius:0;box-shadow:none}.auth-panel::before{height:5px}.auth-inner{padding:26px 19px 24px}.auth-banner{max-height:150px;border-radius:16px}.auth-intro{margin:25px 0 20px}.auth-intro h1{font-size:25px}.auth-control{height:58px}.auth-bottom{border-radius:0;padding-bottom:max(22px,env(safe-area-inset-bottom))}}
@media(max-width:370px){.auth-inner{padding-left:15px;padding-right:15px}.auth-leading-icon{width:40px;height:40px}.auth-control input{font-size:16px}}


/* v1.6 — clean auth header: no logo/name block; banner + content only, mobile-first fit */
.auth-container{width:min(100% - 28px,480px);min-height:100dvh;padding:24px 0;}
.auth-panel{width:100%;min-height:0;}
.auth-inner{padding:26px 30px 26px;}
.auth-banner{display:block;margin:0 auto 0;width:100%;max-height:190px;object-fit:cover;border-radius:18px;}
.auth-intro{margin:24px 0 20px;}
@media(max-width:520px){
  body.auth-clean{min-width:0;overflow-x:hidden;}
  .auth-container{width:100%;min-height:100dvh;padding:0;display:block;}
  .auth-panel{width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;}
  .auth-inner{width:100%;padding:24px 18px calc(20px + env(safe-area-inset-bottom));}
  .auth-banner{width:100%;max-height:155px;object-fit:cover;border-radius:16px;margin:0;}
  .auth-intro{margin:22px 0 18px;}
  .auth-intro h1{font-size:24px;line-height:1.2;}
  .auth-form{gap:12px;}
  .auth-control{width:100%;min-width:0;height:56px;}
  .auth-control input{min-width:0;font-size:16px;}
  .auth-submit{width:100%;min-height:54px;height:54px;}
  .auth-bottom{margin-top:auto;border-radius:0;padding:17px 18px calc(18px + env(safe-area-inset-bottom));}
}
@media(max-width:370px){
  .auth-inner{padding-left:14px;padding-right:14px;}
  .auth-banner{max-height:135px;border-radius:14px;}
  .auth-intro{margin:18px 0 15px;}
  .auth-intro h1{font-size:22px;}
  .auth-field>label{font-size:12px;}
  .auth-control{height:54px;border-radius:15px;}
  .auth-leading-icon{width:39px;height:39px;margin-left:4px;border-radius:11px;font-size:17px;}
  .auth-prefix{margin-left:5px;padding:0 9px;}
  .auth-toggle{width:43px;}
}
/* Home salary card icon */
.reference-task-card-icon.salary-icon{background:#f4e9df;color:#8b5e3c;}
.reference-task-card.salary .reference-task-card-icon i{font-size:20px;}

/* Announcement popup shared by Login and Home */
.auth-announcement-modal .modal-dialog{max-width:430px}.auth-announcement-modal .modal-content{background:transparent}.auth-announcement-modal .home-announcement-card{position:relative;overflow:hidden;border-radius:24px;background:#fffaf5;box-shadow:0 24px 70px rgba(34,22,14,.28);border:1px solid #ead9c9}.auth-announcement-modal .home-announcement-close{position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:rgba(35,24,18,.6);color:#fff;display:grid;place-items:center}.auth-announcement-modal .home-announcement-image{width:100%;background:#f2e6da}.auth-announcement-modal .home-announcement-image img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover;aspect-ratio:16/9}.auth-announcement-modal .home-announcement-body{text-align:center;padding:18px 20px 20px}.auth-announcement-modal .home-announcement-icon{width:46px;height:46px;border-radius:15px;background:#8b5a2b;color:#fff;display:grid;place-items:center;margin:-2px auto 8px;font-size:20px}.auth-announcement-modal .home-announcement-body>small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#9a775d}.auth-announcement-modal .home-announcement-body h2{font-size:20px;font-weight:900;color:#3c2c22;margin:4px 0 6px}.auth-announcement-modal .home-announcement-body p{font-size:12px;line-height:1.55;color:#78675a;margin:0 0 14px}.auth-announcement-modal .home-announcement-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;border-radius:13px;background:#8b5a2b;color:#fff;text-decoration:none;font-size:12px;font-weight:900}.auth-announcement-modal .modal-dialog{margin:.75rem auto}@media(max-width:480px){.auth-announcement-modal .home-announcement-card{border-radius:21px}.auth-announcement-modal .home-announcement-body{padding:15px 16px 17px}.auth-announcement-modal .home-announcement-image img{max-height:220px}}

/* V119 — session-expired premium feedback */
.session-expired-modal .feedback-icon.is-expired{background:#f3e7dc;color:#7a4e32}
.session-expired-modal .modal-content{border-color:#e1cdbb!important}
.session-expired-modal .modal-body h5{color:#4b3426}
@media(max-width:430px){.session-expired-modal .modal-body{padding:25px 18px!important}.session-expired-modal .feedback-icon{width:54px;height:54px;border-radius:16px}}


/* V4 — graphite gray authentication; overrides all legacy brown auth styles. */
body.auth-clean{
  --auth-ink:#283037;--auth-muted:#6d777f;--auth-line:#dbe1e5;
  --auth-soft:#f0f2f4;--auth-brand:#575b5f;--auth-deep:#3e454a;
  --brand:#575b5f;--brand-dark:#3e454a;--brand-soft:#e9edf0;
  background:radial-gradient(ellipse at 15% 0%,#e6ebee 0%,#f6f8f9 40%,#edf1f3 100%)!important;
  color:var(--auth-ink)!important;
}
body.auth-clean .auth-panel{
  border:1px solid #d8dfe3!important;border-radius:24px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 25px 70px rgba(45,54,62,.13)!important;
}
body.auth-clean .auth-panel::before{
  height:6px!important;background:linear-gradient(90deg,#454b50,#686f74,#9ca4aa)!important;
}
body.auth-clean .auth-banner{
  background:#f2f4f6!important;box-shadow:0 8px 23px rgba(44,53,60,.075)!important;
}
body.auth-clean .auth-intro h1{color:#2c343a!important;}
body.auth-clean .auth-intro p{color:#717a82!important;}
body.auth-clean .auth-field>label{color:#444d55!important;}
body.auth-clean .auth-control{
  background:#fbfcfd!important;border-color:#dbe1e5!important;
  box-shadow:0 5px 15px rgba(36,44,51,.035)!important;
}
body.auth-clean .auth-control:focus-within{
  border-color:#777f86!important;
  box-shadow:0 0 0 4px rgba(90,99,107,.11),0 6px 20px rgba(40,49,56,.06)!important;
}
body.auth-clean .auth-leading-icon{
  background:#eaedf0!important;color:#48535b!important;
}
body.auth-clean .auth-prefix{
  color:#59636b!important;border-right-color:#dfe4e8!important;
}
body.auth-clean .auth-control input{color:#293239!important;}
body.auth-clean .auth-control input::placeholder{color:#929ba2!important;}
body.auth-clean .auth-toggle{color:#667078!important;}
body.auth-clean .auth-remember{color:#5b666e!important;}
body.auth-clean .auth-remember input{accent-color:#575b5f!important;}
body.auth-clean .auth-small-link,body.auth-clean .auth-bottom a,
body.auth-clean .auth-app{color:#454e55!important;}
body.auth-clean .auth-submit{
  color:#fff!important;background:linear-gradient(135deg,#42484d,#626a70)!important;
  box-shadow:0 13px 28px rgba(48,56,62,.19)!important;
}
body.auth-clean .auth-bottom{
  background:#f8fafb!important;border-top-color:#e0e5e8!important;
  color:#66717a!important;border-radius:0 0 24px 24px!important;
}
body.auth-clean .auth-panel .auth-brand-icon{
  background:linear-gradient(145deg,#43494e,#626a70)!important;
  box-shadow:0 8px 18px rgba(45,55,62,.14)!important;
}
body.auth-clean .modal-content{
  border-color:#dbe1e5!important;background:linear-gradient(145deg,#fff,#f5f7f8)!important;
  box-shadow:0 24px 70px rgba(28,36,42,.2)!important;
}
body.auth-clean .auth-announcement-modal .home-announcement-card{
  background:linear-gradient(145deg,#fff,#f4f6f8)!important;
  border-color:#dbe1e5!important;
  box-shadow:0 24px 70px rgba(29,36,43,.2)!important;
}
body.auth-clean .auth-announcement-modal .home-announcement-icon,
body.auth-clean .auth-announcement-modal .home-announcement-button{
  background:linear-gradient(145deg,#646b71,#454b50)!important;
}
body.auth-clean .auth-announcement-modal .home-announcement-body h2{color:#30383e!important;}
body.auth-clean .auth-announcement-modal .home-announcement-body p{color:#6b757e!important;}
body.auth-clean .session-expired-modal .modal-content{border-color:#dbe1e5!important;}
body.auth-clean .session-expired-modal .modal-body h5{color:#30383e!important;}
@media(max-width:520px){
  body.auth-clean{background:#f6f8f9!important;}
  body.auth-clean .auth-panel{min-height:100dvh;border:0!important;border-radius:0!important;box-shadow:none!important;}
  body.auth-clean .auth-bottom{border-radius:0!important;}
}