/* page-collection.css — Collection (#my-collection), its sheets, bulk editor,
   importer and the review screen (#review-imports). The app's Collection tab
   (collection.tsx, CardTile.tsx, CollectionSelection.tsx, PortfolioMenu.tsx;
   measurements in docs/web-parity/audit/04-collection-settings.md §6), tokens
   only. Phone width is the app's own layout; wide uses the room: the hero
   across the column, a 5–7 column grid. */

.cl-page {
    position: relative;
    isolation: isolate;
    max-width: var(--tb-content-max);
    margin: 0 auto;
    padding: 20px var(--tb-gutter) 140px;
}
.cl-glow {
    position: absolute; z-index: -1; top: 0; left: calc(-1 * var(--tb-gutter)); width: 90%; height: 420px; pointer-events: none;
    background: radial-gradient(ellipse farthest-corner at 0 0, rgba(var(--tb-primary-rgb), 0.19), transparent 70%);
}

/* ── Top bar: portfolio pill + actions ─────────────────────────────────── */
.cl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 14px; }
.cl-pill {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; min-width: 0; max-width: 100%;
    border-radius: var(--tb-r-pill); border: 1px solid var(--tb-border); background: var(--tb-surface);
    color: var(--tb-text); font: inherit; cursor: pointer; transition: background var(--tb-dur) var(--tb-ease);
}
.cl-pill:hover, .cl-pill[aria-expanded="true"] { background: var(--tb-primary-tint); }
.cl-pill > .tb-icon { color: var(--tb-primary-light); transition: transform var(--tb-dur) var(--tb-ease); }
.cl-pill[aria-expanded="true"] > .tb-icon { transform: rotate(180deg); }
.cl-pill__avatar {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tb-border-strong); background: var(--tb-primary); color: var(--tb-on-primary);
    font-size: 11px; font-weight: 800;
}
.cl-pill__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-pill__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.cl-pill__eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; line-height: 11px; color: var(--tb-muted); }
.cl-pill__name { font-size: 13px; font-weight: 700; line-height: 15px; margin-top: 2px; color: var(--tb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.cl-top__end { display: flex; align-items: center; gap: 8px; }
.cl-iconbtn { border-radius: 50%; }
.cl-selbtn {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--tb-r-pill);
    border: 1px solid var(--tb-border); background: var(--tb-surface); color: var(--tb-text2);
    font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.cl-selbtn:hover { color: var(--tb-text); border-color: var(--tb-border-strong); }
@media (hover: none) { .cl-selbtn span { display: none; } .cl-selbtn { width: 40px; padding: 0; justify-content: center; } }

/* ── Needs-review banner ────────────────────────────────────────────────── */
.cl-review {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 11px 12px; border-radius: 12px;
    border: 1px solid rgba(var(--tb-warning-rgb), 0.4); background: rgba(var(--tb-warning-rgb), 0.08);
    color: var(--tb-warning); text-decoration: none;
}
.cl-review__text { flex: 1; color: var(--tb-text); font-size: 13px; font-weight: 600; }
.cl-review__go { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; }
.cl-review:hover { background: rgba(var(--tb-warning-rgb), 0.13); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.cl-hero {
    position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--tb-border-strong);
    background:
        linear-gradient(225deg, rgba(var(--tb-accent-rgb), 0.18), transparent 45%),
        linear-gradient(180deg, rgba(var(--tb-primary-rgb), 0.18), rgba(var(--tb-bg3-rgb), 0.6));
}
.cl-hero__inner { padding: 16px 16px 4px; }
.cl-modes {
    display: flex; padding: 4px; margin-bottom: 12px; border-radius: 12px;
    border: 1px solid var(--tb-border); background: var(--tb-primary-tint-weak);
}
.cl-mode {
    flex: 1; height: 32px; border-radius: 8px; border: 0; background: transparent; cursor: pointer;
    color: var(--tb-text2); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.cl-mode.is-active { background: var(--tb-primary); color: var(--tb-on-primary); }
.cl-hero__eyebrow {
    display: flex; align-items: center; gap: 5px; color: var(--tb-primary-light);
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
}
.cl-hero__value {
    margin-top: 6px; font-size: 32px; font-weight: 800; letter-spacing: -0.8px; line-height: 36px;
    color: var(--tb-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.cl-hero__value.is-up { color: var(--tb-success); }
.cl-hero__value.is-down { color: var(--tb-error); }
.cl-hero__pending { display: flex; align-items: center; gap: 10px; height: 44px; color: var(--tb-text2); font-size: 15px; font-weight: 600; }
.cl-hero__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-height: 26px; }
.cl-hero__note { font-size: 12px; font-weight: 600; color: var(--tb-text2); font-variant-numeric: tabular-nums; }
.cl-hero__end { margin-left: auto; }
.cl-hero__stale { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--tb-muted); }
.cl-hpill {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--tb-r-pill);
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid;
}
.cl-hpill--up { color: var(--tb-success); background: rgba(var(--tb-success-rgb), 0.12); border-color: rgba(var(--tb-success-rgb), 0.44); }
.cl-hpill--down { color: var(--tb-error); background: rgba(var(--tb-error-rgb), 0.12); border-color: rgba(var(--tb-error-rgb), 0.44); }

.cl-spark { position: relative; height: 110px; margin-top: 8px; color: var(--tb-success); touch-action: pan-y; cursor: crosshair; transition: opacity 250ms var(--tb-ease); }
.cl-spark[data-tone="down"] { color: var(--tb-error); }
.cl-spark.is-stale { opacity: 0.4; }
.cl-spark svg { display: block; width: 100%; height: 100%; }
.cl-spark__dot {
    position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; pointer-events: none;
    box-shadow: 0 0 0 4px rgba(var(--tb-success-rgb), 0.25);
}
.cl-spark[data-tone="down"] .cl-spark__dot { box-shadow: 0 0 0 4px rgba(var(--tb-error-rgb), 0.25); }
.cl-spark__empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tb-muted); font-size: 11px; cursor: default; }
.cl-ranges { display: flex; padding: 6px 10px 10px; }
.cl-range {
    flex: 1; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer;
    color: var(--tb-text2); font: inherit; font-size: 11.5px; font-weight: 700;
}
.cl-range.is-active { background: var(--tb-primary-tint); border-color: var(--tb-border-strong); color: var(--tb-text); }
.cl-spinner {
    width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid rgba(var(--tb-primary-light-rgb), 0.25); border-top-color: var(--tb-primary-light);
    animation: cl-spin 0.8s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* Wishlist hero */
.cl-hero--wish .cl-hero__inner { padding: 16px; }
.cl-wish__label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; color: var(--tb-text2); }
.cl-wish__sentence { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--tb-text2); }
.cl-wish__sentence.is-muted { color: var(--tb-muted); }
.cl-wish__delta { font-weight: 800; color: var(--tb-text2); }
.cl-wish__delta.is-up { color: var(--tb-success); }
.cl-wish__delta.is-down { color: var(--tb-error); }
.cl-wish__split { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tb-border); }
.cl-wish__bar { display: flex; height: 6px; border-radius: var(--tb-r-pill); overflow: hidden; background: var(--tb-bg3); }
.cl-wish__bar .is-up { background: var(--tb-success); }
.cl-wish__bar .is-same { background: var(--tb-border-strong); }
.cl-wish__bar .is-down { background: var(--tb-error); }
.cl-wish__stats { display: flex; gap: 8px; margin-top: 12px; }
.cl-wish__stats > div { flex: 1; display: flex; flex-direction: column; align-items: center; }
.cl-wish__stats b { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 24px; color: var(--tb-text2); font-variant-numeric: tabular-nums; }
.cl-wish__stats b.is-up { color: var(--tb-success); }
.cl-wish__stats b.is-down { color: var(--tb-error); }
.cl-wish__stats span { font-size: 11px; font-weight: 600; margin-top: 4px; color: var(--tb-text2); white-space: nowrap; }

/* ── Search + meta row ──────────────────────────────────────────────────── */
.cl-bar { margin-top: 9px; }
.cl-search {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 14px; border-radius: 12px;
    border: 1px solid var(--tb-border-strong); background: var(--tb-card); color: var(--tb-muted);
}
.cl-search input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    color: var(--tb-text); font: inherit; font-size: 14px;
}
.cl-search input::placeholder { color: var(--tb-muted); }
.cl-search input::-webkit-search-cancel-button { display: none; }
.cl-search:focus-within { border-color: var(--tb-primary-light); }
.cl-search__clear[hidden] { display: none; }
.cl-search__clear { display: inline-flex; padding: 8px; border: 0; background: none; color: var(--tb-muted); cursor: pointer; }
.cl-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 4px; min-height: 48px; }
.cl-meta__count { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cl-meta__count b { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; color: var(--tb-text); white-space: nowrap; }
.cl-meta__count span { font-size: 11.5px; color: var(--tb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-sortwrap { display: flex; align-items: center; gap: 2px; }
.cl-sort {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px;
    border: 0; background: transparent; color: var(--tb-primary-light); font: inherit; cursor: pointer;
}
.cl-sort:hover { background: var(--tb-surface); }
.cl-sort__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--tb-muted); }
.cl-sort__label { font-size: 12.5px; font-weight: 600; color: var(--tb-text); }
.cl-period {
    padding: 2px 7px; border-radius: var(--tb-r-pill); border: 0; cursor: pointer;
    background: rgba(var(--tb-primary-rgb), 0.25); color: var(--tb-primary-light);
    font: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: 0.4px;
}
.cl-period:hover { background: rgba(var(--tb-primary-rgb), 0.38); }

/* ── Popovers: portfolio switcher, sort menu ────────────────────────────── */
.cl-popover {
    position: absolute; z-index: 950; overflow-y: auto; padding: 6px;
    background: var(--tb-bg3); border: 1px solid var(--tb-border-strong); border-radius: 14px;
    box-shadow: 0 14px 38px var(--tb-scrim);
    animation: cl-pop 160ms var(--tb-ease);
}
@keyframes cl-pop { from { opacity: 0; transform: translateY(-4px); } }
.cl-pmenu { min-width: 268px; max-width: 320px; border-radius: 16px; }
.cl-pmenu__head, .cl-pmenu__group { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; color: var(--tb-muted); font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; }
.cl-pmenu__head span:first-child { flex: 1; }
.cl-pmenu__head span:last-child { letter-spacing: 0; font-weight: 700; }
.cl-pmenu__group { font-size: 9px; padding-top: 8px; }
.cl-pmenu__group i { flex: 1; height: 1px; background: var(--tb-border); }
.cl-pmenu__row, .cl-pmenu__action {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 10px; border: 0;
    background: transparent; color: var(--tb-text); font: inherit; text-align: left; cursor: pointer;
}
.cl-pmenu__row:hover, .cl-pmenu__action:hover { background: var(--tb-surface); }
.cl-pmenu__row.is-active { background: var(--tb-primary-tint); }
.cl-pmenu__row > .tb-icon { color: var(--tb-primary-light); font-size: 16px; }
.cl-pmenu__tile {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tb-border); background: var(--tb-surface); color: var(--tb-text); font-size: 13px; font-weight: 800;
}
.cl-pmenu__tile.is-active { background: var(--tb-primary); border-color: transparent; color: var(--tb-on-primary); }
.cl-pmenu__tile--wish { background: rgba(var(--tb-error-rgb), 0.14); border-color: rgba(var(--tb-error-rgb), 0.42); color: var(--tb-error); }
.cl-pmenu__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-pmenu__name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pmenu__sub { font-size: 11px; color: var(--tb-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cl-pmenu__val { color: var(--tb-text2); }
.cl-pmenu__wait { color: var(--tb-muted); font-style: italic; }
.cl-pmenu__sep { height: 1px; margin: 6px 8px; background: var(--tb-border); }
.cl-pmenu__action { color: var(--tb-primary-light); font-size: 13px; font-weight: 700; }
.cl-pmenu__actile {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--tb-primary-tint); border: 1px dashed var(--tb-border-strong);
}
.cl-smenu { min-width: 190px; border-radius: 12px; }
.cl-smenu__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px; border-radius: 8px;
    border: 0; background: transparent; color: var(--tb-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.cl-smenu__row:hover { background: var(--tb-surface); }
.cl-smenu__row.is-active { background: var(--tb-primary-tint); color: var(--tb-text); }
.cl-smenu__row .tb-icon { color: var(--tb-primary-light); }

/* Period sheet */
.cl-periods { display: flex; flex-direction: column; gap: 8px; }
.cl-periods__row {
    display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: 12px;
    border: 1px solid var(--tb-border); background: var(--tb-card); color: var(--tb-text); font: inherit; text-align: left; cursor: pointer;
}
.cl-periods__row span { display: flex; flex-direction: column; }
.cl-periods__row b { font-size: 14px; font-weight: 700; }
.cl-periods__row small { font-size: 11px; color: var(--tb-text2); margin-top: 2px; }
.cl-periods__row.is-active { background: var(--tb-primary-tint); border-color: var(--tb-border-strong); }
.cl-periods__check { width: 22px; height: 22px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; background: var(--tb-primary); color: var(--tb-on-primary); }

/* ── Grid + tile (CardTile) ─────────────────────────────────────────────── */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; margin-top: 4px; }
.cl-more { height: 1px; }
.cl-empty { grid-column: 1 / -1; padding: 16px 0; }

.cl-tile {
    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    border-radius: var(--tb-r-tile); border: 1px solid var(--tb-border); background: var(--tb-card);
    color: inherit; text-decoration: none; -webkit-touch-callout: none; user-select: none;
    transition: transform var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease), opacity var(--tb-dur);
}
.cl-tile:hover { transform: translateY(-2px); border-color: var(--tb-border-strong); }
.cl-tile:active { transform: scale(0.98); }
.cl-grid.is-selecting .cl-tile { opacity: 0.5; }
.cl-grid.is-selecting .cl-tile.is-selected { opacity: 1; border: 2px solid var(--tb-primary-light); }
.cl-tile__check {
    position: absolute; top: 6px; left: 6px; z-index: 5; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tb-scrim); border: 1.5px solid rgba(var(--tb-text-rgb), 0.65); color: var(--tb-bg);
}
.cl-tile.is-selected .cl-tile__check { background: var(--tb-primary-light); border-color: var(--tb-primary-light); }

.cl-tile__art { position: relative; aspect-ratio: 245 / 342; overflow: hidden; background: linear-gradient(180deg, var(--tb-bg3), var(--tb-card2)); }
.cl-tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4.6% / 3.3%; }
.cl-tile__art.is-sealed img { object-fit: contain; border-radius: 0; }
.cl-tile__none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tb-muted); }
.cl-tile__art.is-placeholder { background: linear-gradient(180deg, rgba(var(--tb-warning-rgb), 0.1), var(--tb-card2)); }
.cl-tile__art.is-placeholder .cl-tile__none { color: var(--tb-warning); }
.cl-tile__cond {
    position: absolute; top: 6px; left: 6px; z-index: 2; padding: 2px 5px; border-radius: 5px; border: 1px solid currentColor;
    background: var(--tb-on-image); font-size: 9px; font-weight: 800; letter-spacing: 0.4px; line-height: 1.2;
}
.cl-tile__cond--lp { color: var(--tb-cond-lp); }
.cl-tile__cond--mp { color: var(--tb-cond-mp); }
.cl-tile__cond--hp { color: var(--tb-cond-hp); }
.cl-tile__cond--dmg { color: var(--tb-cond-dmg); }
.cl-tile__review {
    position: absolute; bottom: 6px; left: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 5px; border-radius: 5px; border: 1px solid rgba(var(--tb-warning-rgb), 0.6); background: var(--tb-on-image);
    color: var(--tb-warning); font-size: 9px; font-weight: 800;
}
.cl-tile__owned {
    position: absolute; top: 6px; right: 6px; z-index: 4; min-width: 22px; height: 18px; padding: 0 5px; border-radius: var(--tb-r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--tb-success-rgb), 0.4); background: var(--tb-on-image); color: var(--tb-success);
    font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Graded: the app's slab frame over the card, ringed in the grader's colour. */
.cl-slab {
    --slab: var(--tb-muted-rgb);
    position: relative; aspect-ratio: 643 / 897; overflow: hidden; border: 2px solid rgba(var(--slab), 0.3); border-radius: 6.5% / 4.7%;
    background: linear-gradient(180deg, var(--tb-bg3), var(--tb-card2));
}
.cl-slab[data-co="psa"] { --slab: var(--tb-slab-psa-rgb); }
.cl-slab[data-co="bgs"] { --slab: var(--tb-slab-bgs-rgb); }
.cl-slab[data-co="cgc"] { --slab: var(--tb-slab-cgc-rgb); }
.cl-slab[data-co="sgc"] { --slab: var(--tb-slab-sgc-rgb); }
.cl-slab[data-co="tag"] { --slab: var(--tb-slab-tag-rgb); }
.cl-slab[data-co="ace"] { --slab: var(--tb-slab-ace-rgb); }
.cl-slab__window { position: absolute; top: 17.8%; left: 13.1%; width: 74.7%; height: 74.8%; z-index: 1; overflow: hidden; border-radius: 4.6% / 3.3%; }
.cl-slab__window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-slab__window .cl-tile__none { position: absolute; }
.cl-slab__frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url('/assets/images/slab-frame.png') center / 100% 100% no-repeat; }
html[data-theme="arctic"] .cl-slab__frame,
html[data-theme="blossom"] .cl-slab__frame,
html[data-theme="porcelain"] .cl-slab__frame,
html[data-theme="gilded"] .cl-slab__frame { background-image: url('/assets/images/slab-frame-light.png'); }
.cl-slab__label {
    position: absolute; top: 4.3%; left: 5.8%; right: 5.4%; height: 6.6%; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; padding: 0 6%;
    border: 1.5px solid rgba(var(--slab), 0.7); border-radius: 2px; background: var(--tb-on-image);
}
.cl-slab__label b { font-size: 7px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tb-muted); line-height: 1; }
.cl-slab__label i { font-style: normal; font-size: 7.5px; font-weight: 900; color: var(--tb-on-image-text); line-height: 1; white-space: nowrap; }

.cl-tile__body { display: flex; flex-direction: column; gap: 1px; flex: 1; padding: 6px 8px 8px; min-width: 0; }
.cl-tile__name { font-size: 11px; font-weight: 800; letter-spacing: -0.1px; line-height: 14px; color: var(--tb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tile__name.is-sealed { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-tile__meta { margin-top: 1px; font-size: 9px; line-height: 12px; color: var(--tb-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tile__lead { min-height: 14px; }
.cl-tile__variant { color: var(--tb-primary-light); font-weight: 700; }
.cl-tile__price { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--tb-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tile__est { color: var(--tb-muted); }
.cl-dpill {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; max-width: 100%; margin-top: 4px; padding: 2px 5px;
    border-radius: 5px; border: 1px solid; font-size: 9px; font-weight: 700; line-height: 12px; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden;
}
.cl-dpill--up { color: var(--tb-success); background: rgba(var(--tb-success-rgb), 0.12); border-color: rgba(var(--tb-success-rgb), 0.4); }
.cl-dpill--down { color: var(--tb-error); background: rgba(var(--tb-error-rgb), 0.12); border-color: rgba(var(--tb-error-rgb), 0.4); }
.cl-dpill--flat { color: var(--tb-muted); background: rgba(var(--tb-muted-rgb), 0.08); border-color: rgba(var(--tb-muted-rgb), 0.27); }
.cl-dpill--cost { color: var(--tb-text2); }
.cl-dpill--cost .tb-icon { color: var(--tb-muted); }
.cl-dpill-space { display: block; height: 18px; margin-top: 4px; }
.cl-tile--skel { pointer-events: none; }
.cl-skel-art { display: block; aspect-ratio: 245 / 342; border-radius: 0; }
.cl-tile--skel .cl-tile__body { gap: 6px; }

/* ── Selection chrome (CollectionSelection.tsx) ─────────────────────────── */
.cl-selbar {
    position: fixed; z-index: 950; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: var(--tb-bg2); border-bottom: 1px solid var(--tb-border-strong);
    animation: cl-down 220ms var(--tb-ease);
}
@keyframes cl-down { from { transform: translateY(-100%); } }
.cl-selbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-selbar__text b { font-size: 15.5px; font-weight: 800; color: var(--tb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-selbar__text span { font-size: 11.5px; color: var(--tb-muted); margin-top: 1px; }
.cl-selbar__all {
    padding: 7px 11px; border-radius: 9px; border: 1px solid var(--tb-border); background: transparent;
    color: var(--tb-primary-light); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.cl-actions {
    position: fixed; z-index: 950; left: 16px; right: 16px; bottom: 104px; display: flex; gap: 10px; padding: 10px; margin: 0 auto; max-width: 560px;
    border-radius: 18px; background: var(--tb-bg3); border: 1px solid var(--tb-border-strong);
    box-shadow: 0 10px 24px var(--tb-scrim); animation: cl-up 240ms var(--tb-ease);
}
@keyframes cl-up { from { transform: translateY(30px); opacity: 0; } }
.cl-actions__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 8px; border-radius: 13px;
    border: 1px solid var(--tb-border); background: transparent; color: var(--tb-primary-light); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.cl-actions__btn:disabled { opacity: 0.4; cursor: default; }
.cl-actions__btn--danger { color: var(--tb-error); background: rgba(var(--tb-error-rgb), 0.13); border-color: rgba(var(--tb-error-rgb), 0.4); }
@media (min-width: 1024px) {
    .cl-selbar { left: var(--tb-sidebar-w); }
    .cl-actions { bottom: 28px; left: calc(var(--tb-sidebar-w) + 32px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .cl-selbar { left: var(--tb-rail-w); }
    .cl-actions { bottom: 28px; left: calc(var(--tb-rail-w) + 16px); }
}

.cl-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-confirm__icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--tb-error-rgb), 0.12); color: var(--tb-error); margin-bottom: 12px; }
.cl-confirm__title { margin: 0; font-size: 17.5px; font-weight: 800; color: var(--tb-text); }
.cl-confirm__body { margin: 8px 0 0; font-size: 13px; line-height: 19px; color: var(--tb-muted); }

.cl-move { display: flex; flex-direction: column; gap: 8px; }
.cl-move__none { margin: 0; color: var(--tb-muted); font-size: 13px; line-height: 19px; }
.cl-move__row {
    display: flex; align-items: center; gap: 11px; padding: 13px; border-radius: 12px; border: 1px solid var(--tb-border);
    background: var(--tb-card); color: var(--tb-text); font: inherit; cursor: pointer; text-align: left;
}
.cl-move__row:hover { border-color: var(--tb-border-strong); }
.cl-move__row.is-busy { opacity: 0.6; }
.cl-move__row > .tb-icon { color: var(--tb-muted); }
.cl-move__tile { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-surface); border: 1px solid var(--tb-border); font-weight: 800; font-size: 14px; }
.cl-move__name { flex: 1; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Share sheet */
.cl-share { display: flex; flex-direction: column; gap: 8px; }
.cl-share__row {
    display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 12px; border: 1px solid var(--tb-border);
    background: var(--tb-card); color: var(--tb-text); font: inherit; text-align: left; cursor: pointer;
}
.cl-share__row:disabled { cursor: progress; }
.cl-share__icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--tb-border); display: inline-flex; align-items: center; justify-content: center; color: var(--tb-primary-light); }
.cl-share__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-share__text b { font-size: 14px; font-weight: 700; }
.cl-share__text small { font-size: 12px; color: var(--tb-muted); margin-top: 2px; line-height: 16px; }
.cl-share__end { color: var(--tb-muted); display: inline-flex; }
.cl-share__verify { padding: 13px; border-radius: 12px; border: 1px solid var(--tb-border); background: var(--tb-card); }
.cl-share__verify p { margin: 0 0 10px; font-size: 13px; line-height: 18px; color: var(--tb-text); }

/* ── Phone: the app's own layout ────────────────────────────────────────── */
@media (max-width: 767px) {
    .cl-page { padding: 4px 0 140px; }
    .cl-top { padding: 4px 12px 14px; }
    .cl-review { margin: 0 14px 10px; }
    .cl-hero-slot { margin: 0 16px; }
    .cl-bar { margin: 9px 16px 0; }
    .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; margin: 4px 4px 0; }
    .cl-meta { padding: 14px 0 4px; }
    /* The app shrinks the cost · date pill to fit a third of a phone (minimumFontScale .7). */
    .cl-dpill--cost { font-size: 7.5px; gap: 2px; padding: 2px 4px; }
}
@media (min-width: 1024px) {
    .cl-hero__inner { padding: 20px 24px 4px; }
    .cl-hero .cl-modes { max-width: 360px; }
    .cl-hero__value { font-size: 40px; line-height: 44px; }
    .cl-spark { height: 150px; }
    .cl-ranges { padding: 6px 16px 14px; justify-content: flex-start; gap: 6px; }
    .cl-range { flex: 0 0 64px; }
    .cl-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-tile, .cl-popover, .cl-selbar, .cl-actions, .cl-spark { transition: none; animation: none; }
    .cl-tile:hover { transform: none; }
    .cl-spinner { animation-duration: 2s; }
}

/* ── Import (CollectrImportFlow + ImportWizard) ────────────────────────── */
.ci { display: flex; flex-direction: column; gap: 12px; }
.ci-card { padding: 16px; border-radius: 16px; border: 1px solid var(--tb-border); background: var(--tb-bg2); }
.ci-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--tb-text); }
.ci-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 19px; color: var(--tb-muted); }
.ci-card--hero, .ci-card--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--tb-primary-light); }
.ci-card--center { color: var(--tb-success); gap: 10px; }
.ci-card--center b { font-size: 16px; color: var(--tb-text); }
.ci-q { margin: 8px 0 0; font-size: 15px; font-weight: 800; color: var(--tb-text); }
.ci-choice {
    display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--tb-border);
    background: var(--tb-bg2); color: var(--tb-muted); font: inherit; text-align: left; cursor: pointer;
}
.ci-choice:hover { border-color: var(--tb-border-strong); }
.ci-choice__icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--tb-primary-rgb), 0.13); color: var(--tb-primary-light); }
.ci-choice__text { flex: 1; display: flex; flex-direction: column; }
.ci-choice__text b { font-size: 14px; color: var(--tb-text); }
.ci-choice__text small { font-size: 11.5px; margin-top: 2px; line-height: 15px; }
.ci-disclaimer { margin: 6px 10px 0; font-size: 10.5px; line-height: 15px; text-align: center; color: var(--tb-muted); }
.ci-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--tb-text2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.ci-steps { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 19px; color: var(--tb-text); }
.ci-drop {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border-radius: 14px; cursor: pointer;
    border: 1.5px dashed var(--tb-border-strong); background: var(--tb-primary-tint-weak); color: var(--tb-primary-light); text-align: center;
}
.ci-drop b { font-size: 14px; color: var(--tb-text); }
.ci-drop small { font-size: 12px; color: var(--tb-muted); }
.ci-drop:hover, .ci-drop.is-over { background: var(--tb-primary-tint); }
.ci-error { margin: 0; color: var(--tb-error); font-size: 12.5px; }
.ci-muted { color: var(--tb-muted); font-size: 12.5px; line-height: 18px; }
.ci-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ci-actions--end { justify-content: flex-end; }
.ci-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
.ci-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ci-stat b { font-size: 22px; font-weight: 900; color: var(--tb-text); font-variant-numeric: tabular-nums; }
.ci-stat span { font-size: 11px; font-weight: 600; color: var(--tb-muted); }
.ci .is-up { color: var(--tb-success); }
.ci .is-warn { color: var(--tb-warning); }
.ci .is-accent { color: var(--tb-primary-light); }
.ci-list { margin: 4px 0; padding: 0; list-style: none; font-size: 12px; color: var(--tb-muted); }
.ci-list li { padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-rows { margin: 0; padding: 0; list-style: none; }
.ci-rows li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--tb-border); color: var(--tb-success); }
.ci-rows li span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-rows b { font-size: 12px; color: var(--tb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-rows small { font-size: 10.5px; color: var(--tb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ci-head h3 { margin: 0; }
.ci-maps { display: flex; flex-direction: column; }
.ci-map { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--tb-border); cursor: pointer; }
.ci-map.is-off { opacity: 0.45; }
.ci-map input { width: 18px; height: 18px; accent-color: var(--tb-primary-light); }
.ci-map span { display: flex; flex-direction: column; }
.ci-map b { font-size: 13px; color: var(--tb-text); }
.ci-map small { font-size: 11px; font-weight: 600; color: var(--tb-muted); }
.ci-bar { width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--tb-border); }
.ci-bar span { display: block; height: 100%; border-radius: 3px; background: var(--tb-primary-light); transition: width 200ms; }
.ci-spin { width: 32px; height: 32px; border-width: 3px; }
.ci-review {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; align-self: stretch; padding: 11px; border-radius: 10px;
    border: 1px solid rgba(var(--tb-warning-rgb), 0.53); background: transparent; color: var(--tb-warning); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ── Review imports (review-imports.tsx) ───────────────────────────────── */
.rv-page { max-width: 760px; }
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rv-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--tb-text); }
.rv-sub { margin: 1px 0 0; font-size: 12.5px; color: var(--tb-muted); }
.rv-blurb { margin: 0 0 12px; font-size: 12.5px; line-height: 18px; color: var(--tb-muted); }
.rv-list { display: flex; flex-direction: column; gap: 9px; }
.rv-row { border: 1px solid var(--tb-border); border-radius: 13px; background: var(--tb-card); overflow: hidden; transition: opacity var(--tb-dur); }
.rv-row.is-busy { opacity: 0.5; pointer-events: none; }
.rv-row__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px; border: 0; background: none; color: var(--tb-primary-light); font: inherit; text-align: left; cursor: pointer; }
.rv-row__mark {
    width: 34px; height: 48px; flex-shrink: 0; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--tb-warning-rgb), 0.13); border: 1px solid rgba(var(--tb-warning-rgb), 0.33); color: var(--tb-warning);
}
.rv-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-row__text b { font-size: 14px; color: var(--tb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-row__text small { font-size: 11.5px; color: var(--tb-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rv-panel { border-top: 1px solid var(--tb-border); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rv-panel__label { margin: 0 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tb-muted); }
.rv-note { margin: 0; padding: 8px; font-size: 12px; color: var(--tb-muted); }
.rv-cand { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 9px; border: 0; background: transparent; color: var(--tb-text); font: inherit; text-align: left; cursor: pointer; }
.rv-cand:hover { background: var(--tb-surface); }
.rv-cand.is-suggested { background: rgba(var(--tb-primary-rgb), 0.13); }
.rv-cand__img { width: 30px; height: 42px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: var(--tb-bg3); }
.rv-cand__img img { width: 100%; height: 100%; object-fit: cover; }
.rv-cand__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-cand__text b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cand__text small { font-size: 10.5px; color: var(--tb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-cand__tag { font-size: 10px; font-weight: 700; color: var(--tb-primary-light); }
.rv-search {
    display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; margin-top: 2px; border-radius: 9px;
    border: 1px dashed rgba(var(--tb-primary-rgb), 0.4); background: transparent; color: var(--tb-primary-light); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.rv-remove { align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 0; background: none; color: var(--tb-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rv-remove:hover { color: var(--tb-error); }
.rv-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 36px; text-align: center; color: var(--tb-success); }
.rv-empty__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--tb-text); }
.rv-empty__body { margin: 0 0 8px; max-width: 420px; font-size: 13px; line-height: 19px; color: var(--tb-muted); }
.rv-sheet { display: flex; flex-direction: column; gap: 10px; }
.rv-sheet__list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }

/* ── Bulk editor (BulkCardEditor) ──────────────────────────────────────── */
.be { display: flex; flex-direction: column; gap: 12px; }
.be-head { display: flex; align-items: center; justify-content: space-between; margin-top: -8px; }
.be-sub { margin: 0; font-size: 12px; color: var(--tb-muted); }
.be-bin { color: var(--tb-error); }
.be-modes { margin-bottom: 0; }
.be-main { display: flex; flex-direction: column; gap: 10px; }
.be-rows { display: flex; flex-direction: column; gap: 10px; }
.be-row { align-items: flex-start; }
.be-row--all { background: var(--tb-bg3); border-color: var(--tb-border-strong); padding-right: 12px; }
.be-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.be-row__id { display: flex; align-items: flex-start; gap: 8px; }
.be-row__id > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.be-row__id b { font-size: 13px; font-weight: 800; color: var(--tb-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.be-row__id small { font-size: 10.5px; color: var(--tb-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-breakdown { display: flex; flex-direction: column; margin-top: 3px; font-size: 10.5px; line-height: 15px; color: var(--tb-text2); }
.be-breakdown span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-breakdown b { display: inline; color: var(--tb-text); font-weight: 700; font-size: 10.5px; }
.be-more { color: var(--tb-muted); }
.be-replace {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px;
    border: 1px solid var(--tb-border-strong); background: var(--tb-primary-tint-weak); color: var(--tb-primary-light);
    font: inherit; font-size: 10px; font-weight: 800; cursor: pointer;
}
.be-mixed { color: var(--tb-muted) !important; }
.be-paid__mixed { flex: 1; font-size: 12.5px; font-weight: 600; }
.be-fan { position: relative; width: 82px; height: 114px; flex-shrink: 0; }
.be-fan__card { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--tb-bg2); }
.be-fan__card img { width: 100%; height: 100%; object-fit: cover; }
.be-fan__count {
    position: absolute; right: -6px; top: -6px; min-width: 24px; height: 21px; padding: 0 6px; border-radius: var(--tb-r-pill);
    display: inline-flex; align-items: center; justify-content: center; background: var(--tb-primary); border: 1.5px solid var(--tb-bg3);
    color: var(--tb-on-primary); font-size: 11px; font-weight: 800;
}
.be-note { margin: 0 4px; font-size: 11.5px; line-height: 17px; color: var(--tb-muted); }
.be-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: var(--tb-muted); text-align: center; }
.be-empty b { color: var(--tb-text); font-size: 15px; }
.be-empty p { margin: 0; font-size: 12.5px; line-height: 18px; }
.be-foot { padding-top: 11px; border-top: 1px solid var(--tb-border); }
.be-foot p { margin: 7px 0 0; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--tb-muted); }

/* ── Portfolio manager (PortfolioManager) ──────────────────────────────── */
.pm { display: flex; flex-direction: column; gap: 10px; }
.pm-top { display: flex; justify-content: flex-end; margin-top: -8px; }
.pm-list { display: flex; flex-direction: column; gap: 10px; }
.pm-row { display: flex; align-items: center; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--tb-border); background: var(--tb-card); }
.pm-row.is-active { border-color: var(--tb-primary-light); background: var(--tb-primary-tint); }
.pm-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.pm-row__tile { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tb-surface); border: 1px solid var(--tb-border); color: var(--tb-text); font-size: 15px; font-weight: 800; }
.pm-row__tile.is-active { background: var(--tb-primary); border-color: transparent; color: var(--tb-on-primary); }
.pm-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-row__name { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; color: var(--tb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row__sub { font-size: 11.5px; color: var(--tb-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pm-active { padding: 2px 6px; border-radius: 5px; background: var(--tb-primary); color: var(--tb-on-primary); font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; }
.pm-del { color: var(--tb-error); }
.pm-del:disabled { color: var(--tb-muted); opacity: 0.3; }
.pm-note { margin: 0; font-size: 13px; line-height: 19px; color: var(--tb-muted); }
.pm-name { width: 100%; }
.pm-error { margin: 8px 0 0; font-size: 12px; color: var(--tb-error); }
.pm-delete { display: flex; flex-direction: column; gap: 10px; }
.pm-opts { display: flex; flex-direction: column; gap: 8px; }
.pm-opt {
    display: flex; align-items: center; gap: 9px; padding: 11px; border-radius: 11px; border: 1px solid var(--tb-border);
    background: transparent; color: var(--tb-text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.pm-opt .tb-icon { color: var(--tb-muted); }
.pm-opt.is-on { border-color: var(--tb-primary-light); background: var(--tb-primary-tint); }
.pm-opt.is-on .tb-icon { color: var(--tb-primary-light); }
.pm-opt--danger.is-on { border-color: var(--tb-error); background: rgba(var(--tb-error-rgb), 0.1); color: var(--tb-error); }
.pm-opt--danger.is-on .tb-icon { color: var(--tb-error); }
.pm-warn { margin: 0; font-size: 11.5px; line-height: 17px; color: var(--tb-error); }