.letter-big { width: 96px; height: 96px; margin: 0 auto 1.2rem; display: grid; place-items: center; border-radius: 26px; background: var(--primary); color: var(--on-primary); font-size: 3.4rem; font-weight: 900; box-shadow: 0 10px 30px rgb(var(--primary-rgb) / .35); animation: pop .4s var(--ease); }
.ab-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.ab-field { display: flex; flex-direction: column; gap: .35rem; font-weight: 800; color: var(--text-dim); }
.ab-field .input { flex: none; height: 50px; font-size: 1.1rem; font-weight: 800; }
.ab-stop { grid-column: 1 / -1; justify-self: center; min-width: 220px; margin-top: .4rem; }
.ab-table-wrap { overflow-x: auto; margin: 0 -.4rem; }
.ab-table { width: 100%; border-collapse: separate; border-spacing: .3rem; min-width: 640px; }
.ab-table th { font-size: .85rem; color: var(--text-mute); text-align: start; padding: .3rem; white-space: nowrap; }
.ab-table tr.is-me th { color: var(--primary-ink); }
.ab-table td { position: relative; padding: .5rem .55rem 1.6rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); font-weight: 800; vertical-align: top; min-width: 90px; }
.ab-table td i { position: absolute; bottom: .3rem; inset-inline-start: .55rem; font-style: normal; font-size: .75rem; font-weight: 900; color: var(--text-mute); }
.ab-table td.st-ok, .ab-table td.st-known { border-color: rgb(34 197 94 / .45); }
.ab-table td.st-ok i, .ab-table td.st-dup i, .ab-table td.st-known i { color: var(--ok); }
.ab-table td.st-dup { border-color: rgb(234 179 8 / .5); }
.ab-table td.st-unknown { border-color: var(--line); }
.ab-table td.st-bad, .ab-table td.st-rejected { border-color: rgb(239 68 68 / .45); opacity: .7; text-decoration: line-through; }
.ab-table td.st-bad i, .ab-table td.st-rejected i { color: var(--danger); }
.ab-table td.i-rej { background: rgb(239 68 68 / .08); }
.ab-table .rej { position: absolute; bottom: .2rem; inset-inline-end: .3rem; font-size: .7rem; font-weight: 800; padding: .1rem .45rem; border-radius: 8px; background: var(--surface-3); color: var(--text-dim); }
.ab-table .rej:hover { background: rgb(239 68 68 / .15); color: var(--danger); }
.ab-table .gain-c { text-align: center; color: var(--ok); font-weight: 900; padding-bottom: .5rem; }
