/* =====================================================================================
   Bone for the website: the public pages and the dealer cabinet in the apps' look.
   Loaded by frontend/partials/bone-head only when carbiddata.BONE is on (CBP_BONE=true).

   Where the values come from: the "CarBidPro Website — Bone" canvas (DS-Bone, D-Shell,
   D-MyCars) and packages/cbp_core/lib/src/theme.dart + motion.dart in the Flutter apps.
   Day is a deeper bone page with bone cards, the navy rail and hero, one red action per
   screen. Night ("Calm Night") is neutral greys: no navy and no coloured text, money
   included; colour stays on the red action, the auction marks and photos.

   Every rule starts with html.bone. This sheet is linked at the END of the head, but the
   dealer rail, top bar and kit print their own <style> later, in the body; the extra
   class and element are what let these rules outrank them without touching each file.
   Night switches on html[data-theme="dark"] only (theme-core), never on a media query.
   ===================================================================================== */

/* ---------- 0. Tokens ---------- */
html.bone {
    --bn-bg: #E7E4DD; --bn-card: #F1EFEA; --bn-raised: #F6F4F0; --bn-tile: #E7E4DD;
    --bn-line: #D5D0C7; --bn-hair: rgba(213, 208, 199, .75); --bn-track: #E4E1DA; --bn-thumb: #F1EFEA;
    --bn-text: #151412; --bn-text2: #4A4640; --bn-muted: #625C53;
    --bn-strong: #0E2C4F; --bn-strong-glow: #0E2C4F; --bn-on-strong: #F1EFEA; --bn-on-strong-muted: #A9B8CC;
    --bn-strong-well: rgba(241, 239, 234, .10); --bn-on-strong-good: #8BE0B0; --bn-on-strong-warn: #F2C46B;
    --bn-on-strong-bad: #FFB4C0; --bn-on-strong-hot: #FF6B80;
    --bn-rail: #0E2C4F; --bn-rail-ink: #F1EFEA; --bn-rail-dim: #A9B8CC; --bn-rail-hover: rgba(241, 239, 234, .10);
    --bn-rail-sel: #F1EFEA; --bn-rail-sel-ink: #0E2C4F;
    --bn-navy-ink: #0E2C4F; --bn-on-navy-ink: #F1EFEA;
    --bn-primary: #0E2C4F; --bn-on-primary: #F1EFEA;
    --bn-selected: #0E2C4F; --bn-on-selected: #F1EFEA;
    --bn-focus: #2063B0;
    --bn-hot: #D92D48; --bn-on-hot: #FFFFFF;
    --bn-good: #1E6B47; --bn-good-bg: #DDEBE1; --bn-good-fill: #1E6B47;
    --bn-go: #268255; --bn-go-hi: #2C9461; /* the green button (Login); white on it is 4.8:1 */
    --bn-warn: #7A4F0C; --bn-warn-bg: #F3E6CC;
    --bn-bad: #B8233B; --bn-bad-bg: #FBE4E8;
    --bn-info: #1A5FB4; --bn-info-bg: #DDE5EF;
    --bn-copart: #1A5FB4; --bn-iaai: #C8102E;
    --bn-scrim: rgba(21, 20, 18, .5); --bn-shadow: rgba(21, 20, 18, .12); --bn-hover: rgba(21, 20, 18, .04);
    --bn-float: 0 18px 44px -18px rgba(21, 20, 18, .34), 0 2px 8px rgba(21, 20, 18, .06);
    --bn-skel: #D5D0C7; --bn-skel-hi: #ECE9E2;
    --bn-r-s: 16px; --bn-r-m: 20px; --bn-r-l: 28px; --bn-r-xl: 36px;
    --bn-font: 'Archivo', 'Noto Sans Georgian', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* motion.dart */
    --bn-fast: .16s; --bn-base: .26s; --bn-slow: .42s; --bn-glide-t: .52s;
    --bn-ease: cubic-bezier(.2, 0, 0, 1); --bn-decel: cubic-bezier(.05, .7, .1, 1); --bn-accel: cubic-bezier(.3, 0, .8, .15);
    --bn-glide: linear(0, .107, .316, .528, .701, .827, .91, .961, .988, 1.002, 1.007, 1.008, 1.007, 1.005, 1.003, 1.002, 1);
    --bn-release: linear(0, .1, .32, .58, .8, .96, 1.05, 1.08, 1.07, 1.04, 1.015, .998, .992, .995, 1);
    --bn-pop: linear(0, .659, 1.068, 1.149, 1.081, 1.011, .983, .985, .995, 1.001, 1);
    --bn-side: 0px; --bn-bar-h: 76px;
    color-scheme: light;

    /* The site's old names, pointed at Bone, so the 2,000-odd var() reads in the views move
       without a markup change (website-current-style.md §17 step 2). */
    --cbp-bg: var(--bn-bg); --cbp-bg-2: var(--bn-tile); --cbp-surface: var(--bn-card); --cbp-surface-2: var(--bn-raised);
    --cbp-line: var(--bn-line); --cbp-ink: var(--bn-text); --cbp-body: var(--bn-text2); --cbp-muted: var(--bn-muted);
    --cbp-muted-ink: var(--bn-muted); --cbp-navy: var(--bn-strong); --cbp-blue: var(--bn-navy-ink); --cbp-sky: var(--bn-navy-ink);
    --cbp-red: var(--bn-hot); --cbp-red-2: var(--bn-hot);
    --brand: var(--bn-primary); --brand-2: var(--bn-focus); --line: var(--bn-line); --content: var(--bn-bg);
    --nav: var(--bn-rail); --nav-hi: var(--bn-rail-hover); --nav-line: rgba(241, 239, 234, .12);
    --nav-ink: var(--bn-rail-ink); --nav-ink-dim: var(--bn-rail-dim); --nav-ink-hi: #FFFFFF;
    --cbp-chrome: var(--bn-rail); --cbp-chrome-2: var(--bn-rail);
    --cbp-chrome-wash: none; --cbp-chrome-wash-2: none; --cbp-footer-wash: none; --cbp-panel-wash: none;
    --cbp-chrome-topo: none; --cbp-chrome-edge: transparent; --cbp-aurora-peak: 0;
    --cbp-red-fill: var(--bn-hot); --cbp-blue-fill: var(--bn-primary); --cbp-blue-fill-hi: var(--bn-primary);
    --cbp-blue-fill-glow: 0 0 0 0 transparent; --cbp-blue-fill-ring: 0 0 0 0 transparent;
    --cbp-r-sm: 14px; --cbp-r-md: 18px; --cbp-r-lg: 24px; --cbp-r-xl: 30px;
    --cbp-sh-sm: none; --cbp-sh-md: none; --cbp-sh-lg: var(--bn-float); --cbp-sh-glow: none; --cbp-sh-red: none;
    --cbp-glow-red: transparent; --cbp-glow-red-2: transparent; --cbp-glow-blue: transparent; --cbp-glow-sky: transparent;
    --header-h: var(--bn-bar-h);
}
html.bone[data-theme="dark"] {
    --bn-bg: #0F0F0F; --bn-card: #181818; --bn-raised: #212121; --bn-tile: #121212;
    --bn-line: #303030; --bn-hair: rgba(48, 48, 48, .8); --bn-track: #0A0A0A; --bn-thumb: #2B2B2B;
    --bn-text: #F1F1F1; --bn-text2: #AAAAAA; --bn-muted: #8A8A8A;
    --bn-strong: #212121; --bn-strong-glow: #2B2B2B; --bn-on-strong: #F1F1F1; --bn-on-strong-muted: #AAAAAA;
    --bn-strong-well: rgba(0, 0, 0, .2); --bn-on-strong-good: #F1F1F1; --bn-on-strong-warn: #F1F1F1;
    --bn-on-strong-bad: #F1F1F1; --bn-on-strong-hot: #FF6B80;
    --bn-rail: #141414; --bn-rail-ink: #F1F1F1; --bn-rail-dim: #AAAAAA; --bn-rail-hover: rgba(241, 241, 241, .07);
    --bn-rail-sel: #F1F1F1; --bn-rail-sel-ink: #0F0F0F;
    --bn-navy-ink: #F1F1F1; --bn-on-navy-ink: #0F0F0F;
    --bn-primary: #F1F1F1; --bn-on-primary: #0F0F0F;
    --bn-selected: #F1F1F1; --bn-on-selected: #0F0F0F;
    --bn-focus: #F1F1F1;
    --bn-hot: #D53B4A;
    --bn-good: #F1F1F1; --bn-good-bg: #2B2B2B; --bn-good-fill: #268255;
    --bn-go: #268255; --bn-go-hi: #2C9461;
    --bn-warn: #F1F1F1; --bn-warn-bg: #2B2B2B;
    --bn-bad: #F1F1F1; --bn-bad-bg: #2B2B2B;
    --bn-info: #F1F1F1; --bn-info-bg: #2B2B2B;
    --bn-scrim: rgba(0, 0, 0, .7); --bn-shadow: rgba(0, 0, 0, .4); --bn-hover: rgba(241, 241, 241, .04);
    --bn-float: 0 18px 44px -18px rgba(0, 0, 0, .7);
    --bn-skel: #303030; --bn-skel-hi: #3a3a3a;
    --nav-line: rgba(241, 241, 241, .08);
    /* The old names are filled and then written on in white (#fff hard-coded in the pages), so at
       night they take a grey a white label can sit on, not Bone's white pill. Bone's own buttons
       use --bn-primary and get the white pill with dark ink. */
    --brand: #2B2B2B; --cbp-blue-fill: #2B2B2B; --cbp-blue-fill-hi: #353535; --cbp-navy: #2B2B2B;
    --cbp-blue: #F1F1F1; --cbp-sky: #F1F1F1;
    color-scheme: dark;
}
html.bone[data-theme="dark"] .calc-veh label img { filter: invert(1) brightness(1.4); }
html.bone[data-theme="dark"] .calc-veh input:checked + label img { filter: none; }

/* ---------- 1. Base ---------- */
html.bone body, html.bone .dealer-shell, html.bone .dealer-sidebar, html.bone .dealer-main,
html.bone .cbp-nav, html.bone .ft-header-section, html.bone button, html.bone input, html.bone select,
html.bone textarea, html.bone h1, html.bone h2, html.bone h3, html.bone h4, html.bone h5, html.bone h6,
html.bone .lp-article, html.bone .ql-editor, html.bone .modal, html.bone .auth-shell {
    font-family: var(--bn-font) !important;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* The page colour lives on <html>, so the drifting blobs (z-index -1) show between it and the content. */
html.bone { background: var(--bn-bg); }
html.bone body { background: transparent !important; color: var(--bn-text2); font-weight: 600; letter-spacing: 0; }
html.bone body#foo { background: transparent !important; }
/* Headings keep the colour their page gives them: some sit on navy (Contact, the hero bands). */
html.bone h1, html.bone h2, html.bone h3, html.bone h4 { letter-spacing: -.3px; }
html.bone ::selection { background: rgba(14, 44, 79, .28); color: inherit; }
html.bone[data-theme="dark"] ::selection { background: rgba(241, 241, 241, .28); }
html.bone :focus-visible { outline: 2.5px solid var(--bn-focus) !important; outline-offset: 2px; }
html.bone .bn-num, html.bone .cbp-deposit-amt, html.bone .dp-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
html.bone ::-webkit-scrollbar { width: 10px; height: 10px; }
html.bone ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bn-muted) 50%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html.bone ::-webkit-scrollbar-track { background: transparent; }
/* Bone is flat: the topographic texture and the drifting light stop at the chrome. */
html.bone .cbp-chrome-lit::before, html.bone .cbp-chrome-lit::after, html.bone .cbp-footer::after { display: none !important; }
/* Georgian: uppercase turns Mkhedruli into Mtavruli capitals, so section titles and labels
   stay as written (app inventory §1.6: uppercase only in EN and RU). */
html.bone:lang(ka) body * { text-transform: none !important; }
/* A Georgian rail label is never cut with "…": it gets a line more instead (app: FitWords). */
html.bone:lang(ka) .dealer-sidebar .ds-link { height: auto !important; min-height: 48px; padding-top: 7px !important; padding-bottom: 7px !important; font-size: 14px !important; }
html.bone:lang(ka) .dealer-sidebar .ds-lbl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
html.bone:lang(ka) .ds-group { letter-spacing: 0 !important; }
/* Georgian ledger labels are one long word each: the ledger takes the cell's full width and the
   buttons go under it, so no word is broken and no figure is covered. */
html.bone:lang(ka) .mcw .mc-pay { grid-template-columns: minmax(0, 1fr) !important; }
html.bone:lang(ka) .mcw .mc-pay > * { grid-column: 1 / -1 !important; }
html.bone:lang(ka) .pay-ledger { grid-template-columns: minmax(min-content, 1fr) auto !important; }


/* ---------- 2. Motion primitives ---------- */
@keyframes bn-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bn-rise-lg { from { opacity: 0; transform: translateY(32px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bn-pop { from { transform: scale(.92); } to { transform: scale(1); } }
@keyframes bn-drop { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bn-sheet { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bn-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes bn-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 45, 72, .55); } 100% { box-shadow: 0 0 0 12px rgba(217, 45, 72, 0); } }
@keyframes bn-sel-in { from { clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes bn-toast-in { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }
@keyframes bn-spin { to { transform: rotate(360deg); } }
@keyframes bn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bn-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

@media (prefers-reduced-motion: no-preference) {
    /* JS adds these: an entrance for every block on first paint, staggered 40 ms. */
    html.bone .bn-enter { animation: bn-rise var(--bn-slow) var(--bn-ease) backwards; animation-delay: calc(var(--bn-i, 0) * 40ms + 60ms); }
    /* Below the fold: waits for the scroll, then rises. */
    html.bone.bn-js .bn-wait { opacity: 0; transform: translateY(22px) scale(.985); }
    html.bone.bn-js .bn-wait.bn-in { opacity: 1; transform: none;
        transition: opacity .52s var(--bn-ease), transform .7s var(--bn-release); transition-delay: calc(var(--bn-i, 0) * 50ms); }
    html.bone .bn-popped { animation: bn-pop .42s var(--bn-pop); }
    /* Press: everything tappable sinks under the finger and springs back. */
    html.bone a.bn-press, html.bone button.bn-press, html.bone .bn-press {
        transition: transform .36s var(--bn-release), filter var(--bn-fast), box-shadow var(--bn-base), background-color var(--bn-base), color var(--bn-base); }
    html.bone .bn-press:active { transform: scale(.965) !important; transition-duration: .12s !important; filter: brightness(.97); }
}

/* Cross-page: the rail and bar stay, the page glides; the chosen rail item travels. */
@view-transition { navigation: auto; }
html.bone .dealer-sidebar { view-transition-name: bn-rail; }
html.bone .cbp-nav { view-transition-name: bn-bar; }
html.bone .dealer-sidebar .ds-link.active { view-transition-name: bn-rail-sel; }
html.bone.bn-vt-theme .dealer-sidebar, html.bone.bn-vt-theme .cbp-nav,
html.bone.bn-vt-theme .dealer-sidebar .ds-link.active { view-transition-name: none; }
::view-transition-group(bn-rail), ::view-transition-group(bn-bar) { animation-duration: 0s; }
::view-transition-old(bn-rail), ::view-transition-old(bn-bar) { display: none; }
::view-transition-new(bn-rail), ::view-transition-new(bn-bar) { animation: none; }
::view-transition-group(bn-rail-sel) { animation-duration: .52s; animation-timing-function: linear(0, .107, .316, .528, .701, .827, .91, .961, .988, 1.002, 1.007, 1.008, 1.007, 1.005, 1.003, 1.002, 1); }
::view-transition-old(root) { animation: bn-vt-out .2s cubic-bezier(.3, 0, .8, .15) both; }
::view-transition-new(root) { animation: bn-vt-in .46s cubic-bezier(.05, .7, .1, 1) both; }
@keyframes bn-vt-out { to { opacity: 0; transform: translateY(-8px) scale(.995); } }
@keyframes bn-vt-in { from { opacity: 0; transform: translateY(14px) scale(.995); } }
html.bone.bn-vt-theme::view-transition-old(root), html.bone.bn-vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html.bone *, html.bone *::before, html.bone *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 3. Top bar ---------- */
/* Controls on the bar read their colours from these, so one set of rules serves the bone
   bar (dealer, desktop) and the navy bar (public pages, phones). */
html.bone .cbp-nav {
    --bar-bg: var(--bn-rail); --bar-ink: var(--bn-on-strong); --bar-ctl: rgba(241, 239, 234, .10); --bar-ctl-hi: rgba(241, 239, 234, .18);
    --bar-ctl-ink: var(--bn-on-strong); --bar-accent: var(--bn-on-strong);
    height: 76px; background-color: var(--bar-bg) !important; background-image: none !important; border-bottom: 0;
    box-shadow: none; transition: height var(--bn-base) var(--bn-ease), box-shadow var(--bn-base), background-color var(--bn-base), left var(--bn-glide-t) var(--bn-glide);
}
html.bone[data-theme="dark"] .cbp-nav { --bar-ctl: rgba(241, 241, 241, .07); --bar-ctl-hi: rgba(241, 241, 241, .13); }
html.bone .cbp-nav.scrolled { height: 68px; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .45); }
html.bone .cbp-nav-inner { max-width: 1320px; padding: 0 28px; gap: 14px; }
html.bone .cbp-nav .cbp-logo:hover { transform: none; }
html.bone .cbp-nav .cbp-links a.cbp-link, html.bone .cbp-nav .cbp-links a.cbp-link:visited {
    color: var(--bar-ink) !important; font-size: 15px; font-weight: 700; padding: 0 16px; height: 44px; display: inline-flex; align-items: center; border-radius: 14px; }
html.bone .cbp-nav .cbp-links a.cbp-link:hover { background: var(--bar-ctl); }
html.bone .cbp-nav .cbp-links a.cbp-link.active { background: var(--bar-ctl); }
html.bone .cbp-link::after { background: var(--bn-on-strong-hot); bottom: 6px; height: 2.5px; }
html.bone .cbp-actions { gap: 10px; }
/* Login is green (owner, 2026-10-23), the wallet's own green; white on it passes AA. Register stays hot. */
html.bone .cbp-nav .cbp-login { background: var(--bn-go) !important; color: #FFFFFF !important; box-shadow: none; border-radius: 16px; height: 48px; padding: 0 20px; font-weight: 800; font-size: 15px; }
html.bone .cbp-nav .cbp-login:hover { background: var(--bn-go-hi) !important; transform: none; filter: none; }
html.bone .cbp-nav .cbp-cta { background: var(--bn-hot); color: var(--bn-on-hot) !important; box-shadow: none; border-radius: 16px; height: 48px; padding: 0 22px; font-weight: 800; font-size: 15px; }
html.bone .cbp-nav .cbp-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Deposit: a pill with the wallet, the figure, and the round "+". */
html.bone .cbp-nav .cbp-deposit { height: 48px; min-width: 0; padding: 0 8px 0 16px; gap: 10px; border: 0; border-radius: 999px;
    background: var(--bar-ctl); color: var(--bar-ctl-ink) !important; font-size: 15px; font-weight: 800; box-shadow: none; }
html.bone .cbp-nav .cbp-deposit:hover { background: var(--bar-ctl-hi); transform: none; box-shadow: none; }
html.bone .cbp-nav .cbp-deposit svg { width: 20px; height: 20px; opacity: 1; color: var(--bar-accent); }
html.bone .cbp-nav .cbp-deposit-amt { color: var(--bar-ctl-ink) !important; }
html.bone .cbp-nav .cbp-deposit::after { width: 32px !important; height: 32px !important; border-radius: 999px !important; font-size: 20px !important; font-weight: 800 !important;
    background: var(--bar-accent) !important; color: var(--bar-bg) !important; box-shadow: none !important; margin: 0 !important; }
html.bone .cbp-nav .cbp-bell, html.bone .cbp-nav .cbp-theme-toggle {
    width: 48px !important; height: 48px !important; border: 0 !important; border-radius: 16px !important;
    background: var(--bar-ctl) !important; color: var(--bar-ctl-ink) !important; box-shadow: none !important; }
html.bone .cbp-nav .cbp-bell:hover, html.bone .cbp-nav .cbp-theme-toggle:hover { background: var(--bar-ctl-hi) !important; transform: none; }
html.bone .cbp-nav .cbp-bell svg, html.bone .cbp-nav .cbp-theme-toggle svg { width: 22px; height: 22px; }
html.bone .cbp-bell-badge { background: var(--bn-hot) !important; box-shadow: 0 0 0 2.5px var(--bar-bg, var(--bn-bg)) !important; top: 6px !important; right: 6px !important;
    min-width: 19px; height: 19px; font-size: 11px; font-weight: 900; }
html.bone .cbp-bell-badge:not([hidden]) { animation: bn-pop .42s var(--bn-pop), bn-pulse 1.6s var(--bn-ease) .5s 3; }
html.bone .cbp-nav .cbp-lang { height: 48px; padding: 0 14px; border: 0 !important; border-radius: 16px; background: var(--bar-ctl) !important;
    color: var(--bar-ctl-ink) !important; font-size: 14px; font-weight: 800; }
html.bone .cbp-nav .cbp-lang:hover { background: var(--bar-ctl-hi) !important; }
html.bone .cbp-nav .cbp-user-btn { height: 48px; padding: 0 14px 0 6px; gap: 10px; border: 0; border-radius: 999px; background: var(--bar-ctl); color: var(--bar-ctl-ink); }
html.bone .cbp-nav .cbp-user-btn:hover { background: var(--bar-ctl-hi); }
html.bone .cbp-nav .cbp-user-btn svg { stroke: currentColor; }
html.bone .cbp-avatar { width: 36px; height: 36px; background: var(--bar-accent, var(--bn-strong)) !important; color: var(--bar-bg, var(--bn-on-strong)) !important; font-weight: 900; font-size: 14px; }
html.bone .cbp-user-name { font-size: 15px; font-weight: 800; }
/* Menus that drop from the bar. */
html.bone .cbp-menu, html.bone .cbp-langmenu, html.bone[data-theme="dark"] .cbp-langmenu {
    background: var(--bn-raised) !important; border: 0 !important; border-radius: 20px !important; box-shadow: var(--bn-float) !important; padding: 8px !important; min-width: 230px; }
html.bone .cbp-menu a, html.bone .cbp-langopt, html.bone[data-theme="dark"] .cbp-langopt {
    color: var(--bn-text) !important; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; }
html.bone .cbp-menu a:hover, html.bone .cbp-langopt:hover, html.bone[data-theme="dark"] .cbp-langopt:hover { background: var(--bn-tile) !important; color: var(--bn-text) !important; }
html.bone .cbp-menu a svg { stroke: var(--bn-navy-ink); opacity: .9; }
html.bone .cbp-menu-sep { background: var(--bn-line); }
html.bone .cbp-menu a.cbp-logout { color: var(--bn-bad) !important; }
html.bone .cbp-menu a.cbp-logout:hover { background: var(--bn-bad-bg) !important; }
html.bone .cbp-langopt-abbr, html.bone[data-theme="dark"] .cbp-langopt-abbr { color: var(--bn-muted) !important; }
html.bone .cbp-langopt.is-active { background: var(--bn-tile); }
html.bone .cbp-langopt svg { stroke: var(--bn-navy-ink); }
@media (prefers-reduced-motion: no-preference) {
    html.bone .cbp-user.open .cbp-menu, html.bone .cbp-langwrap.open .cbp-langmenu { animation: bn-drop var(--bn-base) var(--bn-ease) both; transform-origin: top right; }
}

/* The dealer cabinet on a wide window: the bar sits on the bone page beside the rail, and
   carries only the account controls (D-Shell). */
@media (min-width: 992px) {
    html.bone body.dealer-mode { --bn-side: 248px; }
    html.bone body.dealer-mode:has(.dealer-shell.nav-collapsed) { --bn-side: 88px; }
    html.bone body.dealer-mode .cbp-nav {
        --bar-bg: var(--bn-bg); --bar-ink: var(--bn-text); --bar-ctl: var(--bn-card); --bar-ctl-hi: color-mix(in srgb, var(--bn-card) 70%, var(--bn-line));
        --bar-ctl-ink: var(--bn-text); --bar-accent: var(--bn-navy-ink);
        left: var(--bn-side); background-color: color-mix(in srgb, var(--bn-bg) 88%, transparent) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); }
    html.bone body.dealer-mode .cbp-nav.scrolled { box-shadow: 0 1px 0 var(--bn-line); }
    html.bone body.dealer-mode .cbp-nav-inner { max-width: none; padding: 0 32px; }
    html.bone body.dealer-mode .cbp-nav .cbp-logo { display: none; }
    html.bone body.dealer-mode .cbp-nav .cbp-links a.cbp-link-rightgroup { display: none; }
    html.bone body.dealer-mode .cbp-nav .cbp-links a.cbp-link { color: var(--bn-text2) !important; font-size: 14.5px; }
    html.bone body.dealer-mode .cbp-nav .cbp-links a.cbp-link:hover, html.bone body.dealer-mode .cbp-nav .cbp-links a.cbp-link.active { color: var(--bn-text) !important; background: var(--bn-card); }
    html.bone body.dealer-mode .cbp-nav .cbp-link::after { display: none; }
    html.bone body.dealer-mode .cbp-actions { margin-left: auto; }
}

/* ---------- 4. The rail ---------- */
html.bone .dealer-shell { --side-w: 248px; background: transparent !important; }
html.bone .dealer-shell.nav-collapsed { --side-w: 88px; }
html.bone .dealer-sidebar { padding-top: 0 !important; background-color: var(--bn-rail) !important; background-image: none !important; border-right: 0 !important;
    transition: width var(--bn-glide-t) var(--bn-glide); scrollbar-width: thin; scrollbar-color: rgba(241, 239, 234, .2) transparent; }
html.bone .dealer-main { padding-top: var(--bn-bar-h) !important; background: transparent !important; transition: margin-left var(--bn-glide-t) var(--bn-glide); }
html.bone .ds-top { align-items: center; justify-content: space-between; gap: 8px; min-height: 76px; padding: 14px 14px 6px 24px !important; }
html.bone .ds-top { padding-left: 18px !important; }
html.bone .bn-logo { display: inline-flex; align-items: center; min-width: 0; text-decoration: none !important; transition: transform .42s var(--bn-release); }
html.bone .bn-logo:hover { transform: translateY(-1px); }
html.bone .bn-logo .cbp-brand-mark { transition: transform .6s var(--bn-release); }
html.bone .bn-logo:hover .cbp-brand-mark { transform: rotate(-10deg); }
html.bone .bn-logo-mark { display: none; }
html.bone .nav-collapsed .ds-top { flex-direction: column; gap: 10px; }
html.bone .nav-collapsed .bn-logo-full { display: none; }
html.bone .nav-collapsed .bn-logo-mark { display: inline-flex; }
html.bone .ds-toggle { width: 40px !important; height: 40px !important; border-radius: 14px !important; color: var(--bn-rail-dim) !important; }
html.bone .ds-toggle:hover { background: var(--bn-rail-hover) !important; color: var(--bn-rail-ink) !important; }
html.bone .nav-collapsed .ds-top { justify-content: center; padding: 18px 0 6px !important; }
html.bone .ds-nav { position: relative; gap: 4px !important; padding: 4px 14px 28px !important; }
html.bone .ds-group { padding: 16px 14px 6px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .6px !important; color: var(--bn-rail-dim) !important; }
html.bone .dealer-sidebar .ds-link, html.bone .dealer-sidebar .ds-link:link, html.bone .dealer-sidebar .ds-link:visited {
    position: relative; z-index: 1; height: 48px; padding: 0 14px; gap: 14px; border-radius: 14px; font-size: 15px; font-weight: 700; letter-spacing: 0;
    color: var(--bn-rail-ink) !important; background: transparent !important; box-shadow: none !important;
    transition: color var(--bn-fast), background-color var(--bn-base), transform .36s var(--bn-release); }
html.bone:not(.bn-js) .dealer-sidebar .ds-link:hover { background: var(--bn-rail-hover) !important; }
html.bone .dealer-sidebar .ds-link:hover, html.bone .dealer-sidebar .ds-link:focus { color: #FFFFFF !important; }
html.bone .dealer-sidebar .ds-link:active { transform: scale(.97); }
html.bone .dealer-sidebar .ds-link.active, html.bone .dealer-sidebar .ds-link.active:link,
html.bone .dealer-sidebar .ds-link.active:visited, html.bone .dealer-sidebar .ds-link.active:hover {
    background: var(--bn-rail-sel) !important; color: var(--bn-rail-sel-ink) !important; }
html.bone .dealer-sidebar .ds-link.active .ds-ic { color: var(--bn-rail-sel-ink) !important; transform: none; }
html.bone .dealer-sidebar .ds-link .ds-lbl, html.bone[data-theme="dark"] .dealer-sidebar .ds-link .ds-lbl { color: inherit !important; }
html.bone .dealer-sidebar .ds-link.active .ds-ic.ds-mark { color: #FFFFFF !important; }
html.bone .dealer-sidebar .ds-ic { flex: 0 0 22px; width: 22px; height: 22px; color: inherit; opacity: .92; }
html.bone .dealer-sidebar .ds-ic svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; stroke-width: 1.8; }
html.bone .dealer-sidebar .ds-link:hover .ds-ic { color: inherit; }
html.bone .dealer-sidebar .ds-ic.ds-mark { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 8px !important; box-shadow: none !important;
    font-family: var(--bn-font) !important; font-weight: 900; color: #FFFFFF !important; opacity: 1; letter-spacing: 0; }
html.bone .dealer-sidebar .ds-mark-cp { background: var(--bn-copart) !important; font-size: 12px !important; }
html.bone .dealer-sidebar .ds-mark-ia { background: var(--bn-iaai) !important; font-size: 10px !important; }
html.bone .dealer-sidebar .ds-link-cp .ds-lbl, html.bone .dealer-sidebar .ds-link-ia .ds-lbl { font-weight: 700; color: inherit !important; }
html.bone .ds-badge { background: var(--bn-hot) !important; font-weight: 900; }
html.bone .nav-collapsed .ds-link { justify-content: center; padding: 0 !important; }
/* The glide: one soft pill follows the pointer down the rail on the glide spring. */
html.bone .bn-rail-pill { position: absolute; left: 14px; right: 14px; top: 0; height: 48px; border-radius: 14px; background: var(--bn-rail-hover);
    opacity: 0; pointer-events: none; z-index: 0; transform: translateY(var(--bn-y, 0));
    transition: transform var(--bn-glide-t) var(--bn-glide), height var(--bn-base) var(--bn-ease), opacity var(--bn-base) var(--bn-ease); }
html.bone .bn-rail-pill.on { opacity: 1; }

/* ---------- 5. Pages: heads, cards, figures ---------- */
html.bone .dealer-page { padding: 8px 32px 56px; max-width: 1320px; }
html.bone .dp-head { margin-bottom: 22px; gap: 16px; }
html.bone .dp-title, html.bone .dealer-main h1.dp-title { font-size: 34px !important; font-weight: 900 !important; letter-spacing: -.8px; line-height: 1.1; color: var(--bn-text) !important; }
html.bone .dp-sub { font-size: 15px; font-weight: 600; color: var(--bn-text2) !important; margin-top: 6px; }
html.bone .dp-card, html.bone .dp-empty, html.bone .dp-tablewrap, html.bone .wl-card {
    background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-l) !important; box-shadow: none !important; color: var(--bn-text2); }
html.bone .dp-card-title { font-size: 17px; font-weight: 900; color: var(--bn-text) !important; }
html.bone .dp-sub-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--bn-muted) !important; }
html.bone .dp-kpi { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; padding: 14px 18px; }
html.bone .dp-kpi .k-lbl { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--bn-muted) !important; }
html.bone .dp-kpi .k-val { font-size: 26px; font-weight: 900; letter-spacing: -.5px; color: var(--bn-text) !important; font-variant-numeric: tabular-nums; }
html.bone .dp-kpi .k-val.accent { color: var(--bn-navy-ink) !important; }
html.bone .dp-kpi .k-sub { color: var(--bn-muted) !important; }
html.bone .dp-empty { padding: 48px 28px; font-size: 16px; font-weight: 600; color: var(--bn-text2) !important; }
html.bone .dp-link, html.bone .dp-empty a, html.bone .wl-open { color: var(--bn-navy-ink) !important; font-weight: 800; }
html.bone .wl-card { overflow: hidden; transition: transform .36s var(--bn-release), box-shadow var(--bn-base); }
html.bone .wl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -22px rgba(14, 44, 79, .5) !important; }
html.bone .wl-thumb { background: var(--bn-tile); }
html.bone .wl-name { color: var(--bn-text); font-weight: 900; font-size: 15px; }
html.bone .wl-lot { color: var(--bn-muted); }

/* Tables (.dp-table and every #myTable list) */
html.bone .dp-table thead th, html.bone .dealer-main #myTable thead th {
    background: transparent !important; color: var(--bn-muted) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .5px;
    border: 0 !important; border-bottom: 1px solid var(--bn-line) !important; padding: 14px 14px !important; }
html.bone .dp-table tbody td, html.bone .dealer-main #myTable tbody td {
    border-bottom: 1px solid var(--bn-hair) !important; color: var(--bn-text2); font-size: 14.5px; padding: 14px 14px !important; background: transparent; }
html.bone .dp-table tbody tr, html.bone .dealer-main #myTable tbody tr { transition: background-color .18s; }
html.bone .dp-table tbody tr:hover, html.bone .dealer-main #myTable tbody tr:hover { background: var(--bn-hover) !important; box-shadow: none !important; }
html.bone .dp-veh { color: var(--bn-text) !important; font-weight: 800; }
html.bone .dealer-main table.table, html.bone .dealer-main table.dataTable { color: var(--bn-text2); }
html.bone .dealer-main .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--bn-hair); }

/* Badges: colour and words, never colour alone. */
html.bone .b-badge, html.bone .dealer-main .true, html.bone .dealer-main .false {
    font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; line-height: 1.15; }
html.bone .b-badge.b-ok, html.bone .dealer-main .true { background: var(--bn-good-bg) !important; color: var(--bn-good) !important; }
html.bone .b-badge.b-bad, html.bone .dealer-main .false { background: var(--bn-bad-bg) !important; color: var(--bn-bad) !important; }
html.bone .b-badge.b-warn { background: var(--bn-warn-bg) !important; color: var(--bn-warn) !important; }
html.bone .b-badge.b-live { background: var(--bn-info-bg) !important; color: var(--bn-info) !important; }
html.bone .b-badge.b-muted { background: var(--bn-tile) !important; color: var(--bn-text2) !important; }

/* Buttons: strong (primary), accent (the one action), soft, outline, danger. */
html.bone .dp-btn, html.bone .dealer-main .btn, html.bone .modal .btn, html.bone .auth-btn, html.bone .cbp-fund-btn {
    min-height: 48px; padding: 0 22px; border-radius: var(--bn-r-m) !important; font-size: 15.5px !important; font-weight: 800 !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none !important; letter-spacing: 0;
    transition: transform .36s var(--bn-release), filter var(--bn-fast), background-color var(--bn-base), color var(--bn-base); }
html.bone .dp-btn:active, html.bone .dealer-main .btn:active, html.bone .modal .btn:active, html.bone .auth-btn:active, html.bone .cbp-fund-btn:active { transform: scale(.965); }
html.bone .dp-btn-sm, html.bone .dealer-main .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px !important; border-radius: var(--bn-r-s) !important; }
html.bone .dp-btn-primary, html.bone .dealer-main .btn-primary, html.bone .modal .btn-primary, html.bone .auth-btn, html.bone .cbp-fund-btn {
    background: var(--bn-primary) !important; border-color: transparent !important; color: var(--bn-on-primary) !important; }
html.bone .dp-btn-primary:hover, html.bone .dealer-main .btn-primary:hover, html.bone .modal .btn-primary:hover, html.bone .auth-btn:hover, html.bone .cbp-fund-btn:hover {
    filter: brightness(1.12); transform: translateY(-1px); }
html.bone .dp-btn-ghost, html.bone .dealer-main .btn-light, html.bone .dealer-main .btn-secondary, html.bone .modal .btn-light, html.bone .modal .btn-secondary {
    background: var(--bn-tile) !important; color: var(--bn-navy-ink) !important; border-color: transparent !important; }
html.bone .dp-btn-ghost:hover, html.bone .dealer-main .btn-light:hover, html.bone .dealer-main .btn-secondary:hover { background: color-mix(in srgb, var(--bn-tile) 80%, var(--bn-line)) !important; }
html.bone .dp-btn-danger, html.bone .dealer-main .btn-danger, html.bone .modal .btn-danger { background: var(--bn-bad-bg) !important; color: var(--bn-bad) !important; border-color: transparent !important; }
html.bone .dealer-main .btn-success, html.bone .modal .btn-success { background: var(--bn-good-fill) !important; color: #FFFFFF !important; border-color: transparent !important; }
html.bone .dealer-main .btn-outline-primary, html.bone .dealer-main .btn-outline-secondary, html.bone .modal .btn-outline-primary {
    background: transparent !important; color: var(--bn-navy-ink) !important; border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--bn-line) !important; }
html.bone .bn-hot, html.bone .mc-btn--pay { background: var(--bn-hot) !important; color: var(--bn-on-hot) !important; }

/* Fields */
html.bone .dp-formcard input:not([type=file]):not([type=checkbox]):not([type=radio]), html.bone .dp-formcard select, html.bone .dp-formcard textarea,
html.bone .dealer-main .form-control, html.bone .dealer-main .form-select, html.bone .modal .form-control, html.bone .modal .form-select,
html.bone .auth-input, html.bone .cbp-input {
    background-color: var(--bn-tile) !important; color: var(--bn-text) !important; border: 0 !important; border-radius: var(--bn-r-s) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-line) 70%, transparent) !important; min-height: 50px; padding: 12px 16px;
    font-size: 16px !important; font-weight: 700; transition: box-shadow var(--bn-base) var(--bn-ease), background-color var(--bn-base); }
html.bone .dp-formcard textarea, html.bone .dealer-main textarea.form-control { min-height: 110px; }
html.bone .dp-formcard input:focus, html.bone .dp-formcard select:focus, html.bone .dp-formcard textarea:focus,
html.bone .dealer-main .form-control:focus, html.bone .dealer-main .form-select:focus, html.bone .modal .form-control:focus,
html.bone .auth-input:focus, html.bone .cbp-input:focus {
    box-shadow: inset 0 0 0 2px var(--bn-navy-ink), 0 0 0 4px color-mix(in srgb, var(--bn-focus) 18%, transparent) !important; outline: none; }
html.bone .dp-formcard input::placeholder, html.bone .dealer-main .form-control::placeholder, html.bone .auth-input::placeholder, html.bone .cbp-input::placeholder { color: var(--bn-muted); font-weight: 600; }
html.bone .dp-formcard label, html.bone .dp-field > label, html.bone .auth-field > label, html.bone .cbp-field label, html.bone .dealer-main .form-label {
    font-size: 13px; font-weight: 800; color: var(--bn-text2) !important; letter-spacing: 0; }
html.bone .dp-formcard input[type=file] { background: var(--bn-tile); border: 1.5px dashed var(--bn-line); border-radius: var(--bn-r-m); color: var(--bn-text2); }
html.bone .dp-err, html.bone .cbp-err { color: var(--bn-bad) !important; font-weight: 700; font-size: 13px; }
html.bone .dp-hint { color: var(--bn-muted) !important; font-size: 13px; }
/* Notices (owner, 2026-10-22: "the red warning looks off"): a warm tinted panel, a round mark at the
   left saying what kind it is, the message in the page's own ink. The colour lives in the mark and a
   soft edge, not in a block of pink with red type. Lists inside lose their bullets and indent. */
html.bone .dp-alert, html.bone .auth-alert, html.bone .alert { --bn-al: var(--bn-info); --bn-al-bg: var(--bn-info-bg); --bn-al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");
    position: relative; border: 0 !important; border-radius: 18px !important; padding: 13px 16px 13px 50px !important; margin-bottom: 16px;
    background: var(--bn-al-bg) !important; color: var(--bn-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-al) 22%, transparent);
    font-size: 14px !important; font-weight: 650; line-height: 1.45 !important; text-align: left; }
html.bone .dp-alert::before, html.bone .auth-alert::before, html.bone .alert::before { content: ''; position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 999px;
    background: var(--bn-al-mark) center / 14px no-repeat, var(--bn-al); }
html.bone .dp-alert ul, html.bone .auth-alert ul, html.bone .alert ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html.bone .dp-alert li + li, html.bone .auth-alert li + li { margin-top: 4px; }
html.bone .dp-alert a, html.bone .auth-alert a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 800; }
html.bone .dp-alert-err, html.bone .auth-alert-err, html.bone .alert-danger { --bn-al: var(--bn-hot); --bn-al-bg: #F6E3DD; --bn-al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
html.bone .dp-alert-ok, html.bone .auth-alert-ok, html.bone .alert-success { --bn-al: var(--bn-good-fill); --bn-al-bg: var(--bn-good-bg); --bn-al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
html.bone .dp-alert-info, html.bone .alert-info { --bn-al: var(--bn-info); --bn-al-bg: var(--bn-info-bg); }
html.bone[data-theme="dark"] .dp-alert-err, html.bone[data-theme="dark"] .auth-alert-err, html.bone[data-theme="dark"] .alert-danger { --bn-al-bg: rgba(255, 142, 158, .12); }
html.bone[data-theme="dark"] .dp-alert-ok, html.bone[data-theme="dark"] .auth-alert-ok, html.bone[data-theme="dark"] .alert-success { --bn-al-bg: rgba(116, 211, 160, .10); }

/* Every wait is a designed state: a skeleton sweeps after 220 ms. */
html.bone .dp-skel, html.bone .mcp-skel, html.bone .tt-skel, html.bone .skeleton {
    background: linear-gradient(90deg, var(--bn-skel) 30%, var(--bn-skel-hi) 50%, var(--bn-skel) 70%) !important; background-size: 220% 100% !important;
    animation: bn-sweep 1.4s linear infinite !important; border-radius: 12px; }

/* DataTables controls */
html.bone .dealer-main .dt-container input.dt-input, html.bone .dealer-main .dt-search input, html.bone .dealer-main .dataTables_filter input {
    height: 52px !important; border: 0 !important; border-radius: var(--bn-r-m) !important; background-color: var(--bn-card) !important; color: var(--bn-text) !important;
    font-size: 16px !important; font-weight: 700; padding-left: 48px !important; box-shadow: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23625C53' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: 16px center !important; }
html.bone[data-theme="dark"] .dealer-main .dt-container input.dt-input, html.bone[data-theme="dark"] .dealer-main .dt-search input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important; }
html.bone .dealer-main .dt-container select.dt-input, html.bone .dealer-main .dt-length select, html.bone .dealer-main .dataTables_length select {
    height: 52px !important; border: 0 !important; border-radius: var(--bn-r-m) !important; background-color: var(--bn-card) !important; color: var(--bn-text) !important;
    font-size: 16px !important; font-weight: 800; padding: 0 14px !important; box-shadow: none !important; background-image: none; }
html.bone .dealer-main .dt-container input.dt-input:focus, html.bone .dealer-main .dt-search input:focus { box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; }
html.bone .dealer-main .dt-info, html.bone .dealer-main .dataTables_info { color: var(--bn-muted) !important; font-size: 13.5px; font-weight: 700; }
html.bone .dealer-main .dt-paging .dt-paging-button, html.bone .dealer-main .dataTables_paginate .paginate_button {
    min-width: 44px; height: 44px; padding: 0 12px !important; border: 0 !important; border-radius: var(--bn-r-s) !important; margin: 0 3px;
    background: var(--bn-card) !important; color: var(--bn-text) !important; font-weight: 800; box-shadow: none !important; }
html.bone .dealer-main .dt-paging .dt-paging-button:hover, html.bone .dealer-main .dataTables_paginate .paginate_button:hover { background: var(--bn-tile) !important; color: var(--bn-text) !important; }
html.bone .dealer-main .dt-paging .dt-paging-button.current, html.bone .dealer-main .dataTables_paginate .paginate_button.current {
    background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
html.bone .dealer-main .dt-paging .dt-paging-button.disabled { opacity: .45; }
/* The night rules for these carry div.dt-container; matching that weight is what lets ours win. */
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button { background: var(--bn-card) !important; color: var(--bn-text) !important; border: 0 !important; }
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.current { background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
html.bone .dealer-main div.dt-container input.dt-input, html.bone .dealer-main div.dt-container select.dt-input {
    background-color: var(--bn-card) !important; color: var(--bn-text) !important; border: 0 !important; }

/* Bootstrap modals */
html.bone .modal-content { background: var(--bn-raised) !important; color: var(--bn-text2); border: 0 !important; border-radius: var(--bn-r-l) !important; box-shadow: var(--bn-float) !important; overflow: hidden; }
html.bone .modal-header { border-bottom: 1px solid var(--bn-line) !important; padding: 20px 24px; background: transparent !important; }
html.bone .modal-title { font-size: 20px; font-weight: 900; color: var(--bn-text) !important; }
html.bone .modal-body { padding: 22px 24px; }
html.bone .modal-footer { border-top: 1px solid var(--bn-line) !important; padding: 16px 24px; gap: 8px; }
html.bone .modal .close, html.bone .modal .btn-close { width: 44px; height: 44px; border-radius: var(--bn-r-s); background-color: var(--bn-tile); opacity: 1; color: var(--bn-text); text-shadow: none; }
html.bone .modal-backdrop.show { background: #000; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
    html.bone .modal.fade .modal-dialog { transform: translateY(40px) scale(.98); opacity: 0; transition: transform .48s var(--bn-decel), opacity .3s var(--bn-ease); }
    html.bone .modal.show .modal-dialog { transform: none; opacity: 1; }
}

/* ---------- 6. My Cars (dashboard2) ---------- */
html.bone .mcw, html.bone .mc-modal, html.bone .mc-filterchip, html.bone .total-due-pill--team {
    --mc-surface: var(--bn-card); --mc-soft: var(--bn-tile); --mc-line: var(--bn-line); --mc-hair: var(--bn-hair);
    --mc-ink: var(--bn-text); --mc-body: var(--bn-text2); --mc-muted: var(--bn-muted);
    --mc-brand: var(--bn-navy-ink); --mc-brand-bg: var(--bn-tile);
    --mc-amber: var(--bn-warn); --mc-amber-bg: var(--bn-warn-bg); --mc-amber-line: var(--bn-warn-bg); --mc-amber-ic: var(--bn-warn-bg); --mc-orange: var(--bn-warn);
    --mc-green: var(--bn-good); --mc-green-bg: var(--bn-good-bg); --mc-green-line: var(--bn-good-bg);
    --mc-red: var(--bn-bad); --mc-red-bg: var(--bn-bad-bg); --mc-red-line: var(--bn-bad-bg);
    --mc-dark: var(--bn-text); --mc-input: var(--bn-tile); --mc-input-line: transparent;
    --mc-sh: none; --mc-sh-hi: 0 18px 34px -24px rgba(14, 44, 79, .55); --mc-ease: var(--bn-ease);
}
html.bone[data-theme="dark"] .mcw { --mc-sh-hi: 0 18px 34px -20px rgba(0, 0, 0, .8); }
/* The one strong card: deposit and both bid limits, on navy (night: grey, lit from the corner). */
html.bone .bidlimit-card { background: linear-gradient(135deg, var(--bn-strong-glow), var(--bn-strong)) !important; border: 0 !important; border-radius: var(--bn-r-l) !important;
    padding: 26px 28px !important; gap: 22px !important; color: var(--bn-on-strong); box-shadow: 0 18px 36px -26px rgba(14, 44, 79, .7) !important; position: relative; overflow: hidden; }
html.bone[data-theme="dark"] .bidlimit-card { box-shadow: none !important; }
html.bone .bidlimit-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(520px 220px at 12% 0%, rgba(255, 255, 255, .07), transparent 70%); }
html.bone .bidlimit-card .bl-deposit { border-right: 1px solid rgba(241, 239, 234, .14) !important; padding-right: 26px !important; }
html.bone .bidlimit-card .bl-lbl { color: var(--bn-on-strong-muted) !important; font-size: 12.5px; letter-spacing: .6px; }
html.bone .bidlimit-card .bl-val, html.bone .bidlimit-card .bl-val.accent { color: var(--bn-on-strong) !important; font-size: 30px !important; font-weight: 900 !important; letter-spacing: -.8px;
    line-height: 1.05; font-variant-numeric: tabular-nums; }
html.bone .bidlimit-card .bl-deposit .bl-val { font-size: 44px !important; letter-spacing: -1.4px; }
html.bone .bidlimit-card .bl-sub, html.bone .bidlimit-card .bl-hold-sub { color: var(--bn-on-strong-muted) !important; font-size: 13px; font-weight: 600; }
html.bone .bidlimit-card .bl-sub--warn, html.bone .bidlimit-card .bl-hold { color: var(--bn-on-strong-warn) !important; font-weight: 800; }
html.bone .bidlimit-card .bl-arrow { color: var(--bn-on-strong-muted) !important; }
html.bone .bidlimit-card .bl-surface { background: var(--bn-strong-well) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; padding: 18px 20px !important; }
html.bone .bidlimit-card .bl-tag { border-radius: 8px !important; font-size: 12px !important; letter-spacing: .2px !important; text-transform: none !important; font-weight: 900; padding: 5px 10px; box-shadow: none !important; }
html.bone .bidlimit-card .bl-tag-copart { background: var(--bn-copart) !important; }
html.bone .bidlimit-card .bl-tag-iaai { background: var(--bn-iaai) !important; }
html.bone .bidlimit-card .bl-cta, html.bone .bidlimit-card .bl-cta-copart, html.bone .bidlimit-card .bl-cta-iaai {
    background: var(--bn-bg) !important; color: var(--bn-text) !important; border-radius: var(--bn-r-m) !important; height: 48px; padding: 0 20px !important;
    display: inline-flex; align-items: center; font-size: 15.5px !important; font-weight: 800 !important; box-shadow: none !important; }
html.bone .bidlimit-card .bl-cta:hover { transform: translateY(-2px); filter: none; }
html.bone[data-theme="dark"] .bidlimit-card .bl-cta { background: #F1F1F1 !important; color: #0F0F0F !important; }

/* Sort chips over the cards */
html.bone .dealer-main table.mc-table > thead > tr { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; padding: 6px !important; }
html.bone .dealer-main table.mc-table > thead > tr > th { background: transparent !important; border: 0 !important; border-radius: 999px !important; color: var(--bn-text2) !important;
    font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .5px; min-height: 44px; box-shadow: none !important; transition: background-color var(--bn-base), color var(--bn-base); }
html.bone .dealer-main table.mc-table > thead > tr > th:hover { background: var(--bn-tile) !important; }
html.bone .dealer-main table.mc-table > thead > tr > th.dt-ordering-asc, html.bone .dealer-main table.mc-table > thead > tr > th.dt-ordering-desc {
    background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
/* The cards */
html.bone .dealer-main table.mc-table > tbody > tr { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-l) !important; box-shadow: none !important;
    transition: transform .42s var(--bn-release), box-shadow var(--bn-base) var(--bn-ease) !important; }
html.bone .dealer-main table.mc-table > tbody > tr:hover { transform: translateY(-3px); box-shadow: var(--mc-sh-hi) !important; }
html.bone .dealer-main table.mc-table > tbody > tr.mc-tinted { background: linear-gradient(var(--mc-tint), var(--mc-tint)), var(--bn-card) !important; }
html.bone .dealer-main table.mc-table > tbody > tr > td { border-color: var(--bn-hair) !important; }
html.bone .mc-date { font-size: 15px; font-weight: 800; color: var(--bn-text); }
html.bone .mc-days { background: var(--bn-tile); color: var(--bn-muted); font-size: 13px; padding: 6px 12px; }
html.bone .mc-thumb { border: 0 !important; border-radius: 16px !important; background-color: var(--bn-tile) !important; }
html.bone button.mc-thumb { transition: transform .36s var(--bn-release), box-shadow var(--bn-base) !important; }
html.bone button.mc-thumb:hover { transform: scale(1.04); box-shadow: 0 10px 20px -12px rgba(14, 44, 79, .6) !important; }
html.bone .mc-thumb img { transition: transform .6s var(--bn-ease); }
html.bone button.mc-thumb:hover img { transform: scale(1.06); }
html.bone .mc-name { font-size: 15.5px; font-weight: 800; color: var(--bn-text); letter-spacing: 0; line-height: 1.25; }
html.bone .mc-name-t { -webkit-line-clamp: 3 !important; }
html.bone:lang(ka) .mc-own-name, html.bone:lang(ka) .mc-own-sub { line-height: 1.4 !important; }
html.bone:lang(ka) .mc-own-name { font-size: 13px !important; }
html.bone .mc-dash, html.bone .ph-muted { color: var(--bn-muted) !important; }
html.bone .mc-src { height: 22px; min-width: 22px; padding: 0 6px; border-radius: 8px; font-size: 12px; font-weight: 900; }
html.bone .mc-src-c { background: var(--bn-copart) !important; }
html.bone .mc-src-i { background: var(--bn-iaai) !important; font-size: 10px; }
/* VINs and container numbers stay in the narrow code face: a VIN cut short is no VIN. */
html.bone .dealer-main a.mc-vin-v, html.bone .dealer-main a.mc-vin-v:visited, html.bone .dealer-main a.mc-box-v, html.bone .dealer-main a.mc-box-v:visited {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13.5px; font-weight: 700; letter-spacing: 0; color: var(--bn-text) !important; }
html.bone .dealer-main a.mc-vin-v, html.bone .dealer-main a.mc-vin-v:visited { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-all; }
html.bone .mc-vin-l { font-size: 12px; color: var(--bn-muted); }
html.bone .mc-copy { border-radius: 10px; }
html.bone .mc-team { background: var(--bn-tile); color: var(--bn-text2); border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 12.5px; }
html.bone .mc-box-ic { border-radius: 10px; background: var(--bn-tile); }
html.bone .mc-title-s { font-size: 13px; }
html.bone .mc-title-order { border-radius: var(--bn-r-s) !important; min-height: 40px; background: var(--bn-good-fill) !important; font-size: 14px !important; }
html.bone .mc-own { border: 0 !important; border-radius: var(--bn-r-m) !important; background: var(--bn-tile) !important; padding: 12px !important; transition: transform .36s var(--bn-release), box-shadow var(--bn-base); }
html.bone .mc-own:hover, html.bone .mc-own:focus-visible { box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; transform: translateY(-1px); }
html.bone .mc-own-name { font-size: 14px; color: var(--bn-text); }
html.bone .pay-ledger .pl-lbl { font-size: 12px; font-weight: 700; overflow-wrap: normal; word-break: normal; hyphens: none; }
html.bone .pay-ledger .pl-val { font-size: 14px; font-weight: 800; }
html.bone .pay-ledger .pl-due { font-size: 17px !important; font-weight: 900; letter-spacing: -.2px; }
html.bone .dealer-main .mc-btn { height: 42px !important; border-radius: var(--bn-r-s) !important; font-size: 14px !important; font-weight: 800 !important; border: 0 !important;
    transition: transform .36s var(--bn-release), filter var(--bn-fast), background-color var(--bn-base) !important; }
html.bone .dealer-main .mc-btn:active { transform: scale(.96); }
html.bone .dealer-main .mc-btn--doc { background: var(--bn-tile) !important; color: var(--bn-navy-ink) !important; }
/* Invoice pastel red, Pay pastel green (owner, 2026-10-23: "invoice should be that pastel red and PAY should be pastel green"). */
html.bone .dealer-main .mc-btn--inv { background: #FBE4E8 !important; color: #B3132E !important; box-shadow: inset 0 0 0 1px rgba(179, 19, 46, .14); }
html.bone .dealer-main .mc-btn--pay { background: #DDEFE3 !important; color: #17603E !important; box-shadow: inset 0 0 0 1px rgba(23, 96, 62, .16); padding: 0 20px !important; font-size: 15px !important; }
html.bone[data-theme="dark"] .dealer-main .mc-btn--inv { background: #3D2328 !important; color: #FFB4C0 !important; box-shadow: inset 0 0 0 1px rgba(255, 180, 192, .16); }
html.bone[data-theme="dark"] .dealer-main .mc-btn--pay { background: #22382B !important; color: #9EE0BB !important; box-shadow: inset 0 0 0 1px rgba(158, 224, 187, .16); }
html.bone .dealer-main .mc-btn--credit, html.bone .dealer-main .mc-btn--ghost { background: transparent !important; color: var(--bn-navy-ink) !important; box-shadow: inset 0 0 0 1.5px var(--bn-line) !important; }
html.bone .dealer-main .mc-btn--relist { background: var(--bn-bad-bg) !important; color: var(--bn-bad) !important; }
html.bone .dealer-main .mc-payform .pay-amt { height: 42px !important; border: 0 !important; border-radius: var(--bn-r-s) !important; background: var(--bn-tile) !important; font-size: 15px !important; font-weight: 800 !important; }
html.bone .dealer-main .mc-payform .pay-amt:focus { box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; }
html.bone .act-state { height: 42px; border-radius: var(--bn-r-s); font-size: 13.5px; font-weight: 800; }
html.bone .act-state--wait, html.bone[data-theme="dark"] .act-state--wait { background: var(--bn-warn-bg) !important; color: var(--bn-warn) !important; }
html.bone .act-state--ok, html.bone[data-theme="dark"] .act-state--ok { background: var(--bn-good-bg) !important; color: var(--bn-good) !important; }
html.bone .total-due-pill { background: var(--bn-bad-bg) !important; color: var(--bn-bad) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; font-size: 15px; padding: 12px 18px; }
html.bone .total-due-pill--team { background: var(--bn-tile) !important; color: var(--bn-text) !important; }
html.bone .mc-filterchip { background: var(--bn-selected); color: var(--bn-on-selected); }
html.bone .dealer-main .mc-filterchip a { background: var(--bn-card); color: var(--bn-text); }

/* ---------- 6b. The other cabinet pages: their own token sets, pointed at Bone ---------- */
html.bone .tm, html.bone[data-theme="dark"] .tm {
    --tm-surface: var(--bn-card); --tm-soft: var(--bn-tile); --tm-line: var(--bn-line); --tm-ink: var(--bn-text); --tm-body: var(--bn-text2); --tm-muted: var(--bn-muted);
    --tm-brand: var(--bn-navy-ink); --tm-brand-bg: var(--bn-tile); --tm-green: var(--bn-good); --tm-green-bg: var(--bn-good-bg); --tm-red: var(--bn-bad); --tm-red-bg: var(--bn-bad-bg);
    --tm-amber: var(--bn-warn); --tm-amber-bg: var(--bn-warn-bg); --tm-sh: none; }
html.bone .tm-card { border: 0 !important; border-radius: var(--bn-r-l) !important; padding: 20px 22px !important; transition: transform .42s var(--bn-release), box-shadow var(--bn-base); }
html.bone .tm-card:hover { box-shadow: 0 18px 34px -26px rgba(14, 44, 79, .55); }
html.bone .cfx-page, html.bone[data-theme="dark"] .cfx-page {
    --cfx-card: var(--bn-card); --cfx-line: var(--bn-line); --cfx-ink: var(--bn-text); --cfx-body: var(--bn-text2); --cfx-muted: var(--bn-muted); --cfx-well: var(--bn-tile);
    --cfx-accent: var(--bn-navy-ink); --cfx-good: var(--bn-good); --cfx-good-bg: var(--bn-good-bg); --cfx-warn: var(--bn-warn); --cfx-warn-bg: var(--bn-warn-bg);
    --cfx-bad: var(--bn-bad); --cfx-bad-bg: var(--bn-bad-bg); }
html.bone .ph-kpi, html.bone .ci-card, html.bone .ic-card, html.bone .chat-card, html.bone[data-theme="dark"] .ci-card {
    background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-l) !important; box-shadow: none !important; }
html.bone .ph-kpi { border-radius: var(--bn-r-m) !important; }
html.bone .ic-detail-panel, html.bone[data-theme="dark"] .ic-detail-panel { background: var(--bn-raised) !important; border-radius: var(--bn-r-xl) !important; box-shadow: var(--bn-float) !important; }
html.bone .ic-tab { background: var(--bn-card) !important; border: 0 !important; border-radius: 999px !important; color: var(--bn-text2) !important; min-height: 44px; font-weight: 800; }
html.bone .ic-tab.active, html.bone .ic-tab[aria-selected="true"] { background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
html.bone .chat-log { background: var(--bn-tile) !important; }
html.bone .chat-msg.theirs .chat-bubble { background: var(--bn-card) !important; color: var(--bn-text) !important; }
html.bone .chat-composer { background: var(--bn-card) !important; border-color: var(--bn-line) !important; }
/* The auctions wrapper (customer/engine): our chrome and our waits around the engine's frame.
   The frame's own pages are the engine's and are not restyled here (shared with production). */
html.bone .engine-loading { background: var(--bn-bg) !important; }
/* The engine frame is see-through (the engine pages drop their own ground when framed), so the cabinet's
   ground and blobs run behind it without a seam; its corners are round so a dimmed sheet inside it is a
   rounded panel, not a hard box. */
html.bone .engine-wrap { background: transparent !important; }
html.bone .engine-frame { background: transparent; border-radius: var(--bn-r-l); color-scheme: light; }
html.bone[data-theme="dark"] .engine-frame { color-scheme: dark; }
@media (max-width: 991px) { html.bone .engine-frame { border-radius: 24px 24px 0 0; } }
html.bone .sk { background-color: var(--bn-skel) !important; border-radius: 10px !important;
    background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 42%, transparent 64%) !important; }
html.bone[data-theme="dark"] .sk { background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .06) 42%, transparent 64%) !important; }
html.bone .sk-tile { padding: 12px; border-radius: var(--bn-r-l); background: var(--bn-card); }
html.bone .sk-photo { border-radius: 16px !important; }
html.bone .sk-pill { border-radius: 999px !important; }
html.bone .engine-loading-text { color: var(--bn-muted) !important; font-size: 14px; }
html.bone .engine-reconnect-title, html.bone .surf-lock-title { color: var(--bn-text) !important; font-weight: 900; }
html.bone .engine-reconnect-sub, html.bone .surf-lock-sub, html.bone[data-theme="dark"] .surf-lock-sub { color: var(--bn-text2) !important; }
html.bone .surf-lock-card { background: var(--bn-card); border-radius: var(--bn-r-xl); padding: 32px 30px; box-shadow: var(--bn-float); }
html.bone .surf-lock-mark { border-radius: 16px; font-family: var(--bn-font) !important; font-weight: 900; }
html.bone .surf-lock-mark--copart { background: var(--bn-copart) !important; }
html.bone .surf-lock-mark--iaai { background: var(--bn-iaai) !important; }
html.bone .surf-lock-btn { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; border-radius: var(--bn-r-m) !important; height: 48px; font-weight: 800; font-size: 15.5px; }
html.bone .surf-lock-link { color: var(--bn-navy-ink) !important; font-weight: 800; }
html.bone .iaai-login-popup { border: 0 !important; border-radius: var(--bn-r-m) !important; background: var(--bn-text) !important; color: var(--bn-bg) !important; box-shadow: var(--bn-float); }

/* Payment History figures */
html.bone .ph-kpi .k-val { font-size: 26px !important; font-weight: 900 !important; }
html.bone .k-in .k-val { color: var(--bn-good) !important; }
html.bone .k-out .k-val { color: var(--bn-bad) !important; }
html.bone .k-net .k-val { color: var(--bn-text) !important; }
html.bone .k-in .k-dot { background: var(--bn-good) !important; }
html.bone .k-out .k-dot { background: var(--bn-hot) !important; }
html.bone .k-net .k-dot { background: var(--bn-navy-ink) !important; }

/* Notes keep the dealer's colours, day and night (the apps' eleven) */
html.bone .notes-page {
    --c-default: var(--bn-card); --c-red: #FAAFA8; --c-orange: #F9CB9C; --c-yellow: #FFF8B8; --c-green: #E2F6D3; --c-teal: #B4DDD3;
    --c-blue: #D4E4ED; --c-purple: #D3BFDB; --c-pink: #F6E2DD; --c-brown: #ECE8E0; --c-gray: #EFEFF1; }
html.bone[data-theme="dark"] .notes-page {
    --c-default: #181818; --c-red: #4E2A27; --c-orange: #482F13; --c-yellow: #3B3611; --c-green: #2B3B1C; --c-teal: #113E36;
    --c-blue: #263842; --c-purple: #3F2D46; --c-pink: #44302B; --c-brown: #3C3524; --c-gray: #35343D; }
html.bone .notes-page .note-card, html.bone .notes-page .nm-modal { color: #151412; border: 0 !important; border-radius: var(--bn-r-l) !important; }
html.bone .notes-page .note-card[data-color="default"], html.bone .notes-page .nm-modal[data-color="default"] { color: var(--bn-text); }
html.bone[data-theme="dark"] .notes-page .note-card, html.bone[data-theme="dark"] .notes-page .nm-modal { color: #F1F1F1; }
html.bone .notes-page .note-card .card-title, html.bone .notes-page .note-card .card-text { color: inherit !important; }

/* Calculator and the total-price panel */
html.bone .calc-veh label, html.bone .tt-src label, html.bone .tt-seg label {
    background: var(--bn-tile) !important; border: 0 !important; border-radius: 999px !important; color: var(--bn-text2) !important; font-weight: 800 !important;
    min-height: 44px; box-shadow: none !important; transition: background-color var(--bn-base), color var(--bn-base), transform .36s var(--bn-release); }
html.bone .calc-veh label:hover { background: color-mix(in srgb, var(--bn-tile) 75%, var(--bn-line)) !important; }
html.bone .calc-veh label:active { transform: scale(.96); }
html.bone .calc-veh input:checked + label, html.bone .tt-src input:checked + label, html.bone .tt-seg input:checked + label {
    background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; box-shadow: none !important; }
html.bone .calc-veh input:checked + label img { filter: invert(1) brightness(1.6); }
html.bone[data-theme="dark"] .calc-veh input:checked + label img { filter: none; }
html.bone .calc-select, html.bone .ts-wrapper.calc-ts .ts-control, html.bone .calc-wrap input[type="number"], html.bone .calc-wrap input[type="text"] {
    background-color: var(--bn-tile) !important; border: 0 !important; border-radius: var(--bn-r-s) !important; color: var(--bn-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-line) 70%, transparent) !important; min-height: 48px; font-weight: 700 !important; font-size: 15px !important; }
html.bone .ts-wrapper.calc-select { background: transparent !important; box-shadow: none !important; }
html.bone .ts-dropdown { background: var(--bn-raised) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; box-shadow: var(--bn-float) !important; color: var(--bn-text); overflow: hidden; }
html.bone .ts-dropdown .active { background: var(--bn-tile) !important; color: var(--bn-text) !important; }
html.bone .calc-fx-cell, html.bone .tt-car { background: var(--bn-tile) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; }
html.bone .bigsuv-box { background: var(--bn-raised) !important; border-radius: var(--bn-r-xl) !important; box-shadow: var(--bn-float) !important; }

/* Legal pages and Contact: the page is bone, the reading card is a card */
html.bone .lp-article-wrap, html.bone .lp-contact-wrap { background: transparent !important; }
html.bone .lp-article { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-xl) !important; box-shadow: none !important; color: var(--bn-text2); }
html.bone .lp-article h2, html.bone .lp-article h3, html.bone .lp-article strong { color: var(--bn-text); }
html.bone .lp-article a { color: var(--bn-navy-ink); font-weight: 800; }
html.bone .lp-info { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-l) !important; box-shadow: none !important; }

/* Notes */
html.bone .notes-page, html.bone[data-theme="dark"] .notes-page {
    --np-navy: var(--bn-navy-ink); --np-blue: var(--bn-navy-ink); --np-red: var(--bn-hot); --np-ink: var(--bn-text); --np-muted: var(--bn-muted);
    --np-line: var(--bn-line); --np-bg: var(--bn-tile); --np-card: var(--bn-card); --np-shadow: none; --np-radius: 18px; }
html.bone .np-pop, html.bone .np-float-pop { background: var(--bn-raised) !important; border: 0 !important; border-radius: var(--bn-r-m) !important; box-shadow: var(--bn-float) !important; }
html.bone .pop-rem .pr-date, html.bone .pop-rem .pr-time select { background: var(--bn-tile) !important; border: 0 !important; border-radius: 12px !important; color: var(--bn-text) !important; }
html.bone .notes-page .dp-pill, html.bone .notes-page .dp-rail-toggle { background: var(--bn-card) !important; border: 0 !important; color: var(--bn-text2) !important; }
html.bone .notes-page .dp-pill.active, html.bone .notes-page .dp-pill.is-active, html.bone .notes-page .dp-pill[aria-pressed="true"] { background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }

/* Quiet labels the pages typed in blue-grey: on bone they fell under 4.5:1. */
html.bone .ph-kpi .k-lbl, html.bone .cm-money span, html.bone .bigsuv-info, html.bone .calc-fx-cell .lbl,
html.bone .chat-empty, html.bone .calc-head2 .hint, html.bone .tt-sub, html.bone .dp-kpi .k-sub { color: var(--bn-muted) !important; }
/* The calculator's one green button: Bone's good fill, so its white words pass. */
html.bone .tt-cta { background: var(--bn-good-fill) !important; border-radius: var(--bn-r-l) !important; box-shadow: none !important; }
html.bone .tt-cta:hover { box-shadow: 0 16px 30px -18px rgba(30, 107, 71, .9) !important; }
html.bone .tt-cta .tt-cta-sub { color: rgba(255, 255, 255, .9) !important; }
/* Insurance tabs: the chosen one and its count */
html.bone .ic-tab.is-active { background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
html.bone .ic-tabcount { background: var(--bn-tile) !important; color: var(--bn-text2) !important; font-weight: 800; }
html.bone .ic-tab.is-active .ic-tabcount { background: var(--bn-on-selected) !important; color: var(--bn-selected) !important; }
/* Sign-up steps */
html.bone .su-step, html.bone[data-theme="dark"] .su-step { background: var(--bn-tile) !important; border-color: transparent !important; color: var(--bn-muted) !important; border-radius: var(--bn-r-s) !important; font-weight: 800; }
html.bone .su-dot, html.bone[data-theme="dark"] .su-dot { background: var(--bn-card) !important; border-color: transparent !important; color: var(--bn-text2) !important; }
html.bone .su-step.is-now, html.bone[data-theme="dark"] .su-step.is-now { background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
html.bone .su-step.is-now .su-dot, html.bone[data-theme="dark"] .su-step.is-now .su-dot { background: var(--bn-on-selected) !important; color: var(--bn-selected) !important; }
html.bone .su-step.is-done, html.bone[data-theme="dark"] .su-step.is-done { background: var(--bn-good-bg) !important; color: var(--bn-good) !important; }
html.bone .su-step.is-done .su-dot, html.bone[data-theme="dark"] .su-step.is-done .su-dot { background: var(--bn-good-fill) !important; color: #FFFFFF !important; }

/* Chips and pills used across pages (calculator vehicle types, notes filters, team chips) */
html.bone .dealer-main .dp-pill { border-radius: 999px !important; font-weight: 800; }

/* ---------- 7. Bell panel, toasts, the deposit overlay ---------- */
html.bone .cbp-notif-panel { top: 84px; right: 24px; width: 392px; background: var(--bn-raised) !important; border: 0 !important; border-radius: var(--bn-r-l) !important;
    box-shadow: var(--bn-float) !important; padding: 8px; }
@media (prefers-reduced-motion: no-preference) { html.bone .cbp-notif-panel.open { animation: bn-drop var(--bn-base) var(--bn-ease) both; transform-origin: top right; } }
html.bone .cbp-notif-head { border-bottom: 0 !important; padding: 14px 14px 10px; font-size: 19px !important; font-weight: 900 !important; color: var(--bn-text) !important; }
html.bone .cbp-notif-readall, html.bone .cbp-notif-clear { color: var(--bn-navy-ink) !important; font-size: 14px; font-weight: 800; border-radius: 12px; padding: 8px 10px; }
html.bone .cbp-notif-readall:hover, html.bone .cbp-notif-clear:hover { background: var(--bn-tile); text-decoration: none; }
html.bone .cbp-notif-item { border: 0 !important; border-radius: var(--bn-r-m); margin: 0 0 4px; padding: 14px; gap: 14px; background: transparent; }
html.bone .cbp-notif-item.unread { background: var(--bn-tile) !important; }
html.bone .cbp-notif-item:hover { background: color-mix(in srgb, var(--bn-tile) 70%, var(--bn-line)) !important; }
html.bone .cbp-notif-dot { background: var(--bn-hot) !important; width: 10px; height: 10px; flex-basis: 10px; }
html.bone .cbp-notif-item:not(.unread) .cbp-notif-dot { background: transparent !important; }
html.bone .cbp-notif-c { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px; font-size: 16px; font-weight: 900; background: var(--bn-copart) !important; }
html.bone .cbp-notif-c--iaai { background: var(--bn-iaai) !important; font-size: 11px; }
html.bone .cbp-notif-c--note, html.bone .cbp-notif-c--site { background: var(--bn-card) !important; color: var(--bn-navy-ink) !important; }
html.bone .cbp-notif-title { font-size: 15px; font-weight: 800; color: var(--bn-text) !important; }
html.bone .cbp-notif-text { font-size: 13.5px; color: var(--bn-text2) !important; }
html.bone .cbp-notif-time { font-size: 12.5px; font-weight: 700; color: var(--bn-muted) !important; }
html.bone .cbp-notif-empty { color: var(--bn-muted) !important; font-size: 15px; }
/* Toasts: inverted, from the top. */
html.bone .cbp-toasts { top: 88px; right: 24px; width: 360px; }
html.bone .cbp-toast { background: var(--bn-text) !important; color: var(--bn-bg) !important; border-radius: var(--bn-r-m) !important; padding: 14px 18px;
    box-shadow: var(--bn-float) !important; animation: bn-toast-in .42s var(--bn-decel) both !important; }
html.bone .cbp-toast .t-title { font-size: 15px; font-weight: 900; }
html.bone .cbp-toast .t-text { color: color-mix(in srgb, var(--bn-bg) 80%, transparent) !important; font-size: 13.5px; }
/* Fund your deposit */
html.bone .cbp-fund-ov { background: var(--bn-scrim) !important; }
html.bone .cbp-fund-card { background: var(--bn-raised) !important; border-radius: var(--bn-r-xl) !important; box-shadow: var(--bn-float) !important; }
@media (prefers-reduced-motion: no-preference) { html.bone .cbp-fund-card { animation: bn-sheet .48s var(--bn-decel) both !important; } }
html.bone .cbp-fund-head { border-bottom: 1px solid var(--bn-line) !important; padding: 22px 24px; }
html.bone .cbp-fund-head h3 { font-size: 21px; font-weight: 900; color: var(--bn-text) !important; }
html.bone .cbp-fund-dep { background: var(--bn-good-bg) !important; color: var(--bn-good) !important; border-radius: 999px; font-weight: 900; }
html.bone .cbp-fund-dep small { color: var(--bn-good) !important; opacity: .8; }
html.bone .cbp-fund-x { width: 44px !important; height: 44px !important; border: 0 !important; border-radius: var(--bn-r-s) !important; background: var(--bn-tile) !important; color: var(--bn-text) !important; }
html.bone .cbp-seg { background: var(--bn-track) !important; border-radius: var(--bn-r-m) !important; padding: 4px !important; }
html.bone .cbp-seg button { border-radius: var(--bn-r-s) !important; min-height: 44px; color: var(--bn-text2) !important; font-size: 14.5px !important; transition: background-color var(--bn-base), color var(--bn-base), box-shadow var(--bn-base); }
html.bone .cbp-seg button.active { background: var(--bn-thumb) !important; color: var(--bn-navy-ink) !important; box-shadow: 0 2px 8px -4px var(--bn-shadow) !important; }
html.bone .cbp-note.info, html.bone .cbp-pending b { color: var(--bn-navy-ink) !important; }
html.bone .cbp-fund-deposit-line b { color: var(--bn-good) !important; }
html.bone .cbp-fund-sub { border-top: 1px dashed var(--bn-line) !important; }

/* ---------- 8. Phones and small tablets ---------- */
@media (max-width: 991px) {
    html.bone { --bn-bar-h: 64px; }
    html.bone .cbp-nav, html.bone .cbp-nav.scrolled { height: 64px; }
    html.bone .cbp-nav-inner { padding: 0 12px 0 18px; }
    html.bone .cbp-nav .cbp-logo img { height: 40px !important; width: auto !important; }
    html.bone .cbp-burger { width: 48px; height: 48px; border: 0 !important; border-radius: 16px; background: var(--bar-ctl); }
    html.bone .cbp-burger span { width: 20px; height: 2.5px; background: var(--bar-ctl-ink); border-radius: 2px; }
    html.bone .cbp-links { top: 64px !important; background-color: var(--bn-rail) !important; background-image: none !important; padding: 16px 16px 32px !important;
        transition: transform .48s var(--bn-glide) !important; }
    html.bone .cbp-nav .cbp-links a.cbp-link { display: flex !important; height: auto !important; min-height: 52px; font-size: 17px; padding: 0 14px !important; color: var(--bn-rail-ink) !important; }
    html.bone .cbp-nav .cbp-actions .cbp-bell, html.bone .cbp-nav .cbp-actions .cbp-theme-toggle { width: 100% !important; height: 52px !important; }
    html.bone .cbp-nav .cbp-actions .cbp-langwrap, html.bone .cbp-nav .cbp-actions .cbp-lang { width: 100%; justify-content: center; }
    html.bone .cbp-mnav { border-top: 1px solid var(--nav-line) !important; }
    html.bone .cbp-mnav-title { color: var(--bn-rail-dim) !important; font-size: 11px; letter-spacing: .6px; }
    html.bone .cbp-mnav-grid { gap: 6px; }
    html.bone .cbp-nav .cbp-links a.cbp-mnav-it { min-height: 52px; border: 0 !important; border-radius: var(--bn-r-s); background: var(--bn-rail-hover) !important;
        color: var(--bn-rail-ink) !important; font-size: 14.5px; font-weight: 700; gap: 10px; }
    html.bone .cbp-nav .cbp-links a.cbp-mnav-it svg { color: inherit !important; width: 20px; height: 20px; }
    html.bone .cbp-nav .cbp-links a.cbp-mnav-it.active { background: var(--bn-rail-sel) !important; color: var(--bn-rail-sel-ink) !important; }
    html.bone .cbp-mnav-auc a { min-height: 52px; border-radius: var(--bn-r-m); box-shadow: none !important; font-size: 16px; }
    html.bone .cbp-mnav-cp { background: var(--bn-copart) !important; }
    html.bone .cbp-mnav-ia { background: var(--bn-iaai) !important; }
    html.bone .cbp-nav .cbp-deposit, html.bone .cbp-nav .cbp-user-btn { justify-content: center; }
    html.bone .cbp-menu { background: var(--bn-strong-well) !important; box-shadow: none !important; }
    html.bone .cbp-menu a { color: var(--bn-rail-ink) !important; }
    html.bone .cbp-menu a svg { stroke: currentColor; }
    html.bone .dealer-page { padding: 8px 16px 48px; }
    html.bone .dp-title, html.bone .dealer-main h1.dp-title { font-size: 28px !important; }
    html.bone .bidlimit-card { padding: 18px !important; }
    html.bone .bidlimit-card .bl-deposit { border-right: 0 !important; padding-right: 0 !important; border-bottom: 1px solid rgba(241, 239, 234, .14) !important; }
    html.bone .bidlimit-card .bl-deposit .bl-val { font-size: 34px !important; }
    html.bone .bidlimit-card .bl-val { font-size: 22px !important; }
    html.bone .cbp-notif-panel { left: 12px; right: 12px; width: auto; top: 72px; }
    html.bone .cbp-toasts { left: 12px; right: 12px; width: auto; top: 72px; }
}

/* ---------- 9. Sign in, register, reset ---------- */
html.bone .auth-shell { position: relative; overflow: hidden; background: transparent !important; padding: 140px 18px 90px; min-height: 86vh; }
html.bone .auth-shell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 360px; background: var(--bn-strong);
    border-radius: 0 0 48px 48px; pointer-events: none; }
html.bone .auth-shell::after { content: ""; position: absolute; left: 50%; top: 40px; width: 900px; height: 500px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 107, 128, .14), transparent); filter: blur(10px); }
html.bone[data-theme="dark"] .auth-shell::after { display: none; }
html.bone .auth-card { position: relative; z-index: 1; max-width: 460px; background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-xl) !important;
    box-shadow: var(--bn-float) !important; padding: 36px 32px 30px !important; }
@media (prefers-reduced-motion: no-preference) { html.bone .auth-card { animation: bn-sheet .6s var(--bn-decel) both; } }
html.bone .auth-head h1 { font-size: 28px !important; font-weight: 900 !important; letter-spacing: -.5px; color: var(--bn-text) !important; }
html.bone .auth-head p { font-size: 15px; color: var(--bn-text2) !important; }
html.bone .auth-btn { width: 100%; min-height: 54px; font-size: 16.5px !important; }
html.bone .auth-eye { border-radius: 12px; color: var(--bn-muted) !important; }
html.bone .auth-eye:hover { background: var(--bn-card) !important; color: var(--bn-text) !important; }
html.bone .auth-foot { border-top: 1px solid var(--bn-line) !important; color: var(--bn-text2) !important; font-size: 15px; }
html.bone .auth-foot a, html.bone .auth-forgot { color: var(--bn-navy-ink) !important; font-weight: 800; }
html.bone .auth-hint { color: var(--bn-muted) !important; }

/* ---------- 10. Footer ---------- */
html.bone .cbp-footer { background-color: var(--bn-rail) !important; background-image: none !important; color: var(--bn-rail-ink); border-top: 0; border-radius: 40px 40px 0 0; margin-top: 40px; }
html.bone .cbp-footer h4 { color: var(--bn-rail-dim) !important; font-size: 12px; letter-spacing: .6px; }
html.bone .cbp-footer-links a, html.bone .cbp-footer-contact a, html.bone .cbp-footer-contact span, html.bone .cbp-footer-legal a { color: var(--bn-rail-ink) !important; font-weight: 700; }
html.bone .cbp-footer-contact i { color: var(--bn-on-strong-hot) !important; }
html.bone .cbp-footer-tag, html.bone .cbp-footer-bottom .cr { color: var(--bn-rail-dim) !important; }
html.bone .cbp-footer-top { border-bottom-color: var(--nav-line) !important; }
html.bone .scrollup { border-radius: 16px !important; background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; }

/* ---------- 11. The home page (frontend/pages/home-bone) ---------- */
html.bone .bh { --bh-max: 1240px; color: var(--bn-text2); overflow-x: clip; }
html.bone .bh-wrap { max-width: var(--bh-max); margin: 0 auto; padding: 0 28px; }
html.bone .bh-eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px;
    background: rgba(241, 239, 234, .10); color: var(--bn-on-strong-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
html.bone .bh-eyebrow i { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; padding: 0 6px; border-radius: 8px; font-style: normal;
    background: var(--bn-copart); color: #FFFFFF; letter-spacing: 0; font-size: 11.5px; font-weight: 900; }
html.bone .bh-eyebrow i + i { margin-left: -4px; }
html.bone .bh-eyebrow .bh-i-i { background: var(--bn-iaai); font-size: 10px; }
html.bone:lang(ka) .bh-eyebrow, html.bone:lang(ru) .bh-eyebrow { letter-spacing: 0; }
html.bone .bh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: var(--bn-r-m); border: 0;
    font-size: 16.5px; font-weight: 800; text-decoration: none !important; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
    transition: transform .42s var(--bn-release), box-shadow var(--bn-base), background-color var(--bn-base), color var(--bn-base); }
html.bone .bh-btn svg { width: 20px; height: 20px; transition: transform .42s var(--bn-release); }
html.bone .bh-btn:hover svg { transform: translateX(4px); }
html.bone .bh-btn:active { transform: scale(.96) !important; }
html.bone .bh-btn--hot { background: var(--bn-hot); color: #FFFFFF !important; box-shadow: 0 16px 30px -16px rgba(217, 45, 72, .85); }
html.bone .bh-btn--hot::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: translateX(-120%) skewX(-18deg); z-index: -1; }
@media (prefers-reduced-motion: no-preference) { html.bone .bh-btn--hot::after { animation: bn-shine 3.6s var(--bn-ease) 1.6s infinite; } }
html.bone .bh-btn--soft { background: rgba(241, 239, 234, .10); color: var(--bn-on-strong) !important; }
html.bone .bh-btn--soft:hover { background: rgba(241, 239, 234, .18); }
html.bone .bh-btn--go { background: var(--bn-go); color: #FFFFFF !important; box-shadow: 0 16px 30px -16px rgba(38, 130, 85, .85); }
html.bone .bh-btn--go:hover { background: var(--bn-go-hi); }
html.bone .bh-btn--strong { background: var(--bn-primary); color: var(--bn-on-primary) !important; }
html.bone .bh-btn--bone { background: var(--bn-bg); color: var(--bn-text) !important; }
html.bone[data-theme="dark"] .bh-btn--bone { background: #F1F1F1; color: #0F0F0F !important; }

/* Hero */
html.bone .bh-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bn-strong); color: var(--bn-on-strong);
    padding: 150px 0 190px; border-radius: 0 0 48px 48px; min-height: min(92vh, 900px); display: flex; align-items: center; }
html.bone[data-theme="dark"] .bh-hero { background: linear-gradient(160deg, #212121, #141414 60%); }
html.bone .bh-hero-light { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(680px 460px at 78% 28%, rgba(241, 239, 234, .07), transparent 70%); }
html.bone[data-theme="dark"] .bh-hero-light { background: radial-gradient(680px 460px at 78% 28%, rgba(255, 255, 255, .04), transparent 70%); }
html.bone .bh-hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image: radial-gradient(rgba(241, 239, 234, .16) 1px, transparent 1.4px); background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%); }
html.bone .bh-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; width: 100%; }
html.bone .bh-h1 { margin: 22px 0 18px; color: var(--bn-on-strong) !important; font-size: clamp(36px, 4.3vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -2px; text-wrap: balance; }
html:lang(ka).bone .bh-h1 { font-size: clamp(30px, 3.8vw, 50px); letter-spacing: -.5px; line-height: 1.15; }
html.bone .bh-h1 .bh-w { display: inline-block; white-space: pre; }
html.bone .bh-lead { max-width: 560px; margin: 0 0 30px; font-size: 18.5px; line-height: 1.5; font-weight: 600; color: var(--bn-on-strong-muted); }
html.bone .bh-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
html.bone .bh-marks { display: flex; align-items: center; gap: 10px; margin-top: 34px; color: var(--bn-on-strong-muted); font-size: 14px; font-weight: 700; flex-wrap: wrap; }
html.bone .bh-mark { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 10px;
    color: #FFFFFF; font-size: 15px; font-weight: 900; letter-spacing: 0; }
html.bone .bh-mark--c { background: var(--bn-copart); }
html.bone .bh-mark--i { background: var(--bn-iaai); font-size: 13px; }

/* The route: an arc from the auction yards to Poti, with a ship running along it. */
html.bone .bh-route { position: relative; width: 100%; aspect-ratio: 1.15 / 1; max-width: 620px; justify-self: end; }
html.bone .bh-route > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.bone .bh-route .r-ring { fill: none; stroke: rgba(241, 239, 234, .10); stroke-width: 1; }
html.bone .bh-route .r-arc-bg { fill: none; stroke: rgba(241, 239, 234, .14); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
html.bone .bh-route .r-arc { fill: none; stroke: url(#bhArcGrad); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
html.bone .bh-route .r-pin { fill: var(--bn-on-strong); }
html.bone .bh-route .r-pin-ring { fill: none; stroke: var(--bn-on-strong); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
html.bone .bh-route .r-pin-hot { fill: var(--bn-on-strong-hot); }
html.bone .bh-route .r-pin-ring.hot { stroke: var(--bn-on-strong-hot); }
html.bone .bh-route .r-lbl { fill: var(--bn-on-strong); font: 900 15px var(--bn-font); letter-spacing: .5px; }
html.bone .bh-route .r-sub { fill: var(--bn-on-strong-muted); font: 700 12px var(--bn-font); letter-spacing: .4px; }
html.bone .bh-ship { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 16px; background: var(--bn-on-strong);
    color: var(--bn-strong); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55); }
html.bone .bh-ship svg { position: static; width: 24px; height: 24px; }
html.bone .bh-ship::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid rgba(241, 239, 234, .35); }
html.bone .bh-float { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: var(--bn-r-m);
    background: rgba(241, 239, 234, .10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--bn-on-strong);
    font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .7); }
html.bone .bh-float small { display: block; font-size: 12px; font-weight: 700; color: var(--bn-on-strong-muted); }
html.bone .bh-float--a { left: -2%; top: 8%; }
html.bone .bh-float--b { right: 0; bottom: 6%; }
html.bone .bh-float .bh-ic { width: 40px; height: 40px; border-radius: 14px; background: var(--bn-on-strong); color: var(--bn-strong); display: flex; align-items: center; justify-content: center; }
html.bone .bh-float .bh-ic svg { width: 22px; height: 22px; }

/* Search band: overlaps the hero's foot */
html.bone .bh-search { position: relative; z-index: 3; margin-top: -120px; }
html.bone .bh-search-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; border-radius: var(--bn-r-xl); background: var(--bn-card);
    box-shadow: 0 30px 60px -36px rgba(14, 44, 79, .55); }
html.bone[data-theme="dark"] .bh-search-card { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
html.bone .bh-scol { padding: 18px 18px 14px; border-radius: var(--bn-r-l); background: var(--bn-bg); }
html.bone .bh-scol h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 900; color: var(--bn-text); letter-spacing: -.2px; }
html.bone .bh-scol h3 span { width: 36px; height: 36px; border-radius: 12px; background: var(--bn-card); color: var(--bn-navy-ink); display: inline-flex; align-items: center; justify-content: center; }
html.bone .bh-scol h3 svg { width: 20px; height: 20px; }
html.bone .bh-sform { display: flex; gap: 10px; }
html.bone .bh-sform input { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 18px; border: 0; border-radius: var(--bn-r-m); background: var(--bn-card); color: var(--bn-text);
    font-size: 16px; font-weight: 700; outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-line) 70%, transparent); transition: box-shadow var(--bn-base) var(--bn-ease); }
html.bone .bh-sform input::placeholder { color: var(--bn-muted); font-weight: 600; }
html.bone .bh-sform input:focus { box-shadow: inset 0 0 0 2px var(--bn-navy-ink), 0 0 0 5px color-mix(in srgb, var(--bn-focus) 16%, transparent); }
html.bone .bh-sform .bh-btn { height: 56px; flex: 0 0 auto; }
html.bone .bh-serr { min-height: 18px; margin-top: 8px; color: var(--bn-bad); font-size: 13.5px; font-weight: 700; }

/* Sections */
html.bone .bh-sec { padding: 110px 0 20px; }
html.bone .bh-sec-head { max-width: 760px; margin: 0 0 46px; }
html.bone .bh-kicker { display: inline-block; margin-bottom: 14px; color: var(--bn-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
html.bone:lang(ka) .bh-kicker { text-transform: none; letter-spacing: 0; }
html.bone .bh-h2 { margin: 0 0 14px; color: var(--bn-text); font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; letter-spacing: -1.2px; line-height: 1.05; text-wrap: balance; }
html:lang(ka).bone .bh-h2 { letter-spacing: -.3px; line-height: 1.2; font-size: clamp(26px, 3vw, 40px); }
html.bone .bh-sec-head p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--bn-text2); }

/* The four steps, joined by a line that fills as you scroll */
html.bone .bh-steps { position: relative; }
html.bone .bh-steps-ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
html.bone .bh-steps-track { position: absolute; left: 34px; right: 34px; top: 34px; height: 4px; border-radius: 4px; background: var(--bn-line); z-index: 0; }
html.bone .bh-steps-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--bn-navy-ink); transform-origin: left; transform: scaleX(var(--bh-p, 0)); }
html.bone .bh-steps-car { position: absolute; top: 50%; left: calc(var(--bh-p, 0) * 100%); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 14px;
    background: var(--bn-hot); color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px -10px rgba(217, 45, 72, .9); }
html.bone .bh-steps-car svg { width: 22px; height: 22px; }
html.bone .bh-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 0 6px; }
html.bone .bh-node { width: 72px; height: 72px; border-radius: 24px; background: var(--bn-card); color: var(--bn-navy-ink); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px var(--bn-bg); transition: background-color .4s var(--bn-ease), color .4s var(--bn-ease), transform .5s var(--bn-release); }
html.bone .bh-node svg { width: 30px; height: 30px; }
html.bone .bh-step.is-on .bh-node { background: var(--bn-primary); color: var(--bn-on-primary); transform: scale(1.06); }
html.bone .bh-step-card { margin-top: 8px; padding: 22px; border-radius: var(--bn-r-l); background: var(--bn-card); flex: 1 1 auto;
    transition: transform .5s var(--bn-release), box-shadow var(--bn-base); }
html.bone .bh-step-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -28px rgba(14, 44, 79, .55); }
html.bone .bh-step-n { display: inline-flex; height: 28px; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--bn-tile); color: var(--bn-muted);
    font-size: 12.5px; font-weight: 800; }
html.bone .bh-step h3 { margin: 14px 0 8px; font-size: 20px; font-weight: 900; color: var(--bn-text); letter-spacing: -.3px; line-height: 1.2; }
html.bone .bh-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bn-text2); }

/* Yard photos from the admin's slides, running past */
html.bone .bh-yard { padding: 90px 0 10px; }
html.bone .bh-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
html.bone .bh-marquee-track { display: flex; gap: 16px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
    html.bone .bh-marquee-track { animation: bh-marquee var(--bh-dur, 60s) linear infinite; }
    html.bone .bh-marquee:hover .bh-marquee-track { animation-play-state: paused; }
}
@keyframes bh-marquee { to { transform: translateX(-50%); } }
html.bone .bh-shot { position: relative; flex: 0 0 auto; width: 380px; height: 250px; border-radius: var(--bn-r-l); overflow: hidden; background: var(--bn-card); margin: 0; }
html.bone .bh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--bn-ease); }
html.bone .bh-shot:hover img { transform: scale(1.06); }
html.bone .bh-shot figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(21, 20, 18, .62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F1F1F1; font-size: 14px; font-weight: 800; line-height: 1.3; }
html.bone .bh-shot figcaption span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Apps */
html.bone .bh-apps { margin-top: 110px; }
html.bone .bh-apps-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center;
    padding: 56px; border-radius: 40px; background: var(--bn-card); }
html.bone .bh-apps-card .bh-h2 { font-size: clamp(28px, 3vw, 42px); }
html.bone .bh-apps-card p { font-size: 17.5px; line-height: 1.55; margin: 0 0 26px; }
html.bone .bh-apps-art { position: relative; display: flex; justify-content: center; transform: perspective(1200px) rotateY(var(--bh-ry, -6deg)) rotateX(var(--bh-rx, 3deg));
    transition: transform .8s var(--bn-ease); }
html.bone .bh-apps-art .dvl { margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) { html.bone .bh-apps-float { animation: bn-float 7s ease-in-out infinite; } }
html.bone .bh-soon { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--bn-tile); color: var(--bn-text);
    font-size: 14px; font-weight: 800; margin-bottom: 18px; }
html.bone .bh-soon b { height: 28px; padding: 0 10px; border-radius: 999px; background: var(--bn-primary); color: var(--bn-on-primary); display: inline-flex; align-items: center; font-size: 12px; }

/* Closing band */
html.bone .bh-cta { margin: 110px 0 0; }
html.bone .bh-cta-band { position: relative; overflow: hidden; isolation: isolate; padding: 64px 56px; border-radius: 40px; background: var(--bn-strong); color: var(--bn-on-strong);
    display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 30px; align-items: center; }
html.bone .bh-cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(520px 320px at 88% 10%, rgba(241, 239, 234, .08), transparent 70%); }
html.bone[data-theme="dark"] .bh-cta-band::before { background: radial-gradient(520px 320px at 88% 10%, rgba(255, 255, 255, .04), transparent 70%); }
html.bone .bh-cta-band .bh-h2 { color: var(--bn-on-strong); }
html.bone .bh-cta-band p { margin: 0; color: var(--bn-on-strong-muted); font-size: 18px; line-height: 1.5; }
html.bone .bh-cta-band .bh-ctas { justify-content: flex-end; }

/* Announcement: a Bone toast, bottom right */
html.bone .ann-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1400; width: min(380px, calc(100vw - 32px)); opacity: 0; pointer-events: none;
    transform: translateY(40px) scale(.97); transition: transform .52s var(--bn-release), opacity .3s var(--bn-ease); }
html.bone .ann-toast.show { opacity: 1; transform: none; pointer-events: auto; }
html.bone .ann-toast-title { position: relative; padding-right: 60px !important; }
html.bone .ann-toast-x { position: absolute; top: 10px; right: 12px; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
html.bone .ann-toast-body { padding: 16px 18px 18px; line-height: 1.6; max-height: 38vh; overflow-y: auto; }
html.bone .ann-toast-body p { margin: 0 0 9px; }
html.bone .ann-toast-body p:last-child { margin-bottom: 0; }
html.bone .ann-toast-body p:has(> br:only-child) { display: none; }
html.bone .ann-toast { border: 0 !important; border-radius: var(--bn-r-l) !important; background: var(--bn-raised) !important; box-shadow: var(--bn-float) !important; overflow: hidden; }
html.bone .ann-toast-title { background: var(--bn-strong) !important; color: var(--bn-on-strong) !important; font-weight: 900 !important; font-size: 16px; padding: 16px 18px !important; border: 0 !important; }
html.bone .ann-toast-x { border-radius: 12px !important; background: rgba(241, 239, 234, .12) !important; color: var(--bn-on-strong) !important; border: 0 !important; width: 36px; height: 36px; }
html.bone .ann-toast-body { color: var(--bn-text2) !important; font-size: 15px; }

/* Reveal: the home page's blocks wait for the scroll */
@media (prefers-reduced-motion: no-preference) {
    html.bone.bn-js .bh-reveal { opacity: 0; transform: translateY(40px) scale(.98); filter: blur(4px); }
    html.bone.bn-js .bh-reveal.bn-in { opacity: 1; transform: none; filter: none;
        transition: opacity .7s var(--bn-ease), transform 1s var(--bn-release), filter .7s var(--bn-ease); transition-delay: calc(var(--bn-i, 0) * 90ms); }
    html.bone.bn-js .bh-h1 .bh-w { opacity: 0; transform: translateY(.6em) rotate(2deg); filter: blur(8px); }
    html.bone.bn-js .bh-h1.bn-go .bh-w { opacity: 1; transform: none; filter: none;
        transition: opacity .6s var(--bn-ease), transform .9s var(--bn-release), filter .6s var(--bn-ease); transition-delay: calc(var(--bn-i, 0) * 55ms + 120ms); }
    html.bone.bn-js .bh-hero .bh-stage { opacity: 0; transform: translateY(18px); }
    html.bone.bn-js .bh-hero.bn-go .bh-stage { opacity: 1; transform: none; transition: opacity .7s var(--bn-ease), transform .9s var(--bn-release); transition-delay: var(--bh-d, 0s); }
    html.bone .bh-hero.bn-go .r-arc { animation: bh-draw 2.2s var(--bn-ease) .7s forwards; }
    html.bone .bh-hero.bn-go .r-pin-ring { animation: bh-ping 2.4s var(--bn-ease) 1.2s infinite; }
    html.bone .bh-hero.bn-go .r-pin-ring.hot { animation-delay: 2.4s; }
    html.bone .bh-float--a { animation: bn-float 6.5s ease-in-out infinite; }
    html.bone .bh-float--b { animation: bn-float 7.5s ease-in-out .8s infinite; }
}
@media (prefers-reduced-motion: reduce) { html.bone .bh-route .r-arc { stroke-dashoffset: 0; } }
@keyframes bh-draw { to { stroke-dashoffset: 0; } }
@keyframes bh-ping { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3.2); } }

@media (max-width: 991px) {
    html.bone .bh-hero { padding: 104px 0 170px; border-radius: 0 0 32px 32px; min-height: 0; }
    html.bone .bh-hero-in { grid-template-columns: 1fr; gap: 26px; }
    html.bone .bh-route { justify-self: center; max-width: 520px; }
    html.bone .bh-search-card { grid-template-columns: 1fr; }
    html.bone .bh-steps-ol { grid-template-columns: 1fr 1fr; }
    html.bone .bh-steps-track { display: none; }
    html.bone .bh-apps-card { grid-template-columns: 1fr; padding: 32px; }
    html.bone .bh-cta-band { grid-template-columns: 1fr; padding: 40px 28px; }
    html.bone .bh-cta-band .bh-ctas { justify-content: flex-start; }
}
@media (max-width: 620px) {
    html.bone .bh-wrap { padding: 0 16px; }
    html.bone .bh-steps-ol { grid-template-columns: 1fr; }
    html.bone .bh-sform { flex-direction: column; }
    html.bone .bh-sform .bh-btn { width: 100%; }
    html.bone .bh-float { display: none; }
    html.bone .bh-shot { width: 280px; height: 190px; }
    html.bone .bh-sec { padding-top: 76px; }
    html.bone .bh-ctas .bh-btn { flex: 1 1 auto; }
}

/* =====================================================================================
   12. Blob, chunk, monochrome, motion (owner, 2026-10-22: "i like this blob kind of style
   chunky letters monochrome ... everything animated moving and dynamic dont skip a beat on a
   button on symmetry"). Archivo's width axis gives the chunk (font-stretch), shapes go round
   and soft, colour pulls back to navy and bone (the red action and the auction marks stay),
   and everything that can be touched answers.
   ===================================================================================== */
html.bone { --bn-chunk: 116%; --bn-chunk-xl: 125%; --bn-blob-c: #DED9D1; --bn-blob-c2: #E2DED7; --bn-glow-c: rgba(241, 239, 234, .16); }
html.bone[data-theme="dark"] { --bn-blob-c: #171717; --bn-blob-c2: #141414; --bn-glow-c: rgba(255, 255, 255, .09); }

/* --- Chunky letters --- */
html.bone .dp-title, html.bone .dealer-main h1, html.bone .bh-h1, html.bone .bh-h2, html.bone .auth-head h1, html.bone .modal-title,
html.bone .bidlimit-card .bl-deposit .bl-val, html.bone .ph-kpi .k-val, html.bone .dp-kpi .k-val, html.bone .cbp-fund-head h3 {
    font-stretch: var(--bn-chunk-xl); font-weight: 900 !important; letter-spacing: -.025em !important; }
html.bone .dp-card-title, html.bone .cbp-notif-head, html.bone .bh-step h3, html.bone .bh-scol h3, html.bone .bidlimit-card .bl-val,
html.bone .mc-name, html.bone .tm-name, html.bone .wl-name, html.bone .calc-head2 h2, html.bone .lp-article h2, html.bone .surf-lock-title { font-stretch: 110%; }
html.bone .ds-group, html.bone .bl-lbl, html.bone .k-lbl, html.bone .dp-sub-title, html.bone .mc-title-l, html.bone .mc-vin-l, html.bone .bh-kicker,
html.bone .bh-eyebrow, html.bone .cbp-mnav-title, html.bone .dp-table thead th, html.bone .dealer-main #myTable thead th, html.bone .dealer-main table.mc-table > thead > tr > th {
    font-stretch: 112%; font-weight: 800 !important; letter-spacing: .07em !important; }
html.bone:lang(ka) .ds-group, html.bone:lang(ka) .bl-lbl, html.bone:lang(ka) .k-lbl, html.bone:lang(ka) .bh-kicker, html.bone:lang(ka) .dealer-main table.mc-table > thead > tr > th { letter-spacing: 0 !important; }
html.bone .dp-btn, html.bone .dealer-main .btn, html.bone .modal .btn, html.bone .auth-btn, html.bone .cbp-fund-btn, html.bone .bh-btn, html.bone .bl-cta,
html.bone .surf-lock-btn, html.bone .chat-send, html.bone .dealer-main .mc-btn, html.bone .cbp-nav .cbp-login, html.bone .cbp-nav .cbp-cta, html.bone .cbp-user-name,
html.bone .cbp-deposit-amt, html.bone .dealer-sidebar .ds-link .ds-lbl { font-stretch: 106%; }

/* --- Monochrome: navy and bone carry the page; red only for the one action --- */
html.bone .tt-cta { background: var(--bn-strong) !important; color: var(--bn-on-strong) !important; }
html.bone .tt-cta:hover { box-shadow: 0 18px 32px -20px rgba(14, 44, 79, .9) !important; }
html.bone .mc-title-order { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; }
html.bone .dealer-main .btn-success, html.bone .modal .btn-success { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; }

/* --- Blobs: soft shapes everywhere a corner used to be --- */
html.bone .dp-btn, html.bone .dealer-main .btn, html.bone .modal .btn, html.bone .auth-btn, html.bone .cbp-fund-btn, html.bone .bh-btn, html.bone .bl-cta,
html.bone .bidlimit-card .bl-cta, html.bone .surf-lock-btn, html.bone .chat-send, html.bone .dealer-main .mc-btn, html.bone .mc-title-order,
html.bone .cbp-nav .cbp-bell, html.bone .cbp-nav .cbp-theme-toggle, html.bone .cbp-nav .cbp-lang, html.bone .cbp-nav .cbp-login, html.bone .cbp-nav .cbp-cta,
html.bone .cbp-burger, html.bone .ds-toggle, html.bone .dealer-sidebar .ds-link, html.bone .bn-rail-pill, html.bone .cbp-nav .cbp-links a.cbp-link,
html.bone .dealer-main .dt-container input.dt-input, html.bone .dealer-main div.dt-container input.dt-input, html.bone .dealer-main .dt-search input,
html.bone .dealer-main .dt-container select.dt-input, html.bone .dealer-main div.dt-container select.dt-input, html.bone .dealer-main .dt-paging .dt-paging-button,
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button, html.bone .bh-sform input, html.bone .cbp-mnav-it, html.bone .cbp-mnav-auc a,
html.bone .cbp-seg, html.bone .cbp-seg button, html.bone .act-state, html.bone .total-due-pill, html.bone .cbp-fund-x, html.bone .modal .close, html.bone .modal .btn-close,
html.bone .dealer-main .mc-payform .pay-amt, html.bone .surf-lock-mark { border-radius: 999px !important; }
html.bone .mc-thumb, html.bone .bh-scol, html.bone .cbp-notif-item, html.bone .mc-own { border-radius: 22px !important; }

/* The page's own blobs: three soft shapes drift and change shape behind everything (bone-motion.js adds them). */
html.bone .bn-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.bone .bn-blobs i { position: absolute; display: block; width: 54vmax; height: 54vmax; background: var(--bn-blob-c);
    border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%; translate: 0 calc(var(--bn-sy, 0) * var(--bn-par, -.06) * 1px); }
html.bone .bn-blobs i:nth-child(1) { left: -16vmax; top: -22vmax; --bn-par: -.10; }
html.bone .bn-blobs i:nth-child(2) { right: -20vmax; top: 34vh; width: 46vmax; height: 46vmax; background: var(--bn-blob-c2); --bn-par: -.18; }
html.bone .bn-blobs i:nth-child(3) { left: 34vw; bottom: -34vmax; width: 40vmax; height: 40vmax; --bn-par: -.05; }
@keyframes bn-morph {
    0% { border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%; }
    33% { border-radius: 62% 38% 44% 56% / 58% 52% 48% 42%; }
    66% { border-radius: 38% 62% 57% 43% / 41% 63% 37% 59%; }
    100% { border-radius: 55% 45% 38% 62% / 63% 44% 56% 37%; } }
@keyframes bn-turn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
    html.bone .bn-blobs i:nth-child(1) { animation: bn-morph 21s ease-in-out infinite alternate, bn-turn 110s linear infinite; }
    html.bone .bn-blobs i:nth-child(2) { animation: bn-morph 26s ease-in-out -9s infinite alternate, bn-turn 140s linear infinite reverse; }
    html.bone .bn-blobs i:nth-child(3) { animation: bn-morph 31s ease-in-out -4s infinite alternate, bn-turn 170s linear infinite; }
}

/* --- The light under the pointer: a small soft spot, centred exactly on the pointer --- */
html.bone .bn-glow { position: absolute; left: 0; top: 0; z-index: 0; width: var(--bn-gs, 220px); height: var(--bn-gs, 220px); border-radius: 50%; pointer-events: none;
    margin: calc(var(--bn-gs, 220px) / -2) 0 0 calc(var(--bn-gs, 220px) / -2); background: radial-gradient(closest-side, var(--bn-glow-c), transparent);
    opacity: 0; transition: opacity .35s var(--bn-ease); will-change: transform; }
html.bone .bn-glow.on { opacity: 1; }
html.bone .bidlimit-card > *:not(.bn-glow), html.bone .bh-cta-band > *:not(.bn-glow) { position: relative; z-index: 1; }

/* --- Every press answers: an ink drop from the finger (the apps' InkSparkle) and a squish --- */
html.bone .bn-ink { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
html.bone .bn-ink i { position: absolute; border-radius: 50%; background: currentColor; opacity: .26; transform: scale(0); animation: bn-ink .62s var(--bn-decel) forwards; }
@keyframes bn-ink { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    html.bone .dp-btn:active, html.bone .dealer-main .btn:active, html.bone .modal .btn:active, html.bone .auth-btn:active, html.bone .cbp-fund-btn:active,
    html.bone .bh-btn:active, html.bone .bl-cta:active, html.bone .surf-lock-btn:active, html.bone .chat-send:active, html.bone .dealer-main .mc-btn:active,
    html.bone .cbp-nav .cbp-bell:active, html.bone .cbp-nav .cbp-theme-toggle:active, html.bone .cbp-nav .cbp-deposit:active, html.bone .cbp-nav .cbp-user-btn:active,
    html.bone .cbp-nav .cbp-lang:active, html.bone .cbp-nav .cbp-login:active, html.bone .cbp-nav .cbp-cta:active {
        transform: scale(1.035, .92) !important; transition: transform .12s var(--bn-ease) !important; }
    html.bone .dp-btn:hover, html.bone .dealer-main .btn:hover, html.bone .auth-btn:hover, html.bone .cbp-fund-btn:hover, html.bone .bl-cta:hover,
    html.bone .surf-lock-btn:hover, html.bone .chat-send:hover, html.bone .dealer-main .mc-btn:hover { transform: translateY(-2px); }
    html.bone .cbp-nav .cbp-bell:hover svg { animation: bn-ring .7s var(--bn-ease); transform-origin: 50% 10%; }
    html.bone .cbp-nav .cbp-theme-toggle:hover svg { animation: bn-turnq .6s var(--bn-release); }
    html.bone .dealer-sidebar .ds-link:hover .ds-ic:not(.ds-mark) svg { animation: bn-wiggle .55s var(--bn-ease); }
    html.bone .dealer-sidebar .ds-link:hover .ds-ic.ds-mark { animation: bn-pop .42s var(--bn-pop); }
}
@keyframes bn-ring { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 40% { rotate: -12deg; } 60% { rotate: 8deg; } 80% { rotate: -4deg; } }
@keyframes bn-turnq { from { rotate: -90deg; scale: .6; } to { rotate: 0deg; scale: 1; } }
@keyframes bn-wiggle { 0%, 100% { rotate: 0deg; scale: 1; } 30% { rotate: -10deg; scale: 1.12; } 60% { rotate: 6deg; } }

/* --- Symmetry: every button is one shape, its icon and words centred on one line --- */
html.bone .dp-btn, html.bone .dealer-main .btn, html.bone .modal .btn, html.bone .auth-btn, html.bone .cbp-fund-btn, html.bone .bh-btn, html.bone .bl-cta,
html.bone .surf-lock-btn, html.bone .chat-send, html.bone .dealer-main .mc-btn, html.bone .cbp-nav .cbp-login, html.bone .cbp-nav .cbp-cta {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; line-height: 1 !important;
    text-align: center; white-space: nowrap; position: relative; isolation: isolate; vertical-align: middle; }
html.bone .auth-btn { display: flex !important; }
html.bone .dp-btn > *, html.bone .dealer-main .btn > *, html.bone .bh-btn > *, html.bone .auth-btn > * { position: relative; z-index: 1; }
html.bone .dp-btn svg, html.bone .dealer-main .btn svg, html.bone .bh-btn svg, html.bone .bl-cta svg { width: 20px; height: 20px; flex: 0 0 auto; }
html.bone .cbp-nav .cbp-bell, html.bone .cbp-nav .cbp-theme-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
html.bone .cbp-nav .cbp-actions > * { flex: 0 0 auto; }
html.bone .cbp-nav .cbp-deposit, html.bone .cbp-nav .cbp-user-btn, html.bone .cbp-nav .cbp-lang { line-height: 1; }

/* --- The page reads as it arrives: titles rise word by word --- */
html.bone .bn-split .bn-w { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
    html.bone.bn-js .bn-split .bn-w { opacity: 0; transform: translateY(.55em) rotate(3deg); filter: blur(6px); }
    html.bone.bn-js .bn-split.bn-go .bn-w { opacity: 1; transform: none; filter: none;
        transition: opacity .5s var(--bn-ease), transform .8s var(--bn-release), filter .5s var(--bn-ease); transition-delay: calc(var(--bn-i, 0) * 45ms + 40ms); }
}

/* --- How far down the page you are: a hairline at the very top --- */
html.bone .bn-progress { position: fixed; left: var(--bn-side, 0px); right: 0; top: 0; height: 3px; z-index: 1003; pointer-events: none;
    background: var(--bn-navy-ink); transform-origin: left center; transform: scaleX(var(--bn-p, 0)); opacity: var(--bn-po, 0); transition: opacity .3s; }

/* --- Home: the chunky band of names, and blobs in the hero --- */
html.bone .bh-band { position: relative; overflow: hidden; padding: 70px 0 10px; }
html.bone .bh-band-track { display: flex; align-items: center; gap: 34px; width: max-content; transform: translateX(var(--bh-x, 0px)) skewX(var(--bh-skew, 0deg)); will-change: transform; }
html.bone .bh-band-track span { font-size: clamp(56px, 9vw, 140px); font-weight: 900; font-stretch: 125%; line-height: .95; letter-spacing: -.03em; color: var(--bn-text); text-transform: uppercase; white-space: nowrap; }
html.bone .bh-band-track span.o { color: transparent; -webkit-text-stroke: 2px var(--bn-text); }
html.bone .bh-band-track i { flex: 0 0 auto; width: clamp(34px, 4vw, 64px); height: clamp(34px, 4vw, 64px); background: var(--bn-text); border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%; }
html.bone .bh-band-track i.hot { background: var(--bn-hot); }
@media (prefers-reduced-motion: no-preference) { html.bone .bh-band-track i { animation: bn-morph 6s ease-in-out infinite alternate, bn-turn 14s linear infinite; } }
html.bone .bh-hero-blob { position: absolute; z-index: -1; pointer-events: none; border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%; background: rgba(241, 239, 234, .05); }
html.bone .bh-hero-blob.b1 { width: 620px; height: 620px; right: -160px; top: -180px; }
html.bone .bh-hero-blob.b2 { width: 420px; height: 420px; left: -140px; bottom: -160px; background: rgba(241, 239, 234, .04); }
html.bone[data-theme="dark"] .bh-hero-blob { background: rgba(255, 255, 255, .03); }
@media (prefers-reduced-motion: no-preference) {
    html.bone .bh-hero-blob.b1 { animation: bn-morph 14s ease-in-out infinite alternate, bn-turn 60s linear infinite; }
    html.bone .bh-hero-blob.b2 { animation: bn-morph 17s ease-in-out -5s infinite alternate, bn-turn 80s linear infinite reverse; }
    html.bone .bh-step.is-on .bh-node { animation: bn-morph 7s ease-in-out infinite alternate; }
    html.bone .bh-hero .bh-btn--hot { animation: bn-breathe 3.2s var(--bn-ease) 2.4s infinite; }
}
@keyframes bn-breathe { 0%, 100% { box-shadow: 0 16px 30px -16px rgba(217, 45, 72, .85), 0 0 0 0 rgba(217, 45, 72, 0); } 50% { box-shadow: 0 16px 30px -16px rgba(217, 45, 72, .85), 0 0 0 10px rgba(217, 45, 72, .14); } }
html.bone .bh-node { border-radius: 30px; }
html.bone .bh-apps-card, html.bone .bh-cta-band { border-radius: 48px; }
html.bone .bh-search-card { border-radius: 40px; }
html.bone .bh-hero { border-radius: 0 0 64px 64px; }
@media (max-width: 991px) { html.bone .bh-hero { border-radius: 0 0 40px 40px; } html.bone .bh-apps-card, html.bone .bh-cta-band { border-radius: 36px; } }
html.bone .bh-hero > .bh-wrap { position: relative; z-index: 1; }
html.bone .bh-hero .bn-glow { z-index: 0; }
/* The expanded headline needs the wider column and a smaller size to stay at four or five lines. */
html.bone .bh-hero-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); }
html.bone .bh-h1 { font-size: clamp(34px, 3.7vw, 54px) !important; font-stretch: 115% !important; line-height: 1.04 !important; }
html.bone .bh-apps-card .bh-h2 { font-size: clamp(26px, 2.5vw, 38px) !important; }
@media (max-width: 991px) { html.bone .bh-hero-in { grid-template-columns: 1fr; } html.bone .bh-h1 { font-size: clamp(32px, 8.4vw, 46px) !important; } }
/* Georgian (owner, 2026-10-23: "looks weird and misplaced when translated to georgian"). The hero line is about
   1.6 times as long in Georgian and its letters are wider, so at the English size it ran to seven lines on a
   desktop and nine on a phone and pushed the buttons and the app card off the screen. Its own size and line
   height, for the hero alone; the rule above wins over the one in section 11, so these carry !important too. */
html.bone:lang(ka) .bh-h1 { font-size: clamp(28px, 2.7vw, 41px) !important; font-stretch: 100% !important; letter-spacing: -.3px !important; line-height: 1.22 !important; }
html.bone:lang(ka) .bh-lead { font-size: 17px; }
@media (max-width: 991px) { html.bone:lang(ka) .bh-h1 { font-size: clamp(24px, 6.5vw, 34px) !important; } }
@media (max-width: 620px) { html.bone:lang(ka) .bh-lead { font-size: 15.5px; } }

/* ---------- 13. Fixes from the page-by-page audit (2026-10-22) ---------- */
/* Payment History: rows, types and amounts in Bone; on a phone each payment is a Bone card. */
html.bone .ph-type { border-radius: 999px !important; font-size: 12px !important; font-weight: 800 !important; padding: 5px 12px !important; background: var(--bn-tile) !important; color: var(--bn-text2) !important; }
html.bone .ph-vin { color: var(--bn-text) !important; }
html.bone .ph-detail { color: var(--bn-text2) !important; }
html.bone .ph-amt.in { color: var(--bn-good) !important; }
html.bone .ph-amt.out { color: var(--bn-bad) !important; }
html.bone .dealer-main #myTable tbody td { color: var(--bn-text2); }
@media (max-width: 640px) {
    html.bone .ph-kpis { grid-template-columns: 1fr 1fr !important; }
    html.bone .ph-kpi.k-net { grid-column: 1 / -1; }
    html.bone .ph-kpi .k-val { font-size: 20px !important; font-stretch: 100% !important; overflow-wrap: normal !important; white-space: nowrap; }
    html.bone .ph-page table#myTable > tbody { gap: 10px !important; }
    html.bone .ph-page table#myTable > tbody > tr { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-l) !important; padding: 16px 18px !important; gap: 8px 12px !important; }
    html.bone .ph-page table#myTable > tbody > tr > td { padding: 0 !important; border: 0 !important; background: transparent !important; }
    html.bone .ph-page table#myTable > tbody > tr > td:nth-child(1), html.bone .ph-page table#myTable > tbody > tr > td:nth-child(5) { color: var(--bn-muted) !important; font-size: 13px !important; }
    html.bone .ph-page table#myTable > tbody > tr > td:nth-child(5) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
    html.bone .ph-page table#myTable > tbody > tr > td:nth-child(4) { font-size: 18px !important; font-weight: 900; }
}
/* My Cars on a phone: the sort menu is a pill like the search beside it. */
html.bone .mc-sort { background: var(--bn-card) !important; border: 0 !important; border-radius: 999px !important; height: 52px !important; padding: 0 18px !important; color: var(--bn-text) !important; }
html.bone .mc-sort select { color: var(--bn-text) !important; font-weight: 800 !important; border-radius: 999px !important; }
/* The announcement: its × never sits on the title. */
html.bone .ann-toast-title { padding: 16px 64px 16px 18px !important; }
@media (max-width: 620px) {
    html.bone .ann-toast { left: 12px; right: 12px; bottom: 12px; width: auto; }
    html.bone .ann-toast-body { max-height: 32vh; }
}

/* ---------- 14. Small things that move ---------- */
@keyframes bn-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 60% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); } }
@media (prefers-reduced-motion: no-preference) {
    /* Work still in progress breathes; a finished state stands still. */
    html.bone .mc-title--preparing .mc-title-s::before { animation: bn-dot 1.8s var(--bn-ease) infinite; }
    html.bone .cbp-nav .cbp-deposit::after { transition: rotate .5s var(--bn-release), scale .3s var(--bn-release); }
    html.bone .cbp-nav .cbp-deposit:hover::after { rotate: 90deg; scale: 1.08; }
    html.bone .cbp-nav .cbp-user-btn .cbp-avatar { transition: scale .4s var(--bn-release); }
    html.bone .cbp-nav .cbp-user-btn:hover .cbp-avatar { scale: 1.1; }
    html.bone .cbp-nav .cbp-user-btn svg, html.bone .cbp-nav .cbp-lang-caret { transition: rotate .4s var(--bn-release); }
    html.bone .cbp-user.open .cbp-user-btn svg, html.bone .cbp-langwrap.open .cbp-lang-caret { rotate: 180deg; }
    html.bone .dealer-main .dt-search input:focus, html.bone .dealer-main div.dt-container input.dt-input:focus { transform: scale(1.02); transition: transform .4s var(--bn-release), box-shadow .26s; }
    html.bone .mc-src, html.bone .b-badge, html.bone .dealer-main .true, html.bone .dealer-main .false { transition: scale .35s var(--bn-release); }
    html.bone .mc-src:hover, html.bone .b-badge:hover { scale: 1.12; }
    html.bone .bh-scol h3 span { transition: rotate .5s var(--bn-release), scale .5s var(--bn-release); }
    html.bone .bh-scol:hover h3 span { rotate: -12deg; scale: 1.12; }
    html.bone .bh-step-card .bh-step-n { transition: background-color .3s, color .3s; }
    html.bone .bh-step.is-on .bh-step-n { background: var(--bn-primary); color: var(--bn-on-primary); }
    html.bone .wl-card .wl-thumb img { transition: scale .8s var(--bn-ease); }
    html.bone .wl-card:hover .wl-thumb img { scale: 1.06; }
    html.bone .cbp-notif-item { transition: transform .4s var(--bn-release), background-color .2s; }
    html.bone .cbp-notif-item:hover { transform: translateX(4px); }
    html.bone .dp-kpi, html.bone .ph-kpi { transition: transform .45s var(--bn-release); }
    html.bone .dp-kpi:hover, html.bone .ph-kpi:hover { transform: translateY(-3px); }
}
@media (max-width: 640px) { html.bone .ph-page .dp-tablewrap { background: transparent !important; padding: 0 !important; } }
/* The apps page dyes every link inside [class*="apps-"] at night; its button outranks that here. */
html.bone .surf-lock-actions a.surf-lock-btn, html.bone[data-theme] .surf-lock-actions a.surf-lock-btn { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; }
/* Car names read whole: the normal width in the card, up to three lines. */
html.bone .mc-name { font-stretch: 100% !important; }
/* Buttons in the payment cell wrap to two lines rather than lose words ("Request credit"). */
html.bone .dealer-main .mc-acts .mc-btn, html.bone .dealer-main .mc-acts .act-btn, html.bone .dealer-main .mc-acts button {
    white-space: normal !important; height: auto !important; min-height: 42px !important; line-height: 1.15 !important; padding: 8px 14px !important;
    text-overflow: clip !important; overflow: visible !important; font-stretch: 100% !important; }
/* Home buttons hold their ink against the site's night link rules (which dye every <a>). */
html.bone .bh a.bh-btn--strong, html.bone[data-theme] .bh a.bh-btn--strong { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; }
html.bone .bh a.bh-btn--hot, html.bone[data-theme] .bh a.bh-btn--hot { color: #FFFFFF !important; }
html.bone .bh a.bh-btn--soft, html.bone[data-theme] .bh a.bh-btn--soft { color: var(--bn-on-strong) !important; }
html.bone .bh a.bh-btn--go, html.bone[data-theme] .bh a.bh-btn--go { color: #FFFFFF !important; }
html.bone .bh a.bh-btn--bone, html.bone[data-theme] .bh a.bh-btn--bone { color: var(--bn-text) !important; }
html.bone[data-theme] .bh a.bh-btn--bone { background: #F1F1F1 !important; color: #0F0F0F !important; }
@media (max-width: 620px) {
    html.bone .bh-h1 { line-height: 1.1 !important; }
    html.bone .bh-h2 { line-height: 1.12 !important; }
    html.bone .bh-apps-art { overflow: hidden; }
    html.bone .bh-apps-art .dvl { --dvl-base: .8 !important; }
}

/* =====================================================================================
   15. Round three (owner, 2026-10-22): a little colour at night for money and status, the page
   counter and page buttons, the support chat and go-to-top buttons, the deposit "+", the rail,
   white left on the car page and the sign-in pages, text that went unreadable when selected,
   and every opened state (menus, panels, dialogs, dropdowns, autofill).
   ===================================================================================== */

/* --- Night keeps a little colour: money in is mint, money owed is coral, waiting is amber --- */
html.bone[data-theme="dark"] {
    --bn-good: #74D3A0; --bn-good-bg: rgba(116, 211, 160, .13);
    --bn-bad: #FF8E9E; --bn-bad-bg: rgba(255, 142, 158, .13);
    --bn-warn: #F0C36A; --bn-warn-bg: rgba(240, 195, 106, .13);
    --bn-info: #8DB7EC; --bn-info-bg: rgba(141, 183, 236, .13);
    --bn-on-strong-good: #74D3A0; --bn-on-strong-warn: #F0C36A; --bn-on-strong-bad: #FF8E9E;
}
html.bone .pay-ledger .pl-recv, html.bone .pay-ledger .pl-due.pl-paid, html.bone .mc-payfrom b { color: var(--bn-good) !important; }
html.bone .pay-ledger .pl-due:not(.pl-paid) { color: var(--bn-bad) !important; }
html.bone .mc-title--ready { --st: var(--bn-good) !important; }
html.bone .mc-title--preparing { --st: var(--bn-warn) !important; }
html.bone .mc-title-s { color: var(--st) !important; }
html.bone .mc-own--done .mc-own-ic { color: var(--bn-good) !important; }
html.bone .mc-own--due .mc-own-ic { color: var(--bn-warn) !important; }
html.bone .mc-own--missed .mc-own-ic, html.bone .mc-own--urgent .mc-own-sub { color: var(--bn-bad) !important; }
html.bone .bidlimit-card .bl-hold, html.bone .bidlimit-card .bl-sub--warn { color: var(--bn-on-strong-warn) !important; }
html.bone[data-theme="dark"] .total-due-pill { color: var(--bn-bad) !important; }

/* --- Selected text is always readable: a solid highlighter, never a tint --- */
html.bone ::selection { background: #F5D27A; color: #151412; text-shadow: none; }
html.bone[data-theme="dark"] ::selection { background: #F1F1F1; color: #0F0F0F; }
html.bone input::selection, html.bone textarea::selection { background: #F5D27A; color: #151412; }
html.bone[data-theme="dark"] input::selection, html.bone[data-theme="dark"] textarea::selection { background: #F1F1F1; color: #0F0F0F; }

/* --- Focus rings that show on navy as well as on bone --- */
html.bone .dealer-sidebar :focus-visible, html.bone .bh-hero :focus-visible, html.bone .bidlimit-card :focus-visible, html.bone .cbp-footer :focus-visible,
html.bone .bh-cta-band :focus-visible, html.bone .ci-hero :focus-visible, html.bone .scw-head :focus-visible { outline-color: #F1EFEA !important; }
html.bone body:not(.dealer-mode) .cbp-nav :focus-visible { outline-color: #F1EFEA !important; }
@media (max-width: 991px) { html.bone .cbp-nav :focus-visible, html.bone .cbp-links :focus-visible { outline-color: #F1EFEA !important; } }

/* --- The browser's autofill paints its own pale field; it takes Bone's well instead --- */
html.bone input:-webkit-autofill, html.bone input:-webkit-autofill:hover, html.bone textarea:-webkit-autofill, html.bone select:-webkit-autofill {
    -webkit-text-fill-color: var(--bn-text) !important; caret-color: var(--bn-text);
    -webkit-box-shadow: 0 0 0 1000px var(--bn-tile) inset !important; box-shadow: 0 0 0 1000px var(--bn-tile) inset !important;
    transition: background-color 99999s ease-out 0s; }
html.bone input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--bn-text) !important;
    -webkit-box-shadow: 0 0 0 2px var(--bn-navy-ink) inset, 0 0 0 1000px var(--bn-tile) inset !important;
    box-shadow: 0 0 0 2px var(--bn-navy-ink) inset, 0 0 0 1000px var(--bn-tile) inset !important; }

/* --- Page counter and page buttons: one pill each, the current page a filled dot --- */
html.bone .dealer-main div.dt-container div.dt-layout-row:last-child { align-items: center; margin-top: 18px; gap: 12px; }
html.bone .dealer-main .dt-info, html.bone .dealer-main .dataTables_info {
    display: inline-flex !important; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--bn-card);
    color: var(--bn-text2) !important; font-size: 14px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; font-stretch: 106%; }
html.bone .dealer-main .dt-info:empty { display: none !important; }
html.bone .dealer-main .dt-paging nav, html.bone .dealer-main .dataTables_paginate {
    display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bn-card); }
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button, html.bone .dealer-main .dataTables_paginate .paginate_button {
    min-width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--bn-text) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 40px !important;
    font-variant-numeric: tabular-nums; box-shadow: none !important; transition: background-color .2s, color .2s, transform .35s var(--bn-release) !important; }
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) { background: var(--bn-tile) !important; color: var(--bn-text) !important; }
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.current, html.bone .dealer-main .dataTables_paginate .paginate_button.current {
    background: var(--bn-selected) !important; color: var(--bn-on-selected) !important; }
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.disabled { opacity: .3 !important; }
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.first, html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.previous,
html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.next, html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.last { font-size: 19px !important; padding: 0 !important; }
html.bone .dealer-main .dt-paging .ellipsis { color: var(--bn-muted); padding: 0 6px; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
    html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button.current { animation: bn-pop .42s var(--bn-pop); }
    html.bone .dealer-main div.dt-container .dt-paging .dt-paging-button:active:not(.disabled) { transform: scale(.9) !important; }
}

/* --- Go to top: a round button with the page's progress drawn round its edge --- */
html.bone .scrollup, html.bone body:has(#scwRoot) .scrollup {
    width: 52px !important; height: 52px !important; line-height: 52px !important; right: 26px !important; bottom: 24px; border-radius: 50% !important; text-align: center;
    background: var(--bn-card) !important; color: var(--bn-text) !important; box-shadow: 0 16px 30px -18px rgba(21, 20, 18, .6) !important; z-index: 99989 !important;
    transition: transform .4s var(--bn-release), background-color .2s !important; }
html.bone body:has(#scwRoot) .scrollup { bottom: 96px !important; }
html.bone .scrollup i { line-height: 52px !important; font-size: 17px !important; color: inherit !important; transition: transform .4s var(--bn-release); }
html.bone .scrollup::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(var(--bn-navy-ink) calc(var(--bn-p, 0) * 360deg), color-mix(in srgb, var(--bn-line) 70%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
html.bone .scrollup:hover { background: var(--bn-raised) !important; }
html.bone .scrollup:hover i { transform: translateY(-3px); }
html.bone .scrollup:active { transform: scale(.92); }
html.bone[data-theme="dark"] body:has(#scwRoot) .scrollup { background: var(--bn-raised) !important; }

/* --- Support chat: a blob that breathes; opens into a Bone panel --- */
html.bone #scwRoot { right: 24px !important; bottom: 24px !important; font-family: var(--bn-font) !important; }
html.bone .scw-launcher { width: 56px !important; height: 56px !important; border: 0 !important; background: var(--bn-primary) !important; color: var(--bn-on-primary) !important;
    box-shadow: 0 18px 32px -16px rgba(14, 44, 79, .75) !important; border-radius: 46% 54% 61% 39% / 44% 39% 61% 56% !important; }
html.bone[data-theme="dark"] .scw-launcher { box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .9) !important; }
html.bone .scw-launcher svg { stroke: currentColor; }
@media (prefers-reduced-motion: no-preference) {
    html.bone .scw-launcher { animation: bn-morph 8s ease-in-out infinite alternate; }
    html.bone .scw-launcher:hover { animation-play-state: paused; }
}
html.bone .scw-badge { background: var(--bn-hot) !important; border: 2px solid var(--bn-bg) !important; box-shadow: none !important; font-weight: 900; }
html.bone .scw-panel { background: var(--bn-raised) !important; border: 0 !important; border-radius: 30px !important; box-shadow: var(--bn-float) !important; bottom: 72px; }
html.bone .scw-head { background: var(--bn-strong) !important; color: var(--bn-on-strong) !important; border: 0 !important; padding: 16px 16px 16px 18px; }
html.bone .scw-head-ic { background: rgba(241, 239, 234, .12) !important; color: var(--bn-on-strong) !important; border-radius: 14px !important; }
html.bone .scw-title { color: var(--bn-on-strong) !important; font-weight: 900 !important; font-stretch: 110%; }
html.bone .scw-sub { color: var(--bn-on-strong-muted) !important; }
html.bone .scw-hbtn { width: 38px; height: 38px; border-radius: 999px !important; background: rgba(241, 239, 234, .10) !important; color: var(--bn-on-strong) !important; border: 0 !important; }
html.bone .scw-hbtn:hover { background: rgba(241, 239, 234, .2) !important; }
html.bone .scw-log { background: var(--bn-tile) !important; }
html.bone .scw-empty, html.bone .scw-loading, html.bone .scw-system, html.bone .scw-metatime, html.bone .scw-hist-empty { color: var(--bn-muted) !important; }
html.bone .scw-msg.mine .scw-bubble { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; border-radius: 20px 20px 6px 20px !important; }
html.bone .scw-msg.theirs .scw-bubble { background: var(--bn-card) !important; color: var(--bn-text) !important; border: 0 !important; border-radius: 20px 20px 20px 6px !important; }
html.bone .scw-composer { background: var(--bn-raised) !important; border-top: 1px solid var(--bn-line) !important; }
html.bone .scw-composer textarea { background: var(--bn-tile) !important; color: var(--bn-text) !important; border: 0 !important; border-radius: 22px !important; }
html.bone .scw-composer textarea:focus { box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; }
html.bone .scw-send { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; border-radius: 999px !important; border: 0 !important; }
html.bone .scw-end, html.bone .scw-newchat, html.bone .scw-back { border-radius: 999px !important; background: var(--bn-card) !important; color: var(--bn-text) !important; border: 0 !important; font-weight: 800 !important; }
html.bone .scw-hist { background: var(--bn-card) !important; border: 0 !important; border-radius: 18px !important; color: var(--bn-text) !important; }
html.bone .scw-hist:hover { background: color-mix(in srgb, var(--bn-card) 70%, var(--bn-line)) !important; }
html.bone .scw-hist-preview { color: var(--bn-text2) !important; }
html.bone .scw-closed { background: var(--bn-tile) !important; color: var(--bn-text2) !important; }
html.bone .scw-toast { border-radius: 14px !important; background: var(--bn-text) !important; color: var(--bn-bg) !important; }
html.bone .scw-toast.err { background: var(--bn-hot) !important; color: #FFFFFF !important; }

/* --- The deposit "+": drawn, so it sits dead centre in its circle --- */
html.bone .cbp-nav .cbp-deposit::after {
    content: "" !important;
    background: linear-gradient(var(--bar-bg), var(--bar-bg)) center / 12px 2.5px no-repeat,
                linear-gradient(var(--bar-bg), var(--bar-bg)) center / 2.5px 12px no-repeat,
                var(--bar-accent) !important; }

/* --- The rail floats: a rounded navy card beside the page, items as pills with round icon chips --- */
@media (min-width: 992px) {
    html.bone .dealer-shell { --side-w: 260px; }
    html.bone .dealer-shell.nav-collapsed { --side-w: 96px; }
    html.bone body.dealer-mode { --bn-side: 260px; }
    html.bone body.dealer-mode:has(.dealer-shell.nav-collapsed) { --bn-side: 96px; }
    html.bone .dealer-sidebar { top: 12px !important; left: 12px !important; bottom: 12px !important; width: calc(var(--side-w) - 24px) !important;
        border-radius: 32px !important; box-shadow: 0 30px 60px -36px rgba(14, 44, 79, .85) !important; scrollbar-width: none; }
    html.bone .dealer-sidebar::-webkit-scrollbar { width: 0; }
    html.bone[data-theme="dark"] .dealer-sidebar { box-shadow: inset 0 0 0 1px #242424 !important; }
}
html.bone .ds-top { min-height: 68px; padding: 16px 12px 4px 18px !important; }
html.bone .ds-toggle { width: 36px !important; height: 36px !important; background: rgba(241, 239, 234, .08) !important; }
html.bone .ds-nav { padding: 2px 12px 22px !important; gap: 3px !important; }
html.bone .ds-group { padding: 18px 12px 8px !important; display: flex; align-items: center; gap: 10px; }
html.bone .ds-group::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(241, 239, 234, .12); }
html.bone[data-theme="dark"] .ds-group::after { background: rgba(241, 241, 241, .08); }
html.bone .dealer-sidebar .ds-link, html.bone .dealer-sidebar .ds-link:link, html.bone .dealer-sidebar .ds-link:visited { height: 46px; padding: 0 14px 0 7px; gap: 12px; font-size: 14.5px; }
html.bone .dealer-sidebar .ds-ic { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; border-radius: 50%; background: rgba(241, 239, 234, .08);
    display: flex; align-items: center; justify-content: center; opacity: 1; transition: background-color .25s, color .25s; }
html.bone[data-theme="dark"] .dealer-sidebar .ds-ic { background: rgba(241, 241, 241, .06); }
html.bone .dealer-sidebar .ds-ic svg { width: 18px !important; height: 18px !important; }
html.bone .dealer-sidebar .ds-link.active .ds-ic:not(.ds-mark) { background: var(--bn-rail-sel-ink); color: var(--bn-rail-sel) !important; }
html.bone .dealer-sidebar .ds-ic.ds-mark { width: 32px !important; min-width: 32px; height: 32px !important; padding: 0 !important; border-radius: 50% !important; font-size: 13px !important; }
html.bone .dealer-sidebar .ds-mark-ia { font-size: 10px !important; }
html.bone .bn-rail-pill { left: 12px; right: 12px; height: 46px; }
html.bone .nav-collapsed .ds-top { padding: 16px 0 6px !important; }
html.bone .nav-collapsed .ds-nav { padding: 2px 0 22px !important; align-items: center; }
html.bone .nav-collapsed .ds-group { padding: 12px 18px 6px !important; }
html.bone .nav-collapsed .ds-group span { display: none; }
html.bone .nav-collapsed .dealer-sidebar .ds-link { width: 46px; padding: 0 !important; justify-content: center; }
html.bone .nav-collapsed .bn-rail-pill { left: 13px; right: 13px; }

/* --- The car page: no white, a rounded navy head --- */
html.bone .ci-hero { background-color: var(--bn-strong) !important; background-image: none !important; margin: 12px 32px 0; border-radius: 36px; padding: 30px 0 28px; }
html.bone[data-theme="dark"] .ci-hero { background-image: linear-gradient(135deg, var(--bn-strong-glow), var(--bn-strong)) !important; }
html.bone .ci-hero::after, html.bone .ci-hero::before { display: none !important; }
html.bone .ci-hero-eyebrow { color: var(--bn-on-strong-muted) !important; letter-spacing: .08em; font-stretch: 112%; }
html.bone .ci-hero-title { color: var(--bn-on-strong) !important; font-weight: 900 !important; font-stretch: 118%; letter-spacing: -.02em; }
html.bone .ci-hero-vin { color: var(--bn-on-strong-muted) !important; }
html.bone .ci-hero-src { height: 26px !important; min-width: 26px; border-radius: 9px !important; vertical-align: middle; }
html.bone .ci-hero-src--c { background: var(--bn-copart) !important; }
html.bone .ci-hero-src--i { background: var(--bn-iaai) !important; }
html.bone .ci-gallery { background: var(--bn-card) !important; border: 0 !important; border-radius: var(--bn-r-l) !important; box-shadow: none !important; padding: 16px !important; }
html.bone .ci-gallery img { border-radius: 18px; }
html.bone .ci-btn { min-height: 48px; padding: 0 22px !important; border: 0 !important; border-radius: 999px !important; background: var(--bn-card) !important;
    color: var(--bn-text) !important; font-size: 15px !important; font-weight: 800 !important; box-shadow: none !important; }
html.bone .ci-btn:hover { background: color-mix(in srgb, var(--bn-card) 75%, var(--bn-line)) !important; }
html.bone .ci-btn-primary { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; }
html.bone .ci-download { color: var(--bn-navy-ink) !important; font-weight: 800 !important; }
html.bone .ci-card-title, html.bone[data-theme="dark"] .ci-card-title { color: var(--bn-muted) !important; letter-spacing: .07em !important; font-stretch: 112%; }
html.bone .ci-row .ci-k, html.bone[data-theme="dark"] .ci-row .ci-k { color: var(--bn-muted) !important; }
html.bone .ci-row .ci-v, html.bone[data-theme="dark"] .ci-row .ci-v { color: var(--bn-text) !important; }
html.bone .ci-row .ci-v a { color: var(--bn-navy-ink) !important; }
@media (max-width: 991px) { html.bone .ci-hero { margin: 10px 12px 0; border-radius: 28px; } }

/* --- Sign-in and sign-up: the Google button, the divider, the Cloudflare check --- */
html.bone .g-btn, html.bone[data-theme="dark"] .g-btn { min-height: 52px; border: 0 !important; border-radius: 999px !important; background: var(--bn-tile) !important;
    color: var(--bn-text) !important; font-size: 15.5px !important; font-weight: 800 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-line) 70%, transparent) !important; }
html.bone .g-btn:hover, html.bone[data-theme="dark"] .g-btn:hover { background: color-mix(in srgb, var(--bn-tile) 80%, var(--bn-line)) !important; }
html.bone .g-or, html.bone[data-theme="dark"] .g-or { color: var(--bn-muted) !important; font-weight: 700; }
html.bone .g-or::before, html.bone .g-or::after { background: var(--bn-line) !important; }
html.bone .cf-turnstile iframe { border-radius: 16px; }

/* --- Things that open over the page --- */
html.bone .ct, html.bone[data-theme="dark"] .ct {
    --ct-card: var(--bn-raised); --ct-ink: var(--bn-text); --ct-body: var(--bn-text2); --ct-muted: var(--bn-muted); --ct-line: var(--bn-line); --ct-tile: var(--bn-tile);
    --ct-go: var(--bn-primary); --ct-go-ink: var(--bn-on-primary); --ct-accent: var(--bn-hot); }
html.bone .mcr, html.bone[data-theme="dark"] .mcr {
    --r-surface: var(--bn-card); --r-soft: var(--bn-tile); --r-line: var(--bn-line); --r-ink: var(--bn-text); --r-body: var(--bn-text2); --r-muted: var(--bn-muted);
    --r-amber: var(--bn-warn); --r-amber-bg: var(--bn-warn-bg); --r-amber-line: transparent; --r-red: var(--bn-bad); --r-red-bg: var(--bn-bad-bg); --r-red-line: transparent;
    --r-green: var(--bn-good); --r-green-bg: var(--bn-good-bg); --r-input: var(--bn-tile); --r-input-line: transparent; }
html.bone .mcr-save { background: var(--bn-primary) !important; color: var(--bn-on-primary) !important; border-radius: 999px !important; }
html.bone .mcr-later { border-radius: 999px !important; border: 0 !important; }
html.bone .mcr-item { border: 0 !important; border-radius: var(--bn-r-m) !important; }
html.bone .cbp-visit { background: var(--bn-strong) !important; color: var(--bn-on-strong) !important; border-radius: 999px !important; padding: 10px 12px 10px 20px !important; }
html.bone .cbp-visit button { background: var(--bn-on-strong) !important; color: var(--bn-strong) !important; border-radius: 999px !important; font-weight: 800; }
html.bone .tp-btn-soft { background: var(--bn-tile) !important; color: var(--bn-text) !important; border-radius: 999px !important; border: 0 !important; }
html.bone .iti__country-list, html.bone .iti__dropdown-content { background: var(--bn-raised) !important; color: var(--bn-text) !important; border: 0 !important;
    border-radius: 18px !important; box-shadow: var(--bn-float) !important; }
html.bone .iti__country.iti__highlight { background: var(--bn-tile) !important; }
html.bone .iti__dial-code { color: var(--bn-muted) !important; }
html.bone .iti__search-input { background: var(--bn-tile) !important; color: var(--bn-text) !important; border: 0 !important; border-radius: 12px !important; }
html.bone .popover, html.bone .tooltip-inner { background: var(--bn-text) !important; color: var(--bn-bg) !important; border: 0 !important; border-radius: 12px !important; }
html.bone .dropdown-menu { background: var(--bn-raised) !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--bn-float) !important; padding: 6px !important; }
html.bone .dropdown-item { border-radius: 12px; color: var(--bn-text) !important; font-weight: 700; }
html.bone .dropdown-item:hover, html.bone .dropdown-item:focus { background: var(--bn-tile) !important; }
html.bone .mc-modal .modal-content, html.bone .mcr .modal-content { background: var(--bn-raised) !important; border-radius: 30px !important; }
/* Hover fills as plain colours (no color-mix), so every browser draws the same thing. */
html.bone { --bn-card-hi: #E6E2DB; --bn-tile-hi: #DED9D0; }
html.bone[data-theme="dark"] { --bn-card-hi: #222222; --bn-tile-hi: #1C1C1C; }
@media (min-width: 992px) { html.bone body.dealer-mode .cbp-nav { --bar-ctl-hi: var(--bn-card-hi); } }
html.bone .dp-btn-ghost:hover, html.bone .dealer-main .btn-light:hover, html.bone .dealer-main .btn-secondary:hover { background: var(--bn-tile-hi) !important; color: var(--bn-text) !important; }
/* Insurance claim form */
html.bone .ic-input, html.bone .ic-select, html.bone .ic-textarea { background: var(--bn-tile) !important; color: var(--bn-text) !important; border: 0 !important;
    border-radius: var(--bn-r-s) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bn-line) 70%, transparent) !important; min-height: 48px; font-weight: 700; }
html.bone .ic-textarea { border-radius: var(--bn-r-m) !important; }
html.bone .ic-input:focus, html.bone .ic-select:focus, html.bone .ic-textarea:focus { background: var(--bn-tile) !important; box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; }
html.bone .ic-addpart { background: transparent !important; color: var(--bn-navy-ink) !important; border: 1.5px dashed var(--bn-line) !important; border-radius: 999px !important; min-height: 44px; font-weight: 800 !important; }
html.bone .ic-addpart:hover { background: var(--bn-tile) !important; }
html.bone .ic-req { color: var(--bn-bad) !important; }
/* Photo viewer badge */
html.bone .mcp-badge { background: var(--bn-strong) !important; color: var(--bn-on-strong) !important; border-radius: 999px !important; font-weight: 800 !important; }
/* Phone-number country picker on sign-up */
html.bone .cc-list { background: var(--bn-raised) !important; color: var(--bn-text) !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--bn-float) !important; }
html.bone .cc-opt { border-radius: 12px; color: var(--bn-text) !important; }
html.bone .cc-opt:hover, html.bone .cc-opt[aria-selected="true"], html.bone .cc-opt.is-active { background: var(--bn-tile) !important; }
html.bone .cc-dial, html.bone .cc-code { color: var(--bn-muted) !important; }
html.bone .cc-btn { border-radius: 999px !important; }
/* Cloudflare draws its check before our theme can reach it; at night it is shown dark. */
html.bone[data-theme="dark"] .cf-turnstile iframe { filter: invert(.9) hue-rotate(180deg); }
/* Counter left, page buttons right, on one line; inside a card their pills take the well colour. */
html.bone .dealer-main div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap; }
html.bone .dealer-main div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child > .dt-layout-cell { display: flex !important; align-items: center; padding: 0 !important; }
html.bone .dealer-main div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child > .dt-layout-end { margin-left: auto; }
html.bone .dp-tablewrap .dt-info, html.bone .dp-card .dt-info, html.bone .dp-tablewrap .dt-paging nav, html.bone .dp-card .dt-paging nav { background: var(--bn-tile) !important; }
@media (max-width: 760px) {
    html.bone .dealer-main div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child { justify-content: center !important; }
    html.bone .dealer-main div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child > .dt-layout-end { margin-left: 0; }
}
html.bone .dp-tablewrap div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child, html.bone .dp-card div.dt-container div.dt-layout-row:not(.dt-layout-table):last-child { margin: 16px 14px 14px !important; }
html.bone .dp-tablewrap div.dt-container div.dt-layout-row:not(.dt-layout-table):first-child, html.bone .dp-card div.dt-container div.dt-layout-row:not(.dt-layout-table):first-child { margin: 14px 14px 8px !important; }
/* Folded rail: icons only, centred; the chosen one is a bone disc with a navy icon. */
html.bone .nav-collapsed .dealer-sidebar .ds-link, html.bone .nav-collapsed .dealer-sidebar .ds-link:link, html.bone .nav-collapsed .dealer-sidebar .ds-link:visited { gap: 0 !important; width: 46px !important; padding: 0 !important; justify-content: center !important; }
html.bone .nav-collapsed .dealer-sidebar .ds-link .ds-lbl { display: none !important; }
html.bone .nav-collapsed .dealer-sidebar .ds-link.active { background: transparent !important; }
html.bone .nav-collapsed .dealer-sidebar .ds-link.active .ds-ic:not(.ds-mark) { width: 40px !important; height: 40px !important; flex-basis: 40px !important; background: var(--bn-rail-sel) !important; color: var(--bn-rail-sel-ink) !important; }
html.bone .nav-collapsed .dealer-sidebar .ds-link.active .ds-ic.ds-mark { box-shadow: 0 0 0 3px var(--bn-rail-sel) !important; }

/* ---------- Top bar: the avatar is a blue disc on every bar; the wallet carries small green details ---------- */
html.bone .cbp-nav { --bar-avatar: #2F67BE; --bar-avatar-ink: #FFFFFF; --bar-money: #74D3A0; --bar-money-fill: #268255; }
@media (min-width: 992px) {
    html.bone:not([data-theme="dark"]) body.dealer-mode .cbp-nav { --bar-avatar: var(--bn-navy-ink); --bar-avatar-ink: var(--bn-on-primary); --bar-money: #1E6B47; --bar-money-fill: #1E6B47; }
}
html.bone .cbp-nav .cbp-avatar { background: var(--bar-avatar) !important; color: var(--bar-avatar-ink) !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
html.bone .cbp-nav .cbp-deposit svg { color: var(--bar-money) !important; }
html.bone .cbp-nav .cbp-deposit::after {
    background: linear-gradient(#FFFFFF, #FFFFFF) center / 12px 2.5px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) center / 2.5px 12px no-repeat,
                var(--bar-money-fill) !important; }

/* ---------- Seamless top (owner, 2026-10-22: "the rough edge at the top is still visible") ----------
   The cabinet's bar was a band of the page colour with a blur, cut off in a straight line across the blobs
   behind it, and the Applications wrapper painted the page colour over them. At rest the bar is now clear,
   so the ground and its blobs run under it without a seam; when the page scrolls, a backdrop fades in that
   feathers out at its foot instead of ending in a line. */
html.bone .apps-lock-wrap { background: transparent !important; }
html.bone .surf-lock::before { display: none !important; } /* the old top glow ended in a line under the bar */
@media (min-width: 992px) {
    html.bone body.dealer-mode .cbp-nav { background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    html.bone body.dealer-mode .cbp-nav.cbp-chrome-lit::before { content: '' !important; display: block !important; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none;
        background: color-mix(in srgb, var(--bn-bg) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
        opacity: 0; animation: none !important; transition: opacity .35s var(--bn-ease); }
    html.bone.bn-scrolled body.dealer-mode .cbp-nav.cbp-chrome-lit::before { opacity: 1 !important; }
    html.bone body.dealer-mode .cbp-nav.scrolled { box-shadow: none !important; }
}
/* Bootstrap's flashes (.alert, e.g. the cabinet's "not available at the moment") wear the notice above;
   amber for warnings. Width follows the words, centred where the page centres it. */
html.bone .alert { width: fit-content; max-width: min(760px, 100%); margin-left: auto; margin-right: auto; }
html.bone .alert-warning { --bn-al: #B07A18; --bn-al-bg: var(--bn-warn-bg); --bn-al-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { html.bone .alert, html.bone .dp-alert, html.bone .auth-alert { animation: bnNoticeIn .5s cubic-bezier(.05, .7, .1, 1) both; } }
@keyframes bnNoticeIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- My Cars: the total amount due in the top card; the pager centred ---------- */
html.bone .bidlimit-card .bl-due { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 22px; border-right: 1px solid rgba(241, 239, 234, .14); }
/* A deeper red than the first pink, day and night (owner, 2026-10-23: "keep the visual ... just deepen it a bit"). */
html.bone .bidlimit-card .bl-due .bl-val--due { color: #FF6F82 !important; font-variant-numeric: tabular-nums; }
html.bone .bidlimit-card .bl-due .bl-val--due.is-zero { color: var(--bn-on-strong-muted, #A9B8CC) !important; }
html.bone .bidlimit-card .bl-due .bl-sub--team { color: var(--bn-on-strong-muted, #A9B8CC) !important; font-weight: 700; }
html.bone .bidlimit-card .bl-due .bl-sub--team b { color: var(--bn-on-strong, #F1EFEA); font-weight: 900; }
@media (prefers-reduced-motion: no-preference) { html.bone .bidlimit-card .bl-due:not([hidden]) { animation: bnDueIn .55s cubic-bezier(.05, .7, .1, 1) both; } }
@keyframes bnDueIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 991px) { html.bone .bidlimit-card .bl-due { padding: 12px 0 0; border-right: 0; border-top: 1px solid rgba(241, 239, 234, .14); flex-basis: 100%; } }
html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging) { justify-content: center !important; }
html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging) > .dt-layout-start { flex: 1 1 0 !important; order: 1; justify-content: flex-start !important; }
html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging) > .dt-layout-end { flex: 0 0 auto !important; order: 2; justify-content: center !important; margin: 0 !important; }
html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging)::after { content: ''; flex: 1 1 0; order: 3; }
@media (max-width: 640px) {
    html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging) { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
    html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging) > .dt-layout-start { flex: 0 0 auto !important; justify-content: center !important; }
    html.bone .dealer-main div.dt-container div.dt-layout-row:has(.dt-paging)::after { display: none; }
}

/* ---------- The rail's fold button (owner, 2026-10-22: "the minimize one, fluid and dynamic, check the states when
   minimized and maximized"): a round chevron that turns with the rail. Open: beside the logo, pointing left (fold).
   Folded: centred under the mark, pointing right (open). It leans the way it will go on hover and squishes on press. */
html.bone .ds-toggle.bn-fold { position: relative; display: grid !important; place-items: center; width: 38px !important; height: 38px !important; padding: 0 !important; flex: none;
    border: 0 !important; border-radius: 999px !important; background: rgba(241, 239, 234, .08) !important; color: var(--bn-rail-ink, #F1EFEA) !important; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(241, 239, 234, .10); transition: background-color .2s, box-shadow .2s, transform .4s var(--bn-release, ease), width .45s var(--bn-ease, ease) !important; }
html.bone .ds-toggle.bn-fold:hover { background: rgba(241, 239, 234, .16) !important; box-shadow: inset 0 0 0 1px rgba(241, 239, 234, .22); }
html.bone .ds-toggle.bn-fold:active { transform: scale(.9); }
html.bone .ds-toggle.bn-fold:focus-visible { outline: 2.5px solid #F1EFEA !important; outline-offset: 3px; }
html.bone .ds-toggle.bn-fold .bn-fold-ic { width: 20px; height: 20px; transition: transform .55s var(--bn-release, ease); }
html.bone .ds-toggle.bn-fold:hover .bn-fold-ic { transform: translateX(-2px); }
html.bone .nav-collapsed .ds-toggle.bn-fold { width: 48px !important; height: 34px !important; margin-top: 2px; }
html.bone .nav-collapsed .ds-toggle.bn-fold .bn-fold-ic { transform: rotate(180deg); }
html.bone .nav-collapsed .ds-toggle.bn-fold:hover .bn-fold-ic { transform: rotate(180deg) translateX(-2px); }
@media (prefers-reduced-motion: reduce) { html.bone .ds-toggle.bn-fold, html.bone .ds-toggle.bn-fold .bn-fold-ic { transition: none !important; } }

/* =====================================================================================
   16. Phones (owner, 2026-10-23: "i dont like the mobile view of the website")
   ===================================================================================== */
@media (max-width: 760px) {
    /* My Cars' balance card: the deposit, then what is owed on one line, then Copart and IAAI side by side.
       What is owed used to take one of the two columns, so the two auctions zig-zagged round it. */
    html.bone .bidlimit-card .bl-due { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
    html.bone .bidlimit-card .bl-due .bl-val { font-size: 26px !important; }
    html.bone .bidlimit-card .bl-surface { padding: 14px !important; }
    html.bone .bidlimit-card .bl-surface .bl-val { font-size: 24px !important; }
    /* Terms written in the editor are justified; on a phone's short lines that opened wide gaps between words. */
    html.bone .dealer-main .ql-align-justify { text-align: left !important; }
    html.bone .dealer-main .terms-card { padding: 20px 18px 22px !important; }
}
@media (max-width: 620px) {
    /* The home page's announcement took half the screen: it is a compact card now, its text scrolls inside. */
    html.bone .ann-toast { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
    html.bone .ann-toast-title { font-size: 14.5px; padding: 12px 52px 12px 16px !important; line-height: 1.3; }
    html.bone .ann-toast-x { top: 7px; right: 8px; }
    html.bone .ann-toast-body { max-height: 7.4em; padding: 10px 16px 12px; font-size: 13.5px; line-height: 1.5; overscroll-behavior: contain; }
}
/* A dropdown pressed with the mouse kept the blue keyboard ring, because the browser treats a select like a
   text field (owner, 2026-10-23: "blue highlights when pressing"). It gets the ink ring the fields use. */
html.bone select:focus, html.bone select:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; }

/* =====================================================================================
   17. My Cars row and the wallet, in the house look (owner, 2026-10-24: "the invoice button is out of our new
       design language ... the vin number font too along with container, also car owner section too seems weird
       and for title just keep the circle colored and not the text"; "when in dark mode the wallet pill turns
       green ... only logo and plus do that"; "the pill in there [the deposit window] should not be green only
       parts of it")
   ===================================================================================== */
/* Invoice: a soft tile with a paper mark, like the auction's own invoice beside it. Pay stays the one coloured
   button in the row. Two selectors so it outranks the night variant above at equal weight. */
html.bone .dealer-main .mc-btn.mc-btn--inv, html.bone[data-theme] .dealer-main .mc-btn.mc-btn--inv {
    background: var(--bn-tile) !important; color: var(--bn-navy-ink) !important; box-shadow: none !important; }
html.bone .dealer-main .mc-btn.mc-btn--inv::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* VIN and container number: the house typeface, not a code font. Even digits so a column of them lines up. */
html.bone .dealer-main a.mc-vin-v, html.bone .dealer-main a.mc-vin-v:visited, html.bone .dealer-main a.mc-box-v, html.bone .dealer-main a.mc-box-v:visited {
    font-family: var(--bn-font) !important; font-size: 13px; font-weight: 800; letter-spacing: .01em;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* A VIN is never cut in two: when the cell is narrow the label goes above it and the number stays whole. */
html.bone .mc-vin { gap: 2px 6px; flex-wrap: wrap; }
html.bone .dealer-main a.mc-vin-v, html.bone .dealer-main a.mc-vin-v:visited { flex: 0 0 auto; white-space: nowrap !important; word-break: normal; }
html.bone .mc-car-txt { flex: 1 1 0; container: mccar / inline-size; }
@container mccar (max-width: 212px) {
    html.bone .mc-vin-l { flex: 1 0 100%; }
    html.bone .dealer-main a.mc-vin-v, html.bone .dealer-main a.mc-vin-v:visited { font-size: 12px; }
    html.bone .mc-vin { column-gap: 4px; }
}
html.bone .mc-box { gap: 10px; }
html.bone .mc-box-ic { width: 34px; height: 34px; border-radius: 50%; }

/* Title: the dot carries the colour, the word is ink. */
html.bone .mc-title-s { color: var(--bn-text) !important; }
html.bone .mc-title-s::before { background: var(--st) !important; }

/* Car owner: no box in the middle of the column. A round mark in the state's colour and two lines beside it,
   drawn like the container cell next to it; the press area lights up as a tile under the pointer. */
html.bone .mc-own { background: transparent !important; padding: 6px 10px 6px 6px !important; gap: 10px; border-radius: var(--bn-r-s) !important; }
html.bone .mc-own:hover, html.bone .mc-own:focus-visible { background: var(--bn-tile) !important; box-shadow: none !important; transform: none; }
html.bone .mc-own:focus-visible { box-shadow: inset 0 0 0 2px var(--bn-navy-ink) !important; }
html.bone .mc-own-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--bn-tile); color: var(--bn-text2); }
html.bone .mc-own:hover .mc-own-ic { background: var(--bn-card); }
html.bone .mc-own-ic svg { width: 17px; height: 17px; }
html.bone .mc-own--done .mc-own-ic { background: var(--bn-good-bg) !important; }
html.bone .mc-own--due .mc-own-ic { background: var(--bn-warn-bg) !important; }
html.bone .mc-own--missed .mc-own-ic { background: var(--bn-bad-bg) !important; }
html.bone .mc-own-name { font-size: 14px; font-weight: 800; }
html.bone .mc-own-sub { font-size: 12px; }

/* The wallet in the top bar: the pill stays the bar's grey at night. The old night sheet painted it green with
   !important and the night script greyed it over afterwards, so it flashed green; now it never starts green.
   Only the wallet mark and the "+" are green (section above). */
html.bone .cbp-nav .cbp-deposit { background: var(--bar-ctl) !important; border-color: transparent !important; }
html.bone .cbp-nav .cbp-deposit:hover { background: var(--bar-ctl-hi) !important; }

/* The deposit window's figure: a neutral pill with a green wallet mark, the same parts as the top bar. */
html.bone .cbp-fund-dep { background: var(--bn-tile) !important; color: var(--bn-text) !important; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; }
html.bone .cbp-fund-dep small { color: var(--bn-muted) !important; opacity: 1; }
html.bone .cbp-fund-dep::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: var(--bn-good);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M16.5 14.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M16.5 14.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Pay: no coloured fill (owner, 2026-10-24: "i dont like colored pills you can make the outline green or something
   minimal color is better"). A green outline and green word, drawn like Request credit beside it; a faint green
   wash under the pointer. Two selectors so it outranks the night variant above at equal weight. */
html.bone .dealer-main .mc-btn.mc-btn--pay, html.bone[data-theme] .dealer-main .mc-btn.mc-btn--pay {
    background: transparent !important; color: var(--bn-good) !important; box-shadow: inset 0 0 0 1.5px var(--bn-good) !important; }
html.bone .dealer-main .mc-btn.mc-btn--pay:hover, html.bone[data-theme] .dealer-main .mc-btn.mc-btn--pay:hover {
    background: color-mix(in srgb, var(--bn-good) 9%, transparent) !important; filter: none; }

/* Car owner, sleek (owner, 2026-10-25: "the car owner warning is ai slop pink or red ... no colored shit like that
   make it sleek"). One quiet mark for every state: a hairline ring with a person in it, ink words beside it - no
   pink disc, no red triangle, no red words. Still to add = a person with a plus and one small amber dot on the
   ring, the only colour, day and night; added or locked = no dot (the lock is already at the end of the row). */
html.bone .mc-own .mc-own-ic, html.bone .mc-own:hover .mc-own-ic, html.bone .mc-own--done .mc-own-ic,
html.bone .mc-own--due .mc-own-ic, html.bone .mc-own--missed .mc-own-ic {
    position: relative; background: transparent !important; color: var(--bn-text2) !important;
    box-shadow: inset 0 0 0 1.5px var(--bn-line); transition: box-shadow var(--bn-fast) var(--bn-ease); }
html.bone .mc-own:hover .mc-own-ic { box-shadow: inset 0 0 0 1.5px var(--bn-muted); }
html.bone .mc-own--due .mc-own-ic > svg, html.bone .mc-own--missed .mc-own-ic > svg { display: none; }
html.bone .mc-own--due .mc-own-ic::before, html.bone .mc-own--missed .mc-own-ic::before {
    content: ""; width: 17px; height: 17px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat; }
html.bone .mc-own--due .mc-own-ic::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21a7.5 7.5 0 0 1 12.6-5.5'/%3E%3Cpath d='M19 14v6M16 17h6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21a7.5 7.5 0 0 1 12.6-5.5'/%3E%3Cpath d='M19 14v6M16 17h6'/%3E%3C/svg%3E"); }
html.bone .mc-own--due .mc-own-ic::after { content: ""; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px;
    border-radius: 50%; background: #C98A1B; }
html.bone[data-theme="dark"] .mc-own--due .mc-own-ic::after { background: #E8B054; }
html.bone .mc-own-name { color: var(--bn-text) !important; }
html.bone .mc-own-sub, html.bone .mc-own--urgent .mc-own-sub { color: var(--bn-muted) !important; }
html.bone .mc-own--urgent .mc-own-sub { color: var(--bn-text) !important; font-weight: 800; }
html.bone .mc-own-go { color: var(--bn-muted) !important; }
/* The owner window's line about time: the same plain line in every state, a hairline and ink words. Only the
   clock turns amber when the days are nearly up. */
html.bone .mc-modal .mcm-clock, html.bone .mc-modal .mcm-clock.is-urgent, html.bone .mc-modal .mcm-clock.is-locked,
html.bone .mc-modal .mcm-clock.is-done {
    background: transparent !important; color: var(--bn-text2) !important; border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--bn-line); border-radius: var(--bn-r-s) !important; }
html.bone .mc-modal .mcm-clock svg { color: var(--bn-muted); }
html.bone .mc-modal .mcm-clock.is-urgent { color: var(--bn-text) !important; }
html.bone .mc-modal .mcm-clock.is-urgent svg { color: #C98A1B; }
html.bone[data-theme="dark"] .mc-modal .mcm-clock.is-urgent svg { color: #E8B054; }

/* =====================================================================================
   17. Flow (owner, 2026-10-26: "the car popups in cabinet dont appear nicely on phone scrolling dont feel nice
   and all that and remove the go to top arrow button ... AND animate more stuff more dynamic more fluidity", and
   of My Cars on a phone: "the main card is not nice")
   ===================================================================================== */
/* The go-to-top arrow is gone: on a phone it sat over cards and over the car window. */
html.bone .scrollup, html.bone body:has(#scwRoot) .scrollup { display: none !important; }

/* Scrolling on a phone: the three background shapes stop re-drawing their outline (that repainted the whole screen
   on every frame) and only turn, which the graphics chip does by itself (bone-motion.js no longer writes the scroll
   to the page's root either, which made the browser restyle every element on every frame). */
@media (pointer: coarse), (max-width: 760px) {
    html.bone .bn-blobs i:nth-child(n) { animation: bn-turn 160s linear infinite !important; }
}

/* Pages hand over to each other in a soft crossfade instead of a white blink (browsers with cross-page view
   transitions: Chrome, Edge, Safari 18.2+; the others simply change page). The theme switch keeps its circle. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
    html.bone:not(.bn-vt-theme)::view-transition-old(root) { animation: bnFlowOut .2s cubic-bezier(.4, 0, 1, 1) both; }
    html.bone:not(.bn-vt-theme)::view-transition-new(root) { animation: bnFlowIn .38s cubic-bezier(.2, 0, 0, 1) both; }
}
@keyframes bnFlowOut { to { opacity: 0; } }
@keyframes bnFlowIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Pictures arrive softly (bone-motion.js marks the ones still loading). */
@media (prefers-reduced-motion: no-preference) {
    html.bone img.bn-img { opacity: 0; transform: scale(1.025); transition: opacity .55s cubic-bezier(.2, 0, 0, 1), transform .9s cubic-bezier(.05, .7, .1, 1); }
    html.bone img.bn-img.bn-img-in { opacity: 1; transform: none; }
}

/* Buttons with an arrow: the arrow leans the way it goes. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    html.bone .bh-btn svg, html.bone .dp-btn svg, html.bone .dealer-main .btn svg { transition: transform .45s var(--bn-release, ease); }
    html.bone .bh-btn:hover svg:last-child, html.bone .dp-btn:hover svg:last-child { transform: translateX(3px); }
}

/* My Cars on a phone: the cards slide up into place as they scroll in (browsers with scroll-driven animations;
   the others keep the entrance they had). */
@supports (animation-timeline: view()) {
    @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
        html.bone .dealer-main table.mc-table > tbody > tr:not(.bn-enter) { animation: bnCardIn linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
        @keyframes bnCardIn { from { opacity: .35; transform: translateY(28px) scale(.965); } }
    }
}

/* ---------- My Cars, the balance card on a phone: the deposit big on top; one hairline; what is owed on one line;
   Copart and IAAI side by side with quiet buttons (the white pills shouted). ---------- */
@media (max-width: 760px) {
    html.bone .bidlimit-card { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px !important; padding: 20px 16px 16px !important; }
    html.bone .bidlimit-card > script { display: none; }
    html.bone .bidlimit-card .bl-deposit { grid-column: 1 / -1; display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px;
        border: 0 !important; padding: 0 2px !important; margin: 0 !important; }
    html.bone .bidlimit-card .bl-deposit .bl-val { font-size: 40px !important; line-height: 1.02; letter-spacing: -1.4px; }
    html.bone .bidlimit-card .bl-due { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap;
        gap: 2px 12px; margin: 0 !important; padding: 14px 2px 2px !important; border: 0 !important; border-top: 1px solid rgba(241, 239, 234, .14) !important; }
    html.bone .bidlimit-card .bl-due[hidden] { display: none; }
    html.bone .bidlimit-card .bl-due .bl-val { font-size: 26px !important; line-height: 1.1; }
    html.bone .bidlimit-card .bl-due .bl-sub--team { flex-basis: 100%; }
    html.bone .bidlimit-card .bl-surfaces { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px !important; margin: 0 !important; }
    html.bone .bidlimit-card .bl-surface { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0;
        padding: 14px 14px 12px !important; border-radius: 20px !important; }
    html.bone .bidlimit-card .bl-surface .bl-arrow { display: none !important; }
    html.bone .bidlimit-card .bl-surface .bl-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
    html.bone .bidlimit-card .bl-surface .bl-lbl { font-size: 10.5px !important; letter-spacing: .07em !important; line-height: 1.3; }
    html.bone .bidlimit-card .bl-surface .bl-val { font-size: 22px !important; line-height: 1.15; overflow-wrap: anywhere; }
    html.bone .bidlimit-card .bl-surface .bl-sub { font-size: 12px; line-height: 1.3; }
    html.bone .bidlimit-card .bl-cta, html.bone[data-theme="dark"] .bidlimit-card .bl-cta {
        align-self: stretch; display: flex !important; align-items: center; justify-content: center; min-height: 42px !important; margin-top: 6px !important;
        padding: 0 12px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 900 !important;
        background: rgba(241, 239, 234, .1) !important; color: var(--bn-on-strong, #F1EFEA) !important; box-shadow: inset 0 0 0 1px rgba(241, 239, 234, .16) !important; }
    html.bone .bidlimit-card .bl-cta:active { transform: scale(.96); background: rgba(241, 239, 234, .18) !important; }
    /* the sort: one pill, not a darker select sitting inside a lighter one */
    html.bone .mc-sort select, html.bone .mc-sort select:focus { background-color: transparent !important; box-shadow: none !important; }
}

/* The balance card catches the light once as it arrives: one soft sheen crosses it. */
@media (prefers-reduced-motion: no-preference) {
    html.bone .bidlimit-card { overflow: hidden; }
    html.bone .bidlimit-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .09) 47%, rgba(255, 255, 255, .02) 55%, transparent 70%);
        transform: translateX(-110%); animation: bnSheen 1.7s .45s cubic-bezier(.2, 0, 0, 1) both; }
    @keyframes bnSheen { to { transform: translateX(110%); } }
}