/* Memecoinx1000 — THE FLOOR (the trade page). Loaded after style.css, css/frame.css and css/chart.css.
   Only the FLOOR owner edits this file. Class prefix .fl- (plus the floor classes it may restyle: .coin .slip .receipt
   .shred .spike .fill-list .pit-list).
   Colors come only from the shared theme tokens (style.css, owned by FRAME) and the floor tokens below, which are built
   from them, so the same paper works by day and at night (<html data-theme="dark">). No gradients for show, no glow,
   no glass: ink, paper, hard offset shadows. */

/* ---------------------------------------------------------------- floor tokens (day / night), derived from the theme tokens */
:root {
  --fl-danger: var(--danger-wash, #ffe1da);        /* the receipt paper reddening as the fuse burns */
  --fl-win: #e4e9ff;                               /* a blue wash for take-profit rows */
  --fl-rule: var(--grid, rgba(70, 120, 190, .18)); /* ledger paper rules */
  --fl-margin: var(--red-a55, rgba(226, 59, 42, .55));
  --fl-hi-soft: var(--hi-a35, rgba(247, 227, 90, .35));
  --fl-shade: var(--ink-a12, rgba(27, 26, 23, .12));
  --fl-on: var(--snow, #fff);                      /* text on blue or red ink */
  --fl-on-hi: var(--on-hi, #1b1a17);               /* text on the yellow highlighter */
  --fl-drop: var(--receipt-drop, rgba(27, 26, 23, .85));
  --fl-field: var(--field, #fff);
  --fl-blend: var(--blend, multiply);
}
:root[data-theme="dark"] { --fl-win: #1d2140; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fl-win: #1d2140; } }

/* ---------------------------------------------------------------- layout: the desk column holds the chart + the ledger */
.floor { grid-template-rows: minmax(720px, calc(100vh - 140px)) auto; }
.slip { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fl-deskcol { grid-area: desk; display: flex; flex-direction: column; gap: 18px; min-height: 0; min-width: 0; }
.fl-deskcol > .desk { flex: 1 1 auto; min-height: 0; }
.fl-vh { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; }
.floor button { touch-action: manipulation; }

/* ---------------------------------------------------------------- THE BOARD: a live screener */
.board { container-type: inline-size; container-name: fl-board; }
.fl-sortrow { display: flex; gap: 6px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fl-dense-tog { border: 2px dashed var(--ink); background: transparent; padding: 4px 8px; font: 700 11px var(--mono); }
.fl-dense-tog[aria-pressed="true"] { border-style: solid; background: var(--ink); color: var(--paper); }
#coins .coin { grid-template-columns: 32px minmax(0, 1fr) 44px minmax(66px, auto); grid-template-areas: "img sym spk px" "img mc spk ch"; column-gap: 8px; row-gap: 0; padding: 7px 12px; }
#coins .coin:hover { background: var(--fl-hi-soft); }
#coins .coin.on { background: var(--hi); color: var(--fl-on-hi); }
#coins .coin.on .m, #coins .coin.on .c-ch:not(.up):not(.down) { color: var(--fl-on-hi); }
#coins .coin.fl-held:not(.on) { box-shadow: inset 4px 0 0 var(--blue); }
#coins .c-img { grid-area: img; }
#coins .c-sym { grid-area: sym; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
#coins .c-sym .s { overflow: hidden; text-overflow: ellipsis; }
#coins .c-mc { grid-area: mc; }
#coins .c-spk { grid-area: spk; }
#coins .c-px { grid-area: px; min-width: 0; }
#coins .c-ch { grid-area: ch; text-align: right; font: 700 11px var(--mono); font-style: normal; }
#coins .c-vol, #coins .c-bs, #coins .c-liq, #coins .c-fl { display: none; }
.fl-none { list-style: none; padding: 16px 14px; font: 700 13px var(--mono); color: var(--ink3); }
.spk path { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.spk .fl-up { stroke: var(--blue); } .spk .fl-dn { stroke: var(--red); }
.fl-pin { font: 700 10px/1 var(--mono); padding: 2px 4px 1px; border: 1.5px solid currentColor; flex: none; }
.fl-pin.blue { color: var(--blue); } .fl-pin.red { color: var(--red); }
#coins .coin.on .fl-pin.blue { color: var(--fl-on-hi); }
/* a price tick flashes the cell: two identical animations take turns, so the flash restarts without forcing a layout */
.coin.fl-tu0 .c-px b, .board.fl-dense .coin.fl-tu0 .c-mc { animation: fl-tu0 .7s; } .coin.fl-tu1 .c-px b, .board.fl-dense .coin.fl-tu1 .c-mc { animation: fl-tu1 .7s; }
.coin.fl-td0 .c-px b, .board.fl-dense .coin.fl-td0 .c-mc { animation: fl-td0 .7s; } .coin.fl-td1 .c-px b, .board.fl-dense .coin.fl-td1 .c-mc { animation: fl-td1 .7s; }
@keyframes fl-tu0 { 0% { background: color-mix(in srgb, var(--blue) 32%, transparent); } }
@keyframes fl-tu1 { 0% { background: color-mix(in srgb, var(--blue) 32%, transparent); } }
@keyframes fl-td0 { 0% { background: color-mix(in srgb, var(--red) 32%, transparent); } }
@keyframes fl-td1 { 0% { background: color-mix(in srgb, var(--red) 32%, transparent); } }
/* DENSE: one 26px line per coin, a screener */
.fl-bhead { display: none; }
.board.fl-dense .fl-bhead { display: grid; padding: 3px 10px; border-bottom: 2px solid var(--ink); font: 700 9px/1.15 var(--mono); color: var(--ink2); letter-spacing: .4px; background: var(--sheet); }
.board.fl-dense .fl-bhead > * { text-align: right; } .board.fl-dense .fl-bhead > .c-sym { text-align: left; }
.board.fl-dense .fl-bhead .c-bs { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.board.fl-dense .fl-bhead .c-bs b { color: var(--blue); font-weight: 700; } .board.fl-dense .fl-bhead .c-bs i { color: var(--red); font-style: normal; }
/* the dense template must outweigh `#coins .coin` (an id), so the row selector carries #coins too */
.board.fl-dense .fl-bhead, .board.fl-dense #coins .coin { grid-template-columns: minmax(64px, 1.3fr) minmax(50px, 1fr) 48px 52px 34px 50px 34px; grid-template-areas: "sym mc ch vol bs liq fl"; column-gap: 6px; align-items: center; }
.board.fl-dense #coins .coin { height: 26px; padding: 0 10px; }
.board.fl-dense #coins .c-img, .board.fl-dense #coins .c-spk, .board.fl-dense #coins .c-px { display: none; }
.board.fl-dense .fl-row .c-vol { grid-area: vol; } .board.fl-dense .fl-row .c-bs { grid-area: bs; } .board.fl-dense .fl-row .c-liq { grid-area: liq; } .board.fl-dense .fl-row .c-fl { grid-area: fl; }
.board.fl-dense .fl-row .c-sym { grid-area: sym; } .board.fl-dense .fl-row .c-mc { grid-area: mc; } .board.fl-dense .fl-row .c-ch { grid-area: ch; }
.board.fl-dense #coins .c-sym .s { font-size: 12px; }
.board.fl-dense #coins .c-mc { font: 700 11px var(--mono); color: inherit; text-align: right; }
.board.fl-dense #coins .c-vol, .board.fl-dense #coins .c-liq { display: block; font: 400 11px var(--mono); color: var(--ink2); text-align: right; white-space: nowrap; overflow: hidden; }
.board.fl-dense #coins .c-bs, .board.fl-dense #coins .c-fl { display: block; }
/* the bars live in the coin rows only (the header row reuses the class names for its labels) */
#coins .c-bs, #coins .c-fl { height: 9px; border: 1.5px solid var(--ink); background: var(--red); position: relative; }
#coins .c-bs i, #coins .c-fl i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--blue); }
#coins .c-bs.fl-nil, #coins .c-fl.fl-nil { background: transparent; border-style: dashed; border-color: var(--ink3); }
#coins .fl-nil i { display: none; }
@container fl-board (max-width: 440px) {
  .board.fl-dense .fl-bhead, .board.fl-dense #coins .coin { grid-template-columns: minmax(64px, 1.3fr) minmax(50px, 1fr) 48px 34px 50px 34px; grid-template-areas: "sym mc ch bs liq fl"; }
  .board.fl-dense .fl-row .c-vol { display: none !important; }
}
@container fl-board (max-width: 370px) {
  .board.fl-dense .fl-bhead, .board.fl-dense #coins .coin { grid-template-columns: minmax(64px, 1.3fr) minmax(50px, 1fr) 48px 34px 34px; grid-template-areas: "sym mc ch bs fl"; }
  .board.fl-dense .fl-row .c-liq { display: none !important; }
}
@container fl-board (max-width: 250px) {
  .board.fl-dense .fl-bhead, .board.fl-dense #coins .coin { grid-template-columns: minmax(64px, 1.3fr) minmax(50px, 1fr) 48px 34px; grid-template-areas: "sym mc ch fl"; }
  .board.fl-dense .fl-row .c-bs { display: none !important; }
}

/* ---------------------------------------------------------------- the coin head */
.coin-px .fl-fresh { display: block; white-space: nowrap; }
.fl-fresh.fl-stale { color: var(--red); }
.fl-floorline { margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 700 11px var(--mono); color: var(--ink2); }
.fl-floorline b.blue { color: var(--blue); } .fl-floorline b.red { color: var(--red); }
.fl-fbar { width: 52px; height: 8px; border: 1.5px solid var(--ink); background: var(--red); position: relative; flex: none; }
.fl-fbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); transition: width .5s; }
.fl-fbar.fl-nil { background: transparent; border-style: dashed; border-color: var(--ink3); }
.fl-fbar.fl-nil i { display: none; }
.coin-px b.fl-pxu0 { animation: fl-pxu0 .8s; } .coin-px b.fl-pxu1 { animation: fl-pxu1 .8s; }
.coin-px b.fl-pxd0 { animation: fl-pxd0 .8s; } .coin-px b.fl-pxd1 { animation: fl-pxd1 .8s; }
@keyframes fl-pxu0 { 0% { background: var(--blue); color: var(--fl-on); } } @keyframes fl-pxu1 { 0% { background: var(--blue); color: var(--fl-on); } }
@keyframes fl-pxd0 { 0% { background: var(--red); color: var(--fl-on); } } @keyframes fl-pxd1 { 0% { background: var(--red); color: var(--fl-on); } }

/* ---------------------------------------------------------------- the chart bar */
.chart-bar { gap: 10px; }
.fl-seg { display: inline-flex; border: 2px solid var(--ink); }
.fl-seg button { border: 0; background: transparent; padding: 3px 7px; font: 700 11px var(--mono); min-height: 26px; }
.fl-seg button + button { border-left: 2px solid var(--ink); }
.fl-seg button.on { background: var(--ink); color: var(--paper); }
.fl-keys { border: 1.5px dashed var(--ink3); background: transparent; font: 700 11px var(--mono); padding: 4px 8px; color: var(--ink2); min-height: 28px; }
.fl-keys:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }

/* ---------------------------------------------------------------- THE LEDGER: positions on ruled paper */
.fl-ledger { flex: none; display: flex; flex-direction: column; container-type: inline-size; container-name: fl-ledger; }
.fl-lg-head { padding: 6px 10px 6px 12px; align-items: center; }
.fl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fl-tabs button { border: 2px solid transparent; background: transparent; font: 400 17px/1 var(--head); letter-spacing: 1px; padding: 6px 9px 4px; color: var(--ink2); min-height: 32px; }
.fl-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.fl-tabs button.on { border-color: var(--ink); background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--red); }
.fl-tabs button i { font: 700 10px var(--mono); font-style: normal; margin-left: 4px; vertical-align: 2px; }
.fl-lg-tog { border: 2px solid var(--ink); background: var(--sheet); font: 700 11px var(--mono); padding: 5px 9px; min-height: 32px; }
.fl-lg-body {
  height: 168px; overflow: auto; position: relative; background-color: var(--white);
  background-image: repeating-linear-gradient(to bottom, transparent 0 21px, var(--fl-rule) 21px 22px), linear-gradient(to right, transparent 32px, var(--fl-margin) 32px 34px, transparent 34px);
  background-attachment: local; font: 400 12px/22px var(--mono); font-variant-numeric: tabular-nums;
}
.fl-ledger.fl-collapsed .fl-lg-body, .fl-ledger.fl-collapsed .fl-lg-foot { display: none; }
.fl-ledger.fl-collapsed .fl-lg-head { border-bottom: 0; }
.fl-lg-empty { margin: 0; padding: 0 12px 0 44px; color: var(--ink2); font: 700 12px/22px var(--mono); }
.fl-lg-grid { min-width: max-content; }
.fl-lg-h, .fl-lg-row {
  display: grid; align-items: center; column-gap: 8px; min-height: 22px; padding: 0 10px 0 42px; white-space: nowrap;
  grid-template-columns: 112px 66px minmax(64px, 1fr) minmax(64px, 1fr) minmax(64px, 1fr) 62px 98px 96px 66px 66px 102px;
  grid-template-areas: "coin size entry mark liq to pnl ch tp sl act";
}
.fl-lg-h { position: sticky; top: 0; z-index: 2; background: var(--white); font: 700 10px/22px var(--mono); color: var(--ink2); letter-spacing: .5px; border-bottom: 1.5px solid var(--ink); }
.fl-lg-row { cursor: pointer; }
.fl-lg-row:hover { background: var(--fl-hi-soft); }
.fl-lg-row.fl-here .lg-coin b { text-decoration: underline 2px; }
.fl-lg-row.closing { opacity: .65; }
.lg-coin { grid-area: coin; display: flex; gap: 5px; align-items: center; overflow: hidden; }
.lg-coin b { font: 400 14px/1 var(--head); letter-spacing: .4px; }
.lg-coin .lg-side { font: 700 10px var(--mono); padding: 0 4px; color: var(--fl-on); }
.lg-side.l { background: var(--blue); } .lg-side.s { background: var(--red); }
.lg-size { grid-area: size; } .lg-entry { grid-area: entry; } .lg-mark { grid-area: mark; } .lg-liq { grid-area: liq; }
.lg-to { grid-area: to; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1; }
.lg-to i { display: block; height: 5px; border: 1px solid var(--ink); position: relative; }
.lg-to i u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); }
.lg-to em { font: 700 10px var(--mono); font-style: normal; }
.lg-to em.red { color: var(--red); }
.lg-pnl { grid-area: pnl; display: flex; gap: 6px; align-items: baseline; }
.lg-pnl b { font-weight: 700; } .lg-pnl em { font-style: normal; font-size: 10px; color: var(--ink2); }
.lg-pnl.blue b { color: var(--blue); } .lg-pnl.red b { color: var(--red); }
.lg-pnl.fl-pf0 b { animation: fl-pf0 .6s; } .lg-pnl.fl-pf1 b { animation: fl-pf1 .6s; }
@keyframes fl-pf0 { 0% { background: var(--hi); color: var(--fl-on-hi); } } @keyframes fl-pf1 { 0% { background: var(--hi); color: var(--fl-on-hi); } }
.lg-ch { grid-area: ch; width: 96px; height: 22px; display: block; }
.lg-o { border: 1px dashed var(--ink3); padding: 0 5px; line-height: 18px; color: var(--ink2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; font-size: 11px; min-width: 0; }
.lg-o:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }
.lg-o.on { border-style: solid; color: var(--ink); }
.lg-tp { grid-area: tp; } .lg-tp.on { border-color: var(--blue); color: var(--blue); }
.lg-sl { grid-area: sl; } .lg-sl.on { border-color: var(--red); color: var(--red); }
.lg-act { grid-area: act; display: flex; gap: 4px; }
.lg-act button { border: 1.5px solid var(--ink); background: var(--sheet); font: 400 12px/1 var(--head); letter-spacing: .8px; padding: 3px 6px 2px; min-height: 20px; }
.lg-act .lg-close { background: var(--hi); color: var(--fl-on-hi); }
.lg-act button:hover { background: var(--ink); color: var(--paper); }
.lg-act button:disabled { opacity: .5; cursor: wait; }
.fl-ordin { width: 100%; min-width: 0; border: 1.5px solid var(--ink); background: var(--fl-field); color: var(--ink); font: 700 11px/16px var(--mono); padding: 0 3px; }
.fl-lg-list { list-style: none; margin: 0; padding: 0; }
.fl-lg-list li { display: flex; gap: 8px; align-items: center; min-height: 22px; padding: 0 10px 0 42px; white-space: nowrap; overflow: hidden; }
.fl-lg-list li:hover { background: var(--fl-hi-soft); }
.fl-lg-list li > b { font: 400 14px/1 var(--head); letter-spacing: .4px; }
.fl-lg-list .lg-side { font: 700 10px var(--mono); padding: 0 4px; color: var(--fl-on); }
.fl-lg-list .lg-word { font: 700 10px var(--mono); border: 1.5px solid currentColor; padding: 0 3px; line-height: 14px; }
.fl-lg-list .lg-word.blue { color: var(--blue); } .fl-lg-list .lg-word.red { color: var(--red); } .fl-lg-list .lg-word.grey { color: var(--ink3); }
.fl-lg-list .lg-net.blue { color: var(--blue); font-weight: 700; } .fl-lg-list .lg-net.red { color: var(--red); font-weight: 700; }
.fl-lg-list i { font-style: normal; color: var(--ink3); }
.fl-lg-list .lg-x, .fl-lg-list .lg-share { margin-left: auto; border: 1.5px solid var(--ink); background: var(--sheet); font: 700 10px var(--mono); padding: 0 6px; line-height: 16px; min-height: 18px; }
.fl-lg-list .lg-x:hover, .fl-lg-list .lg-share:hover { background: var(--ink); color: var(--paper); }
.fl-lg-foot { border-top: 2px solid var(--ink); padding: 5px 12px; display: flex; gap: 6px 16px; flex-wrap: wrap; font: 700 12px var(--mono); }
.fl-lg-foot:empty { display: none; }
.fl-lg-foot .blue { color: var(--blue); } .fl-lg-foot .red { color: var(--red); } .fl-lg-foot i { font-style: normal; color: var(--ink2); font-weight: 400; }
@container fl-ledger (max-width: 940px) {
  .fl-lg-h, .fl-lg-row { grid-template-columns: 112px minmax(64px, 1fr) minmax(64px, 1fr) 62px 98px 96px 62px 62px 98px; grid-template-areas: "coin entry liq to pnl ch tp sl act"; }
  .lg-size, .lg-mark { display: none; }
}
@container fl-ledger (max-width: 600px) {
  .fl-lg-grid { min-width: 0; }
  .fl-lg-h { display: none; }
  .fl-lg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 96px; grid-template-areas: "coin coin pnl ch" "entry liq to ch" "tp sl act act"; padding: 0 8px 0 40px; border-bottom: 1px dashed var(--ink3); }
  .lg-size, .lg-mark { display: none; }
  .lg-ch { align-self: center; }
  .lg-act { justify-content: flex-end; }
}

/* ---------------------------------------------------------------- THE SLIP */
.slip .card-head { flex-wrap: wrap; align-items: center; }
.fl-punch { position: relative; display: flex; align-items: center; gap: 6px; margin-left: auto; min-height: 26px; }
.fl-pc { width: 112px; height: 21px; display: block; overflow: visible; }
.fl-pc-card { fill: var(--white); stroke: var(--ink); stroke-width: 1.6; }
.fl-pc-rule { stroke: var(--fl-rule); stroke-width: 1; }
.fl-pc-hole { fill: transparent; stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 2 2; }
.fl-pc-hole.on { fill: var(--ink); stroke: var(--ink); stroke-dasharray: none; }
.fl-pc-hole.fl-pc-new { transform-box: fill-box; transform-origin: center; animation: fl-punch .26s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes fl-punch { from { transform: scale(1.9); } }
.fl-pc-x { font: 400 11px var(--head); fill: var(--red); }
.fl-pc-half { position: absolute; left: 0; top: 50%; margin-top: -10.5px; pointer-events: none; }
.fl-pc-l { font: 700 10px var(--mono); color: var(--ink2); white-space: nowrap; }
.fl-lever { height: 74px; margin: 6px 0 2px; position: relative; }
.fl-fdepth { margin: 6px 14px 0; font: 700 11px var(--mono); color: var(--ink2); }
.fl-fdepth b { color: var(--red); }
.print.fl-1000 { box-shadow: 6px 6px 0 var(--red); }
.print:disabled { cursor: not-allowed; }
.print:disabled:not(.fl-frozen) { opacity: .75; }
.print.fl-frozen {
  background: var(--sheet); color: var(--ink2); border-style: dashed; box-shadow: 3px 3px 0 var(--ink3);
  background-image: repeating-linear-gradient(-45deg, transparent 0 7px, var(--fl-shade) 7px 9px); font-size: 26px;
}
.print.fl-frozen small { color: var(--ink2); border-color: var(--ink3); }
.print.fl-frozen:hover { background-color: var(--sheet); }
.print.fl-nudge { animation: fl-nudge .3s; }
@keyframes fl-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fl-wrongway { margin: 9px 14px 0; padding: 5px 8px 4px; background: var(--red); color: var(--fl-on); font: 400 15px/1.1 var(--head); letter-spacing: 1px; text-align: center; transform: rotate(-.6deg); }
.fl-slipfoot { display: flex; gap: 8px; margin: 10px 14px 0; align-items: center; }
.fl-arm { border: 2px solid var(--ink); background: var(--sheet); font: 700 11px var(--mono); padding: 6px 9px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; box-shadow: 2px 2px 0 var(--ink); }
.fl-arm i { width: 26px; height: 14px; border: 2px solid currentColor; border-radius: 8px; position: relative; flex: none; }
.fl-arm i::after { content: ""; position: absolute; left: 1px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); transition: transform .15s; }
.fl-arm.on { background: var(--red); color: var(--fl-on); }
.fl-arm.on i::after { transform: translateX(12px); background: var(--fl-on); }
.fl-arm.fl-nudge { animation: fl-nudge .3s 2; }
.fl-armnote { font: 700 10px/1.3 var(--mono); color: var(--ink2); }

/* ---------------------------------------------------------------- YOUR TICKETS: receipts */
.tickets { --fl-rw: 214px; padding-top: 10px; }
.receipt.fl-rc {
  flex: 0 0 var(--fl-rw); width: var(--fl-rw); padding: 0; background: transparent; animation: none; -webkit-mask: none; mask: none;
  filter: drop-shadow(3px 3px 0 var(--fl-drop)); --t: 0; --tear: 0;
}
.fl-paper {
  --zig: 8px; position: relative; padding: 12px 12px 18px; background: var(--white);
  background: color-mix(in srgb, var(--fl-danger) calc(var(--t) * 100%), var(--white));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--zig) * 2) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--zig) * 2) 100%;
}
.fl-rc.fl-torn-top .fl-paper {
  padding-top: 16px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x;
}
.fl-rc.fl-inplace { animation: printOut .9s steps(12, end); }
.fl-rc .r-sym { cursor: pointer; }
.fl-rc .r-no { display: flex; align-items: center; gap: 5px; }
.fl-rc .r-no .fl-cur { font-weight: 700; color: var(--ink2); }
.fl-rc dl { margin-top: 8px; }
.fl-rc .v-tp, .fl-rc .v-sl { cursor: pointer; text-decoration: underline dotted 1px; text-underline-offset: 2px; }
.fl-rc .v-sl { color: var(--red); }
.fl-rc:not(.has-tp) .o-tp, .fl-rc:not(.has-sl) .o-sl { display: none; }
.fl-rc .fl-ordin { font-size: 12px; text-align: right; }
.fl-body { position: relative; }
.fl-degen { margin: -12px -12px 9px; padding: 5px 8px 3px; background: var(--red); color: var(--fl-on); font: 400 13px/1 var(--head); letter-spacing: 1.5px; text-align: center; }
.fl-rc.fl-torn-top .fl-degen { margin-top: -16px; padding-top: 11px; }
.fl-degen.fl-in { animation: fl-band .32s steps(4, end); }
@keyframes fl-band { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.fl-live { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); position: relative; flex: none; }
.fl-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--blue); animation: fl-ring 1.6s ease-out infinite; }
@keyframes fl-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.fl-chip { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; font: 700 10px/1 var(--mono); font-style: normal; border: 1.5px solid var(--ink); flex: none; }
.fl-chip.fl-p { background: var(--sheet); color: var(--ink); }
.fl-chip.fl-real { background: var(--blue); color: var(--fl-on); border-color: var(--blue); }
.fl-shim { position: relative; display: inline-block; color: var(--ink2); letter-spacing: -1px; }
.fl-shim span { animation: fl-shim .16s steps(1) infinite; }
.fl-shim span + span { position: absolute; left: 0; top: 0; animation-delay: -.08s; }
@keyframes fl-shim { 50% { opacity: 0; } }
.fl-cut { display: inline-block; margin-right: 3px; font-size: 10px; border: 1.5px solid var(--red); color: var(--red); padding: 0 2px; line-height: 12px; transform: rotate(-8deg); }
.fl-cut.fl-in { animation: fl-cutin .2s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fl-cutin { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
.fl-fill { margin: 7px 0 0; font: 400 10px/1.4 var(--mono); color: var(--ink2); }
.fl-fill b.red { color: var(--red); } .fl-fill b.blue { color: var(--blue); }
.fl-fill i { font-style: normal; background: var(--fl-hi-soft); padding: 0 2px; }
/* the fuse: dashed ink burning from the left toward a drawn pair of scissors */
.fl-fuse { position: relative; height: 16px; margin: 10px 20px 0 0; }
.fl-fuse b { position: absolute; left: 0; top: 7px; width: calc(var(--t) * 100%); border-top: 2px dotted var(--ink3); }
.fl-fuse i { position: absolute; left: calc(var(--t) * 100%); right: 0; top: 7px; border-top: 2px dashed var(--ink); }
.fl-fuse em { position: absolute; left: calc(var(--t) * 100%); top: -1px; transform: translateX(-50%); color: var(--red); font: 700 15px/1 var(--mono); font-style: normal; animation: fl-spark .24s steps(2) infinite; }
@keyframes fl-spark { 50% { transform: translateX(-50%) rotate(45deg) scale(.8); } }
.fl-fuse s { position: absolute; right: -20px; top: -2px; width: 19px; height: 19px; text-decoration: none; }
.fl-fuse svg, .fl-perf svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.fl-dist { margin: 3px 0 0; font: 700 11px var(--mono); color: var(--ink2); }
.fl-dist.red { color: var(--red); }
.fl-rc .r-pnl { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--ink3); text-align: center; }
.fl-pnlrow { display: flex; align-items: baseline; justify-content: center; gap: 5px; font: 400 32px/1 var(--head); letter-spacing: .5px; min-height: 32px; }
.fl-pnlrow i { font: 700 15px var(--mono); font-style: normal; color: var(--ink3); }
.fl-rc .fl-pnlrow b { display: inline-block; font: inherit; }
.fl-odo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-pnlrow.blue { color: var(--blue); } .fl-pnlrow.red { color: var(--red); }
.fl-pct { font-weight: 700; font-size: 12px; }
.fl-rule, .fl-peak, .fl-closest { margin: 3px 0 0; text-align: center; font: 400 10px var(--mono); color: var(--ink3); }
.fl-peak { color: var(--ink2); font-weight: 700; }
.fl-till { list-style: none; margin: 7px 0 0; padding: 4px 0 0; border-top: 1px dotted var(--ink3); font: 400 10px/1.5 var(--mono); color: var(--ink2); }
.fl-till:empty { display: none; }
.fl-till b.blue { color: var(--blue); } .fl-till b.red { color: var(--red); }
.fl-till li.fl-in { animation: fl-till .3s steps(3, end); }
@keyframes fl-till { from { clip-path: inset(0 100% 0 0); } }
.fl-surv { position: absolute; right: -6px; top: -4px; z-index: 3; font: 400 16px/1 var(--head); letter-spacing: 1px; color: var(--blue); border: 3px solid var(--blue); padding: 3px 6px 1px; transform: rotate(-7deg); mix-blend-mode: var(--fl-blend); pointer-events: none; }
.fl-mstamp { position: absolute; left: var(--x, 50%); top: var(--y, 40%); z-index: 3; transform: translate(-50%, -50%) rotate(var(--r, -8deg)); font: 400 16px/1 var(--head); letter-spacing: 1px; border: 2.5px solid currentColor; padding: 3px 6px 1px; pointer-events: none; white-space: nowrap; mix-blend-mode: var(--fl-blend); }
.fl-mstamp.red { color: var(--red); } .fl-mstamp.blue { color: var(--blue); } .fl-mstamp.ink { color: var(--ink); } .fl-mstamp.grey { color: var(--ink3); }
.fl-mstamp.fl-in { animation: fl-mslam .14s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fl-mslam { from { transform: translate(-50%, -50%) rotate(var(--r, -8deg)) scale(2.2); opacity: 0; } }
.fl-meta { display: flex; gap: 6px; align-items: center; margin-top: 8px; font: 700 10px var(--mono); }
.fl-sharelive { border: 1.5px solid var(--ink); background: var(--sheet); font: 700 10px var(--mono); padding: 3px 6px; min-height: 26px; }
.fl-sharelive:hover { background: var(--ink); color: var(--paper); }
.fl-watch { color: var(--red); }
.fl-ping { margin: 8px 0 0; padding: 5px 6px; border: 1.5px dashed var(--ink); font: 700 10px/1.5 var(--mono); }
.fl-ping button { border: 1.5px solid var(--ink); background: var(--hi); color: var(--fl-on-hi); font: 400 13px/1 var(--head); letter-spacing: .5px; padding: 3px 8px 2px; margin-left: 4px; min-height: 26px; }
.fl-err { margin: 6px 0 0; font: 700 11px var(--mono); color: var(--red); }
.fl-err:empty { display: none; }
.fl-bar { display: block; width: 100%; height: 14px; margin: 10px 0 0; fill: var(--ink); opacity: .82; }
/* the perforation + the tear-off stub */
.fl-perf { position: relative; margin: 10px -12px 0; border-top: 2px dashed var(--ink); }
.fl-perf span { position: absolute; left: 3px; top: -10px; width: 16px; height: 16px; font: 700 13px/16px var(--mono); color: var(--ink); }
.fl-perf::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: calc(var(--tear) * 100%); background: var(--red); }
.fl-stub {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 6px; margin: 6px 0 0; padding: 8px 6px 4px;
  border: 0; background: transparent; color: var(--ink); text-align: left; min-height: 40px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transform-origin: 0 100%; transform: translateX(calc(var(--tear) * 26px)) rotate(calc(var(--tear) * 5deg)); transition: transform .12s;
}
/* outweighs `.floor button { touch-action: manipulation }`: a sideways swipe must reach the stub, not scroll the receipt row */
.fl-rc .fl-stub { touch-action: pan-y; }
.fl-stub b { font: 400 18px/1 var(--head); letter-spacing: 1px; white-space: nowrap; }
.fl-stub .fl-stubamt { font: 700 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-stub:hover:not(:disabled) { background: var(--hi); color: var(--fl-on-hi); }
.fl-stub:disabled { color: var(--ink3); cursor: wait; }
.fl-stub.fl-pulling { transition: none; }
.fl-rc.fl-tearing .fl-stub { transform: translateX(8px) rotate(2deg); }
@media (pointer: coarse) { .fl-stub b::after { content: " →"; } }
.fl-stubfall {
  position: fixed; z-index: 47; margin: 0; pointer-events: none; background: var(--white); color: var(--ink); padding-top: 10px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 51% no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x, linear-gradient(#000 0 0) bottom / 100% 51% no-repeat;
}
.fl-status { margin: 8px 0 0; text-align: center; font: 400 17px/1 var(--head); letter-spacing: 1px; color: var(--ink2); animation: fl-blink 1s steps(2, jump-none) infinite; }
@keyframes fl-blink { 50% { opacity: .35; } }
/* tension: the paper reddens (via --t on .fl-paper) and, past 0.4, the receipt trembles */
.fl-rc.fl-trem { animation: fl-trem .18s steps(2, jump-none) infinite; }
@keyframes fl-trem {
  0% { transform: translate(calc(var(--t) * 2px), calc(var(--t) * -1px)) rotate(calc(var(--t) * .8deg)); }
  100% { transform: translate(calc(var(--t) * -2px), calc(var(--t) * 1px)) rotate(calc(var(--t) * -.8deg)); }
}
.fl-rc.fl-dead .fl-stub, .fl-rc.fl-dead .fl-perf { visibility: hidden; }
.fl-rc.fl-void .fl-paper { color: var(--ink3); }
/* the empty slot */
.fl-empty-rc { flex: 0 0 var(--fl-rw); min-height: 230px; border: 2.5px dashed var(--ink3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--ink2); padding: 16px; animation: fl-reink 2s ease-in-out infinite alternate; }
.fl-empty-rc b { font: 400 30px/1 var(--head); letter-spacing: 2px; color: var(--ink); }
.fl-empty-rc span { font: 700 12px/1.5 var(--mono); }
@keyframes fl-reink { from { opacity: .5; } to { opacity: .8; } }
/* in flight: printing out of the slot, flying, being fed to the shredder */
.fl-printing { position: fixed; z-index: 47; pointer-events: none; }
.fl-printing .receipt { flex: none; width: 100%; }
.fl-feed { position: fixed; z-index: 47; overflow: hidden; pointer-events: none; }
.fl-feed .receipt { position: absolute; left: 0; top: 0; flex: none; }
.fl-flyclone { position: fixed; z-index: 48; margin: 0; pointer-events: none; }
.toast.fl-key { background: var(--white); color: var(--ink); transform: rotate(.6deg); }

/* ---------------------------------------------------------------- the printer row + coupons */
.fl-printer { align-items: flex-end; }
.fl-printer .pict { cursor: default; }
.fl-pr-side { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; padding-bottom: 8px; }
.fl-printer .fl-pr-side p { margin: 0; }
.fl-coupons { display: flex; gap: 8px; overflow: hidden; }
.fl-coupons:empty { display: none; }
.fl-coupon { flex: 0 0 auto; max-width: 150px; border: 1.5px dashed var(--ink); background: var(--white); color: var(--ink); padding: 5px 9px 6px; text-align: left; font: 400 11px/1.3 var(--mono); position: relative; animation: printOut .5s steps(6, end); }
.fl-coupon i { display: block; font: 700 8px var(--mono); letter-spacing: 2px; color: var(--ink3); font-style: normal; }
.fl-coupon b { display: block; font: 400 15px/1.05 var(--head); letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-coupon span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-coupon:hover { background: var(--hi); color: var(--fl-on-hi); }
.fl-coupon::after { content: "✂"; position: absolute; right: -2px; top: -9px; font-size: 12px; color: var(--ink2); }

/* ---------------------------------------------------------------- the shredder + THE SPIKE */
.fl-shredder > span b { color: var(--red); }
.fl-shredder #shredderHost { width: 150px; height: 114px; }   /* the drawn shredder + its wire bin: a 250 × 190 drawing */
.fl-spikewrap { display: flex; gap: 14px; align-items: flex-start; }
.fl-spike { position: relative; flex: 0 0 96px; width: 96px; height: 160px; }
.fl-spike > svg { position: absolute; left: 0; top: 0; width: 96px; height: 160px; }
.fl-spk-nail { fill: var(--ink); }
.fl-spk-block { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.5; }
.fl-spk-hl { fill: var(--ink3); }
.fl-spk-line { stroke: var(--ink); stroke-width: 2; }
.fl-spk-hang { position: absolute; inset: 0; }
.fl-spk-mini {
  position: absolute; left: 25px; top: calc(20px + var(--i, 0) * 10px); width: 46px; height: 64px; padding: 12px 2px 4px; border: 0; background: var(--white); color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink); transform: rotate(var(--r, 0deg)); transform-origin: 50% 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  transition: top .25s cubic-bezier(.3, 1.4, .5, 1); font: 700 8px/1.1 var(--mono); overflow: hidden;
}
.fl-spk-mini::before { content: ""; position: absolute; left: 21px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.fl-spk-mini b { font: 400 10px/1 var(--head); letter-spacing: .3px; max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-spk-mini i { font-style: normal; color: var(--ink2); }
.fl-spk-mini em { font-style: normal; margin-top: auto; padding-top: 2px; border-top: 1px dashed var(--ink3); width: 100%; text-align: center; }
.fl-spk-mini.win em { color: var(--blue); } .fl-spk-mini.loss em { color: var(--red); }
.fl-spk-mini:hover { background: var(--hi); color: var(--fl-on-hi); }
.fl-spk-mini.fl-impale { animation: fl-impale .38s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes fl-impale { from { transform: translateY(-28px) rotate(0deg); } }
.fl-spk-none { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font: 700 10px var(--mono); color: var(--ink3); }
.fl-spikeside { min-width: 0; flex: 1; }

/* ---------------------------------------------------------------- LIVE FILLS + DEPTH */
.fills .card-head { align-items: center; }
.fl-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.fl-whale { margin: 8px 12px 0; border: 3px solid currentColor; padding: 6px 10px 4px; font: 400 18px/1 var(--head); letter-spacing: 1px; display: flex; gap: 10px; align-items: baseline; transform: rotate(-1.2deg); background: var(--white); }
.fl-whale.buy { color: var(--blue); } .fl-whale.sell { color: var(--red); }
.fl-whale span { font: 700 15px var(--mono); color: var(--ink); }
.fl-whale i { margin-left: auto; font: 400 11px var(--mono); color: var(--ink2); font-style: normal; }
.fl-press { display: grid; gap: 4px; }
.fl-pr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 76px; gap: 8px; align-items: center; font: 700 10px var(--mono); }
.fl-pr > i { height: 8px; border: 1.5px solid var(--ink); background: var(--red); position: relative; display: block; }
.fl-pr > i u { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); transition: width .6s; }
.fl-pr.fl-q > i { background: transparent; border-style: dashed; border-color: var(--ink3); }
.fl-pr.fl-q u { display: none; }
.fl-pr b { text-align: right; } .fl-pr b.blue { color: var(--blue); } .fl-pr b.red { color: var(--red); }
.fl-press-l { margin-top: 3px; font: 700 11px var(--mono); color: var(--ink2); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fl-filter { margin: 6px 12px 0; display: flex; gap: 8px; align-items: center; font: 700 11px var(--mono); }
.fl-filter button { border: 1.5px solid var(--ink); background: var(--hi); color: var(--fl-on-hi); font: 700 11px var(--mono); padding: 3px 7px; min-height: 28px; }
.fill-list li { grid-template-columns: 34px 56px minmax(0, 1fr) auto 32px; }
.fill-list .w { border: 0; background: transparent; padding: 0; font: 400 12px var(--mono); color: var(--ink3); cursor: pointer; text-align: left; white-space: nowrap; }
.fill-list .w:hover { color: var(--ink); text-decoration: underline; }
.fill-list a.t { text-decoration: none; }
.fill-list a.t:hover { color: var(--ink); text-decoration: underline; }
.fl-tag { margin-left: 4px; font: 700 9px var(--mono); padding: 0 3px; border: 1px solid var(--ink2); color: var(--ink2); font-style: normal; }
.fl-tag.fl-new { background: var(--hi); color: var(--fl-on-hi); border-color: var(--ink); }
.fl-depth { overflow-y: auto; flex: 1; padding: 6px 0 12px; font: 700 12px var(--mono); font-variant-numeric: tabular-nums; }
.fl-dp-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 74px; gap: 8px; align-items: center; padding: 1px 12px; min-height: 22px; }
.fl-dp-row > span:first-child { color: var(--ink2); font-weight: 400; font-size: 11px; }
.fl-dp-row > span:last-child { text-align: right; }
.fl-dp-mid { position: relative; min-width: 0; padding: 2px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fl-dp-mid i { position: absolute; left: 0; top: 2px; bottom: 2px; opacity: .2; }
.fl-dp-up .fl-dp-mid i { background: var(--blue); } .fl-dp-dn .fl-dp-mid i { background: var(--red); }
.fl-dp-mid b { position: relative; }
.fl-dp-mark { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--hi); color: var(--fl-on-hi); margin: 2px 0; }
.fl-dp-mark > span:first-child { color: var(--fl-on-hi); font-weight: 700; }
.fl-dp-you { background: var(--fl-danger); color: var(--red); font-size: 11px; }
.fl-dp-you.fl-dp-tp { background: var(--fl-win); color: var(--blue); }
.fl-dp-you > span:first-child { color: inherit; font-weight: 700; }
.fl-dp-you .fl-dp-mid { white-space: normal; }
.fl-dp-note { margin: 0; padding: 8px 12px 0; font: 700 11px var(--mono); color: var(--ink2); }
.fl-dp-note b.blue { color: var(--blue); } .fl-dp-note b.red { color: var(--red); }

/* ---------------------------------------------------------------- THE PIT */
.pit-list .r .fl-chip { margin-right: 5px; vertical-align: 1px; }
.pit-list a.w { text-decoration: none; } .pit-list a.w:hover { text-decoration: underline; color: var(--ink); }
.pit-list li:hover { background: var(--fl-hi-soft); }
.pit-list li.me { background: var(--fl-hi-soft); }
.fl-lived { font-style: normal; font-weight: 400; color: var(--ink3); }

/* ---------------------------------------------------------------- the keys card */
.fl-keycard ol { list-style: none; padding: 0; margin: 0; }
.fl-keycard li { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--ink3); font: 700 13px var(--mono); }
.fl-keycard kbd { justify-self: start; font: 700 12px var(--mono); border: 2px solid var(--ink); border-bottom-width: 4px; padding: 1px 6px; background: var(--white); color: var(--ink); white-space: nowrap; }
.fl-kc-note { margin: 12px 0 0; padding: 8px 10px; border: 2px solid var(--red); color: var(--red); font: 700 12px var(--mono); }

/* ---------------------------------------------------------------- the phone thumb bar */
.fl-thumb { display: none; }

/* ---------------------------------------------------------------- lite (the perf guard) */
body.lite .fl-rc.fl-trem, body.lite .fl-fuse em, body.lite .fl-status, body.lite .fl-empty-rc { animation: none; }
body.lite .fl-live::after { display: none; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1280px) {
  .floor { grid-template-rows: minmax(700px, calc(100vh - 140px)) auto auto; }
}
@media (max-width: 760px) {
  .fl-deskcol { display: contents; }
  .floor { grid-template-areas: "desk" "slip" "ledger" "mine" "fills" "board" "pit"; grid-template-rows: auto; }
  .slip { overflow: visible; }
  .fl-ledger { grid-area: ledger; }
  .fl-lg-body { height: auto; min-height: 66px; max-height: 330px; }
  .tickets { --fl-rw: 196px; }
  .fl-floorline { font-size: 10px; gap: 5px; }
  .print small { display: none; }
  .fl-slipfoot { display: none !important; }
  .fl-coupon { max-width: 128px; }
  .fl-shredder #shredderHost { width: 110px; height: 84px; }
  .fl-spike { flex-basis: 90px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .fl-thumb:not([hidden]) { display: grid; }
  .fl-thumb {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; grid-template-columns: 1fr auto auto 1fr; gap: 6px; align-items: stretch;
    height: calc(58px + env(safe-area-inset-bottom)); padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    background: var(--sheet); border-top: 2px solid var(--ink); box-shadow: 0 -3px 0 var(--ink);
  }
  .fl-thumb button { border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); font: 700 13px var(--mono); padding: 0 8px; min-height: 40px; box-shadow: 2px 2px 0 var(--ink); }
  .fl-thumb button:active { transform: translate(2px, 2px); box-shadow: none; }
  .fl-thumb button:disabled { opacity: .5; }
  .fl-thumb .fl-tb-long, .fl-thumb .fl-tb-short { font: 400 22px/1 var(--head); letter-spacing: 1px; color: var(--fl-on); }
  .fl-thumb .fl-tb-long { background: var(--blue); } .fl-thumb .fl-tb-short { background: var(--red); }
  .fl-tb-pos { display: none; grid-column: 2 / 4; align-items: center; gap: 8px; justify-content: center; font: 400 21px/1 var(--head); letter-spacing: .5px; }
  .fl-tb-pos.blue { color: var(--blue); } .fl-tb-pos.red { color: var(--red); }
  .fl-thumb.fl-holding .fl-tb-pos { display: flex; }
  .fl-thumb.fl-holding .fl-tb-size, .fl-thumb.fl-holding .fl-tb-lev { display: none; }
  .fl-thumb .fl-tb-pos button { font: 400 16px/1 var(--head); letter-spacing: 1px; background: var(--hi); color: var(--fl-on-hi); min-height: 36px; }
  .fl-tb-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); background: var(--sheet); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fl-tb-menu[hidden] { display: none; }
  .fl-tb-menu button { min-height: 38px; }
  .fl-tb-menu button.on { background: var(--ink); color: var(--paper); }
  .fl-tb-menu p { grid-column: 1 / -1; margin: 0; font: 700 11px var(--mono); color: var(--ink2); }
  body.fl-tb-on #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  .fl-pc { width: 92px; height: 17px; }
  .fl-pc-half { margin-top: -8.5px; }
  .fl-printer .pict { width: 96px; height: 60px; }
}