/* UMBRA v2 · /ledger (day tone) */
.lg { padding: 64px 0 80px; }
.lg-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line-2); }
.lg-h .lab { display: block; margin-bottom: 14px; }
.lg-h h1 { margin: 0; font: 400 clamp(30px, 3.2vw, 52px)/1.04 var(--f-d); letter-spacing: -.03em; }
.lg-h p { margin: 0; color: var(--ink-2); font-size: 15px; }
.lg-tot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 28px 0; background: var(--line-2); border: 1px solid var(--line-2); }
.lg-tot > div { background: var(--panel); padding: 16px; min-width: 0; }
.lg-tot > div.burn { background: var(--u1); color: var(--l1); }
.lg-tot > div.burn .lab, .lg-tot > div.burn small { color: var(--l3); }
.lg-tot dt { margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-tot dd { margin: 0 0 6px; font: 500 22px/1 var(--f-m); white-space: nowrap; }
.lg-tot small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lg-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.lg-f { display: flex; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow-x: auto; scrollbar-width: none; }
.lg-f::-webkit-scrollbar { display: none; }
.lg-f button { height: 34px; padding: 0 14px; font: 500 13.5px/1 var(--f-t); color: var(--ink-3); white-space: nowrap; }
.lg-f button + button { border-left: 1px solid var(--line-2); }
.lg-f button.on { background: var(--ink); color: var(--page); }
.lg-n { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lg-tbl { border: 1px solid var(--line-2); background: var(--panel); overflow-x: auto; }
.lrow { display: grid; grid-template-columns: 150px 150px 110px 110px 120px minmax(160px, 1fr) 170px; align-items: center; height: 44px; min-width: 1000px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lrow > * { padding: 0 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lhead { height: 36px; background: var(--raised); }
.lhead > span { font: 400 10px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lrow .mono { font-size: 12.5px; }
.lrow a.mono { color: var(--ink-2); } .lrow a.mono:hover { color: var(--acc); }
.kind { display: inline-flex; align-items: center; gap: 8px; }
.kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.kind.batch i { background: #000; box-shadow: 0 0 0 2px var(--acc); width: 7px; height: 7px; }
.kind.deposit i, .kind.topup i { background: var(--buy); }
.kind.withdraw i { background: var(--ink-3); }
.kind.burn i { background: var(--sell); }
.kind.house i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.kind.fee i { background: var(--acc); }
.lrow .dim { color: var(--ink-3); }
.lg-more { margin: 16px auto 0; display: flex; }
.lg-empty { padding: 48px 16px; text-align: center; color: var(--ink-3); }
@media (max-width: 1100px) { .lg-tot { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg-h { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .lg { padding: 36px 0 56px; } .lg-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-bar { flex-direction: column; align-items: stretch; } .lg-f { max-width: 100%; } }
/* phone: every row is a small card (no sideways table): what + SOL / time · coin · transaction / the detail line */
@media (max-width: 720px) {
  .lg-tbl { overflow: visible; }
  .lhead { display: none; }
  .lrow { min-width: 0; height: auto; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'what what sol' 'time coin tx' 'note note note'; row-gap: 6px; padding: 12px 0; }
  .lrow > * { padding: 0 14px; }
  .lrow > :nth-child(1) { grid-area: time; font-size: 11.5px; color: var(--ink-3); padding-right: 0; }
  .lrow > :nth-child(2) { grid-area: what; }
  .lrow > :nth-child(3) { grid-area: coin; font-size: 12.5px; }
  .lrow > :nth-child(4) { grid-area: sol; text-align: right; font-weight: 500; }
  .lrow > :nth-child(5) { display: none; }
  .lrow > :nth-child(6) { grid-area: note; white-space: normal; font-size: 12px; }
  .lrow > :nth-child(6):empty { display: none; }
  .lrow > :nth-child(7) { grid-area: tx; text-align: right; }
}