/* ==========================================================================
   Mooncake portal
   The 編號 (order number) is the anchor of the whole system — it is what is
   written on the paper form, what the receptionist types, and what identifies
   an item at the counter. It is set in tabular mono everywhere and never
   competes with anything else for attention.
   ========================================================================== */

:root {
  --ink:      #16202E;
  --ink-80:   #2C3849;
  --slate:    #5A6675;
  --slate-40: #9AA3AF;
  --paper:    #FBFAF7;
  --card:     #FFFFFF;
  --rule:     #DDD8CE;
  --rule-2:   #EDE9E1;
  --cinnabar: #C8322B;
  --cinnabar-wash: #FBEFEE;
  --jade:     #2E6B5E;
  --jade-wash:#EAF2EF;
  --amber:    #9A6B14;
  --amber-wash:#FBF3E2;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK", "PingFang TC",
          "Hiragino Sans CNS", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans TC",
          Roboto, Helvetica, Arial, sans-serif;

  --r: 3px;
  --shadow: 0 1px 2px rgba(22,32,46,.06), 0 4px 14px rgba(22,32,46,.05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* --- the signature: order numbers ---------------------------------------- */
.no {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cinnabar);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- chrome --------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink); color: #fff;
  border-bottom: 3px solid var(--cinnabar);
}
.top-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.brandmark { font-weight: 700; letter-spacing: .04em; font-size: 15px; }
.brandmark span { color: var(--slate-40); font-weight: 400; margin-left: 8px; font-size: 13px; }
.top .spacer { flex: 1; }
.top .meta { font-size: 12.5px; color: #B9C2CE; font-family: var(--mono); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 120px; }

/* --- mode switch ---------------------------------------------------------- */
.modes { display: flex; gap: 0; border: 1px solid var(--rule); border-radius: var(--r);
         overflow: hidden; background: var(--card); }
.modes button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 9px 18px; font: inherit; font-size: 14px; color: var(--slate);
  border-right: 1px solid var(--rule);
}
.modes button:last-child { border-right: 0; }
.modes button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; }

/* --- panels --------------------------------------------------------------- */
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); }
.panel + .panel { margin-top: 14px; }
.panel-h {
  padding: 11px 14px; border-bottom: 1px solid var(--rule-2);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--ink);
}
.panel-h .sub { font-weight: 400; color: var(--slate); letter-spacing: 0; }
.panel-b { padding: 14px; }

/* --- forms ---------------------------------------------------------------- */
label.f { display: block; margin-bottom: 12px; }
label.f > span { display: block; font-size: 12.5px; color: var(--slate); margin-bottom: 4px;
                 letter-spacing: .02em; }
input, select, textarea, button { font-family: inherit; font-size: 15px; }
input[type=text], input[type=number], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--rule);
  border-radius: var(--r); background: #fff; color: var(--ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--cinnabar); outline-offset: 1px;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }

.btn {
  appearance: none; cursor: pointer; padding: 9px 16px; border-radius: var(--r);
  border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 600;
  font-size: 14px;
}
.btn:hover { background: var(--ink-80); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); font-weight: 500; }
.btn.ghost:hover { background: var(--rule-2); }
.btn.danger { background: var(--cinnabar); border-color: var(--cinnabar); }
.btn.sm { padding: 5px 10px; font-size: 13px; }

/* --- number entry mode ---------------------------------------------------- */
.keyed { display: flex; gap: 10px; align-items: flex-end; }
.keyed .k-no { flex: 0 0 150px; }
.keyed .k-qty { flex: 0 0 100px; }
.keyed input {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; padding: 8px 12px; letter-spacing: .04em;
}
.keyed .k-no input { color: var(--cinnabar); }
.resolved {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r);
  border: 1px dashed var(--rule); color: var(--slate); font-size: 14px; min-height: 44px;
  display: flex; align-items: center; gap: 10px;
}
.resolved.hit { border-style: solid; border-color: var(--jade); background: var(--jade-wash); color: var(--ink); }
.resolved.miss { border-style: solid; border-color: var(--cinnabar); background: var(--cinnabar-wash); color: var(--cinnabar); }

/* --- browse mode ---------------------------------------------------------- */
.brandbar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px;
            scrollbar-width: thin; }
.brandbar button {
  appearance: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card); color: var(--slate);
  padding: 6px 13px; border-radius: 100px; font-size: 13.5px;
}
.brandbar button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.items { display: grid; gap: 0; }
.item {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px; border-bottom: 1px solid var(--rule-2);
}
.item:last-child { border-bottom: 0; }
.item:hover { background: #FCFBF9; }
.item .no { font-size: 17px; text-align: center; }
.item .nm { min-width: 0; }
.item .nm b { font-weight: 600; font-size: 14.5px; display: block; }
.item .nm .sub { font-size: 12.5px; color: var(--slate); margin-top: 1px; }
.item .pr { text-align: right; white-space: nowrap; }
.item .pr .now { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.item .pr .was { font-family: var(--mono); font-size: 12px; color: var(--slate-40);
                 text-decoration: line-through; display: block; }
.item .act { display: flex; align-items: center; gap: 6px; }

.stepper { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--r); }
.stepper button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 30px; height: 32px; font-size: 17px; color: var(--ink); line-height: 1;
}
.stepper button:hover { background: var(--rule-2); }
.stepper input {
  width: 42px; text-align: center; border: 0; border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule); border-radius: 0; padding: 6px 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600;
}

/* --- cart ----------------------------------------------------------------- */
.cart-line {
  display: grid; grid-template-columns: 54px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--rule-2); font-size: 14px;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line .x { appearance: none; border: 0; background: none; cursor: pointer;
                color: var(--slate-40); font-size: 17px; padding: 0 4px; }
.cart-line .x:hover { color: var(--cinnabar); }

.totals { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 6px;
          border-top: 2px solid var(--ink); font-weight: 700; }
.totals .num { font-size: 18px; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(251,250,247,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule); padding: 10px 16px;
}
.sticky-cta .in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.sticky-cta .sum { flex: 1; font-size: 14px; }
.sticky-cta .sum b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- misc ----------------------------------------------------------------- */
.tag { display: inline-block; padding: 1px 7px; border-radius: 100px; font-size: 11.5px;
       border: 1px solid currentColor; letter-spacing: .02em; }
.tag.set { color: var(--amber); background: var(--amber-wash); border-color: #E4D2A8; }
.tag.tier { color: var(--jade); background: var(--jade-wash); border-color: #BFD8D0; }

.note { font-size: 13px; color: var(--slate); }
.warn { background: var(--amber-wash); border: 1px solid #E4D2A8; color: var(--amber);
        padding: 9px 12px; border-radius: var(--r); font-size: 13.5px; }
.err  { background: var(--cinnabar-wash); border: 1px solid #EBC4C1; color: var(--cinnabar);
        padding: 9px 12px; border-radius: var(--r); font-size: 13.5px; }
.ok   { background: var(--jade-wash); border: 1px solid #BFD8D0; color: var(--jade);
        padding: 9px 12px; border-radius: var(--r); font-size: 13.5px; }

.empty { padding: 34px 16px; text-align: center; color: var(--slate); font-size: 14px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--slate); font-weight: 600; padding: 8px 9px;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.grid td { padding: 7px 9px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
table.grid tbody tr:hover { background: #FCFBF9; }
table.grid td.r, table.grid th.r { text-align: right; }

.pill { font-size: 11.5px; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.pill.pending   { background: var(--rule-2); color: var(--slate); }
.pill.fulfilled { background: var(--jade-wash); color: var(--jade); }
.pill.cancelled { background: var(--cinnabar-wash); color: var(--cinnabar);
                  text-decoration: line-through; }

.chartbox { position: relative; height: 260px; }

@media (max-width: 640px) {
  .item { grid-template-columns: 50px 1fr; row-gap: 8px; }
  .item .pr { grid-column: 2; text-align: left; }
  .item .act { grid-column: 2; }
  .keyed { flex-wrap: wrap; }
  .keyed .k-no, .keyed .k-qty { flex: 1 1 46%; }
  .cart-line { grid-template-columns: 46px 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}