/* Crypto pane — domain styling over the shared frame (.rhead, .osAppCard/.tabs,
   .osAppBar/.osAppBody, .osAppRow/.osAppEmpty/.osAppRefuse, .osAppFoot).
   Numbers are tabular and right-aligned; green/red always carry a sign. */
.kqHero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 4px 0 12px; }
.kqHero > div { display: flex; flex-direction: column; gap: 2px; }
.kqHero span { font-size: 11px; color: var(--muted); }
.kqHero b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kqHero b.up { color: #1a7f4b; }
.kqHero b.dn { color: #b3261e; }
.kqSub { font-size: 12px; color: var(--muted); padding-bottom: 8px; }
.osApp .osAppBody h3 { font: 500 9.5px/1 var(--f-body, Inter, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 14px 0 6px; }
.osApp .osAppBody h3:first-child { margin-top: 0; }
.kqDoors { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0 2px; }
.kqDoors button { font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--surf); color: var(--ink); cursor: pointer; }
.kqDoors button:hover { background: var(--surf2); }
/* holdings grid: asset(+share) | qty | price | value | cost | gain */
.kqHead.kqHead7, .kqRow.kqRow7 {
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); }
.kqAlloc { display: block; font-size: 10px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
/* holdings grid: asset | qty | price | value | gain */
.kqHead, .kqRow { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 10px; align-items: center; padding: 8px 2px; }
.kqHead { font: 500 10px/1.4 var(--mono, monospace); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.kqHead .r { text-align: right; }
.kqRow { border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; width: 100%; color: var(--ink); }
.kqRow:hover { background: var(--surf); }
.kqRow .r { text-align: right; font-variant-numeric: tabular-nums; }
.kqRow .up { color: #1a7f4b; }
.kqRow .dn { color: #b3261e; }
.kqCoin b { font-weight: 600; }
.kqUnpriced { font-style: normal; color: var(--faint); border: 1px solid var(--line2);
  border-radius: 999px; padding: 0 7px; font-size: 11px; }
/* markets rows: star | coin | price | change | sources */
.kqMRow { display: grid; grid-template-columns: 30px minmax(0, .9fr) auto auto minmax(0, 1fr);
  gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.kqMRow > button:first-child { background: none; border: 0; cursor: pointer; font-size: 15px;
  color: var(--muted); padding: 4px; }
.kqMPrice { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kqChg { font: 600 11px/1 var(--mono, monospace); font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.kqChg.up { color: #1a7f4b; background: rgba(26, 127, 75, .1); }
.kqChg.dn { color: #b3261e; background: rgba(179, 38, 30, .1); }
.kqSrcs { font-size: 11.5px; color: var(--faint); text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* ⛔ The star is an SVG glyph, filled violet when watched. Text ★/☆ render at
   wildly different sizes across platforms and read as decoration. */
.kqStar { display: inline-flex; align-items: center; justify-content: center; }
.kqStar svg { display: block; }
.kqMRow > button:first-child { color: var(--faint); }
.kqMRow > button:first-child.on { color: var(--violet, #7c5cff); }
.kqMRow > button:first-child.on svg { fill: var(--violet, #7c5cff); }
/* ⛔ The reorder flash names the row that moved to the top. */
@keyframes kqFlash { 0% { background: var(--surf2); } 100% { background: transparent; } }
.kqMRow.kqFlash { animation: kqFlash 1.6s ease-out; border-radius: 8px; }
/* tabs carry a 14px glyph beside the label */
.osAppCard .tabs button { display: inline-flex; align-items: center; gap: 6px; }
.osAppCard .tabs button svg { flex: 0 0 auto; opacity: .75; }
.osAppCard .tabs button.on svg { opacity: 1; }
.kqCoinBtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 13px; text-align: left; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.kqCoinBtn b { font-weight: 600; }
.kqCoin { display: flex; gap: 8px; align-items: center; }
.kqIconSm { width: 22px; height: 22px; border-radius: 50%; background: var(--surf); flex: 0 0 auto; }
.kqFallback { display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line2); }
.kqCells { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.kqSrc { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.kqSrc b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.kqSrc i { font-style: normal; font-variant-numeric: tabular-nums; }
.kqSrc i.up { color: #1a7f4b; }
.kqSrc i.dn { color: #b3261e; }
.kqHint { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
/* origin badge: platform-generated wallets read differently from imports */
/* ⚡ A moved price flashes once (live monitoring): green/red wash that fades.
   ⛔ Never permanent colour — a row permanently green means nothing. */
@keyframes kqMovedUp { 0% { background: rgba(26, 127, 75, .14); } 100% { background: transparent; } }
@keyframes kqMovedDn { 0% { background: rgba(179, 38, 30, .14); } 100% { background: transparent; } }
.kqSrc.moved { border-radius: 7px; padding: 2px 5px; margin: -2px -5px; }
.kqSrc.moved.up { animation: kqMovedUp 2.5s ease-out; }
.kqSrc.moved.dn { animation: kqMovedDn 2.5s ease-out; }
.kqBadge { font: 500 9.5px/1 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--violet, #7c5cff); color: var(--violet, #7c5cff); border-radius: 999px;
  padding: 2px 7px; margin-left: 6px; white-space: nowrap; }
.kqRefresh { background: none; border: 0; cursor: pointer; font-size: 15px; color: var(--muted); }
.kqLinkBtn { background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--violet, #7c5cff); text-decoration: underline; padding: 4px 2px; }
/* signed totals in rows */
.osAppRow .v.up { color: #1a7f4b; }
.osAppRow .v.dn { color: #b3261e; }
.osAppRow .v, .osAppRow .kqHint { overflow: hidden; text-overflow: ellipsis; }
/* ⛔ Pills, not a native select: the OS popup is unstyleable and speaks the
   wire tokens. Values stay machine English; labels localize. */
.kqPills { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 10px; }
.kqPills button { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; }
.kqPills button.on { background: var(--ink); border-color: var(--ink); color: var(--panel, #fffbf4); }
/* file input hides behind a clay button; the name sits beside it */
.kqFileBtn { font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--surf); color: var(--ink); cursor: pointer;
  white-space: nowrap; }
.kqFileBtn:hover { background: var(--surf2); }
.kqFileName { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
/* coin head: icon + name, readings, hand-drawn chart */
.kqCoinHead { display: flex; gap: 12px; align-items: center; padding: 6px 0 4px; }
.kqCoinHead b { font-size: 20px; }
.kqCoinHead .kqSub { display: block; }
.kqIcon { width: 40px; height: 40px; border-radius: 50%; background: var(--surf); }
.kqReadings { display: grid; gap: 6px; padding: 8px 0; }
.kqSrcRow { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.kqSrcRow span:first-child { color: var(--muted); min-width: 64px; }
.kqSrcRow b { font-variant-numeric: tabular-nums; }
.kqSrcRow i { font-style: normal; font-variant-numeric: tabular-nums; }
.kqSrcRow i.up { color: #1a7f4b; }
.kqSrcRow i.dn { color: #b3261e; }
.kqMono { font-family: var(--mono, monospace); font-size: 11px; word-break: break-all; }
.kqChart { width: 100%; height: auto; display: block; margin: 6px 0 2px; }
.kqChart .kqLine { fill: none; stroke: var(--violet, #7c5cff); stroke-width: 2; }
.kqChart .kqArea { fill: var(--violet, #7c5cff); opacity: .12; stroke: none; }
.kqChart.dn .kqLine { stroke: #b3261e; }
.kqChart.dn .kqArea { fill: #b3261e; }
/* overview hero art: generated clay illustration beside the numbers */
.kqHeroArtFull { width: 100%; height: auto; display: block; border-radius: var(--r-s, 12px);
  margin: 2px 0 12px; }
/* The [crypto_quote] chat card — one coin, both readings, the link. Lives in
   the answer's own .kriptorows slot, so it inherits the bubble, not the pane. */
.kqWrap { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kqSpark { width: 90px; height: 26px; flex: 0 0 auto; }
.kqSpark path { fill: none; stroke-width: 1.6; stroke: var(--violet, #7c5cff); }
.kqSpark.up path { stroke: #1a7f4b; }
.kqSpark.dn path { stroke: #b3261e; }
/* receive: QR box under the wallet row (local qr.mjs, byte-mode, no network) */
.kqQrBox { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; border: 1px dashed var(--line2); border-radius: var(--r-s, 12px);
  margin: 8px 0; background: var(--surf); }
.kqQrBox svg { background: #fff; border-radius: 8px; padding: 8px; }
.kqQrBox .kqMono { font-size: 11px; word-break: break-all; color: var(--muted); }
/* ── chain marks for wallet networks ───────────────────────────────────── */
.kqNetIc { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted);
  border: 1px solid var(--line2); border-radius: 50%; background: var(--surf); }
.kqNetIc svg { display: block; width: 15px; height: 15px; }
.kqNetImg { border: 0; }
.kqNetPills button { display: inline-flex; align-items: center; gap: 6px; }
.kqNetPills .kqNetIc { width: 18px; height: 18px; }
.kqNetPills .kqNetIc svg { width: 12px; height: 12px; }
.kqNetPills button.on .kqNetIc { background: transparent; color: inherit; border-color: currentColor; }
.kqNetBadge { font: 500 10px/1 var(--mono, monospace); letter-spacing: .05em;
  color: var(--muted); border: 1px solid var(--line2); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap; }
.kqWalName { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* ── the generate card ─────────────────────────────────────────────────── */
.kqGenCard { border: 1px solid var(--line2); border-radius: var(--r-m, 16px);
  padding: 14px; margin: 12px 0;
  background: linear-gradient(160deg, var(--surf), transparent 60%); }
.kqGenHead { display: flex; gap: 12px; align-items: center; padding-bottom: 6px; }
.kqGenHead b { font-size: 15px; }
.kqGenHead .kqSub { padding-bottom: 0; display: block; }
.kqGenMark { width: 34px; height: 34px; color: var(--violet, #7c5cff); }
.kqGenMark svg { width: 20px; height: 20px; }
.kqColMake { font: inherit; font-size: 13px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--violet, #7c5cff); color: var(--violet, #7c5cff);
  background: transparent; cursor: pointer; margin: 6px 0 4px; }
.kqColMake:hover { background: var(--violet, #7c5cff); color: var(--panel, #fffbf4); }
.kqColMake:disabled { opacity: .5; cursor: wait; }
/* generation success: the address IS the product of the flow */
.kqGenOk { border: 1px solid rgba(26, 127, 75, .4); border-radius: var(--r-s, 12px);
  padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(26, 127, 75, .05); }
.kqGenOkHead { display: flex; align-items: center; gap: 8px; }
.kqGenOkHead b { color: #1a7f4b; }
.kqGenAddr { font-size: 13px; }
.kqGenOkBtns { display: flex; gap: 10px; }
.kqGenOkBtns button { font: inherit; font-size: 12.5px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--line2); background: var(--surf);
  color: var(--ink); cursor: pointer; }
.kqGenOkBtns button:hover { background: var(--surf2); }
/* empty wallets: art carries the invitation, the line stays honest */
.kqGenEmpty { display: flex; flex-direction: column; gap: 8px; }
.kqGenArt { width: 100%; max-width: 320px; height: auto; display: block;
  border-radius: var(--r-s, 12px); align-self: center; }
/* ── folds: small affordances that carry a form without owning the screen ── */
.kqFold { border: 1px dashed var(--line2); border-radius: var(--r-s, 12px);
  padding: 0; margin: 8px 0; }
.kqFold > summary { cursor: pointer; font: inherit; font-size: 12.5px; color: var(--muted);
  padding: 9px 12px; list-style: none; user-select: none; }
.kqFold > summary::-webkit-details-marker { display: none; }
.kqFold > summary::before { content: '▸ '; }
.kqFold[open] > summary::before { content: '▾ '; }
.kqFold > *:not(summary) { padding: 0 12px 10px; }
.kqFold > summary:hover { color: var(--ink); background: var(--surf);
  border-radius: var(--r-s, 12px); }
.kq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px;
  border: 1px solid var(--line, #e8e2d5); border-radius: 12px; font-size: 14px; }
.kqOpen { margin-left: auto; font-size: 12px; opacity: .7; }
@media (max-width: 560px) {
  .kqHero b { font-size: 17px; }
  .kqHead { display: none; }
  .kqRow.kqRow7 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
  .kqMRow { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .kqMPrice { font-size: 14px; }
  .kqChg { grid-column: 2; justify-self: start; }
  .kqCells, .kqSrcs { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
}