:root{
    --bg:#0b0c10; --card:#121317; --text:#e8eaed; --muted:#9aa0a6;
    --accent:#78d8a4; --accent2:#8ab4f8; --chip:#1d2330; --border:#1f232b;
    --sidebar-w:320px; --topbar-h:58px;
    }
    @media (prefers-color-scheme: light){
    :root{ --bg:#f7f8fb; --card:#fff; --text:#101218; --muted:#5f6368; --chip:#eef1f7; --border:#e6e8ef; }
    }
    
    /* Base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
    margin:0; background:var(--bg); color:var(--text);
    font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
    /* compensate for fixed topbar so content doesn't slide under it */
    padding-top: var(--topbar-h);
    }
    a{color:var(--accent2)}
    a:hover{text-decoration:underline}
    .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
    .spacer{flex:1}
    .mono{font-variant-numeric:tabular-nums}
    
    /* Top bar (fixed) */
    .topbar{
    position: fixed; left:0; right:0; top:0;
    z-index:20; height:var(--topbar-h);
    backdrop-filter:saturate(150%) blur(6px);
    background: color-mix(in hsl, var(--bg) 90%, transparent);
    border-bottom:1px solid var(--border);
    }
    .topbar .container{max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; gap:10px; align-items:center}
    .search{flex:1 1 auto}
    .search input[type="search"]{width:100%; padding:10px 12px; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px}
    .btn,.pill{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; padding:9px 12px}
    .btn{cursor:pointer}
    .btn.small{padding:6px 10px; font-size:12px}
    .btn.secondary{background:transparent}
    .pill{color:var(--muted)}
    .sidebar-toggle{display:none}
    @media (max-width:900px){ .sidebar-toggle{display:inline-flex} }
    
    /* Lock page scroll when sidebar is open on mobile */
    body.no-scroll { overflow: hidden; }
    
    /* Backdrop behind the mobile sidebar */
    .backdrop{
    position: fixed; inset: var(--topbar-h) 0 0 0; /* below the topbar */
    background: rgba(0,0,0,.4);
    z-index: 25;
    display: none;
    }
    .backdrop.open{ display: block; }
    
    /* Layout */
    .wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: var(--sidebar-w) 1fr; gap:16px; 
        padding:16px; height: calc(100vh - var(--topbar-h)); }
    @media (max-width:900px){.wrap{grid-template-columns:1fr; height:auto;}}
    
    /* Sidebar */
    .sidebar{position: relative; height: 100%; overflow: auto; align-self: stretch; }
    .sidebar .sidebar-close{ display:none; } /* hidden on desktop */
    
    @media (max-width:900px){ 
    .sidebar{
        position:fixed; left:0; right:0; top:var(--topbar-h); bottom:0;
        max-height:none;
        background: color-mix(in hsl, var(--bg) 96%, transparent);
        border-top:1px solid var(--border);
        padding:12px;
        display:none;
        z-index:30;
        overflow:auto;          /* scrollable on mobile overlay too */
    }
    .sidebar.open{display:block}
    .sidebar .sidebar-close{
        display:inline-flex;
        position:sticky; top:0; z-index:31;
        margin:-4px -4px 8px auto;
        background:var(--card);
    }
    }
    .filter-card{background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; 
        margin-bottom: 12px;}
    .filter-head{width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; 
        font-weight: 600; background: color-mix(in hsl, var(--bg) 10%, transparent); border: 0; color: inherit; 
        font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; font-size: 1.5em; 
        font-weight: 700; line-height: 1.2;}
    @media (max-width:900px){.filter-head { font-size: 1.3em; }}
    .filter-card.open .filter-head{background: color-mix(in hsl, var(--bg) 14%, transparent); 
        border-bottom: 1px solid var(--border);}
    .filter-body{padding: 12px;}
    .filter-head .chev{ color: currentColor; transition: transform .15s ease; }
    .filter-card .panel{ background: transparent; border: 0; padding: 0;}
    .filter-card.open .chev { transform: rotate(180deg); }
    .filter-head:focus-visible{outline: 2px solid currentColor; outline-offset: 2px;}
    
    .panel{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px}
    .panel + .panel{margin-top:12px}
    .panel .sub{font-size:12px; color:var(--muted); margin-bottom:8px}
    .panel .actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}      
    .listbox{border:1px solid var(--border); border-radius:10px; background:var(--bg); padding:8px; max-height:220px; overflow:auto}
    .listbox .row{display:flex; gap:8px; align-items:center; padding:4px 2px}
    .listbox .row input[type="checkbox"]{width:16px; height:16px}
    
    /* Range inputs */
    .minmax{display:grid; grid-template-columns: 80% 20%; column-gap: 6px; align-items:center;
        position: relative; padding: 10px 0;}
    .minmax .slider-wrapper {position: relative; width: 100%; height: 40px; display: flex; align-items: center;}
    .minmax .slider-track {width: 100%; height: 5px; background-color: #d3d3d3; border-radius: 5px; 
        position: absolute; margin: auto; z-index: 1;}
    .minmax input[type="range"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%;
        background-color: transparent; position: absolute; margin: auto; pointer-events: none; z-index: 2;
        outline:none}
    .minmax input[type="range"]::-webkit-slider-runnable-track {-webkit-appearance: none; height: 5px;}
    .minmax input[type="range"]::-moz-range-track {-moz-appearance: none; height: 5px;}
    .minmax input[type="range"]::-ms-track {appearance: none; height: 5px;}
    .minmax input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; width: 1rem; height: 1rem;
        border-radius: 50%; border: 1px solid var(--border); background-color: var(--accent); cursor: pointer; 
        pointer-events: auto; margin-top: -5px;}
    .minmax input[type="range"]::-moz-range-thumb {width: 1rem; height: 1rem; border-radius: 50%; 
        background-color: var(--accent); cursor: pointer; pointer-events: auto; border: none;}
    .minmax input[type="range"]::-ms-thumb {width: 1rem; height: 1rem; border-radius: 50%;
        background-color: var(--accent); cursor: pointer;pointer-events: auto;}
    .minmax .value-pill{font-size:12px; color:var(--text); white-space:nowrap; z-index:4; pointer-events:none;
        grid-column: 1; justify-self: center;}
    .minmax > .minmax-head { grid-column: 1; grid-row: 1; }
    .minmax > .slider-wrapper { grid-column: 1; grid-row: 2; }
    .minmax > .value-pill    { grid-column: 1; grid-row: 3; }
    .minmax > .btn {grid-column: 2; grid-row: 2; align-self: center;}
    .minmax .minmax-head{display: flex; justify-content: center; align-items: center; margin-bottom: 6px;}
    .minmax .volsize{display:grid; grid-template-columns:1fr 1fr; gap:8px; border:1px solid var(--border); 
        border-radius:12px; padding:8px; background:color-mix(in hsl, var(--card) 96%, transparent); 
        justify-items:stretch;}
    .minmax .volsize > input[type="radio"]{position:absolute; opacity:0; pointer-events:none;}
    .minmax .volsize .sizebtn{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; 
        padding:6px 10px; font-size:12px; cursor:pointer; white-space:nowrap; text-align:center;}
    .minmax .volsize:has(#size-sample:checked) label[for="size-sample"]{
        outline:2px solid color-mix(in hsl, var(--accent) 40%, transparent); font-weight:600;}
    .minmax .volsize:has(#size-full:checked) label[for="size-full"]{
        outline:2px solid color-mix(in hsl, var(--accent) 40%, transparent); font-weight:600;}
    .minmax .volsize .sizebtn:hover{background:color-mix(in hsl, var(--card) 92%, transparent);}
    .minmax .volsize > input[type="radio"]:focus-visible + .sizebtn{
        outline:2px solid color-mix(in hsl, var(--accent2) 40%, transparent); outline-offset:2px; border-radius:10px;}
    @media (max-width:900px){.minmax .volsize{ grid-template-columns:1fr; }
        }

    /* Notes filter: combined mode bar + compact text items */
    
    /* Mode bar (Include / Exclude + inline selected lists) */
    .nf-modebar{display:grid; grid-template-columns:1fr 1fr; gap:8px; border:1px solid var(--border); 
        border-radius:12px; padding:8px; background:color-mix(in hsl, var(--card) 96%, transparent); 
        justify-items: center;}
    @media (max-width:900px){ .nf-modebar{ grid-template-columns:1fr; } }
    
    .nf-mode{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;}
    .nf-modebtn{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; 
        padding:6px 10px; font-size:12px; cursor:pointer; white-space:nowrap;}
    .nf-modebtn.active.inc{ outline:2px solid color-mix(in hsl, var(--accent) 40%, transparent); }
    .nf-modebtn.active.exc{ outline:2px solid color-mix(in hsl, #ff6b6b 40%, transparent); }
    
    /* Selected text lists (no pills) */
    .nf-taglist{display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-height:48px; overflow:hidden; 
        position:relative;}
    .nf-tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1.2;}
    .nf-tag.inc{ color:#bfe9cf; }
    .nf-tag.exc{ color:#ffd0d0; }
    .nf-tag .x{cursor:pointer; opacity:.7; font-weight:700;}
    .nf-tag .x:hover{ opacity:1; text-decoration:underline; }
    
    /* Optional overflow hint (auto-inserted via JS when needed) */
    .nf-more{font-size:12px; color:var(--muted); cursor:pointer;
        background:linear-gradient(90deg, transparent, var(--card) 30%); padding-left:10px;}
    
    /* Search input (kept) */
    #nfSearch{width:100%; padding:6px 10px; margin:8px 0; border:1px solid var(--border); border-radius:8px; 
        background:var(--card); color:var(--text); font-size:14px; outline:none; 
        transition:border-color .2s, box-shadow .2s;}
    #nfSearch::placeholder{ color:var(--muted); opacity:.8; }
    #nfSearch:focus{ border-color:var(--accent2); 
        box-shadow:0 0 0 2px color-mix(in hsl, var(--accent2) 40%, transparent); }
    
    /* Families list */
    .nf-family{ border:1px solid var(--border); border-radius:12px; padding:8px; margin:8px 0; }
    .nf-family > summary{ cursor:pointer }
    
    /* Family note items: plain text buttons (no pill look) */
    .nf-notes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
    .nf-note{all:unset; cursor:pointer; font-size:12px; line-height:1.3; color:var(--text); 
        border-bottom:1px dashed transparent;}
    .nf-note:hover{ border-bottom-color:var(--text); }
    
    /* Tri-state color cue via leading icon + text color */
    .nf-note[data-state="inc"]{ color:#cfeedd; }
    .nf-note[data-state="exc"]{ color:#ffdede; }
    .nf-note .nf-icon{ opacity:.85; margin-right:4px }
    
    /* Actions row */
    .nf-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
    
    /* Table (right column scroll container) */
    .table-wrap{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    height: 100%;       /* fill the grid row */
    overflow: auto;     /* independent scroll area */
    }
    
    /* Table + sticky thead inside the scroll container */
    table.grid{width:100%; border-collapse:separate; border-spacing:0; table-layout: fixed;}
    .grid thead th{
    position: sticky;
    top: 0;            /* stick to top of .table-wrap (not the page) */
    height: 44px;
    z-index: 10;
    background: var(--card);
    border-bottom: 2px solid var(--border);
    box-shadow: 0 1px 0 0 var(--border), 0 6px 8px -6px rgba(0,0,0,.25);
    }
    .grid tbody td{padding:10px 12px; border-top:1px solid var(--border); vertical-align:middle; font-size:13.5px}
    .grid tbody tr:nth-child(odd){background:color-mix(in hsl, var(--bg) 6%, transparent)}
    .brand{font-weight:600; letter-spacing:.2px}
    th.sortable{cursor:pointer; user-select:none}
    th.sortable .arrow{opacity:.6; margin-left:6px}
    
    /* Best price cell (price is the primary link, vendor shown as meta) */
    .bestcell{text-align: center; padding-top: 8px; padding-bottom: 8px;}
    .bestcell a.ppm-link{display:inline-block; font-weight:700; font-size: 14px; line-height:1.2; text-decoration:none; color: var(--accent2);}
    .bestcell a.ppm-link:hover{ text-decoration:underline; }
    .bestcell a.ppm-link:focus-visible{outline: 2px solid color-mix(in hsl, var(--accent2) 45%, transparent); outline-offset: 2px; border-radius:6px;}
    .bestcell .meta{ margin-top: 2px; }
    .bestcell .expand{margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--card); border-color: var(--border); color: var(--text); display:inline-flex; align-items:center; gap:8px; transition: background .15s ease, border-color .15s ease, transform .15s ease;}
    .bestcell .expand::after{content: "▸"; font-size: 12px; transform-origin: center; transition: transform .15s ease, opacity .15s ease; opacity:.8;}
    .bestcell .expand:hover{background: color-mix(in hsl, var(--card) 92%, transparent); border-color: color-mix(in hsl, var(--border) 70%, transparent);}
    .bestcell .expand:active{ transform: translateY(1px);}
    .bestcell .expand:focus-visible{outline: 2px solid color-mix(in hsl, var(--accent2) 40%, transparent); outline-offset: 2px;}
    .bestcell .expand[aria-expanded="true"]::after{transform: rotate(90deg);}
    @media (max-width:520px){.bestcell .expand{ margin-top:6px; }}
      
    /* Chips, links */
    .chips{display:flex; gap:6px; flex-wrap:wrap}
    .chip{background:var(--chip); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:4px 8px; font-size:12px}
    .link{color:var(--accent2); text-decoration:none}
    .link:hover{text-decoration:underline}
    
    /* Notes */
    /* Notes: compact text list (no chips) */
    .notes-cell { padding-top: 8px; padding-bottom: 8px; word-break: break-word; overflow-wrap: anywhere;}
    .grid tbody td.notes-cell { position: relative; overflow: visible; }
    .notes-inline{display:block; line-height:1.25; color: var(--text); white-space: normal; overflow-wrap: anywhere; word-break: break-word;}
    /* Each note is inline text; separator is a muted middle dot */
    .notes-inline .note{white-space:nowrap; overflow-wrap: anywhere; word-break: break-word;}
    .notes-inline .note:not(:last-of-type)::after{content:" • "; color: var(--muted);}
    .notes-inline.expanded{display:block; -webkit-line-clamp: unset !important; overflow: visible;}
    .notes-inline.expanded .note{ white-space: normal; }
    .notes-inline:not(.expanded) .note { white-space: nowrap; }
    /* “+N more” looks like a quiet link with a tooltip */
    .notes-more{all: unset; cursor: pointer; color: var(--accent2); font-size: 12px; margin-left: 4px;}
    .notes-more:hover{ text-decoration: underline; }
    .notes-more:focus-visible{outline:2px solid color-mix(in hsl, var(--accent2) 40%, transparent); outline-offset:2px;
        border-radius:6px;}
    /* Lightweight tooltip driven by data attribute */
    .notes-more[data-tooltip]{ position: relative; isolation: isolate; z-index: 200;}
    .notes-more[data-tooltip]:hover::after,
    .notes-more[data-tooltip]:focus-visible::after{content: attr(data-tooltip); position: absolute; 
        left: 50%; transform: translateX(-50%); top: calc(100% + 10px); bottom: auto; background: var(--card);
        color: var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; max-width: 280px; 
        white-space: normal; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 201;}
    .notes-more[data-tooltip]:hover::before,
    .notes-more[data-tooltip]:focus-visible::before{content:""; position:absolute; left:50%; top: calc(100% + 2px);
        bottom: auto; width:8px; height:8px; background: var(--card); border-right:1px solid var(--border);
        border-bottom:1px solid var(--border); transform: translateX(-50%) rotate(45deg); z-index: 202;}
    @supports (-webkit-line-clamp: 4) {.notes-inline{display: -webkit-box; -webkit-line-clamp: 4; 
        -webkit-box-orient: vertical; overflow: hidden; }}
    
    /* Offers */
    .offers-row td{background:color-mix(in hsl, var(--accent) 6%, transparent); padding:0}
    .offers-inner{padding:10px 12px; border-top:1px dashed var(--border)}
    .offergrid{display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:center}
    .offergrid .hdr{color:var(--muted); font-size:12px}
    .offer{padding:6px 0; border-top:1px solid var(--border)}
    .offer:first-child{border-top:none}

    /* Amazon Fallback */
    .amazon-fallback{
        margin-top:12px;
        padding:10px 12px;
        border:1px dashed var(--border);
        border-radius:12px;
        background: color-mix(in hsl, var(--card) 96%, transparent);
        display:flex; flex-direction:row; gap:6px; align-items:center;
        justify-content:space-between;
      }
      .amazon-btn{
        border:1px solid var(--border);
        background: var(--card);
        color: var(--text);
        border-radius:10px;
        padding:6px 10px;
        text-decoration:none;
      }
      .amazon-btn:hover{ background: color-mix(in hsl, var(--card) 92%, transparent); }
      .af-copy{ font-weight:600; }
      .af-note{ font-size:12px; color: var(--muted); }      
    
    /* Skeleton loader */
    .skeleton{display:grid; gap:8px}
    .sk{height:14px; background:linear-gradient(90deg,#0000 0%,#0001 50%,#0000 100%); background-color:var(--chip); border-radius:6px; animation:shimmer 1.2s infinite linear}
    @keyframes shimmer{from{background-position:-120px 0} to{background-position:120px 0}}
    
    /* Subtle always-visible scrollbars for sidebar & table */
    .table-wrap, .sidebar {
    scrollbar-width: thin;                          /* Firefox */
    scrollbar-color: var(--border) transparent;     /* thumb / track */
    }
    .table-wrap::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar { width: 8px; }
    .table-wrap::-webkit-scrollbar-track,
    .sidebar::-webkit-scrollbar-track { background: transparent; }
    .table-wrap::-webkit-scrollbar-thumb,
    .sidebar::-webkit-scrollbar-thumb {
    background-color: color-mix(in hsl, var(--border) 70%, transparent);
    border-radius: 4px;
    }
    .table-wrap::-webkit-scrollbar-thumb:hover,
    .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in hsl, var(--text) 50%, var(--border));
    }
    
    /* Footer */
    .footer{text-align:center; padding:20px; color:var(--muted)}
    
    /* === Offers: compact size-accordion list === */
    .size-groups{ display:flex; flex-direction:column; gap:10px; }
    
    .size-group{border:1px solid var(--border); border-radius:12px; 
        background: color-mix(in hsl, var(--card) 96%, transparent); overflow:hidden;}
    
    /* Accordion header */
    .size-group > summary{list-style:none; cursor:pointer; user-select:none; 
        padding:10px 12px; font-weight:600; display:flex; gap:8px; align-items:center;
        background: color-mix(in hsl, var(--bg) 10%, transparent); border-bottom:1px solid var(--border);}
    .size-group > summary::after {content: "▸"; margin-left: auto; font-size: 0.9em; opacity: 0.7; 
        transition: transform 0.2s ease;}
    .size-group[open] > summary::after {transform: rotate(90deg);}
    .size-group > summary::-webkit-details-marker{ display:none; }
    .size-group[open] > summary{ background: color-mix(in hsl, var(--bg) 14%, transparent); }
    
    /* The list of offers inside each size group */
    .offerlist{ display:flex; flex-direction:column; }
    
    .offerline{
      display:grid;
      grid-template-columns: 1fr auto auto; /* Merchant | $/mL | Total */
      gap:10px; align-items:center;
      padding:8px 12px;
      border-top:1px solid var(--border);
      text-decoration:none;
      color:inherit;
    }
    .offerline:first-child{ border-top:none; }
    
    .offerline .merchant{ font-weight:600; text-decoration:none; color:var(--accent2); }
    .offerline .merchant:hover{ text-decoration:underline; }
    
    .offerline .ppm{ font-variant-numeric: tabular-nums; font-weight:700; }
    .offerline .total{ font-variant-numeric: tabular-nums; color:var(--muted); }
    
    /* Best in this size: subtle highlight */
    .offerline.is-best{
      background: color-mix(in hsl, var(--accent) 14%, transparent);
    }
    
    /* "Show all / Show less" button under each size list */
    .size-more{
      margin:8px 12px 12px 12px;
      border:1px solid var(--border); background:var(--card); color:var(--text);
      border-radius:10px; padding:6px 10px; cursor:pointer; font-size:12px;
    }
    
    /* Responsive: stack Price + Total neatly on narrow screens */
    @media (max-width: 520px){
      .offerline{
        grid-template-columns: 1fr auto;       /* Merchant | Price/mL */
        grid-template-areas:
          "merchant ppm"
          "merchant total";
        row-gap:4px;
      }
      .offerline .merchant{ grid-area: merchant; }
      .offerline .ppm{ grid-area: ppm; justify-self:end; }
      .offerline .total{ grid-area: total; justify-self:end; }
    }