:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #302f28;
  background: #f7f5ef;
  font-synthesis: none;
  --green: #344b3d;
  --deep: #263f32;
  --muted: #828176;
  --line: #e9e6de;
  --gold: #e9bd75;
  --red: #a44936;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid #c58c41;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -1.9px;
  line-height: 1.13;
}
h2 {
  font-size: 20px;
  font-weight: 550;
  letter-spacing: -0.5px;
}
h3 {
  font-size: 17px;
  font-weight: 600;
}
p {
  line-height: 1.65;
}
small,
.small {
  font-size: 11px;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: #8b795c;
  margin: 0 0 12px;
}
.brand {
  display: flex;
  align-items: center;
  font-family: Georgia, serif;
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -1.4px;
  gap: 10px;
}
.brand-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--green);
  color: #fff9ed;
  border-radius: 10px;
  font-size: 27px;
  font-style: italic;
}
.brand-dot {
  font: 9px sans-serif;
  align-self: flex-start;
  margin-top: 6px;
  margin-left: -6px;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 228px;
  background: #fffefb;
  border-right: 1px solid var(--line);
  padding: 36px 26px;
  display: flex;
  flex-direction: column;
}
.sidebar-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #939086;
  margin-top: 12px;
}
.sidebar .brand {
  width: fit-content;
  max-width: 100%;
  gap: 10px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -1px;
}
.sidebar .brand-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  font-size: 24px;
  letter-spacing: -1.5px;
}
.brand-wordmark {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
}
.brand-glyph {
  display: block;
  line-height: 1;
  transform: translate(1px, -2px);
}
.brand-wordmark .brand-dot {
  margin: 2px 0 0;
  font-size: 8px;
  letter-spacing: 0;
}
.sidebar nav {
  display: grid;
  gap: 9px;
  margin-top: 46px;
}
.sidebar nav a {
  padding: 14px 12px;
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 18px;
  border-radius: 8px;
  color: #817f72;
}
.sidebar nav a span {
  font-size: 12px;
}
.sidebar nav a.selected {
  background: #eff2e9;
  color: var(--green);
  font-weight: 600;
}
.sidebar nav a:hover {
  background: #f5f4ee;
}
.sidebar-bottom {
  margin-top: auto;
}
.demo-pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 20px;
  background: #efede5;
  border: 1px solid #e4e0d6;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #77796a;
}
.sidebar-bottom p {
  font-family: Georgia, serif;
  font-size: 21px;
  line-height: 1.4;
  margin: 15px 0;
}
.sidebar-bottom small {
  color: #97958a;
  font-size: 10px;
}
.admin-shell {
  margin-left: 228px;
}
.admin-top {
  height: 85px;
  padding: 0 42px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #77766c;
}
.slash {
  padding: 0 12px;
  color: #b7b3a9;
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #8a7d60;
}
.live-status:before,
.live-dot {
  content: "";
  width: 6px;
  height: 6px;
  background: #c4a365;
  border-radius: 50%;
  flex-shrink: 0;
}
.live-status.online {
  color: #61755c;
}
.live-status.online:before,
.live-dot {
  background: #7a9b65;
}
.admin-main {
  max-width: 1530px;
  margin: auto;
  padding: 38px 42px 32px;
}
.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.page-title h1 {
  margin-bottom: 12px;
}
.page-title > .muted,
.page-title p.muted {
  font-size: 13px;
}
.button {
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.button span {
  margin-left: auto;
}
.button.primary {
  color: #fffaf0;
  background: var(--green);
}
.button.primary:hover {
  background: #203f2d;
}
.button.outline {
  background: #fffefb;
  border-color: #dedcd2;
  color: #646454;
}
.button.cream {
  background: #f6f0de;
  color: #394d3b;
}
.button.subtle {
  background: transparent;
  color: #7a7a6d;
}
.button.reward-button {
  background: #f2dcad;
  color: #685332;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 25px;
}
.stats article {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 23px 21px;
  display: flex;
  flex-direction: column;
}
.stats article > span {
  font-size: 11px;
  color: #7b7b6d;
}
.stats strong {
  font-size: 39px;
  font-weight: 450;
  line-height: 1.4;
  margin: 9px 0 4px;
  letter-spacing: -1.5px;
}
.stats small {
  color: #9c9b8f;
  font-size: 9px;
}
.stats .stat-note {
  background: #eeeddf;
  border-color: #e6e4d2;
}
.stat-note strong {
  font-family: Georgia, serif;
}
.stat-note em {
  font-size: 25px;
  font-weight: normal;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(280px, 1fr);
  gap: 22px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffefb;
  overflow: hidden;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 25px 25px 22px;
}
.panel-heading h2 {
  font-size: 18px;
}
.panel-heading .eyebrow {
  font-size: 9px;
  margin-bottom: 8px;
}
.panel-heading > .small {
  font-size: 9px;
}
.table-wrap {
  position: relative;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
  white-space: nowrap;
}
th {
  text-align: left;
  font-weight: 500;
  color: #989588;
  font-size: 9px;
  border-bottom: 1px solid var(--line);
  padding: 12px 12px;
  background: #fbfaf6;
}
th:first-child,
td:first-child {
  padding-left: 25px;
}
td {
  padding: 22px 12px;
  border-bottom: 1px solid #eeece4;
  vertical-align: middle;
}
tr:last-child td {
  border: 0;
}
.pass-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pass-identity strong {
  font-weight: 550;
  font-size: 11px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid #e6e0cf;
  border-radius: 8px;
  background: #f5f0e3;
  color: #938268;
  font-size: 10px;
}
.table-points {
  font-size: 10px;
  display: block;
  margin-bottom: 9px;
}
.progress-track {
  height: 4px;
  width: 90px;
  background: #efede5;
  border-radius: 4px;
  overflow: hidden;
}
.progress-track span {
  height: 100%;
  display: block;
  background: #b9bc9e;
  border-radius: 4px;
}
.badge {
  font-size: 8px;
  display: inline-flex;
  padding: 6px 8px;
  background: #eff1e9;
  color: #737f65;
  border-radius: 20px;
}
.badge.reward {
  background: #f4e8cc;
  color: #9d7836;
}
.badge.inactive {
  background: #f3e7e3;
  color: #9e6d60;
}
.row-actions {
  text-align: right;
  padding-right: 22px;
}
.demo-link {
  font-size: 10px;
  color: #536d50;
  display: block;
  font-weight: 600;
  min-height: 27px;
  padding: 4px;
}
.text-button {
  border: 0;
  background: none;
  color: #929184;
  font-size: 9px;
  padding: 5px;
  min-height: 28px;
}
.table-note {
  border-top: 1px solid var(--line);
  padding: 15px 25px;
  font-size: 10px;
  color: #8b8779;
  background: #fbfaf5;
}
.activities {
  list-style: none;
  margin: 0;
  padding: 0;
}
.live-panel .activities {
  padding: 0 24px 12px;
  max-height: 350px;
  overflow: auto;
}
.activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #eeece3;
}
.activity:last-child {
  border: 0;
}
.activity-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f0f1e8;
  color: #7a8c65;
  font-size: 16px;
}
.activity-info {
  min-width: 0;
  flex: 1;
}
.activity-info strong {
  font-size: 11px;
  font-weight: 500;
  display: block;
}
.activity-info time {
  display: block;
  font-size: 9px;
  color: #9a9789;
  line-height: 1.5;
  margin-top: 4px;
}
.activity-delta {
  font-size: 12px;
  color: #708164;
}
.demo-banner {
  background: var(--green);
  color: #f4f0df;
  border-radius: 13px;
  padding: 32px 38px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
.tag {
  display: block;
  letter-spacing: 1.2px;
  font-size: 8px;
  font-weight: 600;
}
.demo-banner .tag {
  color: #bac4ab;
}
.demo-banner h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 29px;
  letter-spacing: -0.6px;
  margin: 13px 0;
}
.demo-banner p {
  font-size: 11px;
  color: #ccd1bf;
  max-width: 450px;
}
.demo-banner .button {
  margin-top: 23px;
  min-height: 43px;
  font-size: 11px;
}
.bread-art {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 10px 15px;
}
.bread-art > span {
  font-family: Georgia, serif;
  font-style: italic;
  color: #c6cbae;
  font-size: 21px;
  line-height: 1.45;
  transform: rotate(-7deg);
}
.loaf {
  position: relative;
  width: 180px;
  height: 122px;
  border-radius: 60% 45% 45% 50%;
  transform: rotate(-23deg);
  background: linear-gradient(155deg, #e7cb8c, #b99150);
  box-shadow: 0 17px 0 -11px #1c31296b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.loaf:after {
  content: "";
  position: absolute;
  inset: 9px 14px;
  border: 1px solid #fae5b562;
  border-radius: 60% 45% 45% 50%;
}
.loaf i {
  width: 8px;
  height: 60px;
  border-radius: 100%;
  background: #f4ddac;
  transform: rotate(25deg);
  box-shadow: 3px 1px 0 #9c763b44;
}
.connect-panel {
  margin-top: 25px;
  padding-bottom: 24px;
}
.connect-panel > .muted {
  padding: 0 25px;
  font-size: 12px;
}
.connect-panel > .small {
  font-size: 10px;
  margin-top: 7px;
}
.network-select {
  font-size: 9px;
  color: #908b7d;
  display: grid;
  gap: 5px;
}
select {
  background: #fffefb;
  color: #5d6154;
  border: 1px solid #e2dfd3;
  border-radius: 7px;
  padding: 9px 12px;
  min-height: 39px;
  font-size: 11px;
  max-width: 100%;
}
.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 25px 25px 0;
}
.connect-card {
  background: #faf9f3;
  border: 1px solid #ebe7da;
  border-radius: 9px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
}
.connect-card img {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  border-radius: 8px;
}
.connect-card > div {
  min-width: 0;
}
.connect-card .tag {
  color: #9a8867;
  font-size: 8px;
  line-height: 1.5;
}
.connect-card h3 {
  font-size: 15px;
  margin: 9px 0;
}
.connect-card p {
  font-size: 10px;
}
.url-link {
  display: block;
  font-size: 9px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #7a866c;
  margin-top: 12px;
}
.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #a5a091;
  font-size: 9px;
  padding: 24px 42px;
  border-top: 1px solid var(--line);
}
.footer.centered {
  justify-content: center;
  text-align: center;
}
.notice {
  border-radius: 10px;
  padding: 15px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.notice.error {
  color: var(--red);
  background: #f8eae3;
}
.mobile-header {
  max-width: 1050px;
  margin: auto;
  padding: 28px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.mobile-header .brand {
  font-size: 32px;
}
.customer-main {
  max-width: 530px;
  margin: 42px auto 32px;
  padding: 0 22px;
  text-align: center;
}
.customer-back {
  margin-bottom: 22px;
}
.customer-main > h1 {
  font-size: 36px;
  line-height: 1.2;
  max-width: 450px;
  margin: auto;
}
.customer-intro {
  font-size: 12px;
  margin-top: 12px;
}
.customer-main > .live-status {
  margin: 17px 0 25px;
}
.bread-pass {
  background: var(--green);
  color: #f9f4e5;
  border: 1px solid #354c3b;
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 12px 40px #4840280a;
}
.pass-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 30px 0;
}
.pass-top .eyebrow {
  color: #c3c8af;
  font-size: 9px;
}
.pass-top h2 {
  font-size: 13px;
  letter-spacing: 0;
  margin-top: 9px;
  font-weight: 450;
  color: #e0e2ce;
}
.pass-emblem {
  font-family: Georgia, serif;
  font-size: 41px;
  font-weight: bold;
  font-style: italic;
  opacity: 0.7;
}
.pass-progress {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 24px 30px 19px;
}
.pass-progress strong {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 58px;
  letter-spacing: -2px;
  line-height: 1;
}
.pass-progress small {
  font-size: 29px;
  color: #c4cbb3;
}
.pass-progress > span {
  font-size: 10px;
  color: #c0c9b3;
}
.stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0 30px 23px;
}
.stamp {
  aspect-ratio: 1.1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed #82917d;
  color: #9ba991;
  font-size: 12px;
  max-height: 59px;
}
.stamp.filled {
  background: #e7dfbd;
  border: 1px solid #e7dfbd;
  color: #47613e;
  font-size: 19px;
}
.reward-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 30px 24px;
  padding: 15px;
  border: 1px solid #72826b77;
  background: #405741;
  border-radius: 9px;
}
.reward-box > span {
  color: #e7d699;
  font-size: 25px;
}
.reward-box strong {
  font-size: 11px;
  font-weight: 500;
}
.reward-box p {
  font-size: 10px;
  color: #c7d0b9;
  margin-top: 4px;
}
.reward-box.available {
  background: #efdfb0;
  color: #504c34;
  border-color: #efdfb0;
}
.reward-box.available > span {
  color: #8c713d;
}
.reward-box.available strong {
  font-size: 13px;
  font-weight: 650;
}
.reward-box.available p {
  color: #847755;
}
.pass-qr-section {
  background: #fffefb;
  color: #55594b;
  text-align: center;
  padding: 20px 20px 27px;
  border-top: 1px dashed #d9d7c9;
}
.pass-qr-section img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: auto;
}
.pass-qr-section strong {
  display: block;
  font-size: 12px;
  margin-top: 6px;
}
.pass-qr-section p {
  font-size: 10px;
  color: #8b8b7c;
  margin: 6px 0 18px;
}
.qr-caption {
  font-size: 8px;
  color: #aba796;
  letter-spacing: 1px;
}
.customer-history {
  text-align: left;
  margin: 28px 0 20px;
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 22px;
}
@media (min-width: 900px) {
  .customer-main {
    max-width: 1000px;
    margin-top: 25px;
  }
  .customer-main > h1 {
    max-width: none;
  }
  .bread-pass {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bread-pass > :not(.pass-qr-section) {
    grid-column: 1;
  }
  .pass-qr-section {
    grid-column: 2;
    grid-row: 1 / 5;
    border-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
  }
  .pass-qr-section img {
    width: min(100%, 330px);
    margin: 0 auto;
  }
  .customer-history {
    margin-top: 20px;
  }
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.section-title h2 {
  font-size: 14px;
}
.section-title .small {
  font-size: 9px;
}
.customer-history .activities {
  margin-top: 10px;
  max-height: 275px;
  overflow: auto;
}
.customer-signoff {
  font-family: Georgia, serif;
  color: #9b927c;
  font-size: 12px;
  font-style: italic;
  margin: 28px 0;
}
.bread-pass.deactivated {
  background: #777b70;
  border-color: #777b70;
}
.employee-main {
  max-width: 500px;
  margin: 43px auto 25px;
  padding: 0 20px;
  text-align: center;
}
.employee-main h1 {
  font-size: 43px;
}
.employee-main > p.muted {
  margin: 12px 0 27px;
  font-size: 13px;
}
.employee-card {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 25px;
}
.employee-icon {
  width: 73px;
  height: 73px;
  display: grid;
  place-items: center;
  background: #f0f0e5;
  color: #758365;
  border-radius: 50%;
  font-size: 35px;
  margin: 10px auto 23px;
}
.employee-icon.success {
  color: #426846;
  background: #e6efdf;
}
.employee-icon.error {
  color: #ad7152;
  background: #f9eee5;
}
#employee-title {
  font-size: 22px;
  line-height: 1.3;
  max-width: 330px;
  margin: auto;
}
#employee-message {
  font-size: 12px;
  margin: 13px auto 0;
  max-width: 330px;
}
#scanned-pass {
  padding: 23px 0 15px;
  border-top: 1px solid var(--line);
  margin-top: 22px;
}
.employee-points {
  display: block;
  font-family: Georgia, serif;
  font-size: 45px;
  font-weight: 400;
  margin: 8px 0;
  color: #475c3e;
}
#employee-reward {
  font-size: 12px;
  color: #8b7b5b;
}
.stamps.compact {
  margin: 18px 0 0;
  gap: 8px;
}
.compact .stamp {
  background: #f8f7f1;
  border-color: #dfded0;
  color: #b5b5a5;
  max-height: 44px;
}
.compact .stamp.filled {
  background: #e9eedf;
  color: #708359;
  border-color: #e9eedf;
  font-size: 16px;
}
.employee-actions {
  display: grid;
  gap: 11px;
  margin-top: 24px;
}
.employee-actions > .button {
  width: 100%;
  min-height: 54px;
  font-size: 14px;
}
.privacy {
  font-size: 10px;
  line-height: 1.8;
  color: #a09b8b;
  margin: 25px 0;
}
.camera-area {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 58vh;
  overflow: hidden;
  background: #17251b;
  border-radius: 12px;
  margin-bottom: 20px;
}
.camera-area video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scan-guide {
  position: absolute;
  inset: 16%;
  border: 2px solid #e7e0bb;
  border-radius: 14px;
  box-shadow: 0 0 0 140px #0004;
  pointer-events: none;
}
.camera-area .camera-resume {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 52px;
  font-size: 16px;
  background: #fff9ed;
  color: var(--deep);
  border: 2px solid var(--green);
}
.camera-area > span {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  color: white;
  text-shadow: 0 1px 4px black;
  font-size: 10px;
}
.employee-card.scanning .employee-icon {
  display: none;
}
.employee-card.scanning #employee-title {
  font-size: 17px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffefb;
  padding: 32px;
  width: min(94vw, 470px);
  max-height: 90vh;
  color: #3a3d30;
  box-shadow: 0 25px 100px #15211333;
}
dialog::backdrop {
  background: #24342d77;
}
dialog h2 {
  font-family: Georgia, serif;
  font-size: 29px;
  line-height: 1.2;
  margin-bottom: 15px;
}
dialog p {
  font-size: 13px;
  color: #858171;
  margin: 10px 0;
}
.dialog-mark {
  display: block;
  color: #8a9b73;
  font-size: 35px;
  margin-bottom: 17px;
}
.dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
.dialog-actions > * {
  flex: 1;
}
.icon-button {
  background: #f4f2e8;
  border: 0;
  border-radius: 50%;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: #847e6e;
}
.close {
  position: absolute;
  top: 15px;
  right: 15px;
}
.detail-qr {
  width: 230px;
  height: 230px;
  display: block;
  margin: auto;
}
.detail-points {
  display: block;
  text-align: center;
  font-size: 23px;
  font-weight: 500;
}
.detail-actions {
  display: grid;
  gap: 10px;
  margin: 18px 0 28px;
}
.detail-activity {
  max-height: 260px;
  overflow: auto;
}
#detail-content > p.muted {
  text-align: center;
}
@media (min-width: 1600px) {
  .admin-main {
    padding: 44px 55px;
  }
  .panel-heading h2 {
    font-size: 20px;
  }
  td {
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .pass-identity strong {
    font-size: 12px;
  }
  .demo-banner {
    padding: 37px 40px;
  }
  .connect-card img {
    width: 155px;
    height: 155px;
  }
}
@media (max-width: 1250px) {
  .sidebar {
    width: 190px;
    padding: 28px 18px;
  }
  .admin-shell {
    margin-left: 190px;
  }
  .admin-main {
    padding: 30px 25px;
  }
  .admin-top {
    padding: 0 25px;
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .live-panel .activities {
    max-height: 205px;
  }
  .connect-grid {
    gap: 12px;
  }
  .connect-card {
    padding: 12px;
    gap: 8px;
  }
  .connect-card img {
    width: 110px;
    height: 110px;
  }
  .bread-art {
    margin-right: 0;
    gap: 15px;
  }
  .bread-art > span {
    display: none;
  }
  .stats {
    gap: 10px;
  }
  .stats article {
    padding: 18px 15px;
  }
  .stats small {
    line-height: 1.6;
  }
}
@media (max-width: 800px) {
  .sidebar {
    position: static;
    width: 100%;
    padding: 20px;
    border: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .sidebar .brand-icon,
  .sidebar-label,
  .sidebar-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    margin: 0;
    gap: 0;
  }
  .sidebar nav a {
    padding: 9px;
    font-size: 17px;
  }
  .sidebar nav a span {
    display: none;
  }
  .admin-shell {
    margin-left: 0;
  }
  .admin-top {
    height: 55px;
    padding: 0 20px;
    font-size: 9px;
  }
  .admin-main {
    padding: 28px 18px;
  }
  .page-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .page-title h1 {
    font-size: 37px;
  }
  .page-title p.muted {
    font-size: 12px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stats strong {
    font-size: 34px;
  }
  .stats article > span {
    font-size: 10px;
  }
  .overview-grid {
    gap: 18px;
  }
  .panel-heading {
    padding: 21px 18px;
    align-items: flex-start;
  }
  .panel-heading > .small {
    display: none;
  }
  .panel-heading h2 {
    font-size: 17px;
  }
  th:first-child,
  td:first-child {
    padding-left: 17px;
  }
  .demo-banner {
    padding: 26px;
  }
  .demo-banner h2 {
    font-size: 27px;
  }
  .bread-art {
    display: none;
  }
  .connect-grid {
    grid-template-columns: 1fr;
    padding: 22px 18px 0;
  }
  .connect-card {
    gap: 17px;
    padding: 15px;
  }
  .connect-card img {
    width: 125px;
    height: 125px;
  }
  .connect-card h3 {
    font-size: 15px;
  }
  .connect-panel > .muted {
    padding: 0 18px;
  }
  .connect-panel .panel-heading {
    flex-wrap: wrap;
  }
  .footer {
    padding: 22px 18px;
    font-size: 8px;
  }
  .mobile-header {
    padding: 22px;
  }
  .customer-main {
    margin-top: 32px;
  }
  .customer-main > h1 {
    font-size: 33px;
  }
  .customer-main .eyebrow {
    font-size: 9px;
  }
  .customer-intro {
    font-size: 11px;
  }
  .pass-top {
    padding: 24px 24px 0;
  }
  .pass-progress {
    margin: 22px 24px;
  }
  .stamps {
    margin: 0 24px 22px;
    gap: 9px;
  }
  .reward-box {
    margin: 0 24px 22px;
  }
  .employee-main {
    margin-top: 32px;
  }
  .employee-card {
    padding: 22px;
  }
  .customer-history {
    padding: 20px;
  }
  .mobile-header .brand {
    font-size: 29px;
  }
}
@media (max-width: 370px) {
  .customer-main,
  .employee-main {
    padding: 0 14px;
  }
  .customer-main > h1 {
    font-size: 29px;
  }
  .pass-progress strong {
    font-size: 48px;
  }
  .pass-progress > span {
    font-size: 9px;
  }
  .pass-top,
  .pass-progress {
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  .reward-box {
    padding: 12px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .stats article {
    padding: 15px 12px;
  }
  .stats small {
    font-size: 8px;
  }
  .connect-card {
    flex-direction: column;
    text-align: center;
  }
  .connect-card img {
    width: 160px;
    height: 160px;
  }
  .dialog-actions {
    flex-direction: column;
  }
  .section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .employee-main {
    max-width: 850px;
    margin-top: 20px;
  }
  .employee-main h1 {
    font-size: 31px;
  }
  .employee-card.scanning {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 18px;
  }
  .employee-card.scanning .camera-area {
    grid-row: span 2;
    margin: 0;
    max-height: 65vh;
  }
  .employee-card.scanning .employee-actions {
    margin: 0;
  }
  .employee-card.scanning #employee-status {
    align-self: end;
  }
  .employee-card.scanning .employee-actions {
    align-self: start;
  }
}

/* Shared rhythm for the presentation views. */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --section-gap: 28px;
  --card-radius: 16px;
}
.sidebar {
  width: 216px;
  padding: 32px 24px 28px;
}
.sidebar nav {
  margin-top: 38px;
  gap: 4px;
}
.sidebar nav a {
  min-height: 46px;
  padding: 11px 12px;
}
.sidebar-bottom p {
  font-size: 18px;
  line-height: 1.35;
  margin: 14px 0 10px;
}
.admin-shell {
  margin-left: 216px;
}
.admin-top {
  height: 74px;
  padding-inline: clamp(28px, 3.5vw, 52px);
}
.admin-main {
  display: grid;
  gap: var(--section-gap);
  max-width: 1320px;
  padding: 42px clamp(28px, 3.5vw, 52px) var(--space-5);
}
.admin-main > * {
  min-width: 0;
}
.page-title,
.stats,
.demo-banner,
.connect-panel {
  margin: 0;
}
.page-title {
  align-items: end;
  gap: var(--space-4);
}
.page-title h1 {
  font-size: clamp(38px, 3.3vw, 52px);
  line-height: 1.08;
  margin-bottom: var(--space-2);
}
.page-title p.muted {
  max-width: 47ch;
  font-size: 14px;
  line-height: 1.55;
}
.button {
  min-height: 46px;
  border-radius: 9px;
  padding: 11px 21px;
  gap: 12px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.button.outline:hover {
  border-color: #a8ad9b;
  background: #f5f6ef;
}
.button.cream:hover {
  background: #fff8e9;
}
.button:active {
  box-shadow: inset 0 2px 5px #263f3218;
}
.demo-banner {
  min-height: 252px;
  padding: 36px clamp(30px, 4vw, 50px);
  border-radius: var(--card-radius);
  gap: var(--space-4);
}
.demo-banner > div:first-child {
  max-width: 560px;
  position: relative;
  z-index: 1;
}
.demo-banner h2 {
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.13;
  margin: 12px 0;
}
.demo-banner p {
  font-size: 12px;
  line-height: 1.6;
  max-width: 49ch;
}
.demo-banner .button {
  margin-top: 22px;
}
.panel,
.bread-pass,
.customer-history,
.employee-card {
  border-radius: var(--card-radius);
}
.demo-status {
  padding: 28px 32px 30px;
}
.status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.status-heading .eyebrow {
  margin-bottom: 7px;
}
.status-heading h2 {
  font-size: 20px;
}
.status-ready {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 100px;
  background: #f4eee2;
  color: #8a7148;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-ready::before,
.status-facts span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-ready.is-ready {
  background: #edf3e9;
  color: #53704f;
}
.status-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(230px, .9fr);
  gap: var(--space-4);
  padding-top: 22px;
}
.status-main > p {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  max-width: 55ch;
}
.status-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.status-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #eee7d9;
  border-radius: 100px;
  background: #fbf8f0;
  color: #907b58;
  font-size: 10px;
  white-space: nowrap;
}
.status-facts span.is-ok {
  background: #f3f7f0;
  border-color: #e2ebdf;
  color: #5d7959;
}
.status-address {
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}
.status-address > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.status-address code {
  color: var(--green);
  font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}
.stats {
  gap: var(--space-2);
}
.stats article {
  min-height: 165px;
  padding: 24px;
  border-radius: var(--card-radius);
}
.stats article > span {
  font-size: 11px;
  font-weight: 550;
  line-height: 1.45;
}
.stats strong {
  margin: auto 0 7px;
  font-size: clamp(35px, 3vw, 44px);
  line-height: 1.1;
}
.stats small {
  font-size: 10px;
  line-height: 1.45;
}
.stats .stat-note {
  background: #f0efe3;
}
.stat-note em {
  font-size: .57em;
}
.overview-grid {
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, .95fr);
  gap: var(--space-3);
}
.panel-heading {
  align-items: start;
  padding: 29px 30px 25px;
}
.panel-heading h2 {
  font-size: 19px;
  line-height: 1.3;
}
.panel-heading > .small {
  font-size: 10px;
  text-align: right;
}
table {
  font-size: 12px;
}
th {
  padding-block: 13px;
}
td {
  padding-block: 19px;
}
th:first-child,
td:first-child {
  padding-left: 30px;
}
.pass-identity strong {
  font-size: 12px;
}
.progress-track {
  width: min(100%, 138px);
}
.badge {
  font-size: 9px;
  padding: 7px 10px;
}
.demo-link,
.text-button {
  min-height: 34px;
  font-size: 11px;
}
.table-note {
  padding: 18px 30px;
  line-height: 1.5;
}
.live-panel .activities {
  padding-inline: 30px;
}
.connect-panel {
  padding-bottom: 30px;
}
.connect-panel > .muted {
  padding-inline: 30px;
  line-height: 1.55;
}
.connect-grid {
  gap: var(--space-2);
  padding: 24px 30px 0;
}
.connect-card {
  min-height: 185px;
  padding: 20px;
  border-radius: 12px;
  gap: 20px;
}
.connect-card img {
  width: 140px;
  height: 140px;
}
.mobile-header {
  padding-block: 26px;
}
.customer-main,
.employee-main {
  margin-top: 44px;
}
.customer-history {
  padding: 26px;
}
.employee-card {
  padding: 32px;
}
@media (max-width: 1250px) {
  .sidebar {
    width: 190px;
    padding: 28px 18px;
  }
  .admin-shell {
    margin-left: 190px;
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats article {
    min-height: 145px;
  }
  .connect-card {
    min-height: 160px;
  }
}
@media (max-width: 900px) {
  .status-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .status-address {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 19px 0 0;
  }
  .connect-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  :root {
    --section-gap: 22px;
  }
  .sidebar {
    width: 100%;
    padding: 17px 22px;
  }
  .sidebar nav a {
    min-height: 44px;
  }
  .admin-shell {
    margin-left: 0;
  }
  .admin-top {
    height: 56px;
    padding-inline: 22px;
  }
  .admin-main {
    padding: 32px 22px 40px;
  }
  .page-title {
    align-items: start;
    gap: 20px;
  }
  .page-title h1 {
    font-size: clamp(36px, 5vw, 44px);
  }
  .demo-banner {
    min-height: 0;
    padding: 30px;
  }
  .bread-art {
    display: none;
  }
  .panel-heading {
    padding: 25px;
  }
  .connect-panel > .muted {
    padding-inline: 25px;
  }
  .connect-grid {
    padding-inline: 25px;
  }
}
@media (max-width: 600px) {
  .admin-main {
    padding-inline: 18px;
  }
  .page-title .button {
    width: 100%;
  }
  .demo-banner {
    padding: 28px 24px;
  }
  .demo-banner h2 {
    font-size: 30px;
  }
  .demo-status {
    padding: 23px 22px;
  }
  .status-heading {
    align-items: start;
  }
  .status-ready {
    font-size: 10px;
  }
  .status-facts {
    gap: 7px;
  }
  .stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .stats article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 5px 16px;
    min-height: 106px;
    padding: 20px 22px;
    align-items: center;
  }
  .stats article > span {
    grid-column: 1;
    grid-row: 1;
  }
  .stats strong {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 36px;
    white-space: nowrap;
  }
  .stats small {
    grid-column: 1;
    grid-row: 2;
  }
  .stats .stat-note strong {
    font-size: 28px;
  }
  .table-wrap {
    overflow: visible;
    padding: 0 18px 20px;
  }
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
    white-space: normal;
  }
  thead {
    display: none;
  }
  tbody {
    display: grid;
    gap: 12px;
  }
  tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity status" "progress progress" "actions actions";
    gap: 13px 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffefb;
  }
  td,
  tr:last-child td {
    border: 0;
    padding: 0;
  }
  td:first-child { grid-area: identity; }
  td:nth-child(2) { grid-area: progress; }
  td:nth-child(3) { grid-area: status; }
  td:nth-child(4) { grid-area: actions; }
  .pass-identity strong {
    font-size: 13px;
  }
  .avatar {
    width: 34px;
    height: 34px;
  }
  .table-points {
    margin-bottom: 8px;
    font-size: 11px;
  }
  .progress-track {
    width: 100%;
    height: 5px;
  }
  .badge {
    font-size: 9px;
  }
  .row-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  .demo-link,
  .text-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 12px;
  }
  .panel-heading {
    padding: 24px 20px;
  }
  .panel-heading > .small {
    display: block;
  }
  .table-note {
    padding: 16px 20px;
  }
  .live-panel .activities {
    padding-inline: 20px;
  }
  .connect-panel > .muted {
    padding-inline: 20px;
  }
  .connect-grid {
    padding: 20px 20px 0;
  }
  .connect-card {
    display: grid;
    justify-items: start;
    gap: 16px;
    padding: 18px;
  }
  .connect-card img {
    width: 150px;
    height: 150px;
  }
  .connect-card > div {
    width: 100%;
  }
  .connect-card h3 {
    font-size: 16px;
  }
  .customer-main,
  .employee-main {
    margin-top: 34px;
  }
  .employee-card {
    padding: 26px 22px;
  }
}
@media (max-width: 370px) {
  .sidebar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
  .sidebar nav {
    width: 100%;
    justify-content: space-around;
  }
  .admin-main {
    padding-inline: 14px;
  }
  tr {
    grid-template-columns: 1fr;
    grid-template-areas: "identity" "status" "progress" "actions";
  }
  td:nth-child(3) {
    justify-self: start;
  }
  .status-heading {
    flex-direction: column;
  }
  .stats article {
    padding: 18px;
  }
  .badge {
    padding: 6px 8px;
  }
}

/* Booking safety and reversible receipt. */
#quantity-area { margin: 1.5rem 0; text-align: left; }
#quantity-area label { display: block; font-weight: 600; margin-bottom: .5rem; }
#quantity { width: 100%; box-sizing: border-box; padding: .8rem; font: inherit; border: 1px solid #c7c7bb; border-radius: 12px; background: #fff; }
.safety-countdown { min-height: 1.5em; font-weight: 600; }
.undo-toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); box-sizing: border-box; z-index: 20; background: #203c31; color: white; padding: 16px; border-radius: 16px; box-shadow: 0 8px 32px #0003; display: flex; align-items: center; gap: 12px; animation: receipt-slide .25s ease-out; }
.undo-toast[hidden] { display: none; }
.undo-toast .button { color: #203c31; background: white; flex-shrink: 0; }
@keyframes receipt-slide { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .undo-toast { animation: none; } }
@media (max-width: 360px) { .undo-toast { flex-direction: column; align-items: stretch; } }

.login-main { max-width: 600px; margin: 6vh auto; padding: 0 16px; }
.login-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.role-choice { padding: 18px; text-align: left; font: inherit; color: #203c31; border: 2px solid #dddcd4; border-radius: 14px; background: white; cursor: pointer; }
.role-choice strong, .role-choice span { display: block; }
.role-choice span { font-size: .85rem; margin-top: 8px; line-height: 1.5; }
.role-choice[aria-pressed="true"] { border-color: #203c31; background: #edf2e9; }
.role-choice:focus-visible { outline: 3px solid #ae8437; outline-offset: 3px; }
#login-form input { display: block; width: 100%; box-sizing: border-box; padding: 14px; margin: 8px 0 16px; border: 1px solid #ccc; border-radius: 10px; font: inherit; }
.login-note { margin-top: 24px; font-size: .85rem; }
.session-controls { margin-bottom: 20px; }
.session-controls .button { white-space: normal; font-size: .85rem; }
.session-role { font-size: .8rem; font-weight: 600; }
.session-error { color: #a33126; }
@media(max-width: 480px) { .login-roles { grid-template-columns: 1fr; } }
.login-main .panel { padding: 24px; }

.pilot-views { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pilot-views[hidden] { display: none; }
.pilot-views a[aria-current="page"] { background: #203c31; color: white; }
.support-panel { margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
.sidebar-support { margin-top: 24px; font-size: 14px; }
.sidebar-support summary { cursor: pointer; padding: 10px 0; }
.sidebar-support a { display: block; padding: 12px 0; }
@media (max-width: 800px) {
  .sidebar { flex-wrap: wrap; }
  .sidebar-support { width: 100%; margin-top: 0; }
  .sidebar-support summary { padding: 5px 0; }
}
.support-panel summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.support-panel p { font-size: 14px; line-height: 1.6; }
.support-panel textarea, #monitor-report { width: 100%; box-sizing: border-box; min-height: 180px; font: 13px monospace; }

/* Locally served transparent Jeker cutout; no external image request. */
.jeker-logo{display:block;width:clamp(150px,24vw,240px);max-width:100%;height:auto;background:transparent;padding:0;object-fit:contain}.jeker-brand-header{max-width:1100px;margin:auto;padding:20px}.brand:has(.jeker-logo){font-size:inherit;max-width:100%}.sidebar .jeker-logo{width:185px}.pass-card .jeker-logo{width:150px;margin:auto}

.password-toggle{justify-self:end;min-height:44px;border:0;background:transparent;color:#704020;padding:.35rem .2rem;font:inherit;font-size:.9rem;text-decoration:underline;text-underline-offset:4px;border-radius:6px}
.password-toggle:hover{color:#451900;background:#fff2d2}
.field-hint{font-size:.9rem;line-height:1.5;color:#6a6258}
.remember-device{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;line-height:1.5}
.remember-device input[type=checkbox]{flex:0 0 20px;min-height:20px;width:20px;height:20px;margin:.15rem 0 0;accent-color:#704020}
.access-surface{--green:#713c24;--deep:#442719;--line:#e8dcc8;min-height:100vh;background:radial-gradient(ellipse at 10% 0,#fff1bd 0,transparent 42%),radial-gradient(ellipse at 95% 30%,#f5e5c7 0,transparent 38%),#fbf7ef;color:#422f25}
.access-surface .button.primary:hover{background:#542812}
.access-surface input:not([type=checkbox]):focus{border-color:#97622e;box-shadow:0 0 0 3px #e5ba6226}
.access-surface .eyebrow{color:#85562c}
.access-surface .button.outline{color:#69452c;border-color:#d8c6aa;background:#fffdf8}
.access-surface .button.outline:hover{background:#fff4d9;border-color:#b98b51}

/* Consistent, quiet navigation across the product. */
.account-header a,.session-controls a,.staff-main a.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem .9rem;border:1px solid #d9cbb6;border-radius:10px;background:#fffdf8;color:#581900;font-weight:600;text-decoration:none}
.account-header a:hover,.session-controls a:hover{background:#f5ead6}
.session-controls{gap:.75rem;flex-wrap:wrap}.session-controls>span{display:flex;flex-wrap:wrap;gap:.5rem}.session-controls>span a{margin-left:0!important}.session-controls .session-role{flex-basis:100%;font-size:.9rem}
.button,.password-toggle{text-decoration:none}.password-toggle{padding:.45rem .7rem;background:#f6f0e4}.panel{scroll-margin-top:1rem}

/* A single workplace navigation replaces the old overlapping menus. */
.workplace-nav{position:sticky;top:0;z-index:40;display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.6rem 1rem;background:#fffdf8f5;border-bottom:1px solid #e4dacb;backdrop-filter:blur(12px)}
.workplace-nav>a,.workplace-more>summary{display:block;padding:.75rem 1rem;min-height:44px;border-radius:10px;font-weight:600;color:#684123;text-decoration:none;cursor:pointer;list-style:none}
.workplace-nav a[aria-current=page]{background:#704020;color:white}.workplace-nav>a:hover{background:#eee2cf;color:#581900}
.workplace-more{position:relative}.workplace-more>div{position:absolute;right:0;top:100%;width:190px;padding:.5rem;background:#fffdf8;border:1px solid #dfd2bf;border-radius:12px;box-shadow:0 12px 28px #39230e20}.workplace-more a{display:block;padding:.75rem;border-radius:8px}.workplace-more a:hover{background:#f0e5d4}
.workplace-layout .sidebar,.workplace-layout .admin-top,.workplace-layout .account-header,.workplace-layout .session-controls,.workplace-layout .staff-main>p:has(>a[href="/management"]){display:none!important}
.workplace-layout .admin-shell{margin-left:0}.workplace-layout .admin-main{max-width:1100px;margin:auto}.workplace-layout.admin-page .page-title .eyebrow,.workplace-layout.admin-page .page-title .muted,.workplace-layout.admin-page #connect{display:none}
.management-tabs{display:flex;gap:.4rem;margin:1rem 0 1.5rem;padding:.3rem;border-radius:12px;background:#eee7db}.management-tabs button{flex:1;border:0;border-radius:9px;min-height:44px;background:transparent;color:#674528;font-weight:600}.management-tabs button[aria-pressed=true]{background:#fffdf8;box-shadow:0 2px 8px #54300f10}.management-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.management-toolbar h1{margin:0}
@media(max-width:480px){.workplace-nav{gap:.1rem;padding:.5rem .35rem}.workplace-nav>a,.workplace-more>summary{padding:.7rem .65rem;font-size:.9rem}.workplace-layout .admin-main{padding:1rem}.workplace-nav{justify-content:space-between}}

.operation-state{font-size:.9rem;margin-bottom:1rem;color:#4d6446}.operation-state.error{color:#a44936;font-weight:600}

.workplace-more>div a{white-space:nowrap}

/* Wide working surfaces: use the screen for related tasks side by side. */
.workplace-layout>.jeker-brand-header{display:none}
.workplace-brand{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem}
.workplace-brand img{display:block;width:150px;height:auto}
.account-main.management-main{max-width:1440px;padding:28px 32px 48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.management-main>.management-toolbar,.management-main>.management-tabs,.management-main>.notice,.management-main>.operation-state,.management-main>.management-metrics,.management-main>.daily-panel{grid-column:1/-1}
.management-main .management-toolbar{margin:0}
.management-main .management-toolbar h1{color:var(--deep);font-size:36px;margin:0}
.management-main .management-tabs{justify-self:start;min-width:min(100%,480px);margin:0;padding:4px;background:#eaece3}
.management-main .management-tabs button{padding:10px 24px;color:var(--deep)}
.management-main .operation-state{margin:0;font-size:13px}
.account-main.management-main>.panel{margin:0;padding:24px;border-radius:14px;box-shadow:none;background:#fffefa}
.management-main .panel>h2{margin-bottom:12px}
.management-main .panel>p{font-size:14px}
.management-main .management-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.management-metrics article{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:#fffefa}
.management-metrics article:last-child{background:#eceede}
.management-metrics span,.management-metrics small,.management-metrics a{font-size:13px;color:#60695e}
.management-metrics strong{font:42px Georgia,serif;color:var(--deep)}
.management-metrics a{min-height:24px;font-weight:600}
.account-main.management-main>.daily-panel{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:16px 24px}
.management-main .daily-panel h2{font-size:16px;margin:0}
.management-main .daily-panel p{flex:1;min-width:180px}
.management-main .daily-panel .button{margin:0;font-size:14px}
.management-main #find-operation{grid-template-columns:minmax(0,1fr) auto;align-items:end;margin-top:18px;gap:8px 12px}
.management-main #find-operation label{grid-column:1/-1;font-size:14px}
.management-main #find-operation button{margin:0;font-size:14px}
.staff-main.team-main{width:min(100% - 64px,1376px);margin:28px auto 48px;grid-template-columns:minmax(320px,1fr) minmax(0,1.5fr);align-items:start;gap:20px 28px}
.team-main>h1,.team-main>p{grid-column:1/-1}
.team-main>h1{font-size:36px;color:var(--deep)}
.team-grid{grid-column:1/-1;display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,1.5fr);gap:24px;align-items:start}
.team-grid>.panel{border-radius:14px;min-width:0}
.team-grid>.team-accounts{grid-column:2;grid-row:1/span 3}
.team-grid>#reset-panel,.team-grid>#own-password-panel{grid-column:1}
.team-main>#staff-logout{display:none}
.workplace-layout .admin-main{max-width:1440px}
@media(min-width:1100px){
  .workplace-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:4px max(24px,calc((100vw - 1440px)/2));gap:12px}
  .workplace-header .workplace-nav{justify-content:flex-start;padding:0;background:transparent;backdrop-filter:none}
  .workplace-header .workplace-account{margin:0;padding:6px 0;border:0;flex-direction:column;align-items:flex-end;gap:6px}
  .workplace-header .workplace-account p{font-size:12px}
  .workplace-header>.notice{grid-column:1/-1}
}
@media(min-width:700px) and (max-width:1099px){
  .workplace-header{display:grid;grid-template-columns:auto 1fr;align-items:center}
  .workplace-header .workplace-brand{grid-column:1;grid-row:1}
  .workplace-header .workplace-account{grid-column:2;grid-row:1;border:0;margin:0;justify-content:flex-end}
  .workplace-header .workplace-nav{grid-column:1/-1;padding:0 16px 8px}
}
@media(max-width:699px){
  .workplace-header .workplace-brand{display:none}
  .workplace-header{display:flex;flex-direction:column}
  .workplace-header .workplace-account{order:-1;width:100%}
  .workplace-header .workplace-nav{width:100%}
  .account-main.management-main{padding:20px 16px 32px;gap:16px;grid-template-columns:minmax(0,1fr)}
  .management-main .management-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .management-metrics article{padding:16px;gap:6px}
  .management-metrics strong{font-size:34px}
  .management-main .management-tabs{width:100%;min-width:0}
  .management-main .management-tabs button{padding:10px 12px}
  .account-main.management-main>.panel{padding:18px}
  .management-main #find-operation{grid-template-columns:minmax(0,1fr)}
  .staff-main.team-main{width:calc(100% - 32px);grid-template-columns:minmax(0,1fr);margin:20px auto}
  .team-grid{grid-template-columns:minmax(0,1fr)}
  .team-grid>.team-accounts{grid-column:auto;grid-row:auto}
}

.workplace-header{position:sticky;top:0;z-index:40;background:#fffdf8;border-bottom:1px solid #e4dacb}.workplace-header .workplace-nav{position:relative;border:0}.workplace-account{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem 1rem;max-width:1100px;margin:auto;padding:.6rem 1rem;border-bottom:1px solid #eee5d8}.workplace-account p{font-size:.85rem;color:#5b4938;overflow-wrap:anywhere}.workplace-account-actions{display:flex;gap:.5rem}.workplace-account-actions button{min-height:44px;padding:.5rem .85rem;border:1px solid #d5c3ab;border-radius:9px;background:#fffdf8;color:#581900;font-weight:600}.workplace-account-actions button:first-child{background:#f1e5d2}.workplace-header>.notice{margin:.4rem 1rem}.workplace-account-actions button:hover{background:#e9dac2}@media(max-width:480px){.workplace-account{padding:.5rem .75rem}.workplace-account-actions{width:100%}.workplace-account-actions button{flex:1}.workplace-header .workplace-nav{padding-top:.3rem}}

/* Reference design: cream paper, forest green and warm gold. */
.workplace-layout{background:#f7f5ef;color:#302f28}
.workplace-layout .workplace-header{background:#fffefb;border-color:#e9e6de}
.workplace-layout .workplace-nav>a,.workplace-layout .workplace-more>summary{color:#344b3d;font-weight:500;border-radius:12px}
.workplace-layout .workplace-nav a[aria-current=page]{background:#eef1e7;color:#263f32}
.workplace-layout .workplace-nav>a:hover,.workplace-layout .workplace-more a:hover{background:#eef1e7;color:#263f32}
.workplace-layout .workplace-account p{color:#77796d}
.workplace-layout .workplace-account-actions button{color:#344b3d;border-color:#dedbd2;background:#fffefb;font-weight:500;border-radius:12px}
.workplace-layout .workplace-account-actions button:first-child{background:#eef1e7}
.workplace-layout .workplace-account-actions button:hover{background:#e4e9dc}
.workplace-layout .workplace-more>div{background:#fffefb;border-color:#e9e6de;color:#344b3d}
.account-main.management-main{padding-top:44px;gap:24px}
.management-main .management-toolbar{align-items:center;margin-bottom:6px}
.management-main .management-toolbar h1{font-size:clamp(36px,4vw,56px);color:#302f28;letter-spacing:-1.9px;line-height:1.15;margin:16px 0 20px}
.management-main .management-toolbar .eyebrow{font-size:12px;letter-spacing:2px;color:#8d8067;font-weight:600}
.management-main .management-subtitle{color:#828176;font-size:18px}
.management-main .management-tabs{background:transparent;padding:0;gap:8px;min-width:0}
.management-main .management-tabs button{font-weight:500;color:#72776b;background:transparent;border-radius:12px;padding:12px 24px}
.management-main .management-tabs button[aria-pressed=true]{background:#e9eee2;box-shadow:none;color:#263f32}
.management-main>.workplace-welcome{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:32px;background:#344b3d;color:#f4f0df;border-radius:24px;padding:42px 52px;min-height:290px}
.management-main .workplace-welcome .eyebrow{font-size:11px;letter-spacing:1.7px;color:#d3c896}
.management-main .workplace-welcome h2{font:400 clamp(30px,3.3vw,44px)/1.15 Georgia,serif;letter-spacing:-.8px;color:#f4f0df;margin:18px 0}
.management-main .workplace-welcome p:not(.eyebrow){color:#e1dfcb;font-size:17px}
.management-main .workplace-welcome .button{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;background:#f4f0df;color:#344b3d;border:0;border-radius:13px;padding:16px 24px;margin:28px 0 0;font-size:16px;min-height:56px}
.management-main .workplace-welcome .button:hover{background:#fff8e9}
.management-main .workplace-welcome .bread-art{flex:0 0 260px;justify-content:center;margin:20px}
.management-main .workplace-welcome .loaf{width:240px;height:165px;gap:24px}
.management-main .workplace-welcome .loaf i{height:84px;width:11px}
.account-main.management-main>.panel,.management-main .management-metrics article,.team-grid>.panel{background:#fffefb;border-color:#e9e6de;border-radius:20px;box-shadow:none}
.management-main .management-metrics article:last-child{background:#eeefdf}
.management-main .button.outline,.team-main .button.outline{color:#5f6659;border-color:#dedbd2;background:#fffefb;font-weight:500}
.management-main .operation-state{color:#69775e}
@media(max-width:699px){
  .account-main.management-main{padding-top:24px;gap:18px}
  .management-main .management-toolbar{align-items:flex-start;gap:12px}
  .management-main .management-toolbar h1{font-size:34px;margin:12px 0}
  .management-main .management-toolbar .eyebrow{font-size:9px;letter-spacing:1.2px}
  .management-main .management-subtitle{font-size:14px}
  .management-main .management-toolbar>.button{font-size:12px;padding:10px;margin:0}
  .management-main .management-tabs button{padding:10px 12px}
  .management-main>.workplace-welcome{padding:26px;min-height:0;border-radius:20px;position:relative;overflow:hidden}
  .management-main .workplace-welcome>div:first-child{position:relative;z-index:1}
  .management-main .workplace-welcome h2{font-size:30px;max-width:250px}
  .management-main .workplace-welcome p:not(.eyebrow){font-size:14px;max-width:220px}
  .management-main .workplace-welcome .bread-art{position:absolute;right:-90px;bottom:0;opacity:.14;pointer-events:none}
  .management-main .workplace-welcome .button{font-size:14px;min-height:48px;margin-top:20px;padding:12px 20px}
}