/* 补仓 — a brutalist position board on bone paper. One black ink, one red accent (the logo's), hard rules, no radius.
   The page is the board: ten positions as stacks of blocks; this round's block solid where it was paid, a red dashed
   empty slot where it is still owed. */
:root {
  --paper: #EFEEE8;
  --ink: #0D0D0B;
  --red: #F5002E;
  --red-ink: #FFF7F4;
  --mute: #6E6C64;
  --rule: #0D0D0B;
  --hush: #D9D7CE;
  --slab: #1B1B18;
  --gone: #B9B6AB;
  --f-big: "Archivo Black", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-txt: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-num: "DM Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; padding: 0 14px 210px; max-width: 1180px; min-height: 100vh;
  background: var(--paper); color: var(--ink); font: 400 15px/1.6 var(--f-txt);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mast" "ladder" "paid" "side" "colo";
}
a { color: inherit; }
b, strong { font-weight: 900; }
code { font-family: var(--f-num); }

/* ---------- mast: a thin strip, not a header bar ---------- */
.cg-mast { grid-area: mast; display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; border-bottom: 3px solid var(--rule); font-size: 12px; min-width: 0; }
.cg-mark { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cg-mark img { display: block; width: 24px; height: 24px; }
.cg-mark b { font: 900 16px/1 var(--f-big); letter-spacing: .02em; }
.cg-mark i { font: 500 11px/1 var(--f-num); font-style: normal; color: var(--mute); }
.cg-where { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mute); }
.cg-bell { flex: none; font: 500 15px/1 var(--f-num); padding: 5px 7px; background: var(--ink); color: var(--paper); }
.cg-bell.is-hot { background: var(--red); color: var(--red-ink); }

/* ---------- the headline ---------- */
.cg-hed { margin: 12px 0 4px; font: 900 40px/1.06 var(--f-big); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; }
.cg-hed em { font-style: normal; color: var(--red); }
.cg-say { margin: 4px 0 6px; font-size: 15px; line-height: 1.55; max-width: 44em; }
.cg-say b { background: var(--ink); color: var(--paper); padding: 0 4px; font-weight: 700; }
.cg-say em { font-style: normal; color: var(--red); font-weight: 900; }
.cg-say .cg-n { font-family: var(--f-num); }

/* ---------- the ladder: ten stacks ---------- */
.cg-ladder { grid-area: ladder; margin-top: 12px; border: 3px solid var(--rule); background: #F7F6F1; padding: 10px 8px 12px; min-width: 0; }
.cg-lhd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 0 2px 8px; border-bottom: 1px solid var(--rule); }
.cg-lt { flex: 1; min-width: 0; font: 900 15px/1.2 var(--f-big); }
.cg-dial { flex: none; width: 26px; height: 26px; }
.cg-dial circle { fill: none; stroke-width: 6; }
.cg-dial-bg { stroke: var(--hush); }
.cg-dial-arc { stroke: var(--ink); transition: stroke-dashoffset .9s linear; }
.cg-dial.is-hot .cg-dial-arc { stroke: var(--red); }
.cg-due { flex: 1 0 100%; font: 500 12px/1.2 var(--f-num); color: var(--mute); }
.cg-cols { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; align-items: end; }
.cg-col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; position: relative; }
.cg-cap { font: 500 9.5px/1.15 var(--f-num); text-align: center; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: clip; margin-bottom: 3px; min-height: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.cg-cap b { color: var(--ink); font-weight: 500; }
.cg-stk { display: flex; flex-direction: column-reverse; gap: 2px; justify-content: flex-start; border-bottom: 3px solid var(--rule); padding-bottom: 2px; }
.cg-blk { height: 15px; background: var(--slab); flex: none; }
.cg-blk.is-open { background: var(--ink); }
.cg-blk.is-now { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--paper); }
.cg-slot { height: 15px; flex: none; border: 2px dashed var(--red); background: repeating-linear-gradient(135deg, rgba(245,0,46,.14) 0 4px, transparent 4px 8px); animation: cg-blink 1.2s steps(2, end) infinite; }
@keyframes cg-blink { 50% { border-color: transparent; } }
.cg-col.is-owe .cg-cap b { color: var(--red); }
.cg-col.is-me .cg-cap b { background: var(--ink); color: var(--paper); padding: 0 2px; }
.cg-col.is-gone .cg-stk { justify-content: flex-start; }
.cg-col.is-gone .cg-blk { background: var(--gone); }
.cg-flat { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.cg-flat i { height: 5px; background: var(--gone); display: block; }
.cg-col.is-gone .cg-cap { text-decoration: line-through; }
.cg-col.is-void .cg-stk { border-bottom-style: dotted; }
.cg-ghost { height: 15px; border: 1px dashed var(--hush); flex: none; }
.cg-col.is-first .cg-ghost { border: 2px solid var(--red); background: rgba(245,0,46,.08); }
.cg-col.is-first .cg-cap b { color: var(--red); }
.cg-col.is-new .cg-stk > :first-child { animation: cg-drop .5s ease-out; }
@keyframes cg-drop { from { transform: translateY(-26px); opacity: 0; } }
.cg-amt { font: 500 10px/1.2 var(--f-num); text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; min-height: 1.2em; }
.cg-amt.is-plus { color: var(--red); }
.cg-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 2px 0; font-size: 12px; color: var(--mute); }
.cg-key span { display: inline-flex; align-items: center; gap: 5px; }
.cg-k { display: inline-block; width: 14px; height: 10px; }
.cg-k-paid { background: var(--ink); }
.cg-k-owe { border: 2px dashed var(--red); }
.cg-k-gone { background: var(--gone); }

/* ---------- the action ---------- */
.cg-act { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 8px; }
.cg-go { appearance: none; border: 3px solid var(--ink); background: var(--red); color: var(--red-ink); font: 900 20px/1 var(--f-big); padding: 15px 14px; cursor: pointer; text-align: center; box-shadow: 5px 5px 0 var(--ink); }
.cg-go:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.cg-go:disabled { background: var(--hush); color: var(--mute); border-color: var(--mute); box-shadow: none; cursor: default; }
.cg-why { margin: 0; font-size: 13px; color: var(--mute); }
.cg-why b { color: var(--ink); }
.cg-owed[hidden] { display: none; }
.cg-owed { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid var(--ink); padding: 8px 10px; font-size: 13px; }
.cg-owed button { border: 0; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--f-txt); padding: 9px 12px; cursor: pointer; }

/* ---------- section heads ---------- */
.cg-h2 { margin: 0 0 8px; font: 900 18px/1.2 var(--f-big); display: flex; align-items: baseline; gap: 8px; border-bottom: 3px solid var(--rule); padding-bottom: 6px; }
.cg-h2 span { font: 500 11px/1 var(--f-num); color: var(--mute); }

/* ---------- payouts ---------- */
.cg-paid { grid-area: paid; margin-top: 22px; }
.cg-split { list-style: none; margin: 0; padding: 0; }
.cg-split li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hush); font-size: 14px; }
.cg-split .cg-rn { font: 900 13px/1 var(--f-big); background: var(--ink); color: var(--paper); padding: 4px 6px; }
.cg-split .cg-pl { font: 500 14px/1 var(--f-num); color: var(--red); }
.cg-split li.is-hush { display: block; color: var(--mute); }

/* ---------- the wire ---------- */
.cg-side { grid-area: side; min-width: 0; }
.cg-wire { margin-top: 22px; min-width: 0; }
.cg-tape { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.cg-tape li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--hush); min-width: 0; }
.cg-tape time { font: 500 11.5px/1.6 var(--f-num); color: var(--mute); }
.cg-tape span { min-width: 0; overflow-wrap: anywhere; }
.cg-tape li.is-out span { color: var(--red); font-weight: 700; }
.cg-tape li.is-eg { opacity: .55; }
.cg-tape li.is-hush { display: block; color: var(--mute); }
.cg-tape li.is-in { animation: cg-print .7s ease-out; }
@keyframes cg-print { from { background: var(--ink); color: var(--paper); } }

/* ---------- the rules ---------- */
.cg-code { margin-top: 22px; }
.cg-rl { margin: 0; padding-left: 20px; font-size: 14px; }
.cg-rl li { margin-bottom: 8px; }
.cg-eg { margin-top: 12px; border: 3px solid var(--rule); padding: 10px 12px; background: #F7F6F1; font-size: 14px; }
.cg-eg p { margin: 0 0 6px; }
.cg-egt { font: 900 14px/1.2 var(--f-big); }
.cg-eg b { color: var(--red); font-family: var(--f-num); font-weight: 500; }

/* ---------- colophon ---------- */
.cg-colo { grid-area: colo; margin-top: 28px; border-top: 3px solid var(--rule); padding-top: 12px; font-size: 12px; color: var(--mute); display: grid; gap: 4px; min-width: 0; }
.cg-colo code { color: var(--ink); overflow-wrap: anywhere; font-size: 11.5px; }
.cg-colo nav { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.cg-colo nav a { color: var(--ink); font-weight: 700; }

/* ---------- the CA pill: floats over the page, above the thumb ---------- */
.capill { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: 132px; display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.capill-k { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 8px; background: var(--ink); color: var(--paper); font: 900 15px/1 var(--f-big); }
.capill-v { flex: 1; min-width: 0; font: 500 10.2px/1.25 var(--f-num); word-break: break-all; user-select: all; -webkit-user-select: all; }
.capill-v.is-wait { font: 400 11.5px/1.3 var(--f-txt); color: var(--mute); user-select: none; -webkit-user-select: none; }
.capill-cp { flex: none; border: 2px solid var(--ink); background: var(--red); color: var(--red-ink); font: 700 13px/1 var(--f-txt); padding: 9px 10px; cursor: pointer; }
.capill-cp:disabled { background: var(--hush); color: var(--mute); border-color: var(--mute); cursor: default; }
.capill-cp.is-done { background: var(--ink); color: var(--paper); }
.capill-gm { flex: none; font: 500 10px/1 var(--f-num); color: var(--mute); }

/* ---------- veil ---------- */
.cg-veil { position: fixed; inset: 0; z-index: 60; background: rgba(13,13,11,.55); display: flex; align-items: flex-end; justify-content: center; }
.cg-veil[hidden] { display: none; }
.cg-vcard { width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; background: var(--paper); border: 3px solid var(--ink); padding: 14px; }
.cg-vhd { display: flex; justify-content: space-between; align-items: center; font: 900 17px/1.2 var(--f-big); margin-bottom: 10px; }
.cg-vhd button { border: 2px solid var(--ink); background: transparent; font: 700 12px/1 var(--f-txt); padding: 7px 9px; cursor: pointer; }
.cg-vls { list-style: none; margin: 0; padding: 0; }
.cg-vls li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hush); font-size: 13px; }
.cg-wallets { display: grid; gap: 8px; }
.cg-wallets button { display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); background: transparent; padding: 10px; font: 700 14px/1 var(--f-txt); cursor: pointer; }
.cg-wallets img { width: 22px; height: 22px; }
.cg-toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--paper); padding: 9px 14px; font-size: 13px; }

/* ---------- 521–999: one column, wider measure, bigger board ---------- */
@media (min-width: 521px) {
  body { padding: 0 28px 200px; }
  .cg-hed { font-size: 60px; margin-top: 16px; }
  .cg-say { font-size: 17px; }
  .cg-ladder { padding: 14px 14px 16px; }
  .cg-cols { gap: 8px; }
  .cg-stk { gap: 3px; }
  .cg-blk, .cg-slot, .cg-ghost { height: 21px; }
  .cg-cap { font-size: 11px; }
  .cg-amt { font-size: 11.5px; }
  .capill { left: 50%; right: auto; transform: translateX(-50%); width: 620px; bottom: 140px; }
  .capill-v { font-size: 12px; }
}

/* ---------- ≥1000: the page recomposes — board left, wire + rules as a column right ---------- */
@media (min-width: 1000px) {
  body {
    padding: 0 32px 120px; column-gap: 40px;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "mast mast" "ladder side" "paid side" "colo colo";
    grid-template-rows: auto auto 1fr auto; align-content: start;
  }
  .cg-hed { font-size: 76px; margin-top: 18px; }
  .cg-say { font-size: 18px; }
  .cg-ladder { margin-top: 24px; padding: 18px 20px 20px; }
  .cg-side { padding-top: 110px; }
  .cg-wire { margin-top: 0; }
  .cg-tape { max-height: 520px; overflow: auto; }
  .cg-stk { gap: 4px; }
  .cg-blk, .cg-slot, .cg-ghost { height: 27px; }
  .cg-cols { gap: 12px; }
  .cg-cap { font-size: 12px; min-height: 28px; }
  .cg-amt { font-size: 12.5px; }
  .cg-go { font-size: 24px; justify-self: start; min-width: 320px; }
  .capill { left: auto; transform: none; right: calc(max(0px, (100vw - 1180px) / 2) + 32px); width: 380px; top: 64px; bottom: auto; }
  .capill-v { font-size: 10.6px; }
}