/* 分红 — a share register on paper: ten stencilled certificates per round, one stamped out in red, nine paid. */
:root {
  --paper: #ECE8DD;
  --card: #F7F4EC;
  --ink: #1B1A17;
  --ink2: #2C2A25;
  --mute: #6B665A;
  --rule: #C8C1AF;
  --red: #E0301E;
  --red-wash: rgba(224, 48, 30, .10);
  --stencil: "Big Shoulders Stencil Display", "Noto Sans SC", sans-serif;
  --han: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.62 var(--han); overflow-x: hidden; }
a { color: inherit; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }

.fh-sheet { max-width: 1180px; margin: 0 auto; padding: 14px 14px 132px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }

/* ---------- the register (hero object) ---------- */
.gu-regi { background: var(--card); border: 2px solid var(--ink); padding: 14px 14px 16px; position: relative; }
.gu-regi-top { display: flex; align-items: center; gap: 10px; }
.gu-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 900 20px/1 var(--han); letter-spacing: .04em; }
.gu-brand img { border: 1.5px solid var(--ink); display: block; }
.gu-lunno { font: 800 18px/1 var(--stencil); letter-spacing: .06em; color: var(--mute); }
.gu-acct { margin-left: auto; font: 500 13px/1 var(--han); background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 8px 10px; cursor: pointer; }
.gu-acct[data-on="1"] { font-family: var(--mono); font-size: 11px; background: var(--ink); color: var(--card); }

/* the drawn-out moment */
.gu-split { margin-top: 12px; border-top: 1.5px dashed var(--rule); padding-top: 10px; }
.gu-split-k { display: flex; justify-content: space-between; gap: 8px; font: 500 12px/1.3 var(--han); color: var(--mute); }
.gu-split-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--red); }
.gu-chips { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.gu-chips li { border: 1.5px solid var(--ink); background: var(--paper); text-align: center; padding: 4px 0 3px; font: 800 15px/1 var(--stencil); position: relative; }
.gu-chips li small { display: block; font: 600 8.5px/1.2 var(--mono); margin-top: 3px; color: var(--ink2); letter-spacing: -.02em; }
.gu-chips li.is-out { background: var(--red); border-color: var(--red); color: var(--card); }
.gu-chips li.is-out small { color: var(--card); }
.gu-chips li.is-mine { outline: 2px solid var(--red); outline-offset: 1px; }
.gu-split[data-state="waiting"] .gu-chips li { animation: guBlink 1.1s steps(2) infinite; }
.gu-split[data-state="waiting"] .gu-chips li:nth-child(2n) { animation-delay: .55s; }
.gu-split[data-state="example"] .gu-chips { opacity: .82; }
.gu-split-say { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }
.gu-split-say b { font-family: var(--mono); font-weight: 600; }
@keyframes guBlink { 50% { background: var(--red-wash); } }

/* the open round */
.gu-board { margin-top: 14px; }
.gu-board-k { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--mute); }
.gu-board-k b { font: 900 22px/1 var(--stencil); color: var(--ink); }
.gu-board-pot { font-family: var(--mono); font-size: 11px; }
.gu-certs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.gu-cert { border: 1.5px dashed var(--rule); min-height: 92px; padding: 6px 6px 5px; display: flex; flex-direction: column; justify-content: space-between; background: transparent; position: relative; }
.gu-cert-n { font: 900 30px/.9 var(--stencil); color: var(--rule); letter-spacing: .02em; }
.gu-cert-who { font: 400 9px/1.25 var(--mono); color: var(--mute); word-break: break-all; }
.gu-cert-amt { font: 600 9.5px/1 var(--mono); color: var(--mute); }
.gu-cert.is-held { border: 1.5px solid var(--ink); background: var(--ink); }
.gu-cert.is-held .gu-cert-n { color: var(--card); }
.gu-cert.is-held .gu-cert-who, .gu-cert.is-held .gu-cert-amt { color: #D9D3C2; }
.gu-cert.is-mine { box-shadow: inset 0 0 0 3px var(--red); }
.gu-cert.is-next { border: 2px solid var(--red); background: var(--red-wash); }
.gu-cert.is-next .gu-cert-n { color: var(--red); }
.gu-cert.is-next .gu-cert-who { color: var(--red); font-family: var(--han); font-size: 11px; font-weight: 700; }
.gu-cert.is-next::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--red); opacity: 0; animation: guPulse 1.8s ease-out infinite; pointer-events: none; }
.gu-cert.is-fresh { animation: guLand .7s ease-out; }
@keyframes guPulse { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes guLand { 0% { transform: translateY(-10px) rotate(-3deg); } 100% { transform: none; } }
.gu-rail { display: block; width: 100%; height: 6px; margin-top: 8px; }
.gu-rail-bg { fill: #DDD7C8; }
.gu-rail-on { fill: var(--red); transition: width .5s ease; }

.gu-say { margin: 12px 0 0; font-size: 15px; line-height: 1.6; }
.gu-say b { color: var(--red); }

/* the action */
.gu-buy { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: stretch; }
.gu-qty { display: flex; border: 2px solid var(--ink); }
.gu-qty-b { width: 40px; border: 0; background: transparent; font: 700 20px/1 var(--han); cursor: pointer; color: var(--ink); }
.gu-qty-n { width: 44px; border: 0; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); text-align: center; font: 900 22px/1 var(--stencil); background: var(--paper); color: var(--ink); -moz-appearance: textfield; }
.gu-qty-n::-webkit-outer-spin-button, .gu-qty-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gu-go { border: 2px solid var(--red); background: var(--red); color: #FFFDF6; font: 900 18px/1 var(--han); letter-spacing: .1em; padding: 14px 10px; cursor: pointer; min-height: 52px; }
.gu-go:disabled { opacity: .55; cursor: default; }
.gu-cost { grid-column: 1 / -1; margin: 0; font: 400 10.5px/1.4 var(--mono); color: var(--mute); }
.gu-cut { margin-top: 10px; width: 100%; border: 2px solid var(--ink); background: var(--paper); font: 700 15px/1 var(--han); padding: 12px; cursor: pointer; color: var(--ink); }
.gu-cut span { font-family: var(--mono); }

/* ---------- the tape ---------- */
.fh-tape { border-top: 2px solid var(--ink); padding-top: 8px; }
.fh-tape-k, .fh-past-k { display: flex; align-items: baseline; justify-content: space-between; }
.fh-tape h2, .fh-past h2, .fh-how-h, .fh-who h2 { margin: 0; font: 900 22px/1.2 var(--han); letter-spacing: .06em; }
.fh-tape-k span, .fh-past-k span { font: 400 11px/1 var(--mono); color: var(--mute); }
.fh-tape-roll { list-style: none; margin: 8px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.fh-tape-roll li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.45; }
.fh-tape-roll li.is-new { animation: guPrint .8s ease-out; }
@keyframes guPrint { 0% { background: var(--red-wash); clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); } 100% { background: transparent; } }
.tp-k { font: 800 13px/1.45 var(--stencil); letter-spacing: .05em; color: var(--mute); }
.fh-tape-roll li[data-k="split"] .tp-k { color: var(--red); }
.tp-t code { font-size: 11px; }
.tp-t b { font-family: var(--mono); font-weight: 600; }
.tp-w { font: 400 10.5px/1.6 var(--mono); color: var(--mute); }
.fh-quiet { color: var(--mute); font-size: 13px; padding: 10px 0; display: block !important; }

/* ---------- rules (long scroll) ---------- */
.fh-how { border-top: 2px solid var(--ink); padding-top: 12px; }
.fh-how-band { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border: 1.5px solid var(--ink); margin-bottom: 14px; }
.fh-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.fh-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.fh-step-n { font: 900 46px/.9 var(--stencil); color: var(--red); }
.fh-steps h3, .fh-example h3 { margin: 0 0 2px; font: 700 17px/1.3 var(--han); }
.fh-steps p, .fh-example p { margin: 0; font-size: 14.5px; }
.fh-example { margin-top: 16px; background: var(--card); border: 1.5px solid var(--ink); padding: 12px; }
.fh-ex-t { width: 100%; border-collapse: collapse; margin: 8px 0 10px; font-size: 13.5px; }
.fh-ex-t th, .fh-ex-t td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--rule); }
.fh-ex-t th { font-weight: 500; color: var(--mute); font-size: 12px; }
.fh-ex-t td:nth-child(n+2) { font-family: var(--mono); font-size: 12px; }
.fh-ex-t tr.is-out td { color: var(--red); font-weight: 700; }
.fh-ex-t tr.is-sum td { border-bottom: 0; font-weight: 700; }

/* ---------- past rounds ---------- */
.fh-past { border-top: 2px solid var(--ink); padding-top: 8px; }
.fh-past-list { list-style: none; margin: 8px 0 0; padding: 0; }
.fh-past-list > li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.fh-past-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.fh-past-hash { font: 400 10px/1.4 var(--mono); color: var(--mute); word-break: break-all; margin-top: 4px; }
.fh-past .gu-chips { margin-top: 6px; }
.fh-past .gu-chips li { font-size: 12px; padding: 3px 0; }

.fh-who { border: 2px solid var(--ink); background: var(--card); padding: 12px; font-size: 13px; }
.fh-who code { word-break: break-all; font-size: 11px; }

/* ---------- footer ---------- */
.fh-foot { border-top: 2px solid var(--ink); padding-top: 12px; font-size: 13px; color: var(--ink2); }
.fh-foot-line { margin: 0 0 8px; font-weight: 700; }
.fh-foot-dl { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 8px; margin: 0; }
.fh-foot-dl dt { color: var(--mute); }
.fh-foot-dl dd { margin: 0; }
.fh-foot-dl code { font-size: 11px; word-break: break-all; }
.fh-foot-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; }
.fh-foot-links a.is-dim { opacity: .4; pointer-events: none; }

/* ---------- the CA dock (fixed, above the thumb) ---------- */
.gu-dock { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k addr copy" "k gm copy"; align-items: center; gap: 2px 10px;
  background: var(--ink); color: var(--card); border: 2px solid var(--ink); padding: 8px 8px 8px 12px; max-width: 760px; margin: 0 auto; box-shadow: 0 6px 0 var(--red); }
.gu-dock-k { grid-area: k; font: 900 20px/1 var(--stencil); color: var(--red); letter-spacing: .06em; }
.gu-dock-addr { grid-area: addr; font-size: 11px; line-height: 1.35; word-break: break-all; user-select: all; -webkit-user-select: all; }
.gu-dock-addr.is-wait { color: #B9B3A2; user-select: none; font-family: var(--han); font-size: 12px; }
.gu-dock-copy { grid-area: copy; border: 0; background: var(--red); color: #FFFDF6; font: 700 13px/1 var(--han); padding: 0 12px; height: 44px; cursor: pointer; }
.gu-dock-copy[data-done="1"] { background: var(--card); color: var(--ink); }
.gu-dock-gm { grid-area: gm; font: 400 10px/1 var(--mono); color: #B9B3A2; text-decoration: none; }

.fh-toasts { position: fixed; left: 0; right: 0; top: 12px; display: grid; justify-items: center; gap: 6px; z-index: 50; pointer-events: none; }
.fh-toast { background: var(--ink); color: var(--card); padding: 9px 14px; font-size: 13px; border-left: 4px solid var(--red); max-width: 92vw; }

/* ---------- 720–1000: one column, wider measure, larger object ---------- */
@media (min-width: 720px) {
  .fh-sheet { padding: 22px 28px 140px; gap: 24px; }
  .gu-regi { padding: 20px 22px 22px; }
  .gu-certs { gap: 10px; }
  .gu-cert { min-height: 132px; padding: 9px; }
  .gu-cert-n { font-size: 46px; }
  .gu-cert-who { font-size: 10.5px; }
  .gu-cert-amt { font-size: 11px; }
  .gu-chips { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .gu-chips li { font-size: 20px; padding: 6px 0 5px; }
  .gu-chips li small { font-size: 10px; }
  .gu-say { font-size: 17px; }
  .gu-buy { grid-template-columns: auto minmax(0, 320px) 1fr; }
  .gu-cost { grid-column: auto; align-self: center; }
  .gu-dock-addr { font-size: 13px; }
  .gu-dock { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "k addr gm copy"; padding: 8px 8px 8px 16px; }
}

/* ---------- ≥ 1000: the page recomposes — register left, tape as a sticky column right ---------- */
@media (min-width: 1000px) {
  .fh-sheet { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 36px; align-items: start; padding-top: 30px; }
  .gu-regi { grid-column: 1; grid-row: 1 / span 2; padding: 26px 28px 28px; }
  .fh-tape { grid-column: 2; grid-row: 1; position: sticky; top: 20px; }
  .fh-tape-roll { max-height: 64vh; }
  .fh-how { grid-column: 1; }
  .fh-past { grid-column: 2; }
  .fh-who { grid-column: 1 / -1; }
  .fh-foot { grid-column: 1 / -1; }
  .gu-cert { min-height: 150px; }
  .gu-cert-n { font-size: 56px; }
  .gu-brand { font-size: 24px; }
  .gu-lunno { font-size: 22px; }
  .gu-say { font-size: 18px; }
  .gu-go { font-size: 20px; }
  .fh-steps li { grid-template-columns: 84px minmax(0, 1fr); }
  .fh-step-n { font-size: 60px; }
  .gu-dock { max-width: 900px; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }
.fh-past .gu-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }