:root {
  color-scheme: light;
  font-family: "Inter", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #171a17;
  background: #fbfcfa;
  --muted: #565e55;
  --rule: #dce2d8;
  --accent: #286d20;
  --green: #48c52a;
  --pale: #eff7e9;
  --yellow: #f4ed52;
  --paper: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: .22em; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #3e8327; outline-offset: 3px; }
h1, h2, p, dl, dd, table { margin: 0; }
.shell { width: min(1180px, calc(100% - 72px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--rule); }
.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #f8ea64, #dc4870 26%, #4ea3af 47%, #bfe257 65%, #f9da53 77%, #d6467d);
}
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 72px; }
.brand { display: inline-flex; min-width: 0; flex-shrink: 1; }
.brand img { display: block; width: min(286px, 100%); height: auto; object-fit: contain; }
#navigation { display: flex; align-items: center; justify-content: flex-end; gap: 23px; white-space: nowrap; font-size: .88rem; }
#navigation a, .text-button { color: var(--muted); text-decoration: none; }
#navigation a { padding-block: 10px; border-block-end: 2px solid transparent; }
#navigation a:hover, #navigation a[aria-current="page"] { color: var(--accent); }
#navigation a[aria-current="page"] { border-color: var(--green); font-weight: 700; }
.text-button { background: transparent; border: 0; padding: 5px 0; text-decoration: underline; text-underline-offset: .26em; }
#app { padding-top: 30px; padding-bottom: 50px; }
.loading, .empty { padding: 34px 16px; text-align: center; color: var(--muted); }
.login-grid { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(290px, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.login-poster { margin: 0; background: #3db229; border: 1px solid var(--rule); min-width: 0; }
.login-poster img { display: block; width: 100%; height: auto; max-height: calc(100vh - 125px); min-height: 530px; object-fit: cover; object-position: 50% 43%; }
.login-panel { width: min(100%, 420px); padding-block: 14px; }
.eyebrow { color: var(--accent); font-weight: 680; font-size: .8rem; letter-spacing: .08em; }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -.065em; line-height: 1.08; }
.login-panel h1 { margin: 12px 0 20px; font-size: clamp(2.35rem, 5.3vw, 4.75rem); }
.horizon { height: 1px; width: 70px; background: var(--accent); position: relative; margin: 8px 0 28px; }
.horizon::after { content: ""; position: absolute; right: 0; top: -6px; width: 12px; height: 12px; border: 1px solid var(--accent); background: var(--yellow); border-radius: 50%; }
.field { display: grid; gap: 7px; margin-bottom: 16px; font-weight: 630; }
.field input, .search, .code-input { border: 1px solid #cfd9cc; border-radius: 5px; background: #f8faf6; color: inherit; padding: 11px 13px; width: 100%; min-width: 0; min-height: 44px; }
.muted, .helper { color: var(--muted); }
.helper { font-size: .83rem; line-height: 1.6; }
.login-panel .helper { margin-top: 12px; }
.demo-info { margin-top: 22px; padding: 12px 14px; background: var(--pale); border-left: 2px solid #77bd65; font-size: .82rem; color: #345730; }
.demo-info strong { display: block; margin-bottom: 2px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.demo-actions .button { min-height: 32px; font-size: .76rem; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #b8c9b4; border-radius: 6px; background: white; color: var(--accent); padding: 0 13px; text-decoration: none; font-weight: 680; font-size: .87rem; }
.button:hover { background: #f0f7ed; }
.primary { background: var(--green); border-color: #3bac20; color: #11200e; }
.primary:hover { background: #59d637; }
.button:disabled { background: #eef0eb; border-color: #e0e3dc; color: #5e685d; }
.wide { width: 100%; min-height: 47px; }
.arrow { font-size: 1.2rem; line-height: 1; }
.login-panel .primary { justify-content: space-between; }
.event-banner { height: clamp(105px, 15vw, 185px); overflow: clip; background: #3fbf22; border: 1px solid #afcba6; }
.event-banner img { object-fit: cover; object-position: center 48%; display: block; width: 100%; height: 100%; }
.shop-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 25px 0 24px; }
.shop-heading h1 { margin: 5px 0 8px; }
.shop-heading .eyebrow { font-size: .76rem; }
.account-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; font-size: .88rem; color: var(--muted); }
.account-line strong { color: #202720; }
.balance-chip { border-left: 2px solid #4eb332; min-width: 146px; padding: 4px 0 2px 17px; }
.balance-chip dt { color: var(--muted); font-size: .8rem; }
.balance-chip strong { color: #205c16; font-size: clamp(1.55rem, 3vw, 2.6rem); font-variant-numeric: tabular-nums; line-height: 1.23; }
.balance-chip dd { font-size: .83rem; color: var(--muted); }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(258px, 320px); gap: 22px; align-items: start; }
.panel { border: 1px solid var(--rule); background: var(--paper); border-radius: 7px; min-width: 0; }
.catalog { overflow: hidden; }
.catalog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--rule); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { min-height: 36px; border-radius: 5px; border: 1px solid transparent; padding: 4px 9px; background: transparent; color: var(--muted); font-size: .83rem; font-weight: 630; }
.filter:hover { background: #f4f6f2; color: var(--accent); }
.filter[aria-pressed="true"] { background: #e3f2dc; border-color: #b6d8aa; color: #214b19; }
.search { max-width: 182px; min-height: 36px; padding-block: 5px; font-size: .85rem; }
.catalog table, .receipt table { border-collapse: collapse; text-align: left; width: 100%; }
th, td { padding: 12px 13px; border-bottom: 1px solid #e6ebe3; }
th { background: #f3f6f1; font-size: .77rem; color: #4d5a4b; font-weight: 690; }
td { font-size: .87rem; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { overflow-wrap: anywhere; }
.group-row th { padding-block: 9px; background: #f7f9f5; border-bottom: 1px solid #e6ebe3; font-size: .75rem; color: var(--accent); }
.product-details { display: flex; align-items: center; gap: 12px; }
.product-details > div { min-width: 0; }
.product-thumbnail { display: grid; place-items: center; flex: 0 0 auto; width: 72px; height: 64px; padding: 4px; border: 1px solid #dfe7db; border-radius: 5px; background: #f5f8f2; cursor: zoom-in; }
.product-thumbnail:hover { border-color: #80ae71; background: #edf5e8; }
.product-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.item-name { font-weight: 660; display: block; }
.item-meta { display: block; color: var(--muted); font-size: .75rem; margin-top: 3px; }
.points-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.points-cell strong { font-size: 1rem; color: #225b18; }
.number-cell { text-align: end; width: 117px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid #d4e0cf; border-radius: 6px; overflow: hidden; background: #f8faf7; }
.stepper button { background: transparent; border: 0; inline-size: 33px; block-size: 33px; color: var(--accent); font-size: 1.08rem; }
.stepper button:hover { background: #e4f1dc; }
.stepper button:disabled { color: #91978e; background: transparent; }
.stepper button:focus-visible { outline-offset: -3px; }
.stepper output { min-width: 29px; padding-inline: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.selected-row td { background: #f5fbf1; }
.cart { position: sticky; top: 99px; overflow: hidden; }
.cart-body { padding: 17px; }
.panel-title { font-size: 1.08rem; letter-spacing: -.025em; }
.cart-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.cart-count { color: #3c6541; font-size: .78rem; font-variant-numeric: tabular-nums; }
.cart-items { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0 0 13px; }
.cart-items li, .cart-totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .86rem; }
.cart-items li span:last-child { color: var(--accent); flex-shrink: 0; white-space: nowrap; }
.cart-totals { display: grid; gap: 7px; border-top: 1px solid var(--rule); margin-top: 13px; padding-top: 12px; }
.cart-totals dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-totals .total { font-size: 1.03rem; font-weight: 710; }
.cart-footer { padding-top: 15px; }
.cart-footer .helper { margin-top: 8px; }
.small-note { padding: 11px 12px; margin-top: 12px; border: 1px solid var(--rule); border-radius: 5px; background: #f5f8f2; }
.mobile-summary { display: none; }
.page-head { margin: 10px 0 23px; }
.page-head h1 { margin: 6px 0 10px; }
.page-head p:not(.eyebrow) { color: var(--muted); font-size: .9rem; }
.history-list { padding: 0; margin: 0; list-style-type: none; }
.history-list li + li { border-top: 1px solid var(--rule); }
.history-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; padding: 13px 16px; color: #1a2918; }
.history-list a:hover { background: #f3faf0; }
.history-list .code { letter-spacing: .05em; font-size: .95rem; }
.status { color: #815813; background: #fff4d2; padding: 3px 8px; border-radius: 4px; font-size: .76rem; white-space: nowrap; }
.status.done { color: #1c5a35; background: #e8f5eb; }
.narrow { max-width: 780px; margin-inline: auto; }
.receipt { overflow: hidden; }
.receipt-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 20px; background: #f1fae8; border-bottom: 1px solid #d4e5c9; }
.receipt-top h2 { margin-bottom: 2px; }
.code-label { color: var(--muted); font-size: .8rem; margin-bottom: 1px; }
.code { font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 710; }
.receipt-code { color: #1e5216; font-size: clamp(1.62rem, 5vw, 2.75rem); letter-spacing: .045em; line-height: 1.18; overflow-wrap: anywhere; }
.receipt-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: baseline; padding: 15px 18px; border-top: 1px solid var(--rule); }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 15px 0; }
.staff-search { display: flex; gap: 8px; margin: 12px 0 20px; }
.code-input { max-width: 340px; text-transform: uppercase; }
.inline-error { color: #9b2828; background: #fff1f0; padding: 8px 10px; border-radius: 5px; margin-top: 10px; font-size: .87rem; }
.toast { max-width: min(460px, calc(100% - 30px)); position: fixed; right: 15px; bottom: 15px; z-index: 7; background: #17351b; color: #fff; border-radius: 6px; padding: 11px 16px; font-size: .87rem; box-shadow: 0 9px 22px #113d2626; }
.product-preview { width: min(680px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid #cedbc9; border-radius: 9px; background: var(--paper); color: inherit; }
.product-preview::backdrop { background: #132316ac; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.preview-heading h2 { font-size: clamp(1rem, 3.6vw, 1.3rem); }
.preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.preview-actions .button { white-space: nowrap; }
.preview-stage { display: grid; place-items: center; padding: 18px; background: #f4f7f2; min-height: 170px; }
.preview-stage img { display: block; width: 100%; height: min(66vh, 640px); object-fit: contain; }
body:has(.product-preview[open]) { overflow: hidden; }
.inventory-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: end; gap: 10px; padding: 14px 16px; }
.inventory-row + .inventory-row { border-top: 1px solid var(--rule); }
.inventory-field { display: grid; gap: 3px; color: var(--muted); font-size: .8rem; }
.inventory-field input { min-width: 0; width: 100%; min-height: 42px; padding: 5px 8px; border: 1px solid #cfd9cc; background: #f8faf6; border-radius: 5px; color: #171a17; }
.inventory-row .inline-error { grid-column: 1 / -1; }
@media (max-width: 930px) {
  .shell { width: min(100% - 44px, 820px); }
  .shop-grid { grid-template-columns: minmax(0, 1fr) 245px; gap: 14px; }
  .catalog-tools { gap: 8px; }
  .search { max-width: 100%; }
}
@media (max-width: 700px) {
  .site-header { position: relative; }
  .shell { width: calc(100% - 28px); }
  .brandbar { flex-wrap: wrap; justify-content: flex-start; gap: 0 14px; padding-top: 9px; }
  .brand img { width: min(240px, 68vw); }
  #navigation { width: 100%; justify-content: flex-start; gap: 17px; }
  #navigation a { padding-block: 7px; }
  #app { padding-top: 14px; padding-bottom: 34px; }
  .login-grid { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
  .login-poster img { height: clamp(113px, 44vw, 220px); min-height: 0; object-position: 50% 48%; }
  .login-panel { margin-inline: auto; padding-block: 0; }
  .login-panel h1 br { display: none; }
  .login-panel h1 { margin-bottom: 14px; }
  .horizon { margin-bottom: 22px; }
  .shop-heading { padding: 16px 0; align-items: flex-end; gap: 9px; }
  .shop-heading h1 { font-size: clamp(1.55rem, 7vw, 2.5rem); }
  .balance-chip { min-width: 78px; padding-inline-start: 9px; }
  .balance-chip strong { font-size: 1.68rem; }
  .balance-chip.pending strong { font-size: 1rem; }
  .shop-grid { display: flex; flex-direction: column; align-items: stretch; }
  .cart { position: static; order: -1; }
  .mobile-summary { display: inline-flex; position: fixed; z-index: 4; bottom: 10px; inset-inline: 14px; min-height: 44px; box-shadow: 0 3px 16px #17351b2b; }
  .mobile-summary:not([hidden]) { margin-inline: auto; max-width: 365px; }
  .shop-grid:has(+ .mobile-summary:not([hidden])) { padding-bottom: 28px; }
  .cart-body { padding: 12px; }
  .cart-totals { grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; }
  .catalog-tools { padding: 8px; }
  th, td { padding-inline: 8px; }
  .product-details { gap: 7px; }
  .product-thumbnail { width: 47px; height: 49px; padding: 2px; }
  .preview-stage { padding: 10px; }
  .inventory-row { grid-template-columns: minmax(0, 1fr) auto; }
  .inventory-row > div { grid-column: 1 / -1; }
  .number-cell { width: 98px; }
  .stepper button { inline-size: 31px; block-size: 35px; }
  .receipt-top { padding: 13px; }
}
@media print {
  .site-header, .page-head, .actions, #notice, .mobile-summary, .product-preview { display: none; }
  .shell, .narrow { width: 100%; max-width: none; }
  #app { padding: 0; }
  .receipt { break-inside: avoid; }
}