/* ---------- Bücher: Kaufliste, Bibliothek, Dialog. Alle Klassen mit bk-Präfix. ---------- */
      .bkHit {
        font-size: var(--fs-sm);
        color: var(--ink-3);
        align-self: center;
      }
      .tabs .bkHit button {
        border: 0;
        background: none;
        color: var(--primary);
        font-weight: 600;
        padding: 0;
        margin: 0;
        font-size: var(--fs-sm);
        cursor: pointer;
      }
      .bkRow {
        display: flex;
        align-items: center;
        gap: var(--s3);
        padding: var(--s3) var(--s5);
        border-top: 1px solid var(--border);
      }
      .bkRow:first-child {
        border-top: 0;
      }
      .bkRow:hover {
        background: var(--surface-2);
      }
      .bkRow.drag {
        opacity: 0.35;
      }
      .bkRow.ins-before {
        box-shadow: inset 0 3px 0 var(--primary);
      }
      .bkRow.ins-after {
        box-shadow: inset 0 -3px 0 var(--primary);
      }
      .bkGrip {
        cursor: grab;
        color: var(--ink-3);
        display: inline-flex;
        flex-shrink: 0;
      }
      .bkGrip:active {
        cursor: grabbing;
      }
      .bkNr {
        width: 28px;
        height: 28px;
        border-radius: var(--r-md);
        background: var(--surface-2);
        border: 1px solid var(--border);
        font-weight: 600;
        font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums;
        display: grid;
        place-items: center;
        flex: none;
      }
      .bkTx {
        flex: 1;
        min-width: 0;
        cursor: pointer;
      }
      .bkTx b {
        display: block;
        font-weight: 500;
        line-height: 1.3;
      }
      .bkSub {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bkTx small {
        color: var(--ink-3);
        font-size: var(--fs-xs);
        display: flex;
        gap: var(--s2);
        align-items: center;
        margin-top: 3px;
        flex-wrap: wrap;
      }
      .bkTag {
        display: inline-block;
        font-size: var(--fs-xs);
        padding: 2px 8px;
        border-radius: 99px;
        background: color-mix(in srgb, var(--cc) 16%, transparent);
        color: var(--ink);
        white-space: nowrap;
        font-weight: 500;
      }
      .bkAuthor {
        color: var(--ink-3);
        font-style: italic;
        font-size: var(--fs-xs);
      }
      .bkLink {
        color: var(--ink-3);
        text-decoration: none;
        display: inline-flex;
        gap: 4px;
        align-items: center;
      }
      .bkLink:hover {
        color: var(--primary);
      }
      .bkDot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: none;
      }
      .bkMv {
        display: flex;
        flex-direction: column;
      }
      .bkMv button {
        border: 0;
        background: none;
        height: 18px;
        width: 26px;
        color: var(--ink-3);
        padding: 0;
        cursor: pointer;
        display: grid;
        place-items: center;
      }
      .bkMv button:hover:not(:disabled) {
        color: var(--primary);
      }
      .bkMv button:disabled {
        opacity: 0.3;
        cursor: default;
      }
      .bkCk {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--success-tint);
        color: var(--success);
        display: grid;
        place-items: center;
        flex: none;
      }
      .bkNt {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        margin-top: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bkNt.e {
        font-style: italic;
      }
      /* Lesejahr-Auswahl über den Kennzahlen (Tab „Gekaufte Bücher“) */
      .bkYears {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
        align-items: center;
      }
      .bkYears .lbl {
        font-size: var(--fs-sm);
        color: var(--ink-2);
        margin-right: var(--s1);
      }
      .bkDivider {
        font-size: var(--fs-sm);
        color: var(--ink-2);
        font-weight: 600;
        padding: var(--s3) var(--s5);
        background: var(--surface-2);
        display: flex;
        align-items: center;
        gap: var(--s2);
      }
      .bkK {
        color: var(--ink-3);
        font-weight: 400;
      }
      details.bkDetails > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--s3);
        padding: var(--s4) var(--s5);
        font-weight: 600;
      }
      details.bkDetails > summary::-webkit-details-marker {
        display: none;
      }
      details.bkDetails .ch {
        color: var(--ink-3);
        transition: transform 0.15s;
        display: inline-flex;
      }
      details.bkDetails[open] .ch {
        transform: rotate(90deg);
      }
      details.bkDetails .c {
        font-weight: 400;
        color: var(--ink-3);
        font-size: var(--fs-sm);
      }
      details.bkDetails .pill,
      details.bkDetails .badge {
        margin-left: auto;
      }
      .bkBody {
        padding: 0;
      }
      .bkZero {
        color: var(--ink-3);
        padding: var(--s4) var(--s5);
      }
      .bkTableWrap {
        overflow-x: auto;
      }
      .bkTableWrap tbody tr {
        cursor: pointer;
      }
      .bkChips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
        padding: var(--s3) var(--s5);
        border-top: 1px solid var(--border);
      }
      .bkColorInput {
        width: 22px;
        height: 22px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: none;
        cursor: pointer;
      }
      dialog.bkDialog {
        border: 0;
        border-radius: var(--r-lg);
        padding: 0;
        width: min(560px, 94vw);
        background: var(--surface);
        color: var(--ink);
        box-shadow: var(--sh-2);
      }
      dialog.bkDialog::backdrop {
        background: var(--overlay);
      }
      .bkDlgBody {
        padding: var(--s5);
      }
      .bkDropBook {
        margin-bottom: var(--s3);
      }
      .bkDlgFoot {
        display: flex;
        justify-content: flex-end;
        gap: var(--s2);
        margin-top: var(--s4);
      }
      @media (max-width: 640px) {
        .bkMv {
          display: none;
        }
        .bkRow {
          flex-wrap: wrap;
          padding: var(--s3) var(--s4);
        }
        .bkTx {
          flex-basis: calc(100% - 100px);
        }
      }

      /* ---------- Kategorie-Verwaltung (Vermögenswerte, Bücher) ---------- */
      .catMgrGrid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }
      .catMgrChip {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 6px 8px 6px 14px;
        font-size: var(--fs-sm);
        font-weight: 600;
      }
      .catMgrChip input[type="number"] {
        width: 48px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 3px 8px;
        font-size: var(--fs-xs);
        text-align: center;
      }
      .catMgrChipDel {
        background: none;
        border: none;
        color: var(--ink-3);
        cursor: pointer;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-xs);
        transition: 0.15s;
      }
      .catMgrChipDel:hover {
        background: var(--danger-tint);
        color: var(--danger);
      }