.ib-form { display: grid; gap: 8px; }
.ib-in { all: unset; box-sizing: border-box; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #121212; color: var(--ink); font: 12px/18px var(--mono); transition: border-color .2s; cursor: text; }
.ib-in:focus { border-color: var(--ink-2); }
.ib-in:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ib-in::placeholder { color: var(--dim); }
.ib-ta { display: block; resize: none; min-height: 78px; white-space: pre-wrap; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ib-r { display: flex; align-items: center; gap: 8px; }
.ib-h { flex: 1 1 0; min-width: 0; }
.ib-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ib-cnt { flex: 0 0 auto; min-width: 3ch; text-align: right; font: 11px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; transition: color .2s; }
.ib-cnt[data-low="1"] { color: var(--white); font-weight: 700; }

.ib-btn { all: unset; box-sizing: border-box; flex: 0 0 auto; cursor: pointer; padding: 8px 16px; border-radius: var(--r-btn); border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); font: 500 12px/1 var(--sans);
  transition: background .2s, border-color .2s, opacity .2s, transform .5s var(--spring); }
.ib-btn:hover { background: var(--white); border-color: var(--white); }
.ib-btn:active { transform: scale(.95); transition-duration: .09s; transition-timing-function: var(--out); }
.ib-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ib-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.ib-form .ib-st { margin: 0; font: 11.5px/17px var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.ib-st:empty, .ib-st > span:empty { display: none; }
.ib-st::before { color: var(--dim); }
.ib-st[data-k="busy"]::before { content: "... "; }
.ib-st[data-k="ok"]::before { content: "+ "; color: var(--white); }
.ib-st[data-k="held"]::before { content: "~ "; }
.ib-st[data-k="rate"]::before { content: "! "; color: var(--white); }
.ib-st[data-k="err"]::before { content: "x "; color: var(--white); }
.ib-st[data-k="ok"], .ib-st[data-k="err"], .ib-st[data-k="rate"] { color: var(--ink); }
.ib-sw { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1ch; min-height: 18px; }
.ib-sn { font: 11.5px/17px var(--mono); color: var(--white); font-variant-numeric: tabular-nums; }
.ib-sn:empty { display: none; }

.ib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ib-head h3 { margin: 0; font: 500 12px/1 var(--sans); color: var(--ink-2); }
.ib-n { font: 11px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.ib-list { list-style: none; margin: 0; padding: 0; }
.ib-m { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ib-m:last-child { border-bottom: 0; }
.ib-m header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 11px/13px var(--mono); color: var(--dim); min-width: 0; }
.ib-m header b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.ib-m p { margin: 0; font: 13px/20px var(--sans); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-m.in { animation: ib-in .6s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes ib-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

.ib-del { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ib-del button { all: unset; cursor: pointer; padding: 2px 4px; border-radius: var(--r-xs); color: var(--dim); transition: color .2s, transform .3s var(--spring); }
.ib-del button:hover { color: var(--white); }
.ib-del button:active { transform: scale(.92); transition-duration: .09s; }
.ib-del button:focus-visible { outline: 1px solid var(--accent); }
.ib-del[aria-busy="true"] { opacity: .5; pointer-events: none; }

.card .ib-empty, .ib-empty { padding: 14px 0 6px; font: 12px/18px var(--mono); color: var(--dim); }
.ib-empty[hidden], .ib-more[hidden] { display: none; }
.ib-empty .ib-more { display: inline-block; padding: 0; }
.ib-more { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; margin-top: 4px; padding: 9px; text-align: center; border-radius: var(--r-btn); border: 1px solid var(--line-2); font: 500 12px/1 var(--sans); color: var(--ink-2); transition: color .2s, border-color .2s, transform .5s var(--spring); }
.ib-empty .ib-more { display: inline; width: auto; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ib-more:hover { color: var(--white); border-color: var(--ink-2); }
.ib-more:active { transform: scale(.97); transition-duration: .09s; }
.ib-more:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ib-more[aria-disabled="true"] { opacity: .45; pointer-events: none; }
[data-inbox][aria-busy="true"] .ib-list { opacity: .7; }

.lv-ts { position: fixed; left: 50%; bottom: 16px; z-index: 400; transform: translateX(-50%); }

.ib-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.ib-col { display: grid; gap: 16px; min-width: 0; }
.ib-col > .win { margin: 0; }
.ib-pad { padding: 16px; }
.ib-big { display: block; font: 600 56px/1 var(--mono); letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.ib-cap { margin: 8px 0 0; font: 11px/15px var(--mono); color: var(--dim); }
.ib-sub { display: flex; gap: 28px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ib-sub b { display: block; font: 500 20px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ib-sub span { display: block; margin-top: 6px; font: 11px/1 var(--mono); color: var(--dim); }
.ib-priv { margin: 0; font: 12.5px/21px var(--sans); color: var(--ink-2); text-wrap: pretty; }
.ib-tag { margin-left: auto; font: 11px/1 var(--mono); letter-spacing: .03em; color: var(--dim); }

.kv .ib-vis { font: 600 18px/22px var(--mono); color: var(--white); }
.kv .ib-vis .rl { vertical-align: middle; }

@media (max-width: 860px) { .ib-page { grid-template-columns: minmax(0, 1fr); } .ib-page > section { order: -1; } .ib-big { font-size: 44px; } }
@media (max-width: 760px) { .ib-in { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ib-m.in { animation: none; } }
