.entry-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 16px;
}

.entry-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.entry-method b { font-size: .9rem; }
.entry-method span { color: var(--muted); font-size: .68rem; }
.entry-method.active {
  color: #fff;
  border-color: var(--teal);
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  box-shadow: 0 10px 25px #076b6525;
}
.entry-method.active span { color: #d7fff5; }

.manual-start {
  display: grid;
  place-items: center;
  min-height: 390px;
  padding: 35px;
  text-align: center;
}
.manual-start h2 { margin: 8px 0 0; }
.manual-start p { max-width: 430px; margin: 5px auto 20px; color: var(--muted); }
.manual-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 0;
  padding: 0;
  border-radius: 18px;
  color: var(--teal-dark);
  background: var(--mint);
  font-family: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.manual-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #0b766f26; }
.manual-icon:active { transform: translateY(0); }
.manual-icon:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }

.manual-mode .review-layout { grid-template-columns: 1fr; }

@media (max-width: 520px) {
  .entry-method { padding: 11px; }
  .manual-start { min-height: 310px; padding: 22px; }
}

/* A one-option tab bar is noise: hide it when AI scan is switched off. */
.entry-choice.single-method { display: none; }

/* ---- Manual entry: one product group, many number lines ---- */
.order-group .line-head,
.order-group .order-line {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)) 74px 74px 62px 34px;
  gap: 8px;
  align-items: center;
}
.order-group .line-head {
  margin: 10px 0 2px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}
.order-group .order-line { margin-bottom: 7px; }
.order-group .lf { display: block; }
.order-group .lf input { width: 100%; }
.order-group .delete-line {
  width: 34px; height: 34px; padding: 0; line-height: 1;
  border: 1px solid #d9c2c0; border-radius: 8px;
  background: #fff; color: #b23b32; font-size: 1rem; cursor: pointer;
}
.order-group .delete-line:hover { background: #fff0ed; }
/* "+ Add number" is the action customers most often read past, so it is a
   filled button rather than a dashed outline, with a short pulse when it
   appears to draw the eye once - three beats, then it stays still. */
.order-group .add-line {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 10px 18px 10px 12px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--teal-dark, #076b65), var(--teal, #0b8b82));
  color: #fff;
  font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 16px #076b6540;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  animation: add-line-pulse 1.6s ease-out .4s 3;
}
.order-group .add-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px #076b6555;
  filter: brightness(1.06);
  animation: none;
}
.order-group .add-line:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 3px 8px #076b6540;
}
.order-group .add-line:focus-visible {
  outline: 3px solid #7ce1ce; outline-offset: 2px;
}
@keyframes add-line-pulse {
  0%   { box-shadow: 0 6px 16px #076b6540, 0 0 0 0 #0b8b8266; }
  70%  { box-shadow: 0 6px 16px #076b6540, 0 0 0 12px #0b8b8200; }
  100% { box-shadow: 0 6px 16px #076b6540, 0 0 0 0 #0b8b8200; }
}
@media (max-width: 640px) {
  /* Full width on a phone: a bigger target, and impossible to scroll past. */
  .order-group .add-line { display: flex; justify-content: center; width: 100%; padding: 12px 16px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .order-group .add-line { animation: none; transition: none; }
  .order-group .add-line:hover { transform: none; }
}

/* On a phone the column header is dropped and each field labels itself.
   Number gets the full width because it is the field being read off the paper;
   the amounts pair up beneath it, Big beside Small and A beside C, which is
   how they are written down. */
@media (max-width: 640px) {
  .order-group .line-head { display: none; }
  .order-group .order-line {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    padding: 11px 10px;
    margin-bottom: 11px;
    border: 1px solid #dde7e5;
    border-radius: 12px;
    background: #fbfdfd;
  }
  .order-group .lf::before {
    content: attr(data-label);
    display: block; margin-bottom: 4px;
    font-size: .55rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .01em; opacity: .6; white-space: nowrap;
  }
  .order-group .order-line input { padding: 9px 5px; text-align: center; }
  .order-group .lf:first-child input { padding: 9px 10px; text-align: left; }

  /*
   * Row one is the number and the three bet-type buttons; row two is the four
   * amounts. The cells are in DOM order - number, big, small, a, c, ibox, box,
   * 4A - so each is placed by hand rather than left to auto-flow.
   */
  .order-group .order-line .lf:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .order-group .order-line .lf:nth-child(6) { grid-column: 3; grid-row: 1; }
  .order-group .order-line .lf:nth-child(7) { grid-column: 4; grid-row: 1; }
  .order-group .order-line .lf:nth-child(2) { grid-column: 1; grid-row: 2; }
  .order-group .order-line .lf:nth-child(3) { grid-column: 2; grid-row: 2; }
  .order-group .order-line .lf:nth-child(4) { grid-column: 3; grid-row: 2; }
  .order-group .order-line .lf:nth-child(5) { grid-column: 4; grid-row: 2; }
  .order-group .order-line .lf:nth-child(8) { grid-column: 1; grid-row: 3; }
  /* The button already says 4A+, so the column label above it is noise on the
     row it shares with Remove. */
  .order-group .order-line .lf:nth-child(8)::before { display: none; }
  .order-group .order-line .four-panel { grid-column: 1 / -1; grid-row: 4; }
  .order-group .delete-line {
    grid-column: 2 / -1;
    grid-row: 3;
    align-self: center;
    justify-self: end;
    width: auto; height: auto;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .68rem; font-weight: 700;
  }
  .order-group .delete-line::after { content: ' Remove'; }
}

/* ---- "Same amounts for every number" ---- */
.same-amounts {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 2px;
  padding: 9px 11px;
  border: 1px solid #cfe4e0;
  border-radius: 10px;
  background: #f4fbf9;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
}
.same-amounts input { width: auto; margin: 2px 0 0; flex: none; }
.same-amounts small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 500;
}

/* Locked: only the first line keeps its amount boxes. The other lines keep
   their values in the DOM, so unticking gives them straight back. */
.order-group.amounts-locked .order-line:not(:first-child) .lf:not(:first-child) {
  display: none;
}
/* Columns are pinned explicitly: with the amount boxes hidden, auto-placement
   would drop the note after the remove button instead of before it. */
.order-group.amounts-locked .order-line:not(:first-child) .lf:first-child {
  grid-column: 1 / 5;
  grid-row: 1;
}
.order-group.amounts-locked .order-line:not(:first-child)::after {
  content: '↑ same / 相同';
  grid-column: 5;
  grid-row: 1;
  align-self: center;
  white-space: nowrap;
  color: var(--muted);
  font-size: .62rem;
  font-style: italic;
}
.order-group.amounts-locked .order-line:not(:first-child) .delete-line {
  grid-column: 6;
  grid-row: 1;
}
@media (max-width: 640px) {
  .order-group.amounts-locked .order-line:not(:first-child) .lf:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .order-group.amounts-locked .order-line:not(:first-child)::after {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .order-group.amounts-locked .order-line:not(:first-child) .delete-line {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ---- Optional product icons ---- */
.product-picker .product-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 5px;
  object-fit: contain;
  vertical-align: middle;
}

/* ---- Phase 4.1: AI Scan as a button on the manual page ---- */
/* The heading is space-between, so without this the button would float to the
   middle. Pushing it left keeps it beside the title, with "Start Again" still
   pinned to the far right. */
.panel-heading .ai-scan-entry {
  margin-right: auto;
  min-height: 36px;
  padding: 0 13px;
  font-size: .7rem;
}
.panel-heading .ai-scan-entry::before {
  content: '⌗';
  margin-right: 6px;
  font-size: .85rem;
}

/* On a phone the heading wraps; the button takes its own full-width row so it
   never squeezes the title down to two characters. */
@media (max-width: 520px) {
  .panel-heading { flex-wrap: wrap; }
  .panel-heading .ai-scan-entry { order: 2; width: 100%; margin-right: 0; }
  .panel-heading #back-to-photo { order: 3; }
}


/* ---- Box / IBOX switches ---- */
/* A pressed state has to be obvious at a glance: staff read these back to the
   customer, and a missed toggle is a wrong bet. Colour carries the signal --
   no pseudo-element, which a button renders inconsistently. */
.order-group .order-line .bet-toggle {
  width: 100%;
  min-height: 34px;
  padding: 0 6px;
  border: 1px solid #bfd0cd;
  border-radius: 9px;
  background: #fff;
  color: #64777e;
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.order-group .order-line .bet-toggle:hover {
  border-color: #9dc6bf;
  background: #f2fbf9;
}
.order-group .order-line .bet-toggle[aria-pressed="true"] {
  color: #fff;
  border-color: #0b8b82;
  background: #0b8b82;
  box-shadow: 0 4px 12px #0b8b8233;
}
.order-group .order-line .bet-toggle[aria-pressed="true"]:hover {
  background: #076b65;
  border-color: #076b65;
}
.order-group .order-line .bet-toggle:focus-visible {
  outline: 3px solid #076b65;
  outline-offset: 2px;
}

/* ---- "Others" products, tucked behind a button ---- */
.product-picker .others-toggle {
  padding: 6px 11px;
  border: 1px dashed #9dc6bf;
  border-radius: 8px;
  background: #fff;
  color: #0b766f;
  font: inherit;
  font-size: .62rem;
  font-weight: 800;
  cursor: pointer;
}
.product-picker .others-toggle:hover { background: #eef8f5; }
.product-picker .others-toggle::after { content: ' \25be'; }
.product-picker .others-toggle[aria-expanded="true"]::after { content: ' \25b4'; }
/* Its own full-width row, so opening it does not shuffle the front row. */
.product-picker .product-others {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #d8e5e3;
}


/* ---- 4A bet: a button that opens five amount boxes ---- */
.order-group .order-line .four-toggle {
  width: 100%;
  min-height: 34px;
  padding: 0 4px;
  border: 1px dashed #9dc6bf;
  border-radius: 9px;
  background: #fff;
  color: #0b766f;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.order-group .order-line .four-toggle:hover { background: #eef8f5; }
.order-group .order-line .four-toggle[aria-expanded="true"] {
  border-style: solid;
  border-color: #0b8b82;
  background: #e6f6f3;
}
/* Its own full-width row under the line it belongs to. */
.order-group .order-line .four-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px dashed #cfe0dc;
}
.order-group .order-line .four-panel .ff { display: block; }
.order-group .order-line .four-panel .ff::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 3px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .6;
}
.order-group .order-line .four-panel input {
  width: 100%;
  padding: 8px 6px;
  border: 1px solid #bfd0cd;
  border-radius: 8px;
  text-align: center;
}
/* A and C on a boxed line: box and ibox are Big/Small bets, so these are
   locked and cleared rather than silently ignored. */
.order-group .order-line input[data-field="a"]:disabled,
.order-group .order-line input[data-field="c"]:disabled,
.order-group .order-line input[data-field="big"]:disabled,
.order-group .order-line input[data-field="small"]:disabled {
  border-style: dashed;
  border-color: #cfdcda;
  background: #eef3f2;
  color: transparent;
  cursor: not-allowed;
}
.order-group .order-line input[data-field="a"]:disabled::placeholder,
.order-group .order-line input[data-field="c"]:disabled::placeholder,
.order-group .order-line input[data-field="big"]:disabled::placeholder,
.order-group .order-line input[data-field="small"]:disabled::placeholder { color: #b3c1c0; }

/* A locked group hides the follower lines' amounts; hide their 4A panel too. */
.order-group.amounts-locked .order-line:not(:first-child) .four-panel { display: none; }

@media (max-width: 640px) {
  .order-group .order-line .four-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---- Softer corners on the order line ---- */
/* The boxes read as square at small sizes; a wider radius matches the cards
   they sit inside. */
.order-group .order-line input,
.order-group .order-line .four-panel input {
  border-radius: 13px;
}
.order-group .order-line .bet-toggle,
.order-group .order-line .four-toggle {
  border-radius: 13px;
}
.order-group .order-line { border-radius: 16px; }
/* One height for every control on the line so the inputs and the bet-type
   buttons share a baseline; without it the buttons ride a few pixels high. */
.order-group .order-line > .lf > input,
.order-group .order-line .bet-toggle,
.order-group .order-line .four-toggle {
  min-height: 38px;
}
@media (max-width: 640px) {
  .order-group .order-line input,
  .order-group .order-line .four-panel input,
  .order-group .order-line .bet-toggle,
  .order-group .order-line .four-toggle {
    border-radius: 14px;
  }
  /* One height for every control on the line, so the number box and the three
     buttons sit on the same baseline instead of 6px apart. */
  .order-group .order-line > .lf > input,
  .order-group .order-line .bet-toggle,
  .order-group .order-line .four-toggle {
    min-height: 42px;
  }
  /* Each cell is label-above-control, and the labels are not all the same
     height (CJK sits taller than plain ASCII). Centring each cell would stagger
     the controls, so the cells bottom-align and the controls share a baseline. */
  .order-group .order-line { align-items: end; }
}

/* ---- Customer output: room to read on a phone ---- */
/* The label column eats a third of a narrow screen, and 100px of textarea is
   about four lines - too few once a row produces a straight, box, ibox and 4A
   line each. */
@media (max-width: 640px) {
  .output-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }
  .output-card > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .output-card small { margin-top: 0; }
  .output-card textarea {
    min-height: 240px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.8;
  }
}

/* ---- 4D LIVE (header) ---- */
/* Right side of the header: 4D LIVE and Guide. */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* The two buttons are a pair: same height, so their tops and bottoms line up. */
.topbar-actions .live-btn,
.topbar-actions .guide-btn { box-sizing: border-box; height: 40px; }

/* Red, because "live" reads as red everywhere; a white dot pulses like a
   broadcast light and a highlight sweeps across every few seconds. The label
   sits in its own span so a photo or GIF can go in beside it later. */
.live-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d7263d, #ff5a36);
  color: #fff; text-decoration: none;
  font-size: .78rem; font-weight: 900; letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 8px 20px #d7263d4d;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.live-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, #ffffff66, transparent);
  transform: skewX(-18deg);
  animation: live-shine 3.2s ease-in-out 1s infinite;
  pointer-events: none;
}
.live-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px #d7263d66; filter: brightness(1.05); }
.live-btn:active { transform: translateY(0) scale(.97); box-shadow: 0 4px 10px #d7263d4d; }
.live-btn:focus-visible { outline: 3px solid #ffb4a3; outline-offset: 2px; }

.live-dot {
  position: relative; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
}
.live-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #fff;
  animation: live-ping 1.4s ease-out infinite;
}
.live-label { position: relative; }

@keyframes live-ping {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes live-shine {
  0%, 60% { left: -60%; }
  100%    { left: 130%; }
}

@media (max-width: 520px) {
  .topbar-actions { gap: 8px; }
  .live-btn { padding: 8px 12px 8px 10px; font-size: .72rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .live-btn, .live-btn:hover { transition: none; transform: none; }
  .live-btn::after, .live-dot::before { animation: none; }
}

/* ---- Guide button + pop-up (header) ---- */
/* Sits beside 4D LIVE: outlined teal so the red LIVE button stays the loud one. */
.guide-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 8px;
  border: 2px solid #0b8b82; border-radius: 999px;
  background: #fff; color: #076b65;
  font: inherit; font-size: .78rem; font-weight: 900; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px #0b8b8222;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.guide-icon {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #0b8b82; color: #fff; font-size: .8rem; font-weight: 900;
}
.guide-btn:hover { transform: translateY(-2px); background: #eef8f5; box-shadow: 0 10px 22px #0b8b8233; }
.guide-btn:active { transform: translateY(0) scale(.97); }
.guide-btn:focus-visible { outline: 3px solid #7ce1ce; outline-offset: 2px; }

/* The dialog has no padding of its own, so a click that targets it landed on
   the backdrop - guide.js closes on that. */
.guide-dialog {
  width: min(96vw, 1180px); max-width: none; max-height: 92vh;
  padding: 0; border: 0; border-radius: 20px;
  background: transparent; color: #10232c;
  overflow: visible;
}
.guide-dialog::backdrop { background: #081a20b8; backdrop-filter: blur(3px); }
.guide-panel {
  display: flex; flex-direction: column; max-height: 92vh;
  border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 80px #0008;
}
.guide-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 20px; border-bottom: 1px solid #d8e5e3;
}
.guide-bar strong { font-size: 1rem; }
.guide-bar small { margin-left: 6px; color: #687d84; font-size: .72rem; font-weight: 600; }
.guide-close {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #eef4f2; color: #10232c; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.guide-close:hover { background: #dbe8e5; }
.guide-close:focus-visible { outline: 3px solid #7ce1ce; outline-offset: 2px; }
.guide-body { overflow: auto; background: #eef4f2; -webkit-overflow-scrolling: touch; }
.guide-body img { display: block; width: 100%; height: auto; }
/* A tall picture gets a narrow pop-up and scrolls down, instead of being
   stretched across a wide screen. guide.js sets this from the picture itself. */
.guide-dialog.portrait { width: min(96vw, 460px); }
/* Zoom is only offered when the picture has more detail than is on screen. */
.guide-dialog.can-zoom .guide-body img { cursor: zoom-in; }
/* Tapped: natural size, scroll around inside the pop-up to read it. */
/* The zoomed width itself is set by guide.js (a readable 1080 CSS px). */
.guide-dialog.zoomed .guide-body img { max-width: none; cursor: zoom-out; }
.guide-body picture { display: block; }
.guide-hint { display: none; margin: 0; padding: 8px 14px; text-align: center; color: #687d84; font-size: .68rem; border-top: 1px solid #d8e5e3; }
.guide-dialog.can-zoom .guide-hint { display: block; }
/* Page behind stays put while the guide is open. */
.guide-lock, .guide-lock body { overflow: hidden; }

@media (max-width: 520px) {
  .guide-dialog { width: 100vw; }
  .guide-bar small { display: none; }
}

/* ---- Phone header: logo, title and both buttons on ONE row ----
   Everything is scaled down together rather than wrapping the buttons onto
   a second row. The Chinese title drops under the English one in small
   type, which is what frees the width. Kept last in the file so it wins
   over the earlier phone rules for the same elements. */
@media (max-width: 520px) {
  .topbar { flex-wrap: nowrap; align-items: center; gap: 8px; }
  .brand-lockup { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .brand-lockup > div { min-width: 0; }
  .brand-mark { flex: none; width: 36px; height: 36px; border-radius: 11px; font-size: 1.15rem; }
  .topbar .eyebrow { font-size: .5rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar h1 {
    margin: 1px 0 0; font-size: clamp(.78rem, 3.65vw, 1.08rem); line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar h1 small { display: block; margin-top: 1px; font-size: .6rem; line-height: 1.2; }

  .topbar-actions { flex: none; width: auto; padding-left: 0; gap: 6px; }
  .topbar-actions .live-btn,
  .topbar-actions .guide-btn { height: 32px; }
  .live-btn { padding: 0 10px 0 9px; gap: 6px; font-size: .64rem; letter-spacing: .04em; box-shadow: 0 5px 12px #d7263d40; }
  .live-dot { width: 7px; height: 7px; }
  .guide-btn { padding: 0 10px 0 4px; gap: 5px; font-size: .64rem; border-width: 1.5px; box-shadow: 0 4px 10px #0b8b821f; }
  .guide-icon { width: 22px; height: 22px; font-size: .68rem; }
}
/* The narrowest phones: drop the Chinese half of the Guide label so the
   row still fits; the ? icon and "Guide" stay. */
@media (max-width: 360px) {
  .guide-label { font-size: 0; }
  .guide-label::before { content: "Guide"; font-size: .62rem; }
  .live-btn { padding: 0 8px 0 7px; }
}
/* 320px phones (first-generation iPhone SE): Guide becomes its round ? icon
   alone, and the logo shrinks, so the English title still shows in full. */
@media (max-width: 340px) {
  .topbar { gap: 6px; }
  .brand-lockup { gap: 6px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 1rem; }
  .topbar .eyebrow { font-size: .45rem; letter-spacing: .05em; }
  .guide-label { display: none; }
  .guide-btn { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-btn, .guide-btn:hover { transition: none; transform: none; }
}

/* ---- Guide: language tabs and video ---- */
.guide-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #d8e5e3; background: #f8fbfa;
}
.guide-tab {
  padding: 8px 14px; border: 1px solid #cfe0dc; border-radius: 999px;
  background: #fff; color: #45606a;
  font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.guide-tab small { display: block; font-size: .58rem; font-weight: 600; opacity: .7; }
.guide-tab:hover { border-color: #9dc6bf; background: #eef8f5; }
.guide-tab.is-on { color: #fff; border-color: #0b766f; background: #0b8b82; }
.guide-tab.is-on small { opacity: .85; }
.guide-tab:focus-visible { outline: 3px solid #7ce1ce; outline-offset: 2px; }

/* A video is wide, not tall: the pop-up widens for it. */
.guide-dialog.video-mode { width: min(96vw, 880px); }
.guide-video { display: block; width: 100%; max-height: 70vh; background: #000; }
.guide-missing { margin: 0; padding: 40px 20px; text-align: center; color: #687d84; font-size: .8rem; line-height: 1.7; }

@media (max-width: 520px) {
  .guide-tabs { padding: 8px 10px; gap: 5px; }
  .guide-tab { padding: 7px 11px; font-size: .68rem; }
  .guide-dialog.video-mode { width: 100vw; }
  .guide-video { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-tab { transition: none; }
}