@font-face { font-family: Nunito; src: url('./fonts/nunito-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: Inter; src: url('./fonts/inter-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 900; font-display: swap; }
:root { color-scheme: light dark; background: light-dark(#fff, #111713); color: light-dark(#1b241d, #edf4ee); --bb-ui-font: Nunito, system-ui, sans-serif; }
:root[data-font="inter"] { --bb-ui-font: Inter, system-ui, sans-serif; }
:root[data-font="system"] { --bb-ui-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
:root[data-font="georgia"] { --bb-ui-font: Georgia, 'Times New Roman', serif; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html:has(#basketbook-ui dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
body { margin: 0; }
main { width: min(calc(100% - 24px), 1160px); margin: 16px auto; }
.cursor-interaction { cursor: pointer; }
@media (max-width: 540px) {
  main { width: calc(100% - 16px); margin: calc(8px + env(safe-area-inset-top, 0px)) auto 8px; }
  html { scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

  .bb-frame { container: basketbook-frame / inline-size; margin-inline: auto; }
  #basketbook-ui {
    --bb-bg: light-dark(#fff, #161e18);
    --bb-rail: light-dark(#fff, #1b261e);
    --bb-paper: light-dark(#ffffff, #212d24);
    --bb-ink: light-dark(#1b241d, #edf4ee);
    --bb-secondary: light-dark(#566258, #b3c1b6);
    --bb-line: light-dark(#dce5dc, #3b4a3f);
    --bb-accent: light-dark(var(--bb-user-primary-light-ink, #206b3b), var(--bb-user-primary-dark-ink, #a0e2b0));
    --bb-green-solid: var(--bb-user-primary-solid, #22843e);
    --bb-primary-deep: color-mix(in srgb, var(--bb-user-primary-solid, #22843e) 78%, black);
    --bb-soft: light-dark(color-mix(in srgb, var(--bb-user-primary-colour, #238336) 12%, #fff), color-mix(in srgb, var(--bb-user-primary-colour, #3d704f) 16%, #1b3422));
    --bb-stroke: linear-gradient(90deg, var(--bb-user-primary-solid, #258b42), var(--bb-user-primary-colour, #63b854));
    --bb-glass: light-dark(rgb(255 255 255 / .49), rgb(24 35 28 / .53));
    --bb-glass-edge: light-dark(rgb(255 255 255 / .9), rgb(200 238 211 / .25));
    --bb-nav-label: light-dark(#4f5c53, #c0cac3);
    --bb-citrus: #e4fa9a;
    --bb-orchid: light-dark(var(--bb-user-accent-light-ink, #a51b79), var(--bb-user-accent-dark-ink, #ff9edc));
    --bb-orchid-solid: var(--bb-user-accent-solid, #a51b73);
    --bb-orchid-deep: color-mix(in srgb, var(--bb-orchid-solid) 73%, black);
    --bb-orchid-soft: light-dark(color-mix(in srgb, var(--bb-user-accent-colour, #ed9bce) 14%, #fff), color-mix(in srgb, var(--bb-user-accent-colour, #743761) 17%, #301d2e));
    --bb-shadow: 0 1px 2px light-dark(#1d43260a, #0005), 0 5px 18px light-dark(#21472a0a, #0002);
    --bb-lift: 0 8px 28px light-dark(#21452c24, #0008);
    --bb-warn: light-dark(#754814, #f5cb89);
    --bb-warn-soft: light-dark(#f6ebd3, #43331e);
    --bb-error: light-dark(#9e302b, #ffb4ac);
    position: relative;
    display: grid;
    grid-template-columns: 174px minmax(0, 1fr);
    min-height: 570px;
    background: var(--bb-bg);
    color: var(--bb-ink);
    border: 1px solid var(--bb-line);
    border-radius: 26px;
    overflow: hidden;
    font: 14px/1.45 var(--bb-ui-font);
  }
  #basketbook-ui *, #basketbook-ui *::before, #basketbook-ui *::after { box-sizing: border-box; }
  #basketbook-ui [hidden] { display: none !important; }
  #basketbook-ui .bb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #basketbook-ui [data-screen]:not([hidden]) { animation: bb-screen-in 313.95ms cubic-bezier(.2,.75,.3,1); }
  #basketbook-ui [data-screen="capture"]:not([hidden]) { animation-name: bb-camera-in; }
  @keyframes bb-screen-in { from { opacity: .82; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bb-camera-in { from { opacity: .85; } to { opacity: 1; } }
  #basketbook-ui :is(h1, h2, h3, p, dl, dd) { margin: 0; }
  #basketbook-ui button, #basketbook-ui input, #basketbook-ui select { font: inherit; color: inherit; }
  #basketbook-ui :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--bb-orchid); outline-offset: 3px; }
  #basketbook-ui svg { width: 16px; height: 16px; flex: none; }
  #basketbook-ui .bb-rail { background: var(--bb-rail); border-inline-end: 1px solid var(--bb-line); padding: 22px 12px 14px; display: flex; flex-direction: column; gap: 24px; }
  #basketbook-ui .bb-brand-actions { display: grid; gap: 16px; }
  #basketbook-ui .bb-wordmark { display: flex; align-items: center; padding-inline: 5px; }
  #basketbook-ui .bb-brand-logo { display: block; width: 133px; height: auto; max-width: 100%; aspect-ratio: 746 / 180; }
  :root[data-theme="dark"] #basketbook-ui .bb-brand-logo { content: url('./brand/logo-dark.svg'); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #basketbook-ui .bb-brand-logo { content: url('./brand/logo-dark.svg'); }
  }
  #basketbook-ui .bb-theme-toggle { position: absolute; z-index: 4; inset: 17px 22px auto auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bb-line); border-radius: 50%; background: var(--bb-paper); color: var(--bb-ink); box-shadow: var(--bb-shadow), inset 0 1px 0 var(--bb-glass-edge); touch-action: manipulation; }
  #basketbook-ui .bb-theme-toggle:hover { color: var(--bb-accent); }
  #basketbook-ui .bb-theme-toggle svg { width: 19px; height: 19px; }
  #basketbook-ui[data-current-screen="welcome"] .bb-theme-toggle { inset-block-start: 17px; }
  #basketbook-ui[data-current-screen="capture"] .bb-theme-toggle { display: none; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #basketbook-ui .bb-theme-toggle { background: var(--bb-glass); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
  }
  #basketbook-ui .bb-rail nav { display: grid; gap: 4px; }
  #basketbook-ui .bb-rail .bb-nav { width: 100%; justify-content: flex-start; border-color: transparent; background: transparent; }
  #basketbook-ui .bb-nav[aria-current="page"] { background: var(--bb-soft); color: var(--bb-accent); }
  #basketbook-ui .bb-rail-foot { margin-top: auto; padding: 8px 7px 0; color: var(--bb-secondary); font-size: 12px; }
  #basketbook-ui .bb-mobile-nav { display: none; }
  #basketbook-ui .bb-main { min-width: 0; padding: 22px 24px 26px; }
  #basketbook-ui .bb-top, #basketbook-ui .bb-title, #basketbook-ui .bb-panel-title, #basketbook-ui .bb-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  #basketbook-ui .bb-top { min-height: 34px; margin-bottom: 10px; padding-inline-end: 70px; }
  #basketbook-ui .bb-title { margin-bottom: 18px; padding-inline-end: 54px; align-items: flex-start; }
  #basketbook-ui h1 { font-weight: 810; letter-spacing: -.05em; font-size: clamp(29px, 4.4cqi, 39px); line-height: 1.08; }
  #basketbook-ui .bb-title h1::after { content: ""; display: block; width: 41px; height: 3px; border-radius: 2px; margin-top: 8px; background: var(--bb-stroke); }
  #basketbook-ui h2 { font-size: 15px; font-weight: 730; }
  #basketbook-ui h3 { font-size: 14px; font-weight: 670; }
  #basketbook-ui .bb-title p { margin-top: 7px; }
  #basketbook-ui .bb-title-actions { align-items: flex-start; }
  #basketbook-ui .bb-title-actions h1 { flex: 1 1 12ch; max-width: 28ch; overflow-wrap: anywhere; }
  #basketbook-ui .bb-section-action { flex: none; align-self: flex-start; }
  #basketbook-ui .bb-section-action > span:first-child, #basketbook-ui [data-recipes-icon] { display: inline-flex; color: var(--bb-accent); }
  #basketbook-ui :is(.bb-section-action, [data-recipes-icon]) svg { display: block; width: 17px; height: 17px; }
  #basketbook-ui .bb-first-empty { display: grid; justify-items: start; gap: 12px; }
  #basketbook-ui .bb-spending-empty { margin-bottom: 16px; padding: 18px; }
  #basketbook-ui[data-current-screen="welcome"] { grid-template-columns: minmax(0, 1fr); }
  #basketbook-ui[data-current-screen="welcome"] :is(.bb-rail, .bb-mobile-nav) { display: none; }
  #basketbook-ui[data-current-screen="welcome"] .bb-main { padding: clamp(70px, 9cqi, 100px) 12px 36px; }
  #basketbook-ui .bb-welcome { display: grid; align-content: start; gap: 20px; width: min(100%, 430px); min-height: 380px; margin-inline: auto; padding: clamp(16px, 5cqi, 28px); border: 1px solid var(--bb-line); border-radius: 28px; background: var(--bb-paper); box-shadow: var(--bb-shadow); }
  #basketbook-ui .bb-welcome-brand .bb-brand-logo { width: 159px; }
  #basketbook-ui .bb-welcome-copy, #basketbook-ui .bb-signup-step { display: grid; gap: 13px; min-width: 0; }
  #basketbook-ui .bb-welcome h1 { font-size: clamp(26px, 6.5cqi, 36px); overflow-wrap: anywhere; }
  #basketbook-ui .bb-welcome h1 + p { color: var(--bb-secondary); }
  #basketbook-ui .bb-welcome :is(button, a, input) { min-height: 44px; }
  #basketbook-ui .bb-welcome input { font-size: 16px; }
  #basketbook-ui .bb-welcome-actions, #basketbook-ui .bb-signup-choices { display: grid; gap: 7px; }
  #basketbook-ui .bb-welcome-actions { margin-top: 4px; }
  #basketbook-ui .bb-welcome-actions .bb-ghost { color: var(--bb-accent); }
  #basketbook-ui .bb-signup-choices button { justify-content: start; border-radius: 12px; text-align: start; padding: 8px 12px; }
  #basketbook-ui .bb-signup-secondary { display: flex; justify-content: space-between; }
  #basketbook-ui .bb-signup-progress { display: grid; gap: 6px; color: var(--bb-secondary); }
  #basketbook-ui .bb-signup-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
  #basketbook-ui .bb-signup-track span { height: 4px; border-radius: 999px; background: var(--bb-line); transition: background-color 250ms ease; }
  #basketbook-ui .bb-signup-track [data-state="done"] { background: var(--bb-accent); }
  #basketbook-ui .bb-signup-track [data-state="current"] { background: color-mix(in srgb, var(--bb-accent) 68%, var(--bb-paper)); }
  #basketbook-ui .bb-welcome-status:empty { margin-top: -20px; }
  #basketbook-ui .bb-welcome-status { color: var(--bb-secondary); }
  #basketbook-ui .bb-welcome input[aria-invalid="true"] { border-color: var(--bb-error); }
  #basketbook-ui .bb-first-scan { background: var(--bb-orchid-solid); color: white; }
  #basketbook-ui .bb-first-scan:hover { background: var(--bb-orchid-deep); }
  #basketbook-ui .bb-small { font-size: 12px; }
  #basketbook-ui .bb-muted { color: var(--bb-secondary); }
  #basketbook-ui .bb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  #basketbook-ui .bb-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(212px, 1fr); gap: 14px; align-items: start; }
  #basketbook-ui .bb-panel { border: 1px solid var(--bb-line); background: var(--bb-paper); border-radius: 22px; min-width: 0; box-shadow: var(--bb-shadow); }
  #basketbook-ui .bb-panel-title { padding: 14px 16px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-data-panel {
    --bb-panel-header-bg: var(--bb-green-solid);
    --bb-panel-header-ink: white;
    --bb-panel-header-rule: color-mix(in srgb, var(--bb-panel-header-ink) 35%, transparent);
  }
  #basketbook-ui .bb-data-panel > .bb-panel-title { background: var(--bb-panel-header-bg); color: var(--bb-panel-header-ink); border-color: transparent; border-start-start-radius: inherit; border-start-end-radius: inherit; }
  #basketbook-ui .bb-data-panel > .bb-panel-title .bb-muted { color: inherit; }
  #basketbook-ui .bb-panel-title.bb-panel-title-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
  #basketbook-ui .bb-panel-title-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
  #basketbook-ui .bb-panel-sort { display: flex; align-items: center; gap: 8px; min-width: 0; }
  #basketbook-ui .bb-panel-sort select { min-height: 36px; min-width: 0; max-width: 100%; padding: 5px 8px; color: var(--bb-ink); background: var(--bb-paper); border: 1px solid var(--bb-line); border-radius: 10px; }
  #basketbook-ui .bb-data-panel > .bb-panel-title .bb-view-toggle button { background: transparent; border-color: var(--bb-panel-header-rule); color: var(--bb-panel-header-ink); }
  #basketbook-ui .bb-data-panel > .bb-panel-title .bb-view-toggle button:is(:hover, :focus-visible) { background: #ffffff25; }
  #basketbook-ui .bb-data-panel > .bb-panel-title .bb-glass-toggle { gap: 1px; padding: 3px; border: 1px solid var(--bb-panel-header-rule); border-radius: 999px; background: #16371b30; box-shadow: inset 0 1px 2px #ffffff30; }
  #basketbook-ui .bb-data-panel > .bb-panel-title .bb-glass-toggle button { min-height: 36px; padding-inline: 8px; border-color: transparent; }
  #basketbook-ui .bb-data-panel > .bb-panel-title .bb-glass-toggle button[aria-pressed="true"] { background: #f4fff4ed; color: var(--bb-primary-deep); box-shadow: inset 0 1px 1px white, 0 2px 8px #0e351a38; }
  #basketbook-ui .bb-glass-toggle button > span:first-child { display: flex; }
  #basketbook-ui .bb-glass-toggle svg { width: 13px; height: 13px; }
  #basketbook-ui .bb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--bb-warn-soft); color: var(--bb-warn); font-size: 12px; font-weight: 620; white-space: nowrap; }
  #basketbook-ui .bb-badge[data-ok="true"] { background: var(--bb-soft); color: var(--bb-accent); }
  #basketbook-ui .bb-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 5px 11px; border: 1px solid var(--bb-line); border-radius: 999px; background: var(--bb-paper); font-size: 13px; font-weight: 660; transition: background-color 219.765ms ease, box-shadow 219.765ms ease, transform 219.765ms ease; }
  #basketbook-ui .bb-button:hover { background: var(--bb-soft); }
  #basketbook-ui .bb-primary { background: var(--bb-green-solid); color: white; border-color: transparent; box-shadow: var(--bb-shadow); }
  #basketbook-ui .bb-primary:hover { background: var(--bb-primary-deep); }
  #basketbook-ui :is(.bb-scan, [data-copy-invite]) { background: var(--bb-orchid-solid); color: white; }
  #basketbook-ui :is(.bb-scan, [data-copy-invite]):hover { background: var(--bb-orchid-deep); }
  #basketbook-ui .bb-ghost { background: transparent; border-color: transparent; }
  #basketbook-ui .bb-alert { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px; color: var(--bb-warn); background: var(--bb-warn-soft); font-size: 12px; }
  #basketbook-ui .bb-alert svg { margin-top: 1px; }
  #basketbook-ui .bb-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-item h3 { overflow-wrap: anywhere; }
  #basketbook-ui .bb-item p { margin-top: 2px; }
  #basketbook-ui .bb-edit { color: var(--bb-accent); }
  #basketbook-ui .bb-review-item-actions { display: flex; align-items: center; gap: 4px; }
  #basketbook-ui .bb-exclusion { min-width: 44px; padding-inline: 0; color: var(--bb-muted); }
  #basketbook-ui .bb-exclusion svg { width: 17px; height: 17px; }
  #basketbook-ui .bb-review-item[data-excluded] :is(h3, .bb-line-amount) { text-decoration: line-through; color: var(--bb-muted); }
  #basketbook-ui .bb-review-item[data-excluded] .bb-exclusion { color: var(--bb-accent); }
  #basketbook-ui .bb-review-price { display: grid; justify-items: end; gap: 2px; text-align: end; }
  #basketbook-ui .bb-review-price small { font-size: 10px; }
  #basketbook-ui .bb-price-error { color: var(--bb-error); }
  #basketbook-ui .bb-price-error:empty { display: none; }
  #basketbook-ui .bb-form :is([data-original-line-note], [data-price-edit-error]) { margin-bottom: 8px; }
  #basketbook-ui .bb-exclusion-status { padding-inline: 14px; }
  #basketbook-ui .bb-form { padding: 12px 14px; background: var(--bb-bg); border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); gap: 10px; margin-bottom: 9px; }
  #basketbook-ui .bb-price-edit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #basketbook-ui label { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; }
  #basketbook-ui :is(input, select) { width: 100%; min-height: 36px; border: 1px solid var(--bb-line); border-radius: 11px; padding: 6px 10px; background: var(--bb-paper); font-size: 14px; font-weight: 400; }
  #basketbook-ui .bb-product-row { position: relative; transition: background-color 219.765ms ease; }
  #basketbook-ui .bb-product-row:is(:hover, :focus-within) { background: var(--bb-soft); }
  #basketbook-ui .bb-product-row .bb-item-link::after { content: ""; position: absolute; inset: 0; }
  #basketbook-ui .bb-product-row td:first-child { min-width: 0; }
  #basketbook-ui .bb-product-photo { display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border: 1px solid var(--bb-line); border-radius: 50%; background: var(--bb-soft); color: var(--bb-accent); }
  #basketbook-ui .bb-product-photo img { display: none; width: 100%; height: 100%; object-fit: contain; background: white; }
  #basketbook-ui .bb-product-photo[data-has-image] { background: white; }
  #basketbook-ui .bb-product-photo[data-has-image] svg { display: none; }
  #basketbook-ui .bb-product-photo[data-has-image] img { display: block; }
  #basketbook-ui .bb-product-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
  #basketbook-ui .bb-product-identity > .bb-product-photo, #basketbook-ui .bb-product-photo-action { width: clamp(84px, 26%, 116px); height: auto; aspect-ratio: 1; }
  #basketbook-ui .bb-product-photo-action { padding: 0; flex: none; border: 0; border-radius: 50%; background: none; }
  #basketbook-ui .bb-product-photo-action .bb-product-photo { width: 100%; height: 100%; }
  #basketbook-ui .bb-product-photo-action:hover .bb-product-photo { border-color: var(--bb-accent); }
  #basketbook-ui .bb-product-photo-action .bb-product-photo:not([data-has-image]) { border-style: dashed; }
  #basketbook-ui .bb-product-photo-dialog { width: min(720px, calc(100% - 26px)); max-height: calc(100dvh - 26px); }
  #basketbook-ui .bb-product-photo-dialog img { display: block; width: 100%; max-height: 66dvh; margin-block: 10px; object-fit: contain; background: white; border-radius: 14px; }
  #basketbook-ui .bb-product-filter { padding: 9px 14px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-product-filter select { max-width: 310px; }
  #basketbook-ui .bb-product-identity .bb-product-photo svg { width: 28px; height: 28px; }
  #basketbook-ui .bb-product-identifiers { min-width: 0; overflow-wrap: anywhere; }
  #basketbook-ui .bb-product-identifiers a { color: var(--bb-accent); }
  #basketbook-ui .bb-product-identifiers .bb-button { margin-top: 6px; }
  #basketbook-ui .bb-shelf-form { display: grid; gap: 10px; }
  #basketbook-ui .bb-shelf-form p { margin-block: 2px; }
  #basketbook-ui .bb-product-search { padding: 11px 14px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-product-search input { min-height: 42px; font-size: 16px; }
  #basketbook-ui .bb-foot { align-items: flex-end; padding: 12px 14px; }
  #basketbook-ui .bb-date { width: min(100%, 165px); }
  #basketbook-ui .bb-side { display: grid; gap: 12px; }
  #basketbook-ui .bb-totals { padding: 10px 14px 12px; font-size: 13px; }
  #basketbook-ui .bb-totals > div { display: flex; gap: 8px; justify-content: space-between; padding-block: 4px; }
  #basketbook-ui .bb-totals .bb-paid { border-top: 1px solid var(--bb-line); margin-top: 5px; padding-top: 8px; font-weight: 700; }
  #basketbook-ui .bb-totals .bb-my-spend { color: var(--bb-accent); font-weight: 700; }
  #basketbook-ui .bb-receipt > summary.bb-panel-title { display: list-item; list-style-position: inside; font-size: 15px; font-weight: 730; }
  #basketbook-ui .bb-receipt:not([open]) > summary { border-end-start-radius: inherit; border-end-end-radius: inherit; }
  #basketbook-ui .bb-receipt-body { padding: 12px 14px 14px; }
  #basketbook-ui .bb-review-photo { margin-top: 12px; }
  #basketbook-ui .bb-review-photo summary { cursor: pointer; color: var(--bb-accent); font-weight: 650; }
  #basketbook-ui .bb-review-photo img { display: block; width: 100%; height: auto; margin-top: 8px; border-radius: 12px; }
  #basketbook-ui .bb-slip { margin-top: 9px; border-top: 1px dashed var(--bb-line); padding-top: 9px; color: var(--bb-ink); font: 11px/1.5 ui-monospace, Consolas, monospace; }
  #basketbook-ui .bb-slip > div { display: flex; justify-content: space-between; gap: 8px; }
  #basketbook-ui .bb-slip p { margin-block: 1px 6px; overflow-wrap: anywhere; }
  #basketbook-ui .bb-status:not(:empty) { margin-top: 10px; color: var(--bb-accent); font-size: 13px; }
  #basketbook-ui .bb-status[data-error="true"] { color: var(--bb-error); }
  #basketbook-ui .bb-list { padding: 3px 14px; }
  #basketbook-ui .bb-list .bb-item { padding-inline: 0; }
  #basketbook-ui .bb-list .bb-item:last-child { border-bottom: 0; }
  #basketbook-ui .bb-empty { padding: 18px 14px; }
  #basketbook-ui .bb-empty .bb-button { margin-top: 9px; }
  #basketbook-ui .bb-receipt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-receipt-row:last-child, #basketbook-ui .bb-receipt-row > .bb-item { border: 0; }
  #basketbook-ui .bb-receipt-hint { display: none; padding: 8px 14px 0; }
  #basketbook-ui .bb-receipt-feedback:not(:empty) { padding: 0 14px 12px; }
  #basketbook-ui .bb-delete { color: var(--bb-error); }
  #basketbook-ui .bb-delete-confirm { color: white; background: #a52c39; border-color: transparent; }
  #basketbook-ui .bb-delete-confirm:hover { background: #8a2031; }
  #basketbook-ui .bb-confirm { position: fixed; inset: 0; width: min(420px, calc(100% - 28px)); padding: 18px; border: 1px solid var(--bb-line); border-radius: 24px; background: var(--bb-paper); color: var(--bb-ink); box-shadow: var(--bb-lift); }
  #basketbook-ui .bb-confirm::backdrop { background: #111c18a6; }
  #basketbook-ui .bb-confirm[open] { animation: bb-screen-in 313.95ms cubic-bezier(.2,.75,.3,1); }
  #basketbook-ui .bb-confirm p { margin-block: 8px 16px; }
  #basketbook-ui .bb-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  #basketbook-ui .bb-price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 12px 0; }
  #basketbook-ui .bb-price-card { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--bb-line); border-radius: 16px; background: var(--bb-bg); animation: bb-card-in 361.0425ms cubic-bezier(.2,.75,.3,1); }
  #basketbook-ui .bb-price-card:first-child { background: var(--bb-orchid-soft); }
  #basketbook-ui .bb-price-card:first-child strong { color: var(--bb-orchid); }
  #basketbook-ui .bb-price-card strong { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
  #basketbook-ui .bb-price-chart { padding: 10px; margin-top: 7px; border: 1px solid var(--bb-line); border-radius: 10px; color: var(--bb-orchid); }
  #basketbook-ui .bb-price-chart svg { display: block; width: 100%; height: 74px; }
  #basketbook-ui .bb-chart-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; color: var(--bb-secondary); }
  #basketbook-ui .bb-price-history { padding: 0; margin: 6px 0 0; list-style: none; }
  #basketbook-ui .bb-price-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-price-history .bb-button { margin: 0; }
  #basketbook-ui .bb-modes { display: flex; flex-wrap: wrap; gap: 5px; }
  #basketbook-ui .bb-button[aria-pressed="true"] { background: var(--bb-soft); color: var(--bb-accent); }
  #basketbook-ui .bb-spend-period { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 13px; }
  #basketbook-ui .bb-spend-period select { min-height: 44px; }
  #basketbook-ui .bb-spend-scopes { flex-basis: 100%; }
  #basketbook-ui .bb-receipt-identity { margin-bottom: 12px; padding: 10px 14px; }
  #basketbook-ui .bb-receipt-identity summary { color: var(--bb-accent); font-weight: 700; }
  #basketbook-ui .bb-receipt-identity .bb-manual-fields { margin-top: 8px; }
  #basketbook-ui .bb-receipt-identity label, #basketbook-ui [data-profile-non-grocery] span { display: grid; gap: 4px; }
  #basketbook-ui .bb-budget-panel {
    position: relative; display: grid; gap: 12px; margin-block: 0 16px; padding: clamp(14px, 2.5cqi, 20px);
    border: 1px solid color-mix(in srgb, var(--bb-line) 77%, var(--bb-green-solid));
    border-radius: 22px; background: linear-gradient(125deg, var(--bb-soft), var(--bb-paper) 72%); box-shadow: var(--bb-shadow);
    transition: box-shadow 260ms ease, border-color 260ms ease;
  }
  #basketbook-ui :is(.bb-budget-header, .bb-budget-heading, .bb-profile-budget) { display: flex; align-items: center; gap: 10px; }
  #basketbook-ui :is(.bb-budget-header, .bb-profile-budget) { justify-content: space-between; flex-wrap: wrap; }
  #basketbook-ui .bb-person-avatar { position: relative; display: grid; place-items: center; width: 40px; aspect-ratio: 1; flex: none; border: 1px solid var(--bb-line); border-radius: 50%; overflow: hidden; color: var(--bb-accent); background: var(--bb-soft); font-weight: 800; }
  #basketbook-ui .bb-person-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #basketbook-ui .bb-budget-open { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; }
  #basketbook-ui .bb-budget-open:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 3px; }
  #basketbook-ui .bb-budget-panel:has(.bb-budget-open:hover) { border-color: var(--bb-accent); box-shadow: var(--bb-lift); }
  #basketbook-ui .bb-budget-arrow { font-size: 24px; line-height: 1; color: var(--bb-accent); }
  #basketbook-ui .bb-budget-retry button { position: relative; z-index: 2; }
  #basketbook-ui .bb-budget-header h2 { color: var(--bb-accent); font-size: 17px; }
  #basketbook-ui .bb-budget-details { display: grid; gap: 7px; }
  #basketbook-ui .bb-budget-totals { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--bb-secondary); }
  #basketbook-ui .bb-budget-totals strong { color: var(--bb-ink); font-size: clamp(24px, 5cqi, 32px); line-height: 1.15; }
  #basketbook-ui .bb-budget-progress { display: block; width: 100%; height: 7px; appearance: none; border: 0; border-radius: 999px; background: var(--bb-line); --bb-budget-fill: var(--bb-green-solid); }
  #basketbook-ui .bb-budget-progress::-webkit-progress-bar { background: var(--bb-line); border-radius: 999px; }
  #basketbook-ui .bb-budget-progress::-webkit-progress-value { background: var(--bb-budget-fill); border-radius: 999px; }
  #basketbook-ui .bb-budget-progress::-moz-progress-bar { background: var(--bb-budget-fill); border-radius: 999px; }
  #basketbook-ui .bb-budget-balance { color: var(--bb-accent); font-weight: 700; }
  #basketbook-ui [data-over-budget] .bb-budget-progress { --bb-budget-fill: var(--bb-orchid-solid); }
  #basketbook-ui [data-over-budget] .bb-budget-balance { color: var(--bb-orchid); }
  #basketbook-ui .bb-budget-retry { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  #basketbook-ui .bb-profile-budget { padding: 12px; border: 1px solid var(--bb-line); border-radius: 16px; background: var(--bb-soft); }
  #basketbook-ui [data-insights-budget] { margin-bottom: 12px; }
  #basketbook-ui .bb-dialog-form label { display: grid; gap: 5px; }
  #basketbook-ui .bb-dialog-form input { min-height: 44px; font-size: 16px; }
  #basketbook-ui .bb-dialog-form p[role="status"]:empty { display: none; }
  #basketbook-ui .bb-dialog-form p[role="status"] { color: var(--bb-secondary); }
  #basketbook-ui .bb-dialog-form input[aria-invalid="true"] { border-color: var(--bb-error); }
  #basketbook-ui .bb-manual-receipt { max-height: calc(100svh - 28px); overflow: auto; }
  #basketbook-ui .bb-manual-receipt form, #basketbook-ui .bb-manual-line, #basketbook-ui [data-manual-lines] { display: grid; gap: 9px; }
  #basketbook-ui .bb-manual-line { padding: 9px; border: 1px solid var(--bb-line); border-radius: 13px; }
  #basketbook-ui .bb-manual-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
  #basketbook-ui .bb-manual-fields label { flex: 1 1 95px; min-width: 0; }
  #basketbook-ui .bb-manual-fields button { min-height: 44px; }
  #basketbook-ui .bb-manual-preview img { display: block; width: 100%; max-height: 42svh; object-fit: contain; border-radius: 10px; }
  #basketbook-ui [data-manual-add] { justify-self: start; }
  #basketbook-ui .bb-dialog-form .bb-confirm-actions { margin-top: 14px; }
  #basketbook-ui .bb-data-danger { margin-top: 9px; padding-top: 12px; border-top: 1px solid var(--bb-line); }
  #basketbook-ui .bb-guide-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
  #basketbook-ui .bb-guide-header p { margin: 0; }
  #basketbook-ui .bb-user-guide h2 { font-size: 23px; }
  #basketbook-ui .bb-recipes .bb-drawer-head h2 { display: flex; align-items: center; gap: 8px; }
  #basketbook-ui .bb-recipe-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
  #basketbook-ui .bb-recipe-filters label { display: grid; gap: 4px; min-width: 0; }
  #basketbook-ui .bb-recipe-filters select { min-width: 0; min-height: 44px; }
  #basketbook-ui .bb-recipe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: 8px; }
  #basketbook-ui .bb-recipe-option { display: grid; align-content: center; gap: 4px; min-height: 96px; padding: 10px; text-align: start; border: 1px solid var(--bb-line); border-radius: 16px; background: var(--bb-paper); color: var(--bb-ink); font: inherit; }
  #basketbook-ui button.bb-recipe-option { grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 10px; }
  #basketbook-ui button.bb-recipe-option:is(:hover, :focus-visible) { background: var(--bb-soft); border-color: var(--bb-accent); }
  #basketbook-ui .bb-recipe-thumb { display: block; width: 62px; height: 62px; object-fit: cover; border-radius: 11px; background: var(--bb-soft); }
  #basketbook-ui .bb-recipe-option-copy { display: grid; gap: 2px; line-height: 1.3; }
  #basketbook-ui .bb-recipe-option-copy :is(small, span) { color: var(--bb-secondary); }
  #basketbook-ui [data-recipe-status]:empty { display: none; }
  #basketbook-ui .bb-recipe-detail { display: grid; gap: 13px; }
  #basketbook-ui .bb-recipe-detail-head h3 { margin-top: 10px; font-size: 23px; line-height: 1.12; }
  #basketbook-ui .bb-recipe-detail-head h3:focus { outline: none; }
  #basketbook-ui .bb-recipe-hero { display: block; width: 100%; height: auto; max-height: 230px; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 10px; border-radius: 15px; background: var(--bb-soft); }
  #basketbook-ui .bb-recipe-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  #basketbook-ui .bb-recipe-costs > div { display: grid; align-content: start; gap: 4px; padding: 10px; background: var(--bb-soft); border-radius: 13px; }
  #basketbook-ui .bb-recipe-costs dt { font-size: 12px; }
  #basketbook-ui .bb-recipe-costs dd { display: grid; margin: 0; }
  #basketbook-ui .bb-recipe-costs strong { font-size: clamp(14px, 4cqi, 19px); }
  #basketbook-ui .bb-recipe-costs small, #basketbook-ui .bb-recipe-section small { color: var(--bb-secondary); }
  #basketbook-ui .bb-recipe-price-sources { padding: 9px 11px; border: 1px solid var(--bb-line); border-radius: 12px; }
  #basketbook-ui .bb-recipe-price-sources summary { color: var(--bb-accent); font-weight: 700; }
  #basketbook-ui [data-recipe-source-list] { margin: 5px 0 0; padding: 0; list-style: none; }
  #basketbook-ui [data-recipe-source-list] li { display: grid; gap: 1px; padding-block: 6px; font-size: 12px; }
  #basketbook-ui [data-recipe-source-list] li + li { border-top: 1px solid var(--bb-line); }
  #basketbook-ui [data-recipe-source-list] a { color: var(--bb-accent); }
  #basketbook-ui .bb-recipe-section h4 { margin: 0 0 4px; font-size: 15px; }
  #basketbook-ui .bb-recipe-ingredient { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding-block: 6px; border-bottom: 1px solid var(--bb-line); cursor: pointer; }
  #basketbook-ui .bb-recipe-ingredient input { accent-color: var(--bb-green-solid); margin: 0; }
  #basketbook-ui .bb-recipe-recent { display: block; }
  #basketbook-ui .bb-recipe-ingredient .bb-num, #basketbook-ui [data-recipe-missing] li > span:last-child { font-size: 12px; text-align: end; }
  #basketbook-ui [data-recipe-missing] { margin: 0; padding: 0; list-style: none; }
  #basketbook-ui [data-recipe-missing] li { display: flex; justify-content: space-between; gap: 8px; padding-block: 6px; }
  #basketbook-ui [data-recipe-steps] { margin: 0; padding-inline-start: 20px; }
  #basketbook-ui [data-recipe-steps] li + li { margin-top: 5px; }
  #basketbook-ui .bb-danger { color: var(--bb-error); }
  #basketbook-ui .bb-danger:hover { background: color-mix(in srgb, var(--bb-error) 10%, var(--bb-paper)); }
  #basketbook-ui .bb-skeleton-bar, #basketbook-ui .bb-skeleton-ring {
    display: block; height: 9px; border-radius: 999px; background: var(--bb-line);
    animation: bb-skeleton-pulse 1.65s ease-in-out infinite alternate;
  }
  @keyframes bb-skeleton-pulse { from { opacity: .55; } to { opacity: 1; } }
  #basketbook-ui .bb-stat.bb-stat-skeleton { min-height: 108px; justify-content: center; gap: 9px; pointer-events: none; }
  #basketbook-ui .bb-skeleton-label { width: 44%; }
  #basketbook-ui .bb-skeleton-value { width: min(57%, 138px); height: 22px; }
  #basketbook-ui .bb-skeleton-note { width: 62%; }
  #basketbook-ui .bb-skeleton-row { display: flex; gap: 10px; align-items: center; min-height: 44px; padding-inline: 12px; }
  #basketbook-ui .bb-skeleton-icon { width: 20px; height: 20px; border-radius: 7px; }
  #basketbook-ui .bb-skeleton-name { width: 32%; }
  #basketbook-ui .bb-skeleton-price { width: min(20%, 68px); margin-inline-start: auto; }
  #basketbook-ui .bb-skeleton-chart { display: grid; place-items: center; padding: 24px; }
  #basketbook-ui .bb-skeleton-ring { width: min(230px, 70%); height: auto; aspect-ratio: 1; background: none; border: 13px solid var(--bb-line); }
  #basketbook-ui .bb-measures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
  #basketbook-ui .bb-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px; text-align: start; transition: box-shadow 219.765ms ease, border-color 219.765ms ease, transform 219.765ms ease; }
  #basketbook-ui .bb-stat::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: var(--bb-stroke); opacity: 0; }
  #basketbook-ui .bb-stat[data-metric="paid"] { background: linear-gradient(145deg, var(--bb-green-solid), var(--bb-primary-deep)); border-color: transparent; color: white; }
  #basketbook-ui .bb-stat[data-metric="paid"] :is(.bb-stat-label, .bb-muted, .bb-stat-detail) { color: #edf8ef; }
  #basketbook-ui .bb-stat[data-metric="paid"]:focus-visible { outline-color: var(--bb-accent); }
  #basketbook-ui [data-screen="spending"]:not([hidden]) .bb-stat { animation: bb-card-in 361.0425ms cubic-bezier(.2,.75,.3,1) var(--bb-delay, 0ms) backwards; }
  #basketbook-ui .bb-stat:nth-child(2) { --bb-delay: 28.2555ms; }
  #basketbook-ui .bb-stat:nth-child(3) { --bb-delay: 56.511ms; }
  #basketbook-ui .bb-stat:nth-child(4) { --bb-delay: 84.7665ms; }
  #basketbook-ui .bb-stat:nth-child(5) { --bb-delay: 113.022ms; }
  #basketbook-ui .bb-stat:nth-child(6) { --bb-delay: 141.2775ms; }
  @keyframes bb-card-in { from { opacity: .75; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
  #basketbook-ui .bb-stat:is(:hover, [aria-expanded="true"]) { border-color: var(--bb-accent); box-shadow: var(--bb-lift); }
  #basketbook-ui .bb-stat:is(:hover, [aria-expanded="true"])::before { opacity: 1; }
  @media (hover: hover) {
    #basketbook-ui .bb-stat:hover { transform: translateY(-3px); }
    #basketbook-ui .bb-primary:hover { transform: translateY(-1px); box-shadow: var(--bb-lift); }
    #basketbook-ui .bb-mobile-tab:hover { background-color: var(--bb-soft); }
  }
  #basketbook-ui :is(.bb-button, .bb-stat, .bb-mobile-tab):active:not(:disabled) { transform: scale(.98); }
  #basketbook-ui .bb-stat-detail { transition: transform 251.16ms ease; }
  #basketbook-ui .bb-stat:hover .bb-stat-detail { transform: translateX(3px); }
  #basketbook-ui .bb-stat-label { color: var(--bb-secondary); font-size: 12px; font-weight: 600; }
  #basketbook-ui .bb-stat-value { font-size: 25px; font-weight: 800; letter-spacing: -.04em; line-height: 1.14; overflow-wrap: anywhere; }
  #basketbook-ui .bb-stat-value[data-text] { font-size: 17px; letter-spacing: -.025em; }
  #basketbook-ui .bb-stat-detail { margin-top: auto; padding-top: 4px; color: var(--bb-accent); font-size: 12px; font-weight: 650; }
  #basketbook-ui .bb-metric-drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100%); height: 100dvh; max-width: 100%; max-height: none; margin: 0; padding: 0; border: 1px solid var(--bb-line); border-radius: 26px 0 0 26px; background: var(--bb-paper); color: var(--bb-ink); box-shadow: var(--bb-lift); overflow: hidden; }
  #basketbook-ui .bb-metric-drawer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: bb-drawer-in 345.345ms cubic-bezier(.2,.75,.3,1); }
  #basketbook-ui .bb-metric-drawer::backdrop { background: #111c18a6; }
  @keyframes bb-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
  #basketbook-ui .bb-drawer-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 20px 18px 14px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-drawer-head h2 { font-size: 19px; }
  #basketbook-ui .bb-glass-drawer-head { align-items: center; background: linear-gradient(135deg, var(--bb-soft), var(--bb-paper) 78%); }
  #basketbook-ui .bb-drawer-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
  #basketbook-ui .bb-drawer-symbol { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--bb-glass-edge); border-radius: 15px; background: color-mix(in srgb, var(--bb-drawer-tint, var(--bb-accent)) 13%, var(--bb-paper)); color: color-mix(in srgb, var(--bb-drawer-tint, var(--bb-accent)) 65%, var(--bb-ink)); box-shadow: inset 0 1px 1px var(--bb-glass-edge), var(--bb-shadow); }
  #basketbook-ui .bb-drawer-symbol svg { width: 19px; height: 19px; }
  #basketbook-ui .bb-drawer-body { overflow: auto; overscroll-behavior: contain; padding: 18px; }
  #basketbook-ui .bb-drawer-value { font-size: 24px; font-weight: 800; line-height: 1.15; }
  #basketbook-ui .bb-drawer-body [data-metric-note] { margin-top: 4px; }
  #basketbook-ui .bb-drawer-body h3 { margin-top: 18px; }
  #basketbook-ui .bb-drawer-body .bb-breakdown > div { padding-block: 8px; border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-drawer-body .bb-button { margin-top: 13px; }
  #basketbook-ui .bb-type-list { display: grid; gap: 2px; padding: 8px; }
  #basketbook-ui .bb-type { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: start; background: transparent; padding: 8px 12px; border: 0; border-radius: 10px; transition: background-color 219.765ms ease; }
  #basketbook-ui .bb-type:is(:hover, :focus-visible) { background: var(--bb-soft); }
  #basketbook-ui .bb-type span:last-child { color: var(--bb-accent); }
  #basketbook-ui .bb-spend-empty { padding: 10px; }
  #basketbook-ui .bb-category-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  #basketbook-ui [data-spend-categories] { overflow-anchor: none; scroll-margin-block-start: 12px; }
  #basketbook-ui .bb-spending-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: clamp(10px, 3cqi, 30px); margin: 0; padding: 16px; }
  #basketbook-ui .bb-donut { position: relative; isolation: isolate; width: min(100%, 276px); margin-inline: auto; }
  #basketbook-ui .bb-donut::before { content: ""; position: absolute; z-index: -1; inset: 4%; border-radius: 50%; background: radial-gradient(ellipse at 20% 30%, var(--bb-soft), transparent 62%), radial-gradient(ellipse at 80% 78%, var(--bb-orchid-soft), transparent 65%); opacity: .77; }
  #basketbook-ui .bb-donut svg { display: block; width: 100%; height: auto; }
  #basketbook-ui .bb-donut-track { stroke: color-mix(in srgb, var(--bb-line) 70%, transparent); stroke-width: 13; }
  #basketbook-ui .bb-donut-slice { stroke-width: 15; pointer-events: visiblePainted; transition: stroke-width 200ms ease; }
  #basketbook-ui .bb-donut-slice:hover { stroke-width: 21; }
  #basketbook-ui [data-reveal="waiting"] .bb-donut-sweep { stroke-dashoffset: 100; }
  #basketbook-ui [data-reveal="playing"] .bb-donut-sweep { animation: bb-chart-sweep 1000ms cubic-bezier(.24,.72,.28,1) both; }
  #basketbook-ui .bb-donut-arc-labels { fill: var(--bb-secondary); font-size: 11px; font-weight: 650; pointer-events: none; }
  #basketbook-ui .bb-donut-icons { position: absolute; inset: 0; pointer-events: none; }
  #basketbook-ui .bb-donut-icon { position: absolute; inset: var(--bb-arc-y) auto auto var(--bb-arc-x); translate: -50% -50%; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--bb-glass-edge); border-radius: 50%; background: color-mix(in srgb, var(--bb-paper) 88%, var(--bb-slice)); color: color-mix(in srgb, var(--bb-slice) 65%, var(--bb-ink)); box-shadow: inset 0 1px 1px var(--bb-glass-edge), 0 2px 6px #18251d35; pointer-events: auto; transition: scale 200ms ease; }
  #basketbook-ui .bb-donut-icon:hover { scale: 1.15; }
  #basketbook-ui .bb-donut-icon svg { width: 14px; height: 14px; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #basketbook-ui .bb-donut-icon { background: color-mix(in srgb, var(--bb-paper) 82%, transparent); -webkit-backdrop-filter: blur(5px) saturate(160%); backdrop-filter: blur(5px) saturate(160%); }
  }
  #basketbook-ui [data-reveal="waiting"] :is(.bb-donut-arc-labels, .bb-donut-icons) { opacity: 0; visibility: hidden; }
  #basketbook-ui [data-reveal="playing"] :is(.bb-donut-arc-labels, .bb-donut-icons) { animation: bb-chart-labels 260ms 610ms ease both; }
  @keyframes bb-chart-sweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes bb-chart-labels { from { opacity: 0; } to { opacity: 1; } }
  #basketbook-ui .bb-donut-total { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding-inline: 25%; pointer-events: none; }
  #basketbook-ui .bb-donut-total span { color: var(--bb-secondary); font-size: 11px; }
  #basketbook-ui .bb-donut-total strong { font-size: clamp(17px, 3.5cqi, 26px); letter-spacing: -.05em; overflow-wrap: anywhere; }
  #basketbook-ui .bb-donut-labels { display: grid; gap: 2px; padding: 0; margin: 0; list-style: none; }
  #basketbook-ui .bb-donut-label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(42px, auto); align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px; border: 0; border-radius: 10px; background: transparent; text-align: start; font-size: 13px; transition: background-color 200ms ease; }
  #basketbook-ui .bb-donut-label:is(:hover, :focus-visible) { background: var(--bb-soft); }
  #basketbook-ui .bb-donut-label strong { overflow-wrap: anywhere; }
  #basketbook-ui .bb-donut-swatch { display: grid; place-items: center; color: var(--bb-slice); }
  #basketbook-ui .bb-donut-percent { color: var(--bb-secondary); text-align: end; }
  #basketbook-ui .bb-chart-credit-note { margin-top: 6px; }
  #basketbook-ui .bb-spend-table { border-collapse: collapse; width: 100%; font-size: 12px; }
  #basketbook-ui .bb-spend-table th, #basketbook-ui .bb-spend-table td { text-align: start; padding: 8px 7px; border-bottom: 1px solid var(--bb-line); vertical-align: middle; }
  #basketbook-ui .bb-spend-table th:first-child, #basketbook-ui .bb-spend-table td:first-child { padding-inline-start: 12px; }
  #basketbook-ui .bb-spend-table th:last-child, #basketbook-ui .bb-spend-table td:last-child { text-align: end; padding-inline-end: 12px; }
  #basketbook-ui .bb-spend-table th { color: var(--bb-secondary); font-weight: 650; background: var(--bb-rail); }
  #basketbook-ui .bb-spend-table tr:last-child td { border-bottom: 0; }
  #basketbook-ui .bb-product-table td:nth-child(2) { color: var(--bb-secondary); }
  #basketbook-ui .bb-item-link { text-align: start; padding: 0; background: transparent; border: 0; font-weight: 650; color: var(--bb-accent); overflow-wrap: anywhere; }
  #basketbook-ui .bb-item-link:hover { text-decoration: underline; }
  #basketbook-ui .bb-sort { width: auto; max-width: 100%; font-size: 12px; }
  #basketbook-ui .bb-scope-note { margin-top: 10px; }
  #basketbook-ui .bb-breakdown { display: grid; gap: 5px; margin-top: 8px; }
  #basketbook-ui .bb-breakdown > div { display: flex; justify-content: space-between; gap: 6px; }
  #basketbook-ui .bb-capture { max-width: 760px; margin-inline: auto; }
  #basketbook-ui .bb-scanner { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; min-height: 220px; height: min(66svh, 570px); border-radius: 16px; color: #f8fff8; background: radial-gradient(ellipse at 75% 10%, #284b3b, #10281e 72%); box-shadow: var(--bb-lift); }
  #basketbook-ui .bb-camera-layer { position: absolute; inset: 0; overflow: hidden; background: #10281e; }
  #basketbook-ui .bb-camera-layer video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; transform: translate(-50%, -50%); }
  #basketbook-ui .bb-scanner [data-photo-preview] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  #basketbook-ui .bb-scanner-mark { z-index: 1; position: relative; width: min(57%, 220px); aspect-ratio: 1; border: 2px solid #e4fa9a; border-radius: 20px; box-shadow: 0 0 0 100vmax #06170e42; pointer-events: none; }
  #basketbook-ui .bb-scanner-mark::after { content: ""; position: absolute; inset: 12% 6% auto; height: 1px; background: var(--bb-citrus); box-shadow: 0 0 12px var(--bb-citrus); opacity: 0; }
  #basketbook-ui .bb-scanner[data-phase="live"] .bb-scanner-mark::after { animation: bb-sweep 4.08135s ease-in-out infinite alternate; }
  @keyframes bb-sweep { from { inset-block-start: 12%; opacity: .45; } to { inset-block-start: 88%; opacity: .85; } }
  #basketbook-ui .bb-scanner-placeholder { position: relative; z-index: 2; max-width: 220px; padding: 10px; text-align: center; font-weight: 650; }
  #basketbook-ui .bb-scanner-placeholder svg { display: block; margin: 0 auto 8px; width: 28px; height: 28px; color: var(--bb-citrus); }
  #basketbook-ui .bb-camera-retry { margin-top: 9px; color: var(--bb-ink); }
  #basketbook-ui .bb-scan-result { margin-top: 9px; color: var(--bb-ink); text-decoration: none; }
  #basketbook-ui .bb-capture-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
  #basketbook-ui .bb-capture-actions .bb-button { min-height: 44px; color: var(--bb-accent); }
  #basketbook-ui .bb-capture-actions .bb-take-photo { background: var(--bb-soft); }
  #basketbook-ui .bb-take-photo svg { display: block; width: 16px; height: 16px; }
  #basketbook-ui .bb-capture-status { position: absolute; z-index: 2; inset: auto 10px 12px; width: fit-content; max-width: calc(100% - 20px); margin-inline: auto; padding: 6px 9px; border-radius: 8px; background: #0c201bea; color: #f8fff8; text-align: center; }
  #basketbook-ui .bb-capture-status:empty { display: none; }
  #basketbook-ui .bb-settings { display: grid; gap: 12px; max-width: 680px; }
  #basketbook-ui .bb-settings-guide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; text-align: start; color: var(--bb-ink); font: inherit; font-weight: 730; }
  #basketbook-ui .bb-settings-guide:is(:hover, :focus-visible) { background: var(--bb-soft); }
  #basketbook-ui .bb-settings-guide :is([data-settings-icon], span:last-child) { color: var(--bb-accent); }
  #basketbook-ui .bb-settings-guide svg { display: block; width: 18px; height: 18px; }
  #basketbook-ui .bb-changelog { padding: 4px 14px 8px; }
  #basketbook-ui .bb-changelog details { border-bottom: 1px solid var(--bb-line); }
  #basketbook-ui .bb-changelog details:last-child { border-bottom: 0; }
  #basketbook-ui .bb-changelog summary { cursor: pointer; padding-block: 10px; font-weight: 650; }
  #basketbook-ui .bb-changelog p { margin: 0 0 11px; }
  #basketbook-ui .bb-version { color: var(--bb-accent); margin-inline-end: 7px; }
  #basketbook-ui .bb-online-results { display: grid; gap: 10px; margin-top: 10px; }
  #basketbook-ui .bb-online-card { display: grid; gap: 6px; padding: 12px; }
  #basketbook-ui .bb-online-card h3 { margin: 0; }
  #basketbook-ui .bb-online-card a { color: var(--bb-accent); }
  #basketbook-ui .bb-online-button { align-self: start; justify-self: start; }
  #basketbook-ui .bb-online-choices summary, #basketbook-ui .bb-online-states summary { color: var(--bb-accent); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
  #basketbook-ui .bb-online-choice-list { display: grid; gap: 8px; }
  #basketbook-ui .bb-online-choice-list .bb-button { margin: 0; justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 44px; }
  #basketbook-ui .bb-settings-body { display: grid; gap: 12px; padding: 13px 14px; }
  #basketbook-ui .bb-preferences-feedback:has([data-preferences-status]:empty + [data-retry-preferences][hidden]) { display: none; }
  #basketbook-ui .bb-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #basketbook-ui .bb-account-actions a { text-decoration: none; }
  #basketbook-ui .bb-household-settings { display: grid; gap: 9px; }
  #basketbook-ui .bb-invite-share { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; padding: 12px; border: 1px solid var(--bb-line); border-radius: 12px; background: var(--bb-orchid-soft); }
  #basketbook-ui .bb-invite-share img { width: 132px; max-width: 100%; height: auto; border-radius: 5px; background: white; }
  #basketbook-ui .bb-invite-share .bb-account-actions { margin-top: 8px; }
  #basketbook-ui .bb-invite-share p { margin-top: 6px; }
  #basketbook-ui .bb-receipt-actions { display: none; }
  #basketbook-ui .bb-household-totals { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
  #basketbook-ui .bb-household-totals .bb-panel { padding: 10px; }
  #basketbook-ui .bb-household-totals .bb-breakdown { font-size: 12px; }
  #basketbook-ui .bb-add-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
  #basketbook-ui .bb-settings-note:empty { display: none; }
  @container basketbook-frame (max-width: 775px) {
    #basketbook-ui { grid-template-columns: 138px minmax(0, 1fr); }
    #basketbook-ui .bb-main { padding-inline: 16px; }
    #basketbook-ui .bb-grid { grid-template-columns: minmax(0, 1fr); }
    #basketbook-ui .bb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @container basketbook-frame (max-width: 540px) {
    #basketbook-ui .bb-panel-title.bb-panel-title-list { grid-template-columns: minmax(0, 1fr); }
    #basketbook-ui .bb-panel-title-main, #basketbook-ui .bb-panel-sort { justify-content: space-between; }
    #basketbook-ui .bb-panel-sort { padding-top: 8px; border-top: 1px solid var(--bb-panel-header-rule); }
    #basketbook-ui .bb-panel-sort select { min-height: 40px; }
    #basketbook-ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: calc(100svh - 16px); }
    #basketbook-ui[data-current-screen="welcome"] { grid-template-rows: minmax(0, 1fr); }
    #basketbook-ui .bb-rail { min-height: 60px; padding: 12px 10px; justify-content: center; border-inline-end: 0; border-bottom: 1px solid var(--bb-line); }
    #basketbook-ui .bb-theme-toggle, #basketbook-ui[data-current-screen="welcome"] .bb-theme-toggle { inset: 8px 12px auto auto; }
    #basketbook-ui .bb-title { padding-inline-end: 0; }
    #basketbook-ui .bb-rail nav, #basketbook-ui .bb-scan, #basketbook-ui .bb-rail-foot { display: none; }
    #basketbook-ui .bb-main { padding: 12px 10px calc(94px + env(safe-area-inset-bottom, 0px)); }
    #basketbook-ui .bb-metric-drawer { inset: auto 0 0; width: 100%; height: auto; min-height: min(320px, 75dvh); max-height: 82dvh; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    #basketbook-ui .bb-metric-drawer[open] { animation-name: bb-sheet-in; }
    @keyframes bb-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
    #basketbook-ui[data-current-screen="capture"] { grid-template-rows: minmax(0, 1fr); }
    #basketbook-ui[data-current-screen="capture"] .bb-rail { display: none; }
    #basketbook-ui[data-current-screen="capture"] .bb-main { padding: 7px 7px calc(91px + env(safe-area-inset-bottom, 0px)); }
    #basketbook-ui .bb-scanner { height: max(220px, calc(100svh - 168px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); }
    #basketbook-ui .bb-mobile-nav {
      position: fixed;
      z-index: 8;
      inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
      inset-inline-start: 50%;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 3px;
      inline-size: min(460px, calc(100cqi - 12px), calc(100vw - 24px));
      padding: 5px;
      border: 1px solid var(--bb-glass-edge);
      border-radius: 30px;
      background: var(--bb-paper);
      box-shadow: 0 8px 28px light-dark(#1e392f32, #0009), inset 0 1px 1px var(--bb-glass-edge), inset 0 -1px 2px light-dark(#33534724, #0006);
    }
    #basketbook-ui .bb-mobile-nav::before {
      content: "";
      position: absolute;
      inset: 5px auto 5px 5px;
      width: calc((100% - 22px) / 5);
      border: 1px solid light-dark(#78ab8440, #91ce9b44);
      border-radius: 25px;
      background: linear-gradient(160deg, light-dark(#fbfffbce, #5c89626e), color-mix(in srgb, var(--bb-soft) 82%, transparent));
      box-shadow: inset 0 1px 0 var(--bb-glass-edge);
      transform: translateX(calc(var(--bb-tab, 0) * (100% + 3px)));
      transition: transform 353.19375ms cubic-bezier(.22,.75,.28,1);
      pointer-events: none;
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      #basketbook-ui .bb-mobile-nav {
        background: linear-gradient(155deg, light-dark(#ffffff30, #b0d2b816), transparent 62%), var(--bb-glass);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
      }
    }
    #basketbook-ui .bb-mobile-tab {
      position: relative;
      display: grid;
      min-width: 0;
      min-height: 54px;
      justify-items: center;
      align-content: center;
      gap: 3px;
      padding: 4px 2px;
      border: 1px solid transparent;
      border-radius: 25px;
      background: transparent;
      color: var(--bb-nav-label);
      font-size: 11px;
      font-weight: 610;
      line-height: 1.1;
      touch-action: manipulation;
      transition: background-color 251.16ms ease, color 251.16ms ease, transform 251.16ms ease;
    }
    #basketbook-ui .bb-mobile-tab svg { width: 20px; height: 20px; }
    #basketbook-ui .bb-mobile-tab[aria-current="page"] { background: transparent; font-weight: 700; }
    #basketbook-ui .bb-mobile-tab[aria-current="page"] svg { color: var(--bb-accent); }
    #basketbook-ui .bb-mobile-tab[data-open="capture"] svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--bb-orchid-solid); color: white; }
    #basketbook-ui .bb-mobile-tab:focus-visible { outline-offset: -3px; }
    #basketbook-ui .bb-side { grid-template-columns: minmax(0, 1fr); }
    #basketbook-ui .bb-item { gap: 6px; padding-inline: 10px; }
    #basketbook-ui .bb-fields { grid-template-columns: minmax(0, 1fr); }
    #basketbook-ui .bb-price-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #basketbook-ui .bb-price-edit label:last-child { grid-column: 1 / -1; }
    #basketbook-ui .bb-top { padding-inline-end: 0; }
    #basketbook-ui .bb-receipt-hint { display: block; }
    #basketbook-ui [data-swipe-receipt] { --bb-swipe-enabled: 1; position: relative; display: block; overflow: hidden; isolation: isolate; touch-action: pan-y; touch-action: pan-y pinch-zoom; user-select: none; }
    #basketbook-ui [data-swipe-receipt] > .bb-item { position: relative; z-index: 1; background: var(--bb-paper); transform: translateX(var(--bb-swipe-drag, var(--bb-swipe-open, 0px))); transition: transform 251.16ms ease; }
    #basketbook-ui [data-swipe-receipt] > .bb-item { grid-template-columns: minmax(0, 1fr) auto auto 36px; }
    #basketbook-ui .bb-receipt-actions { display: inline-flex; min-height: 36px; padding: 4px; }
    #basketbook-ui [data-swipe-receipt][data-dragging] > .bb-item { transition: none; }
    #basketbook-ui .bb-invite-share { grid-template-columns: minmax(0, 1fr); }
    #basketbook-ui .bb-invite-share img { justify-self: center; }
    #basketbook-ui [data-swipe-receipt]:is([data-swiped], :has(.bb-delete:focus-visible)) { --bb-swipe-open: -76px; }
    #basketbook-ui [data-swipe-receipt] .bb-delete { position: absolute; inset: 0 0 0 auto; width: 76px; height: 100%; border-radius: 0; background: #a52c39; color: white; }
    #basketbook-ui [data-swipe-receipt] .bb-delete:focus-visible { outline-offset: -4px; outline-color: white; }
    #basketbook-ui .bb-spend-table th, #basketbook-ui .bb-spend-table td { padding-inline: 4px; }
    #basketbook-ui .bb-spend-table th:first-child, #basketbook-ui .bb-spend-table td:first-child { padding-inline-start: 8px; }
    #basketbook-ui .bb-spend-table th:last-child, #basketbook-ui .bb-spend-table td:last-child { padding-inline-end: 8px; }
    #basketbook-ui .bb-spending-chart { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px; }
    #basketbook-ui .bb-donut { width: min(100%, 242px); }
    #basketbook-ui .bb-donut-icon { width: 23px; height: 23px; }
    #basketbook-ui .bb-donut-icon svg { width: 13px; height: 13px; }
    #basketbook-ui .bb-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    #basketbook-ui .bb-stat { padding: 11px; }
    #basketbook-ui .bb-stat-value { font-size: 23px; }
    #basketbook-ui .bb-title { margin-bottom: 12px; }
  }
  @media (prefers-reduced-transparency: reduce) {
    #basketbook-ui :is(.bb-mobile-nav, .bb-theme-toggle) { background: var(--bb-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
    #basketbook-ui .bb-donut-icon { background: var(--bb-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (pointer: coarse) {
    #basketbook-ui :is(.bb-button, input, select, summary) { min-height: 44px; }
    #basketbook-ui :is(input, select) { font-size: 16px; }
    #basketbook-ui .bb-item-link { min-height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="on"]) #basketbook-ui *, :root:not([data-motion="on"]) #basketbook-ui *::before, :root:not([data-motion="on"]) #basketbook-ui *::after { transition: none !important; animation: none !important; }
    :root:not([data-motion="on"]) #basketbook-ui :is(.bb-button, .bb-stat, .bb-mobile-tab, .bb-stat-detail) { transform: none !important; }
    :root:not([data-motion="on"]) #basketbook-ui [data-reveal="waiting"] .bb-donut-sweep { stroke-dashoffset: 0; }
    :root:not([data-motion="on"]) #basketbook-ui [data-reveal="waiting"] :is(.bb-donut-arc-labels, .bb-donut-icons) { opacity: 1; visibility: visible; }
  }
  :root[data-motion="reduced"] #basketbook-ui *, :root[data-motion="reduced"] #basketbook-ui *::before, :root[data-motion="reduced"] #basketbook-ui *::after { transition: none !important; animation: none !important; }
  :root[data-motion="reduced"] #basketbook-ui [data-reveal="waiting"] .bb-donut-sweep { stroke-dashoffset: 0; }
  :root[data-motion="reduced"] #basketbook-ui [data-reveal="waiting"] :is(.bb-donut-arc-labels, .bb-donut-icons) { opacity: 1; visibility: visible; }
  :root[data-motion="reduced"] #basketbook-ui :is(.bb-button, .bb-stat, .bb-mobile-tab, .bb-stat-detail) { transform: none !important; }