:root {
    --store-blue: #0b2c57;
    --store-button-blue: #08386c;
    --store-error: #b21d1d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #fff; color: #18212b; font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible { outline: 4px solid #e4a800; outline-offset: 3px; }
#top-bar.store-banner { box-sizing: content-box; gap: 8px; }
.store-header-identity { margin-left: auto; white-space: nowrap; }
#storeIdentity { font-weight: 700; }
.store-portal-page #storeIdentity { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.store-portal-page #user-info { min-width: 0; max-width: 75%; margin-left: 0; }
.store-portal-page #storeWelcome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.store-portal-page #user-info .environment-badge, .store-portal-page #user-info .company-logo { flex-shrink: 0; }
.store-portal-page .store-header-menu-item { flex-shrink: 0; min-height: 28px; border: 0; background: transparent; color: #2f2f2f; font-size: 13px; font-weight: normal; cursor: pointer; }
.store-portal-page .store-header-menu-item:hover:not(:disabled) { background: #d0d0d0; }
.store-portal-page .store-header-menu-item:disabled { color: #777; background: transparent; cursor: default; }
.workstation-signout { height: 28px; flex-shrink: 0; border: 1px solid #a5aeb9; border-radius: 5px; background: #fff; padding: 4px 10px; font-size: 13px; }
.store-workspace { width: min(100%, 1020px); margin: 0 auto; padding: 0 10px 24px; }
.store-navigation { min-height: 42px; display: grid; grid-template-columns: 125px minmax(0, 1fr) 125px; align-items: center; gap: 12px; padding: 4px 7px; background: var(--store-blue); color: #fff; }
.store-navigation h1 { margin: 0; font: bold 18px Georgia, 'Times New Roman', serif; text-align: center; overflow-wrap: anywhere; }
.navigation-button { min-height: 34px; padding: 4px 10px; border: 1px solid #8b8b8b; border-radius: 9px; background: linear-gradient(#8b8b8b, #acacac); color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 -1px 0 #000; box-shadow: 0 3px 3px #0004; }
.navigation-button:disabled { visibility: hidden; }
.store-login { max-width: 540px; margin: 42px auto; padding: 28px; border: 1px solid #c4ced9; border-radius: 12px; box-shadow: 0 4px 10px #0001; }
.store-login h2 { margin-top: 0; font-size: 24px; }
.store-login p { line-height: 1.5; }
.store-login form { display: grid; gap: 12px; }
.store-login label { font-weight: 700; margin-top: 6px; }
.store-login input { min-width: 0; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid #8b9bad; border-radius: 5px; font-size: 20px; }
.primary-button, .employee-button { border: 1px solid #4b80b4; border-radius: 8px; background: var(--store-button-blue); color: #fff; font-weight: 700; box-shadow: 0 4px 3px #0004; }
.primary-button { min-height: 56px; padding: 10px 18px; margin-top: 10px; font-size: 20px; }
.demo-help { color: #536174; font-size: 14px; line-height: 1.6; }
.error-message { color: var(--store-error); font-weight: 700; line-height: 1.5; }
.staff-login { display: grid; grid-template-columns: 280px 365px minmax(0, 1fr); gap: 20px; margin-top: 18px; }
.staff-list { display: flex; flex-direction: column; gap: 23px; padding-top: 98px; }
.employee-button { min-height: 56px; padding: 10px; font-size: 22px; }
.employee-button[aria-pressed='true'] { background: #1a66a6; outline: 4px solid #e4a800; outline-offset: 2px; }
.pin-pad { margin: 0; }
#staffPin { width: 100%; height: 94px; border: 1px solid #b9b9b9; border-radius: 0; background: #000; color: #fff; text-align: center; font-size: 48px; letter-spacing: 12px; }
.pin-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: #fff; }
.pin-keys button { height: 91px; border: 0; background: #4e5964; color: #fff; font: bold 36px Georgia, 'Times New Roman', serif; }
.pin-keys button:disabled { background: #686868; color: #c9c9c9; }
.pin-keys button:not(:disabled):active { background: #173e65; }
.staff-login-details { text-align: center; padding-top: 0; }
.store-clock { display: block; white-space: nowrap; font-size: 36px; font-weight: 700; }
.store-date { font-size: 16px; font-weight: 700; line-height: 1.5; }
.staff-login-prompt { margin-top: 30px; color: var(--store-error); font-size: 20px; font-weight: 700; }
.staff-menu { padding: 26px 16px 0; }
.menu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
.menu-tile { display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 0; border: 1px solid #a4a4a4; border-radius: 17px; background: #fff; color: #111; box-shadow: 0 6px 3px #0007; }
.menu-tile:hover { border-color: #1f66a4; background: #f5f9ff; }
.menu-tile:active { transform: translateY(2px); }
.menu-tile-title { width: 100%; padding: 9px 4px; background: linear-gradient(#126cb8, #69b2f5); color: #fff; font-family: 'Arial Narrow', Arial, sans-serif; font-size: 23px; font-weight: 700; text-align: center; }
.menu-tile svg { width: 100%; height: 171px; padding: 7px 12px; }
.menu-tile img { width: 100%; height: 171px; padding: 7px 12px; object-fit: contain; }
.menu-tile-title small { font: bold 12px Arial, sans-serif; border: 1px solid #fff; border-radius: 3px; padding: 2px 4px; vertical-align: middle; }
.demo-action-message { padding: 14px 18px; border: 1px solid #b6cce3; border-radius: 6px; background: #f1f6fc; line-height: 1.5; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1000px) {
    .staff-login { grid-template-columns: minmax(180px, 1fr) minmax(270px, 1.25fr) minmax(170px, 0.9fr); gap: 14px; }
    .employee-button { font-size: 19px; }
    .store-clock { font-size: 28px; }
    .menu-tile-title { font-size: 20px; }
}
@media (max-width: 700px) {
    #top-bar.store-banner { gap: 4px; padding-inline: 8px; }
    #user-info.store-header-identity { gap: 4px; font-size: 12px; }
    .store-banner .company-logo { max-width: 16vw; }
    .workstation-signout { padding-inline: 6px; font-size: 11px; }
    .store-navigation { grid-template-columns: 74px minmax(0, 1fr) 98px; gap: 6px; }
    .store-navigation h1 { font-size: 17px; }
    .staff-login { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .staff-list { gap: 16px; padding-top: 78px; }
    .employee-button { font-size: 16px; }
    #staffPin { height: 74px; font-size: 34px; letter-spacing: 5px; }
    .pin-keys button { height: 72px; font-size: 27px; }
    .staff-login-details { grid-column: 1 / -1; }
    .store-clock, .store-date { display: none; }
    .staff-login-prompt { margin-top: 4px; }
    .menu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .staff-menu { padding: 20px 4px 0; }
    .menu-tile-title { font-size: 17px; }
    .menu-tile svg { height: 135px; }
    .menu-tile img { height: 135px; }
}