/* ============================================================
   Prijsjager — mobile-first stijl
   ============================================================ */

:root{
  --bg:#f2f4f7;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --line:#e4e7ec;
  --line-soft:#f1f3f6;
  --accent:#2563eb;
  --accent-soft:#eff5ff;
  --green:#15803d;
  --green-soft:#e7f7ec;
  --rood:#e5484d;
  --up:#d92d20;
  --up-soft:#fdecea;
  --down:#15803d;
  --down-soft:#e7f7ec;
  --sale:#f59e0b;
  --sale-dark:#b45309;
  --r:16px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(16,24,40,.16);
  --tabbar:calc(60px + env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#171a21; --text:#e8eaee; --muted:#98a1b0;
    --line:#272b34; --line-soft:#1e222a; --accent:#4f8cf7; --accent-soft:#17243c;
    --green:#4ade80; --green-soft:#12271a; --rood:#f0565b;
    --up:#f87171; --up-soft:#2a1719; --down:#4ade80; --down-soft:#12271a;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 12px 32px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.45; font-size:15px;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
body.sheet-open{overflow:hidden}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.012em}
a{color:inherit}
img{max-width:100%}
input,select,textarea,button{font-family:inherit}
.muted{color:var(--muted); font-weight:400}
.small{font-size:13px}
.tiny{font-size:11.5px; line-height:1.35}
.center{text-align:center}

.page{
  max-width:760px; margin:0 auto;
  padding:calc(12px + env(safe-area-inset-top)) 14px calc(var(--tabbar) + 24px);
}

/* ---------------- paginakop ---------------- */
.paginakop{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.paginakop h1{font-size:22px}
.terug{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
}
.terug svg{width:16px; height:16px}

/* ---------------- tabbalk ---------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:stretch;
  background:var(--card);
  background:color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 2px 7px; text-decoration:none;
  color:var(--muted); font-size:10.5px; font-weight:600; letter-spacing:-.01em;
}
.tab-icon{position:relative; display:flex; align-items:center; justify-content:center}
.tab svg{width:22px; height:22px; display:block}
.tab.active{color:var(--accent)}
.tab-badge{
  position:absolute; top:-5px; right:-9px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--rood); color:#fff;
  font-size:11px; font-weight:800; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--card);
}

/* ---------------- knoppen ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; min-height:44px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--text);
  font-size:14.5px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .14s, transform .1s, opacity .14s;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.accent{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
.btn.gevaar{color:var(--up); border-color:var(--up-soft)}
.btn.big{padding:13px 20px; font-size:15.5px; min-height:48px}
.btn.huge{padding:16px 22px; font-size:17px; min-height:56px; border-radius:14px; width:100%}
.btn.small{padding:7px 12px; min-height:36px; font-size:13px; border-radius:10px}
.btn.full{width:100%}
.btn[disabled]{opacity:.55}
.mini-btn{
  width:38px; height:38px; flex-shrink:0; border-radius:11px; border:0;
  background:var(--line-soft); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  text-decoration:none;
}
.mini-btn svg{width:17px; height:17px}
.mini-btn.accent{background:var(--accent); color:#fff}
.mini-btn.ghost{background:transparent; color:var(--muted)}
.mini-link{background:none; border:0; font-size:12px; color:var(--accent);
           text-decoration:none; font-weight:650; cursor:pointer; padding:4px}

/* ---------------- zoekbalk ---------------- */
.zoekbalk{
  display:flex; align-items:center; gap:9px;
  background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:0 12px; margin-bottom:12px;
  box-shadow:var(--shadow);
}
.zoekbalk svg{width:17px; height:17px; color:var(--muted); flex-shrink:0}
.zoekbalk input{
  flex:1; border:0; background:transparent; padding:12px 0;
  font-size:16px; color:var(--text); outline:none; min-width:0;
}
.zoekbalk input::-webkit-search-cancel-button{-webkit-appearance:none}
.zoek-wis{border:0; background:none; color:var(--muted); font-size:22px; line-height:1;
          padding:0 2px 3px; cursor:pointer}

/* ---------------- producttegels ---------------- */
.tegels{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px;
}
.tegel{position:relative; display:flex; flex-direction:column; gap:6px}
.tegel-foto{
  position:relative; display:block; width:100%; aspect-ratio:1/1;
  padding:0; border:2px solid transparent; border-radius:var(--r);
  background:var(--card); overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s, border-color .14s, box-shadow .14s;
}
.tegel-foto:active{transform:scale(.96)}
.tegel-img{width:100%; height:100%; object-fit:cover; display:block}
.placeholder{display:flex; align-items:center; justify-content:center;
             width:100%; height:100%; font-size:30px; opacity:.35; background:var(--line-soft)}
.tegel-vink{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,235,.52); color:#fff; opacity:0; transition:opacity .14s;
}
.tegel-vink svg{width:34px; height:34px}
.tegel.gekozen .tegel-foto{border-color:var(--accent); box-shadow:0 4px 14px rgba(37,99,235,.35)}
.tegel.gekozen .tegel-vink{opacity:1}
.tegel-plus{
  position:absolute; top:6px; right:6px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:0;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(16,24,40,.3);
}
.tegel-plus svg{width:17px; height:17px}
.tegel-plus:active{transform:scale(.9)}
.tegel-naam{
  font-size:12.5px; font-weight:600; line-height:1.25; padding:0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.geen-treffers{padding:30px 0; text-align:center}

/* ---------------- concept-lijstje ---------------- */
.concept-rij{position:relative; overflow:hidden; border-radius:12px; margin-bottom:4px}
.concept-rij.weg{opacity:0; transition:opacity .18s}
.concept-weg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end;
  padding-right:16px; background:var(--up); color:#fff;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.concept-inhoud{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:9px 8px; background:var(--card); border-radius:12px;
}
.concept-foto{width:36px; height:36px; flex-shrink:0; border-radius:9px; overflow:hidden;
              display:flex; background:var(--line-soft)}
.concept-foto .tegel-img{width:100%; height:100%; object-fit:cover}
.concept-foto .placeholder{font-size:17px}
.concept-naam{flex:1; min-width:0; font-size:14.5px; font-weight:600}
.concept-acties{display:grid; grid-template-columns:1fr 1.4fr; gap:8px}

/* ---------------- lijstjes / winkelen ---------------- */
.lijst-tabs{display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none}
.lijst-tabs::-webkit-scrollbar{display:none}
.lijst-tab{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:9px 15px; border-radius:999px; background:var(--card);
  border:1px solid var(--line); color:var(--text);
  text-decoration:none; font-size:14px; font-weight:650;
  user-select:none; -webkit-touch-callout:none;
}
.lijst-tab.active{background:var(--accent); border-color:var(--accent); color:#fff}

.modus-seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:var(--line-soft); border-radius:14px; padding:4px; margin-bottom:14px;
}
.modus-btn{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:9px 6px; border-radius:11px; text-decoration:none; color:var(--muted);
}
.modus-btn strong{font-size:14.5px; font-weight:700}
.modus-btn span{font-size:10.5px}
.modus-btn.active{background:var(--card); color:var(--text); box-shadow:var(--shadow)}

.route-kop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--green-soft); border-radius:14px; padding:13px 15px; margin-bottom:12px;
}
.route-kop-cijfer{display:flex; flex-direction:column}
.route-bedrag{font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1.15}
.route-kop-extra{
  display:flex; flex-direction:column; align-items:flex-end; text-align:right;
  font-size:13.5px; font-weight:700; color:var(--sale-dark);
}
.route-kop-extra.alt{color:var(--green)}

.winkel-blok{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; margin-bottom:11px; box-shadow:var(--shadow);
}
.winkel-blok.best{border-color:#9fd3b0;
                  border-color:color-mix(in srgb, var(--green) 40%, var(--line))}
.winkel-blok.zonder-prijs{border-color:#f0c070;
                  border-color:color-mix(in srgb, var(--sale) 45%, var(--line))}
.winkel-kop{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.winkel-naam{flex:1; min-width:0; font-size:16px; font-weight:700}
.winkel-totaal{font-size:17px; font-weight:800}
.winkel-blok .sub{margin:2px 0 0 50px}

.boodschappen{display:flex; flex-direction:column; margin-top:8px}
.boodschap{
  display:flex; align-items:center; gap:10px; padding:10px 2px;
  border-top:1px solid var(--line-soft); cursor:pointer;
  transition:opacity .18s, transform .18s;
}
.boodschap:first-child{border-top:0}
.boodschap.verdwijnt{opacity:0; transform:translateX(26px)}
.boodschap-naam{flex:1; min-width:0; font-size:14.5px; font-weight:600}
.boodschap-prijs{font-weight:700; font-size:14.5px}
.vink{position:absolute; opacity:0; width:1px; height:1px}
.vink-wrap{display:flex}
.vinkje{
  width:24px; height:24px; flex-shrink:0; border-radius:8px;
  border:2px solid var(--line); background:var(--card);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .14s, border-color .14s;
}
.vinkje::after{
  content:''; width:11px; height:6px; margin-top:-3px;
  border-left:2.4px solid #fff; border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0; transition:transform .14s, opacity .14s;
}
.vink:checked + .vinkje{background:var(--green); border-color:var(--green)}
.vink:checked + .vinkje::after{transform:rotate(-45deg) scale(1); opacity:1}
.boodschap.af{opacity:.55}
.boodschap.af .boodschap-naam{text-decoration:line-through}
.gehaald{margin-top:4px}
.gehaald summary{font-size:13px; font-weight:650; color:var(--muted); cursor:pointer;
                 padding:10px 2px; list-style:none}
.gehaald summary::-webkit-details-marker{display:none}
.gehaald summary::before{content:'▸ '}
.gehaald[open] summary::before{content:'▾ '}
.klaar-blok{text-align:center; padding:34px 16px; background:var(--card);
            border:1px solid var(--line); border-radius:var(--r)}
.klaar-blok h2{font-size:19px; margin:6px 0}

/* ---------------- prijsverloop ---------------- */
.weergave-seg{
  display:inline-flex; gap:3px; background:var(--line-soft);
  border-radius:11px; padding:3px; align-self:flex-start;
}
.weergave-btn{
  padding:7px 16px; border-radius:9px; text-decoration:none;
  color:var(--muted); font-size:13.5px; font-weight:650;
}
.weergave-btn.active{background:var(--card); color:var(--text); box-shadow:var(--shadow)}

.grafiek-kaart{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 12px 10px; margin-bottom:12px; box-shadow:var(--shadow);
}
.grafiek-kop{padding:0 2px 8px}
.grafiek-kop h2{font-size:16px; margin-bottom:3px}
.chart-box{margin:0 -2px}

.tijdbalk{padding:10px 4px 2px; border-top:1px solid var(--line-soft); margin-top:6px}
.tijdbalk input[type=range]{
  width:100%; appearance:none; -webkit-appearance:none; background:transparent; margin:0;
}
.tijdbalk input[type=range]::-webkit-slider-runnable-track{
  height:5px; border-radius:999px; background:var(--line);
}
.tijdbalk input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; margin-top:-9.5px;
  border-radius:50%; background:var(--accent); border:3px solid var(--card);
  box-shadow:0 1px 5px rgba(16,24,40,.3); cursor:pointer;
}
.tijdbalk input[type=range]::-moz-range-track{height:5px; border-radius:999px; background:var(--line)}
.tijdbalk input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--accent);
  border:3px solid var(--card); cursor:pointer;
}
.tijdbalk-voet{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px}
.tijd-label{font-size:12.5px; font-weight:700; color:var(--accent)}

.winkel-rijen{display:flex; flex-direction:column}
.winkel-rij{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 6px; border:0; border-top:1px solid var(--line-soft);
  background:transparent; color:inherit; cursor:pointer; border-radius:10px;
}
.winkel-rij:first-child{border-top:0}
.winkel-rij.uitgelicht{background:var(--accent-soft)}
.wr-body{flex:1; min-width:0; display:flex; flex-direction:column}
.wr-naam{font-size:15px; font-weight:700}
.wr-cijfers{display:flex; flex-direction:column; align-items:flex-end}
.wr-pct{font-size:16px; font-weight:800}
.wr-pct.op{color:var(--up)}
.wr-pct.neer{color:var(--down)}
.wr-pct.gelijk{color:var(--muted)}

/* ---------------- productkaart ---------------- */
.product-kaart{
  display:flex; gap:13px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:13px; margin-bottom:11px; box-shadow:var(--shadow);
}
.foto-form{margin:0; flex-shrink:0}
.foto-knop{display:block; position:relative; width:92px; height:92px;
           border-radius:13px; overflow:hidden; cursor:pointer; background:var(--line-soft)}
.foto-knop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.product-foto{width:100%; height:100%; object-fit:cover; display:block}
.placeholder.product-foto{font-size:32px}
.foto-overlay{
  position:absolute; right:5px; bottom:5px; width:26px; height:26px; border-radius:50%;
  background:rgba(16,24,40,.6); color:#fff; display:flex; align-items:center; justify-content:center;
}
.foto-overlay svg{width:14px; height:14px}
.product-kaart-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.product-kaart-info h2{font-size:17px; line-height:1.25}
.goedkoopst-regel{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.goedkoopst-regel > div{display:flex; flex-direction:column; min-width:0}
.goedkoopst-prijs{font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.product-acties{display:flex; gap:6px; flex-wrap:wrap}

.metingen{margin-top:9px}
.metingen summary{font-size:12.5px; font-weight:650; color:var(--muted); cursor:pointer;
                  list-style:none; padding:6px 0}
.metingen summary::-webkit-details-marker{display:none}
.metingen summary::before{content:'▸ '}
.metingen[open] summary::before{content:'▾ '}
.history{width:100%; border-collapse:collapse; font-size:13px}
.history th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
            color:var(--muted); padding:5px 6px; border-bottom:1px solid var(--line); font-weight:700}
.history td{padding:8px 6px; border-bottom:1px solid var(--line-soft)}
.history tr:last-child td{border-bottom:0}

/* ---------------- winkel-logo's en labels ---------------- */
.store-logo{
  width:24px; height:24px; flex-shrink:0; border-radius:7px;
  object-fit:contain; display:inline-block; vertical-align:middle; background:#fff;
}
.store-logo.lg{width:40px; height:40px; border-radius:11px}
.store-logo.custom-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:12px;
}
.store-logo.lg.custom-avatar{font-size:17px}

.badge{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap}
.badge.up{background:var(--up-soft); color:var(--up)}
.badge.down{background:var(--down-soft); color:var(--down)}
.badge.same{background:var(--line-soft); color:var(--muted)}
.sale-chip{display:inline-flex; align-items:center; justify-content:center;
           width:17px; height:17px; border-radius:5px; background:var(--sale); color:#fff; flex-shrink:0}
.sale-chip .sale-icon{width:10px; height:10px}
.bulk-tag{background:var(--sale-dark); color:#fff; font-weight:800; font-size:10px;
          padding:1px 6px; border-radius:999px; line-height:1.5; white-space:nowrap}
.best-flag{
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--green-soft); color:var(--green); padding:2px 7px; border-radius:999px;
}
.deal-note{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:9px 0 0; font-size:12.5px; font-weight:600; color:var(--sale-dark);
  background:#fdf4e3; background:color-mix(in srgb, var(--sale) 13%, transparent);
  padding:8px 10px; border-radius:10px;
}
.deal-note.expired{color:var(--muted); background:var(--line-soft); font-weight:500}

/* ---------------- blokken en lege staten ---------------- */
.card-block{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; margin-bottom:12px; box-shadow:var(--shadow);
}
.block-title{font-size:14px; font-weight:700; margin-bottom:8px}
.empty{color:var(--muted); font-size:13.5px; padding:16px 0; margin:0; text-align:center}
.empty-state{text-align:center; padding:34px 16px}
.empty-emoji{font-size:40px; line-height:1; margin-bottom:10px}
.empty-state h2{font-size:18px; margin-bottom:6px}
.empty-state p{margin:0 0 16px}
.code-block{white-space:pre-wrap; background:var(--line-soft); padding:12px;
            border-radius:10px; font-size:12px; overflow-x:auto}
.error{background:var(--up-soft); color:var(--up); padding:11px 14px;
       border-radius:12px; font-size:14px; margin:0 0 10px}

/* ---------------- invoerformulier ---------------- */
.entry{display:flex; flex-direction:column; gap:11px}
.entry-block{
  background:var(--bg); border-radius:14px; padding:12px;
}
.entry-label{font-size:12px; font-weight:700; text-transform:uppercase;
             letter-spacing:.05em; color:var(--muted); margin-bottom:9px}

.product-select{
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid var(--line); background:var(--card); border-radius:13px;
  padding:12px 14px; cursor:pointer; text-align:left; color:var(--text);
  margin-bottom:12px; box-shadow:var(--shadow);
}
.product-select-label{font-size:11.5px; font-weight:700; text-transform:uppercase;
                      letter-spacing:.05em; color:var(--muted); flex-shrink:0}
.product-select-name{flex:1; font-size:16px; font-weight:650; min-width:0;
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.product-select svg{width:18px; height:18px; color:var(--muted); flex-shrink:0}

.store-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:4px}
.store-pick{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:9px 3px 7px; border:2px solid transparent; border-radius:14px;
  background:transparent; cursor:pointer; text-align:center;
  transition:background .14s, border-color .14s, transform .1s;
}
.store-pick:active{transform:scale(.95)}
.store-pick > span:last-child{font-size:10px; line-height:1.2; color:var(--muted);
                              font-weight:650; width:100%; overflow:hidden;
                              text-overflow:ellipsis; white-space:nowrap}
.store-pick.selected{border-color:var(--accent); background:var(--accent-soft)}
.store-pick.selected > span:last-child{color:var(--accent)}
.add-circle{display:flex; align-items:center; justify-content:center;
            background:var(--line-soft); color:var(--muted); font-size:22px; line-height:1}

.amount-row{display:grid; grid-template-columns:1.15fr 1fr; gap:10px}
.big-field{display:flex; flex-direction:column; gap:5px; min-width:0}
.big-field > span{font-size:12px; font-weight:700; text-transform:uppercase;
                  letter-spacing:.05em; color:var(--muted); padding-left:2px}
.input-wrap{
  display:flex; align-items:center; gap:4px; min-width:0;
  border:1.5px solid var(--line); border-radius:13px;
  background:var(--card); padding:0 12px;
  transition:border-color .14s, box-shadow .14s;
}
.input-wrap:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.input-wrap .prefix,.input-wrap .suffix{font-size:17px; font-weight:650; color:var(--muted);
                                        font-style:normal; flex-shrink:0}
.input-wrap input{
  flex:1 1 0; width:100%; min-width:0; border:0; background:transparent; outline:none;
  font-size:24px; font-weight:700; letter-spacing:-.02em; padding:11px 0; color:var(--text);
}
.big-field > input{
  border:1.5px solid var(--line); border-radius:13px; background:var(--card);
  padding:12px 13px; font-size:17px; font-weight:600; color:var(--text); outline:none; width:100%;
}
.big-field > input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

.seg{display:flex; gap:3px; background:var(--line-soft); border-radius:11px; padding:3px; margin-top:10px}
.seg-btn{
  flex:1; border:0; background:transparent; border-radius:9px;
  padding:9px 4px; font-size:13.5px; font-weight:650;
  color:var(--muted); cursor:pointer; transition:background .14s, color .14s;
}
.seg-btn.active{background:var(--card); color:var(--text); box-shadow:var(--shadow)}

.chip-row{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px}
.quick-amounts{margin:10px 0 0}
.filter-chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted);
  font-size:13px; font-weight:600; text-decoration:none; cursor:pointer;
}
.filter-chip.active{background:var(--accent); border-color:var(--accent); color:#fff}
.unit-preview{margin:8px 0 0; font-weight:600}

.deal-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  min-height:50px; border:1.5px dashed #e8b764;
  border-color:color-mix(in srgb, var(--sale) 60%, var(--line));
  border-radius:13px; background:transparent; color:var(--sale-dark);
  font-size:15.5px; font-weight:700; cursor:pointer;
}
.deal-btn .sale-icon{width:18px; height:18px}
.deal-summary{display:flex; align-items:center; gap:8px}
.deal-chip{
  flex:1; min-height:48px; border:0; border-radius:13px;
  background:var(--sale); color:#fff; font-size:15px; font-weight:700;
  cursor:pointer; padding:10px 14px; text-align:left;
}
.deal-clear{width:44px; height:48px; border:0; border-radius:13px; background:var(--line-soft);
            color:var(--muted); font-size:22px; cursor:pointer; line-height:1}

.known-list{display:flex; flex-direction:column; gap:7px}
.known-row{display:flex; align-items:center; gap:8px; font-size:13.5px}
.known-row.best .known-price{color:var(--green); font-weight:800}
.known-store{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.known-price{font-weight:700}
.nog-niets{padding:4px 2px}
#prijsBekend{padding:4px 2px 0}
#prijsBekend .entry-label{margin-top:8px}

.form-new{display:flex; flex-direction:column; gap:20px; max-width:420px; margin:0 auto; padding:10px 0}
.photo-picker{display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer}
.photo-picker input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.photo-btn{
  width:112px; height:112px; border-radius:50%;
  background:var(--card) center/cover no-repeat; border:3px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.photo-btn svg{width:38px; height:38px}
.photo-btn.has-photo{color:transparent; border-color:var(--accent)}
.photo-hint{font-size:13px; color:var(--muted); font-weight:650}

/* ---------------- sheets ---------------- */
.sheet{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center}
.sheet-backdrop{position:absolute; inset:0; background:rgba(16,24,40,.45);
                opacity:0; transition:opacity .22s}
.sheet.open .sheet-backdrop{opacity:1}
.sheet-panel{
  position:relative; width:100%; max-width:520px;
  background:var(--card); border-radius:20px 20px 0 0;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
  transform:translateY(102%); transition:transform .24s cubic-bezier(.32,.72,0,1);
  max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px;
}
.sheet.open .sheet-panel{transform:translateY(0)}
.sheet-panel.tall{height:88vh}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sheet-head h3{font-size:17px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sheet-x{width:34px; height:34px; border:0; border-radius:50%;
         background:var(--line-soft); color:var(--muted);
         font-size:21px; line-height:1; cursor:pointer; flex-shrink:0}
.sheet-search{
  border:1.5px solid var(--line); border-radius:13px; padding:12px 13px;
  font-size:16px; outline:none; background:var(--card); color:var(--text); width:100%;
}
.sheet-search:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.sheet-list{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; min-height:60px}
.sheet-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; border:0; background:transparent;
  padding:13px 12px; border-radius:11px; cursor:pointer; font-size:15.5px; color:var(--text);
}
.sheet-option:active{background:var(--line-soft)}
.sheet-option.active{background:var(--accent-soft); color:var(--accent); font-weight:650}

.date-input{
  width:100%; border:1.5px solid var(--line); border-radius:13px;
  padding:14px 13px; font-size:18px; font-weight:650;
  background:var(--card); color:var(--text); outline:none;
}
.date-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.yesno{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.yesno .btn{min-height:58px; font-size:17px; font-weight:700}
.yesno .yes{background:var(--accent); border-color:var(--accent); color:#fff}
.bulk-presets{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.bulk-preset{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:64px; border:1.5px solid var(--line); border-radius:13px;
  background:var(--card); color:var(--text); font-size:19px; font-weight:800; cursor:pointer;
}
.bulk-preset em{font-style:normal; font-size:10px; font-weight:600; color:var(--muted)}
.bulk-custom{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
             gap:9px; align-items:end}
.bulk-plus{font-size:19px; font-weight:800; color:var(--muted); padding-bottom:13px}

/* ---------------- grafiek ---------------- */
.chart{position:relative}
.chart-plot{position:relative}
.chart-svg{display:block; width:100%; touch-action:pan-y}
.grid-line{stroke:var(--line); stroke-width:1; stroke-dasharray:3 4}
.axis-line{stroke:var(--line); stroke-width:1}
.baseline{stroke:var(--muted); stroke-width:1.2; stroke-dasharray:5 4; opacity:.6}
.axis-label{fill:var(--muted); font-size:10.5px}
.series-line{stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
.series-line.dik{stroke-width:3.6}
.serie-raak{cursor:pointer}
.serie{transition:opacity .22s}
.serie.vervaagd{opacity:.17}
.series-dot{pointer-events:none}
.eindlabel{cursor:pointer; transition:opacity .22s}
.eindlabel.vervaagd{opacity:.22}
.eindlijn{stroke-width:1; stroke-dasharray:1.5 3.5; opacity:.38}
.eindletter{font-size:13px; font-weight:800}
.crosshair{stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3}
.chart-tip{
  position:absolute; top:4px; pointer-events:none;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  box-shadow:var(--shadow-lg); padding:8px 10px; font-size:12px; min-width:112px; z-index:5;
}
.tip-date{font-weight:800; margin-bottom:4px; font-size:11.5px}
.tip-row{display:flex; align-items:center; gap:6px; white-space:nowrap; line-height:1.6}
.tip-row i{width:8px; height:8px; border-radius:50%; flex-shrink:0}
.tip-name{flex:1; color:var(--muted)}
.tip-row b{font-weight:800}
.chart-empty{color:var(--muted); font-size:13px; padding:40px 0; text-align:center; margin:0}

.chart-focus{
  position:absolute; left:6px; top:4px; z-index:6; max-width:min(215px, 64%);
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:7px 9px; font-size:11.5px; line-height:1.4;
}
.chart-focus.onder{top:auto; bottom:30px}
.cf-kop{display:flex; align-items:center; gap:6px}
.cf-kop i{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.cf-kop b{flex:1; min-width:0; font-size:12.5px; overflow:hidden;
          text-overflow:ellipsis; white-space:nowrap}
.cf-x{width:20px; height:20px; border:0; border-radius:50%; background:var(--line-soft);
      color:var(--muted); font-size:14px; line-height:1; cursor:pointer; flex-shrink:0; padding:0}
.cf-groot{display:flex; align-items:baseline; gap:7px; margin:2px 0 1px}
.cf-waarde{font-size:15px; font-weight:800; letter-spacing:-.02em}
.cf-pct{font-size:13px; font-weight:800}
.cf-pct.op{color:var(--up)}
.cf-pct.neer{color:var(--down)}
.cf-sub{color:var(--muted); font-size:11px}

/* ---------------- menu en melding ---------------- */
.ctx-menu{
  position:fixed; z-index:200; background:var(--card);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:6px; min-width:200px; display:flex; flex-direction:column; gap:2px;
}
.ctx-item{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:11px 14px; border-radius:10px; font-size:14.5px;
  font-weight:600; color:var(--text); cursor:pointer;
}
.ctx-item:active{background:var(--line-soft)}
.ctx-item.danger{color:var(--up)}

.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar) + 14px); z-index:300;
  transform:translate(-50%, 14px);
  background:#101828; color:#fff; padding:12px 18px; border-radius:999px;
  font-size:14px; font-weight:650; box-shadow:var(--shadow-lg);
  opacity:0; transition:opacity .2s, transform .2s; max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}
.toast.ok{background:var(--green)}

/* ---------------- breder scherm ---------------- */
@media (min-width:560px){
  body{font-size:15.5px}
  .page{padding-left:18px; padding-right:18px}
  .tegels{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
  .tegel-naam{font-size:13.5px}
  .foto-knop{width:118px; height:118px}
}
@media (min-width:860px){
  .tabbar{
    left:50%; right:auto; transform:translateX(-50%);
    width:min(540px,100%); border-radius:18px 18px 0 0;
    border:1px solid var(--line); border-bottom:0;
  }
}