.staff-access{--staff-mint:#98e5c2;--staff-text:#f5f9f8;--staff-muted:#bfd0d0;--staff-line:#4b6668;box-sizing:border-box;margin:0;min-height:100vh;min-height:100svh;padding:36px 20px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#2a4143 0,#203638 57%,#192e30 100%);color:var(--staff-text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color-scheme:dark}
.staff-access *{box-sizing:border-box}.staff-access button,.staff-access input{font:inherit}.staff-access a{color:var(--staff-mint);text-decoration:none}.staff-access a:hover{text-decoration:underline}.staff-access :focus-visible{outline:3px solid var(--staff-mint);outline-offset:4px}.staff-brand{display:block;width:184px;height:auto;object-fit:contain;margin:0 auto 26px}.staff-access-card{width:100%;max-width:480px;padding:30px;border:1px solid var(--staff-line);border-radius:16px;background:linear-gradient(140deg,#2b4243b8,#253c3eb8);box-shadow:0 22px 70px #07191b30;text-align:center}.staff-access-card h1{margin:0;color:var(--staff-text);font-size:30px;letter-spacing:-.035em;line-height:1.2;font-weight:700}.staff-access-intro{color:var(--staff-muted);margin:10px 0 26px;font-size:15px;line-height:1.7}.staff-cabinet-label{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--staff-mint);color:var(--staff-mint);border-radius:30px;padding:9px 20px;margin:0 0 20px;font-size:16px}.staff-cabinet-label svg{width:23px;height:23px}.staff-access-form{text-align:left;display:grid;gap:22px}.staff-access-field label{display:block;font-weight:550;font-size:15px;margin:0 0 8px;color:var(--staff-text)}.staff-input-wrap{position:relative;display:flex;align-items:center}.staff-input-wrap input{display:block;width:100%;min-width:0;height:52px;border:1px solid #607a7c;border-radius:10px;padding:12px 48px 12px 16px;color:#fff;background:#30474970;font-size:16px;outline-offset:2px}.staff-input-wrap input::placeholder{color:#b8cbcd;opacity:1}.staff-input-wrap input:focus{border-color:var(--staff-mint)}.staff-input-wrap input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 1000px #304749 inset}.staff-phone-wrap input{padding-left:50px;padding-right:14px}.staff-input-icon{position:absolute;left:16px;color:var(--staff-muted);height:24px;pointer-events:none}.staff-input-icon svg{width:24px;height:24px}.staff-password-toggle{position:absolute;right:4px;width:44px;height:44px;background:none;border:0;color:#b7e5da;cursor:pointer;border-radius:7px;display:grid;place-items:center;padding:10px}.staff-password-toggle svg{width:23px;height:23px}.staff-password-toggle:hover{background:#a9e4ce12}.staff-password-toggle[aria-pressed=true]{color:#fff}.staff-access-hint{margin:6px 0 0;color:var(--staff-muted);font-size:12px;line-height:1.5}.staff-access-submit{width:100%;min-height:52px;border:1px solid #a5ebca;border-radius:10px;padding:13px 18px;background:linear-gradient(115deg,#a1e9c8,#8bdbb6);color:#102d28;font-size:17px;font-weight:700;cursor:pointer;transition:filter .15s}.staff-access-submit:hover{filter:brightness(1.06)}.staff-access-back{display:inline-block;margin-top:26px;font-size:15px;padding:4px}.staff-access-security{display:flex;align-items:center;gap:14px;border:1px solid var(--staff-line);border-radius:10px;padding:14px 16px;background:#162b2d24;color:#d1e1e1}.staff-access-security svg{width:28px;height:32px;flex-shrink:0;color:var(--staff-mint)}.staff-access-security p{margin:0;font-size:13px;line-height:1.65}.staff-access-error{margin:0 0 20px;border:1px solid #c78785;background:#633a3b60;color:#ffdcdb;padding:12px 15px;border-radius:10px;text-align:left;font-size:14px}.staff-access-error p{margin:0}.staff-access-error p+p{margin-top:6px}.staff-password-card{max-width:500px}.staff-password-card .staff-brand{margin-bottom:24px}.staff-password-card .staff-access-form{gap:18px}
.staff-cabinets-page{background:radial-gradient(ellipse at 50% 30%,#1b2c2d,#112123 75%,#101d20);padding:48px 28px}.staff-cabinets{width:100%;max-width:980px;padding:20px 0}.staff-cabinets-brand{width:240px;margin-bottom:56px}.staff-cabinet-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.staff-cabinet{grid-column:span 2;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;border:1px solid #3d5456;border-radius:13px;background:linear-gradient(145deg,#203032b3,#1d2d2fb3);color:var(--staff-text)!important;font-size:22px;line-height:1.3;font-weight:650;text-align:center;padding:28px 14px;box-shadow:inset 0 1px 0 #ffffff06;transition:background .15s,border-color .15s,transform .15s}.staff-cabinet:nth-child(4){grid-column:2/span 2}.staff-cabinet:hover{background:#2b4242;border-color:#78b69b;transform:translateY(-2px);text-decoration:none!important}.staff-cabinet-icon{width:65px;height:65px;color:#98dfb9}.staff-cabinet-icon svg{width:100%;height:100%;stroke-width:1.45}
@media(max-width:600px){.staff-access{padding:22px 16px}.staff-access-card{padding:25px 20px;border-radius:15px}.staff-brand{width:170px;margin-bottom:24px}.staff-access-card h1{font-size:27px}.staff-access-intro{font-size:14px;margin-bottom:25px}.staff-access-form{gap:22px}.staff-access-field label{font-size:15px}.staff-access-security{padding:13px 12px;gap:12px}.staff-access-back{margin-top:22px}.staff-cabinets-page{padding:30px 22px}.staff-cabinets{max-width:430px;padding:0}.staff-cabinets-brand{width:166px;margin-bottom:30px}.staff-cabinet-grid{grid-template-columns:1fr;gap:11px}.staff-cabinet,.staff-cabinet:nth-child(4){grid-column:auto;min-height:113px;padding:15px;gap:10px;font-size:19px}.staff-cabinet-icon{width:43px;height:43px}}
@media(max-width:360px){.staff-access{padding:16px 12px}.staff-access-card{padding:22px 16px}.staff-access-card h1{font-size:25px}.staff-access-intro{font-size:13px}.staff-access-security p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.staff-cabinet,.staff-access-submit{transition:none}}

.staff-access .staff-access-submit{font-weight:700;font-size:17px}.staff-access .staff-brand{filter:brightness(1.3) saturate(1.5)}

/* Approved cabinet selection and graphite login. Password-change policy stays in its own card. */
.staff-login-page,
.staff-cabinets-page { background: #142323; }
.staff-cabinets-brand { margin-left: auto; margin-right: auto; }
.staff-cabinet:hover,
.staff-cabinet:focus-visible,
.staff-cabinet:active {
    background: #d4c3a0;
    border-color: #f0dfb6;
    color: #18272b !important;
    box-shadow: inset 0 0 0 1px #f0dfb660;
    transform: none;
}
.staff-cabinet:hover .staff-cabinet-icon,
.staff-cabinet:focus-visible .staff-cabinet-icon,
.staff-cabinet:active .staff-cabinet-icon { color: #18272b; }
.staff-login-card {
    max-width: 440px;
    padding: 34px 28px 28px;
    border-color: #81909c;
    background: #384148;
    color: #f4f4f1;
    box-shadow: 0 22px 70px #07191b30;
}
.staff-login-card .staff-brand { width: 208px; max-width: 100%; margin: 6px auto 36px; }
.staff-login-card .staff-access-field label { color: #f4f4f1; font-size: 16px; text-align: left; }
.staff-login-card .staff-input-wrap input {
    height: 56px;
    border-color: #81909c;
    background: #46515a;
    color: #f4f4f1;
    text-align: left;
}
.staff-login-card .staff-input-wrap input::placeholder { color: #d5dce1; }
.staff-login-card .staff-input-wrap input:focus { border-color: #d4c3a0; }
.staff-login-card .staff-input-wrap input:-webkit-autofill {
    -webkit-text-fill-color: #f4f4f1;
    box-shadow: 0 0 0 1000px #46515a inset;
}
.staff-login-card .staff-input-icon,
.staff-login-card .staff-password-toggle { color: #f4f4f1; }
.staff-login-card .staff-access-submit {
    min-height: 56px;
    border-color: #e3d3b1;
    background: #d4c3a0;
    color: #252a2d;
    text-align: center;
}
.staff-login-card .staff-access-back { color: #f4f4f1; text-align: center; }
@media (min-width: 601px) {
    .staff-cabinets-brand { position: relative; top: -12px; }
}
@media (max-width: 600px) {
    .staff-login-card { padding: 28px 20px 24px; }
    .staff-login-card .staff-brand { width: 184px; margin: 8px auto 32px; }
    .staff-login-card .staff-access-form { gap: 20px; }
    .staff-login-card .staff-access-back { margin-top: 22px; }
}

/* Compact cabinet choices apply only at the existing phone breakpoint. */
@media(max-width:600px){
.staff-cabinets-page{padding:40px 24px;background:#142323}
.staff-cabinets-page .staff-cabinets{max-width:600px;padding:0}
.staff-cabinets-page .staff-cabinets-brand{width:216px;top:auto;margin:0 auto 40px}
.staff-cabinets-page .staff-cabinet-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.staff-cabinets-page .staff-cabinet,.staff-cabinets-page .staff-cabinet:nth-child(4){grid-column:auto;position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;min-height:88px;padding:16px 26px;gap:12px;border:1px solid transparent;border-radius:999px;background:#1d3231;color:#f5f9f8!important;font-size:21px;line-height:1.35;box-shadow:none;transform:none;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.staff-cabinets-page .staff-cabinet-icon{width:42px;height:42px;justify-self:center;color:#98dfb9}
.staff-cabinets-page .staff-cabinet>span:last-child{grid-column:2;text-align:center;overflow-wrap:anywhere}
.staff-cabinets-page .staff-cabinet:active{background:#1d3231;border-color:transparent;color:#f5f9f8!important}
.staff-cabinets-page .staff-cabinet:hover .staff-cabinet-icon,.staff-cabinets-page .staff-cabinet:focus-visible .staff-cabinet-icon,.staff-cabinets-page .staff-cabinet:active .staff-cabinet-icon{color:#98dfb9}
.staff-cabinets-page .staff-cabinet:focus-visible{outline:2px solid #98dfb9;outline-offset:4px;background:#24413b}
@media(hover:hover) and (pointer:fine){.staff-cabinets-page .staff-cabinet:hover{background:#24413b;border-color:#496a5f;color:#f5f9f8!important}.staff-cabinets-page .staff-cabinet:hover .staff-cabinet-icon{color:#a9efc9}}
@media(max-width:600px){.staff-cabinets-page{padding:32px 20px}.staff-cabinets-page .staff-cabinets-brand{width:180px;margin-bottom:30px}.staff-cabinets-page .staff-cabinet-grid{gap:12px}.staff-cabinets-page .staff-cabinet,.staff-cabinets-page .staff-cabinet:nth-child(4){min-height:72px;padding:12px 18px;grid-template-columns:36px minmax(0,1fr) 36px;gap:8px;font-size:17px}.staff-cabinets-page .staff-cabinet-icon{width:32px;height:32px}}
@media(max-width:360px){.staff-cabinets-page{padding:24px 14px}.staff-cabinets-page .staff-cabinet,.staff-cabinets-page .staff-cabinet:nth-child(4){font-size:16px;padding-inline:14px}}
}

/* Optical alignment of the role selector logo; do not move the cabinet buttons. */
.staff-cabinet-grid .staff-cabinet:nth-child(4){grid-column:span 2}
@media(max-width:600px){.staff-cabinet-grid .staff-cabinet:nth-child(4){grid-column:auto}}
.staff-cabinets-page .staff-cabinets-brand{transform:translateX(-12px)}
@media(max-width:600px){.staff-cabinets-page .staff-cabinets-brand{transform:translate(-12px,-28px)}}
@media(max-width:600px) and (max-height:600px){.staff-cabinets-page .staff-cabinets-brand{transform:translate(-12px,-16px)}}