/* Sign-in page for the Emami Group GBS / GCC Blueprint.
   Design tokens and top-bar / button rules are copied verbatim from the blueprint
   (blueprint/index.html) so both screens stay visually identical. */

:root{
  --blue:#0B5CA8; --blue-deep:#0A2D5C; --blue-ink:#0F2240; --blue-soft:#E7F0FA;
  --tt:#7FB539; --tt-soft:#EEF6E2;
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#F8FAFC; --line:#D9E1EB; --line-2:#E8EDF3;
  --ink:#14213D; --ink-2:#44526B; --ink-3:#6B7890;
  --ok:#1F8F55; --warn:#C77700; --risk:#C23B2B;
  --ok-soft:#E3F4EA; --warn-soft:#FCF0DC; --risk-soft:#FBE5E2;
  --spectrum:linear-gradient(90deg,#E5332A 0%,#F39200 14%,#FFDD00 28%,#95C11F 42%,#00A651 56%,#2FB5E8 70%,#2E3192 85%,#8E2B88 100%);
  --radius-l:14px; --radius-s:8px;
  --shadow:0 1px 2px rgba(15,34,64,.06),0 6px 24px rgba(15,34,64,.06);
  --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#5AA3EC; --blue-deep:#0B1F3D; --blue-ink:#DCE8F7; --blue-soft:#14284A;
    --tt:#9CCB5C; --tt-soft:#1E2B15;
    --bg:#0C1524; --surface:#121E31; --surface-2:#16243A; --line:#24364F; --line-2:#1D2D44;
    --ink:#E6EDF6; --ink-2:#B3C0D3; --ink-3:#8494AC;
    --ok:#4CC488; --warn:#F0A73A; --risk:#F06A5A;
    --ok-soft:#14301F; --warn-soft:#33260F; --risk-soft:#38191A;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --blue:#5AA3EC; --blue-deep:#0B1F3D; --blue-ink:#DCE8F7; --blue-soft:#14284A;
  --tt:#9CCB5C; --tt-soft:#1E2B15;
  --bg:#0C1524; --surface:#121E31; --surface-2:#16243A; --line:#24364F; --line-2:#1D2D44;
  --ink:#E6EDF6; --ink-2:#B3C0D3; --ink-3:#8494AC;
  --ok:#4CC488; --warn:#F0A73A; --risk:#F06A5A;
  --ok-soft:#14301F; --warn-soft:#33260F; --risk-soft:#38191A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.25);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15}
h3{font-size:1.28rem;line-height:1.25}
h4{font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:0}
p{margin:.5em 0 0;max-width:76ch}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar::after{content:"";display:block;height:4px;background:var(--spectrum)}
.topbar-in{display:flex;align-items:center;gap:16px;padding:10px 22px;max-width:1500px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.plate{display:inline-flex;align-items:center}
.brand .plate img{height:38px;width:auto;display:block}
.brand-txt{line-height:1.2;min-width:0}
.brand-txt b{display:block;font-size:.98rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt span{font-size:.8rem;color:var(--ink-3)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.brand{flex:1 1 auto}
.tt-badge{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-3)}
.tt-badge .plate img{height:34px;display:block}
.icon-btn{white-space:nowrap;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:8px;height:36px;padding:0 10px;font:inherit;font-size:.85rem;cursor:pointer}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;background:var(--blue);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:progress}
@media (max-width:860px){.tt-badge>span:first-child{display:none}.tt-badge .plate img{height:28px}.topbar-in{padding:10px 16px}}
@media (max-width:520px){.brand-txt span{display:none}.brand .plate img{height:32px}}

/* ---------- logos in dark theme: keep them on a light plate ---------- */
:root[data-theme="dark"] .plate{background:#fff;border-radius:8px;padding:3px 6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plate{background:#fff;border-radius:8px;padding:3px 6px}}

/* ---------- sign-in layout ---------- */
.auth-main{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:40px 22px 30px}
.auth-card{width:min(980px,100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--surface);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.auth-hero{position:relative;overflow:hidden;background:var(--blue-deep);color:#fff;padding:40px 38px 46px;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px}
.auth-hero::before{content:"";position:absolute;inset:auto 0 0 0;height:8px;background:var(--spectrum)}
.auth-hero .hero-arc{position:absolute;right:-170px;top:-190px;width:520px;height:420px;border-radius:50%;
  background:conic-gradient(from 200deg,#E5332A,#F39200,#FFDD00,#95C11F,#00A651,#2FB5E8,#2E3192,#8E2B88,#E5332A);opacity:.22;filter:blur(2px)}
.auth-hero .hero-arc::after{content:"";position:absolute;inset:38px;border-radius:50%;background:var(--blue-deep)}
.auth-kicker{position:relative;font-size:.8rem;font-weight:700;color:#9CCB5C;letter-spacing:.02em}
.auth-hero h1{position:relative;color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.1;margin-top:10px;max-width:16ch}
.auth-hero p{position:relative;color:#C9D8EE;font-size:1rem;margin-top:14px;max-width:44ch}
.auth-hero .pillars{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.auth-hero .pillars span{font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid #4C6A95;color:#DCE8F7}

.auth-form{padding:38px 38px 34px;display:flex;flex-direction:column;gap:16px}
.auth-form h2{font-size:1.6rem}
.auth-form .sub{color:var(--ink-2);font-size:.95rem;margin:4px 0 0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.84rem;font-weight:700;color:var(--ink-2)}
.field input{font:inherit;font-size:1rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  height:46px;padding:0 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.field input:hover{border-color:var(--ink-3)}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.field input[aria-invalid="true"]{border-color:var(--risk)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:78px}
.pw-toggle{position:absolute;right:6px;top:6px;height:34px;border:0;background:transparent;color:var(--blue);font:inherit;font-size:.82rem;font-weight:700;padding:0 10px;cursor:pointer;border-radius:8px}
.pw-toggle:hover{background:var(--blue-soft)}
.auth-form .btn{justify-content:center;height:46px;font-size:.98rem;margin-top:4px}
.auth-note{font-size:.82rem;color:var(--ink-3);margin:2px 0 0}
.notice{display:none;border-left:4px solid var(--blue);background:var(--blue-soft);padding:10px 14px;border-radius:0 10px 10px 0;font-size:.9rem;color:var(--ink)}
.notice.on{display:block}
.notice.err{border-color:var(--risk);background:var(--risk-soft)}
.notice.ok{border-color:var(--tt);background:var(--tt-soft)}
.auth-checking{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:.92rem}
.auth-form[data-state="checking"] .auth-fields{display:none}
.auth-form:not([data-state="checking"]) .auth-checking{display:none}

.auth-foot{max-width:1500px;margin:0 auto;padding:16px 22px 28px;display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--ink-3);flex-wrap:wrap;justify-content:center}
.auth-foot .plate img{height:24px;display:block}

@media (max-width:860px){
  .auth-main{padding:20px 16px 24px;place-items:start center}
  .auth-card{grid-template-columns:1fr}
  .auth-hero{min-height:0;padding:26px 22px 30px}
  .auth-hero p{display:none}
  .auth-form{padding:26px 22px 26px}
}