/* SalaryPlus sign-in, company picker and status bar. Colours follow the app's own palette. */
[hidden]{display:none !important}
#sp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 32px;background:#0B151C;color:#C9D6D3;font-size:13px}
.sp-brand{font-weight:600;color:#F3F4F1;letter-spacing:.02em}
.sp-company{color:#F3F4F1}
.sp-spacer{flex:1}
.sp-status{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#A9BDB9}
.sp-status.bad{color:#FFB4A8}
.sp-status.ok{color:#9FD9C9}
.sp-user{color:#A9BDB9}
.sp-link{background:none;border:0;padding:6px 4px;min-height:32px;color:#F3F4F1;font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.sp-link:hover{color:#fff}
.sp-link:focus-visible{outline:2px solid #9FD9C9;outline-offset:2px}
.sp-alert{margin:0;padding:12px 32px;background:#FDECEA;border-bottom:1px solid #E7A59B;color:#7A1F12;font-size:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sp-alert .btn2{min-height:36px}
.sp-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.sp-card{width:100%;max-width:440px;background:#fff;border:1px solid #DCE0D8;border-radius:12px;padding:32px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}
.sp-card h1{margin:0;font-size:22px;font-weight:600}
.sp-card p{margin:0;color:#46505C;font-size:14px;line-height:1.5}
.sp-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0D5A56;font-weight:600}
.sp-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;border-radius:6px;border:1px solid #BFC5BB;background:#fff;color:#18222C;font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.sp-google:hover{border-color:#0D5A56}
.sp-google:focus-visible,.sp-co:focus-visible{outline:2px solid #0D5A56;outline-offset:2px}
.sp-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.sp-co{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1px solid #DCE0D8;border-radius:8px;background:#fff;color:#18222C;font:inherit;font-size:15px;cursor:pointer}
.sp-co:hover{border-color:#0D5A56;background:#F5F8F6}
.sp-co small{color:#56606B;font-size:12px}
.sp-add{display:flex;gap:8px;flex-wrap:wrap}
.sp-add input{flex:1 1 200px}
.sp-err{color:#9A2A1A;font-size:13px}
.sp-foot{font-size:12px;color:#56606B}
@media (max-width:640px){#sp-bar,.sp-alert{padding-left:16px;padding-right:16px}}