:root{
    /* Nieuw palet: warme zand-, terracotta- en crèmetinten, geïnspireerd op een
       minimalistische keramiek/atelier-esthetiek. De variabelenamen (--bordeaux-*)
       zijn bewust behouden zodat de rest van de bestaande CSS ongewijzigd blijft
       werken — enkel de kleurwaarden zelf zijn vervangen. */
    --bordeaux-950:#2b2119;
    --bordeaux-900:#3d3126;
    --bordeaux-800:#5a4a3a;
    --bordeaux-700:#7a6650;
    --bordeaux-600:#96805f;
    --bordeaux-500:#b39a76;
    --gold:#c19a6b;
    --gold-soft:#e0c9a6;
    --cream:#f4ede3;
    --cream-dim:#ebe1d2;
    --paper:#fbf8f4;
    --ink:#332a22;
    --ink-soft:#8a7a68;
    --line:#e6dbc9;

    --rood:#8a4a3d;
    --wit:#c1a15c;
    --rose:#d4a898;
    --mousserend:#9ba888;

    --shadow-sm: 0 1px 2px rgba(51,42,34,0.06);
    --shadow-md: 0 6px 20px rgba(51,42,34,0.08);
    --shadow-lg: 0 16px 40px rgba(51,42,34,0.14);

    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 4px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--cream);
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    letter-spacing:0.01em;
    margin:0;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{font-family:inherit;}
  ::selection{background:var(--gold-soft);color:var(--bordeaux-950);}

  a{color:inherit;}

  /* Layout */
  .app{
    display:flex;
    min-height:100vh;
  }

  /* Sidebar */
  .sidebar{
    width:260px;
    flex-shrink:0;
    background:var(--paper);
    border-right:1px solid var(--line);
    color:var(--ink);
    display:flex;
    flex-direction:column;
    padding:32px 24px;
    position:sticky;
    top:0;
    height:100vh;
  }
  .sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
    padding:0 4px;
  }
  .sidebar-brand .glyph{
    width:38px;height:38px;
    border-radius:50%;
    background:var(--cream-dim);
    box-shadow:inset 0 0 0 1px var(--line);
    flex-shrink:0;
    object-fit:contain;
    padding:5px;
  }
  .sidebar-brand h1{
    font-size:20px;
    color:var(--ink);
    line-height:1.15;
    letter-spacing:0.02em;
  }
  .sidebar-sub{
    font-size:10.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:2px 0 34px 4px;
  }

  .nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:24px;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border-radius:var(--radius-s);
    color:var(--ink-soft);
    background:transparent;
    border:none;
    text-align:left;
    font-size:14px;
    font-weight:400;
    letter-spacing:0.01em;
    transition:background .15s ease, color .15s ease;
  }
  .nav-item:hover{
    background:var(--cream-dim);
    color:var(--ink);
  }
  .nav-item.active{
    background:var(--cream-dim);
    color:var(--bordeaux-900);
    font-weight:500;
  }
  .nav-item .ic{
    width:18px;height:18px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .nav-item .ic svg{width:100%;height:100%;}
  .nav-item{position:relative;}
  .nav-item .txt{flex:1;}
  .nav-badge{
    background:var(--bordeaux-700);
    color:#fff;
    font-size:10.5px;
    font-weight:600;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .sidebar-cta{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .btn-add{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--ink);
    color:var(--paper);
    border:none;
    border-radius:var(--radius-m);
    padding:13px 16px;
    font-weight:500;
    font-size:13.5px;
    letter-spacing:0.02em;
    box-shadow:var(--shadow-sm);
    transition:background .15s ease, box-shadow .15s ease;
  }
  .btn-add:hover{background:var(--bordeaux-900); box-shadow:var(--shadow-md);}
  .btn-add:active{transform:translateY(0);}

  .btn-scan{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:11px 16px;
    font-weight:500;
    font-size:13px;
    letter-spacing:0.02em;
    transition:background .15s ease, border-color .15s ease;
  }
  .btn-scan:hover{background:var(--cream-dim); border-color:var(--bordeaux-600);}

  .sidebar-foot{
    font-size:10.5px;
    color:var(--ink-soft);
    text-align:center;
    letter-spacing:0.03em;
    margin-top:6px;
  }

  /* Main */
  .main{
    flex:1;
    padding:40px 48px 80px;
    max-width:1400px;
  }
  .page{display:none;}
  .page.active{display:block;animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  .page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:28px;
    gap:20px;
    flex-wrap:wrap;
  }
  .page-head .eyebrow{
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--bordeaux-600);
    font-weight:600;
    margin-bottom:6px;
  }
  .page-head h2{
    font-size:32px;
    font-weight:400;
    color:var(--bordeaux-950);
  }
  .page-head p{
    color:var(--ink-soft);
    font-size:14px;
    margin-top:6px;
    max-width:520px;
  }

  /* Hero-banner: grote sfeer-illustratie bovenaan het Overzicht, edge-to-edge
     binnen de contentkolom (negatieve marge compenseert de .main-padding). */
  .hero-banner{
    position:relative;
    margin:-40px -48px 40px;
    height:340px;
    overflow:hidden;
  }
  .hero-illustration{
    width:100%;
    height:100%;
    display:block;
  }
  .hero-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 56px;
    background:linear-gradient(90deg, rgba(244,237,227,0.65) 0%, rgba(244,237,227,0.15) 55%, transparent 80%);
  }
  .hero-eyebrow{
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--bordeaux-700);
    font-weight:500;
    margin-bottom:14px;
  }
  .hero-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:52px;
    line-height:1.1;
    color:var(--ink);
    max-width:480px;
    margin-bottom:16px;
  }
  .hero-sub{
    font-size:14.5px;
    color:var(--ink-soft);
    max-width:380px;
    line-height:1.6;
  }
  @media(max-width:880px){
    .hero-banner{margin:-20px -16px 32px; height:260px;}
    .hero-overlay{padding:0 24px;}
    .hero-title{font-size:34px;}
    .hero-sub{display:none;}
  }

  /* Summary bar */
  .summary-bar{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    overflow:hidden;
    margin-bottom:32px;
    box-shadow:var(--shadow-sm);
  }
  .summary-cell{
    background:var(--paper);
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .summary-cell .num{
    font-family:'Cormorant Garamond',serif;
    font-size:26px;
    font-weight:400;
    color:var(--bordeaux-900);
    line-height:1;
  }
  .summary-cell .lbl{
    font-size:11.5px;
    color:var(--ink-soft);
    letter-spacing:0.03em;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
  .dot.rood{background:var(--rood);}
  .dot.wit{background:var(--wit);}
  .dot.rose{background:var(--rose);}
  .dot.mousserend{background:var(--mousserend);}

  @media(max-width:1100px){
    .summary-bar{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:640px){
    .summary-bar{grid-template-columns:repeat(2,1fr);}
  }

  /* Toolbar */
  .toolbar{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:22px;
    flex-wrap:wrap;
  }
  .search-input{
    flex:1;
    min-width:200px;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:var(--paper);
    font-size:14px;
    color:var(--ink);
  }
  .search-input:focus{outline:2px solid var(--bordeaux-600);outline-offset:1px;}
  .filter-chip{
    padding:9px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper);
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
    white-space:nowrap;
    transition:all .15s ease;
  }
  .filter-chip.active{
    background:var(--bordeaux-800);
    border-color:var(--bordeaux-800);
    color:var(--cream);
  }
  .filter-chip:hover:not(.active){border-color:var(--bordeaux-500);color:var(--bordeaux-700);}

  /* Wine grid */
  .wine-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:20px;
  }

  /* Wijnhuis-kaart: compacte samenvatting van meerdere jaargangen van dezelfde wijn */
  .house-card{
    cursor:pointer;
    border-color:var(--gold-soft);
  }
  .house-card:hover{border-color:var(--gold);}
  .house-years{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding-top:4px;
  }
  .year-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12.5px;
    font-weight:600;
    background:var(--cream-dim);
    border:1px solid var(--line);
    color:var(--bordeaux-800);
    padding:5px 10px;
    border-radius:999px;
  }
  .year-chip.zero{
    opacity:0.55;
    text-decoration:line-through;
  }
  .year-chip-count{
    font-weight:500;
    color:var(--ink-soft);
    font-size:11.5px;
  }
  .house-summary{
    font-size:13px;
    color:var(--ink-soft);
  }
  .house-summary strong{color:var(--bordeaux-900);}
  .house-open-hint{
    font-size:12px;
    font-weight:600;
    color:var(--bordeaux-700);
    white-space:nowrap;
  }

  /* Wijnhuis-pagina (alle jaargangen van één wijn) */
  .wijnhuis-header{
    display:flex;
    gap:20px;
    align-items:flex-start;
    margin-bottom:26px;
  }
  .wijnhuis-header-main h2{
    font-size:28px;
    color:var(--bordeaux-950);
  }
  .wijnhuis-header-main .detail-meta{margin-top:4px;}
  .wijnhuis-header-main .detail-badges{margin-top:12px;}

  .wine-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    display:flex;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:box-shadow .2s ease, transform .2s ease;
    position:relative;
  }
  .wine-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .wine-card .label-strip{
    width:10px;
    flex-shrink:0;
  }
  .wine-card .label-strip.rood{background:var(--rood);}
  .wine-card .label-strip.wit{background:var(--wit);}
  .wine-card .label-strip.rose{background:var(--rose);}
  .wine-card .label-strip.mousserend{background:var(--mousserend);}

  .wine-card-body{
    padding:20px 20px 18px;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
  }
  .wine-card-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
  }
  .wine-title h3{
    font-size:18px;
    color:var(--bordeaux-950);
    line-height:1.25;
  }
  .wine-title .meta{
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:3px;
  }
  .badge{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:4px 9px;
    border-radius:999px;
    color:#fff;
    white-space:nowrap;
    flex-shrink:0;
  }
  .badge.rood{background:var(--rood);}
  .badge.wit{background:#a3822c;}
  .badge.rose{background:#c06e83;}
  .badge.mousserend{background:#6d7d63;}

  .wine-facts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 14px;
    font-size:12.5px;
    padding-top:10px;
    border-top:1px dashed var(--line);
  }
  .wine-facts .fact{display:flex;flex-direction:column;gap:2px;}
  .wine-facts .fact .k{color:var(--ink-soft);font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;}
  .wine-facts .fact .v{color:var(--ink);font-weight:500;}
  .wine-facts .full{grid-column:1/-1;}

  .wine-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .tag{
    font-size:11px;
    background:var(--cream-dim);
    color:var(--bordeaux-800);
    padding:4px 9px;
    border-radius:6px;
    border:1px solid var(--line);
  }

  /* Urgentie: "Drink binnenkort" */
  .urgency-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    padding:4px 9px;
    border-radius:6px;
    white-space:nowrap;
  }
  .urgency-badge.kritiek{background:#fbeaea; color:#9c2f2f; border:1px solid #e3b3b3;}
  .urgency-badge.dringend{background:#fdf0e2; color:#a3611a; border:1px solid #edcda0;}
  .urgency-badge.let-op{background:#fbf6df; color:#8a7418; border:1px solid #e5d99e;}

  .urgency-legend{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:22px;
  }
  .urgency-pill{
    font-size:12.5px;
    font-weight:600;
    padding:8px 14px;
    border-radius:999px;
    background:var(--paper);
    border:1px solid var(--line);
    color:var(--ink-soft);
  }
  .urgency-pill.kritiek{color:#9c2f2f;}
  .urgency-pill.dringend{color:#a3611a;}
  .urgency-pill.let-op{color:#8a7418;}

  /* ---------- Wijnkaart ---------- */
  .winelist-toolbar{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:26px;
    flex-wrap:wrap;
  }
  .view-toggle{
    display:inline-flex;
    background:var(--cream-dim);
    border-radius:999px;
    padding:4px;
    gap:2px;
  }
  .view-toggle-btn{
    padding:8px 18px;
    border-radius:999px;
    border:none;
    background:transparent;
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    transition:all .15s ease;
  }
  .view-toggle-btn.active{
    background:var(--bordeaux-900);
    color:var(--cream);
    box-shadow:var(--shadow-sm);
  }
  .view-toggle-btn:hover:not(.active){color:var(--bordeaux-700);}
  .winelist-toolbar-hint{
    font-size:12.5px;
    color:var(--ink-soft);
    font-style:italic;
  }

  .winelist{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    padding:56px 64px;
    box-shadow:var(--shadow-md);
    max-width:920px;
    margin:0 auto;
  }
  @media(max-width:700px){
    .winelist{padding:36px 24px;}
  }

  .winelist-masthead{
    text-align:center;
    margin-bottom:8px;
  }
  .winelist-masthead .winelist-logo{
    max-width:340px;
    width:70%;
    height:auto;
    margin:0 auto 10px;
    display:block;
  }
  .winelist-masthead h1{
    font-size:34px;
    color:var(--bordeaux-950);
    letter-spacing:0.01em;
  }
  .winelist-masthead .subtitle{
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-top:8px;
  }
  .winelist-masthead .tagline{
    font-size:13px;
    color:var(--ink-soft);
    margin-top:10px;
    font-style:italic;
  }

  .winelist-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:36px 0 26px;
  }
  .winelist-divider::before,
  .winelist-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }
  .winelist-divider .diamond{
    width:7px;height:7px;
    background:var(--gold);
    transform:rotate(45deg);
    flex-shrink:0;
  }

  .winelist-section{margin-bottom:8px;}
  .winelist-section-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Cormorant Garamond',serif;
    font-size:19px;
    font-weight:500;
    color:var(--bordeaux-800);
    letter-spacing:0.02em;
    margin-bottom:18px;
  }
  .winelist-section-title .swatch{
    width:10px;height:10px;
    border-radius:50%;
    flex-shrink:0;
  }
  .winelist-section-title .swatch.rood{background:var(--rood);}
  .winelist-section-title .swatch.wit{background:var(--wit);}
  .winelist-section-title .swatch.rose{background:var(--rose);}
  .winelist-section-title .swatch.mousserend{background:var(--mousserend);}

  .winelist-entry{
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
  .winelist-entry:last-child{border-bottom:none;}

  .winelist-entry-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px 10px;
  }
  .winelist-entry-name{
    font-family:'Cormorant Garamond',serif;
    font-size:16.5px;
    font-weight:400;
    color:var(--ink);
    line-height:1.3;
  }
  .winelist-entry-leader{
    flex:1;
    border-bottom:1px dotted var(--ink-soft);
    opacity:0.4;
    position:relative;
    top:-4px;
    min-width:20px;
  }
  .winelist-entry-price{
    font-family:'Cormorant Garamond',serif;
    font-size:16.5px;
    font-weight:400;
    color:var(--bordeaux-800);
    white-space:nowrap;
    margin-left:auto;
  }
  @media(max-width:480px){
    .winelist-entry-leader{display:none;}
    .winelist-entry-name{flex:1 1 100%;}
    .winelist-entry-price{margin-left:0;}
  }
  .winelist-entry-meta{
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:4px;
  }
  .winelist-entry-meta .sep{margin:0 6px; opacity:0.5;}

  .winelist-entry-detail{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:6px 20px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed var(--line);
  }
  .winelist-entry-detail .d{
    font-size:12px;
    color:var(--ink);
    line-height:1.5;
  }
  .winelist-entry-detail .d strong{
    color:var(--bordeaux-700);
    font-weight:600;
  }
  .winelist-entry-detail .d.full{grid-column:1/-1;}

  .winelist-empty{
    text-align:center;
    padding:60px 20px;
    color:var(--ink-soft);
  }

  .winelist-footer{
    text-align:center;
    margin-top:36px;
    font-size:11.5px;
    color:var(--ink-soft);
    letter-spacing:0.04em;
  }

  /* ---------- Herkomst: wereldkaart ---------- */
  .map-panel{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    padding:24px;
    box-shadow:var(--shadow-sm);
    margin-bottom:22px;
  }
  .map-wrap{
    width:100%;
    line-height:0;
  }
  .world-map-svg{
    width:100%;
    height:auto;
    display:block;
  }
  .continent{
    fill:var(--cream-dim);
    stroke:var(--paper);
    stroke-width:0.7;
    stroke-linejoin:round;
  }
  .map-marker{
    cursor:pointer;
  }
  .map-marker-dot{
    fill:var(--bordeaux-700);
    stroke:var(--cream);
    stroke-width:2;
    transition:fill .15s ease, r .15s ease;
  }
  .map-marker:hover .map-marker-dot{
    fill:var(--gold);
  }
  .map-marker-pulse{
    fill:var(--bordeaux-600);
    opacity:0.18;
    animation:map-pulse 2.6s ease-in-out infinite;
    transform-box:fill-box;
    transform-origin:center;
  }
  @keyframes map-pulse{
    0%, 100%{opacity:0.10; transform:scale(1);}
    50%{opacity:0.22; transform:scale(1.08);}
  }
  @media (prefers-reduced-motion: reduce){
    .map-marker-pulse{animation:none;}
  }
  .map-marker-label{
    font-family:'Inter', sans-serif;
    font-size:13px;
    font-weight:600;
    fill:var(--bordeaux-900);
    text-anchor:middle;
    pointer-events:none;
    paint-order:stroke;
    stroke:var(--paper);
    stroke-width:3px;
  }
  .map-unmatched{
    font-size:12px;
    color:var(--ink-soft);
    font-style:italic;
    margin-top:14px;
    padding-top:14px;
    border-top:1px dashed var(--line);
  }

  .map-legend{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--line);
  }
  .map-legend-stat{
    display:flex;
    align-items:baseline;
    gap:7px;
  }
  .map-legend-stat .num{
    font-family:'Cormorant Garamond',serif;
    font-size:22px;
    font-weight:400;
    color:var(--bordeaux-900);
  }
  .map-legend-stat .lbl{
    font-size:12.5px;
    color:var(--ink-soft);
  }
  .map-legend-hint{
    font-size:12px;
    color:var(--ink-soft);
    font-style:italic;
    margin-left:auto;
  }
  @media(max-width:600px){
    .map-legend-hint{margin-left:0;}
  }

  .country-list{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  /* ---------- Statistieken ---------- */
  .stats-kpi-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px;
    margin-bottom:24px;
  }
  .stats-kpi-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:18px 20px;
    box-shadow:var(--shadow-sm);
  }
  .stats-kpi-card .num{
    font-family:'Cormorant Garamond',serif;
    font-size:24px;
    font-weight:400;
    color:var(--bordeaux-900);
    line-height:1.15;
  }
  .stats-kpi-card .lbl{
    font-size:12px;
    color:var(--ink-soft);
    margin-top:6px;
    line-height:1.4;
  }

  .stats-grid-2col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:22px;
  }
  @media(max-width:820px){
    .stats-grid-2col{grid-template-columns:1fr;}
  }

  .stats-chart-wrap{min-height:60px;}
  .stats-empty{
    font-size:13.5px;
    color:var(--ink-soft);
    font-style:italic;
    padding:20px 0;
    text-align:center;
  }

  /* Donut chart */
  .donut-chart-row{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
  }
  .donut-svg{
    width:150px;
    height:150px;
    flex-shrink:0;
  }
  .chart-legend{
    display:flex;
    flex-direction:column;
    gap:9px;
    flex:1;
    min-width:140px;
  }
  .chart-legend-row{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
  }
  .chart-legend-dot{
    width:11px;height:11px;
    border-radius:50%;
    flex-shrink:0;
  }
  .chart-legend-label{
    color:var(--ink);
    font-weight:500;
    flex:1;
  }
  .chart-legend-value{
    color:var(--ink-soft);
    font-size:12.5px;
    white-space:nowrap;
  }

  /* Horizontal bar chart */
  .hbar-chart{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .hbar-row{
    display:grid;
    grid-template-columns:110px 1fr 32px;
    align-items:center;
    gap:10px;
  }
  .hbar-label{
    font-size:13px;
    color:var(--ink);
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hbar-track{
    background:var(--cream-dim);
    border-radius:999px;
    height:10px;
    overflow:hidden;
  }
  .hbar-fill{
    background:var(--bordeaux-700);
    height:100%;
    border-radius:999px;
    transition:width .3s ease;
  }
  .hbar-fill.gold{background:var(--gold);}
  .hbar-value{
    font-size:12.5px;
    color:var(--ink-soft);
    text-align:right;
    font-weight:600;
  }

  /* Vertical bar chart (uitgaven per jaar) */
  .vbar-chart{
    display:flex;
    align-items:flex-end;
    gap:14px;
    min-height:180px;
    padding-top:10px;
    overflow-x:auto;
  }
  .vbar-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex:1;
    min-width:56px;
  }
  .vbar-value{
    font-size:11px;
    color:var(--ink-soft);
    font-weight:600;
    white-space:nowrap;
  }
  .vbar-track{
    width:28px;
    height:120px;
    display:flex;
    align-items:flex-end;
    background:var(--cream-dim);
    border-radius:6px;
    overflow:hidden;
  }
  .vbar-fill{
    width:100%;
    background:linear-gradient(180deg, var(--gold) 0%, var(--bordeaux-700) 100%);
    border-radius:6px 6px 0 0;
    transition:height .3s ease;
  }
  .vbar-label{
    font-size:12px;
    color:var(--ink-soft);
    font-weight:500;
  }

  .checkbox-label{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13.5px;
    font-weight:500;
    color:var(--ink);
    cursor:pointer;
  }
  .checkbox-label input[type="checkbox"]{
    width:17px;
    height:17px;
    accent-color:var(--bordeaux-700);
    cursor:pointer;
  }

  .wine-card-foot{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .price-tag{
    font-family:'Cormorant Garamond',serif;
    font-size:17px;
    font-weight:500;
    color:var(--bordeaux-900);
  }
  .stock-control{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--cream-dim);
    border-radius:999px;
    padding:4px;
  }
  .stock-btn{
    width:26px;height:26px;
    border-radius:50%;
    border:none;
    background:var(--paper);
    color:var(--bordeaux-800);
    font-size:16px;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-sm);
    transition:background .15s ease;
    line-height:1;
  }
  .stock-btn:hover{background:var(--bordeaux-800);color:var(--cream);}
  .stock-count{
    font-weight:700;
    font-size:14px;
    min-width:20px;
    text-align:center;
    color:var(--ink);
  }
  .stock-count.zero{color:#a33;}

  .card-delete{
    position:absolute;
    top:10px;
    right:10px;
    width:26px;height:26px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.85);
    color:var(--ink-soft);
    font-size:14px;
    opacity:0;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .15s ease, background .15s ease, color .15s ease;
  }
  .wine-card:hover .card-delete{opacity:1;}
  .card-delete:hover{background:var(--bordeaux-700);color:#fff;}

  .empty-state{
    text-align:center;
    padding:70px 20px;
    color:var(--ink-soft);
    border:1px dashed var(--line);
    border-radius:var(--radius-l);
    background:var(--paper);
  }
  .empty-state h3{color:var(--bordeaux-900);font-size:20px;margin-bottom:8px;}
  .empty-state p{font-size:14px;margin-bottom:18px;}

  /* Forms / cards */
  .panel{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    padding:28px;
    box-shadow:var(--shadow-sm);
  }
  .panel + .panel{margin-top:22px;}
  .panel-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
  }
  .panel-head .n{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-size:14px;
    color:var(--gold);
    background:var(--bordeaux-950);
    width:26px;height:26px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .panel-head h3{font-size:18px;color:var(--bordeaux-950);}
  .panel-desc{font-size:13.5px;color:var(--ink-soft);margin:6px 0 18px;line-height:1.5;}

  .two-col{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:22px;
    align-items:start;
  }
  @media(max-width:980px){
    .two-col{grid-template-columns:1fr;}
  }

  textarea.json-input{
    width:100%;
    min-height:160px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    color:var(--ink);
    resize:vertical;
    line-height:1.5;
  }
  textarea.json-input:focus{outline:2px solid var(--bordeaux-600);outline-offset:1px;}

  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .form-grid .full{grid-column:1/-1;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{
    font-size:12px;
    font-weight:600;
    color:var(--bordeaux-800);
    letter-spacing:0.02em;
  }
  .field input,.field select,.field textarea{
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:14px;
    color:var(--ink);
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:2px solid var(--bordeaux-600);
    outline-offset:1px;
  }
  .field textarea{resize:vertical;min-height:60px;}

  @media(max-width:640px){
    .form-grid{grid-template-columns:1fr;}
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 20px;
    border-radius:var(--radius-s);
    border:none;
    font-weight:500;
    font-size:13.5px;
    letter-spacing:0.02em;
    transition:all .15s ease;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--paper);
    box-shadow:var(--shadow-sm);
  }
  .btn-primary:hover{background:var(--bordeaux-900); box-shadow:var(--shadow-md);}
  .btn-gold{
    background:var(--gold);
    color:var(--paper);
  }
  .btn-gold:hover{filter:brightness(1.05);}
  .btn-outline{
    background:transparent;
    border:1px solid var(--line);
    color:var(--bordeaux-800);
  }
  .btn-outline:hover{border-color:var(--bordeaux-600); background:var(--cream-dim);}
  .btn-danger{
    background:#fff;
    border:1px solid #d9a3a3;
    color:#9c2f2f;
  }
  .btn-danger:hover{background:#fbeaea;}
  .btn-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}

  .prompt-box{
    background:var(--bordeaux-950);
    color:var(--cream-dim);
    border-radius:var(--radius-m);
    padding:18px;
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    line-height:1.65;
    white-space:pre-wrap;
    max-height:340px;
    overflow-y:auto;
    border:1px solid var(--bordeaux-700);
  }
  .prompt-box .kw{color:var(--gold-soft);}

  .copy-btn{
    width:100%;
    margin-top:12px;
  }

  .toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--bordeaux-950);
    color:var(--cream);
    padding:13px 22px;
    border-radius:999px;
    font-size:13.5px;
    font-weight:500;
    box-shadow:var(--shadow-lg);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:999;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast .dot-ok{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;}

  /* Wine card clickable */
  .wine-card{cursor:pointer;}
  .wine-card .stock-control,
  .wine-card .wine-location select,
  .wine-card .card-delete{
    cursor:default;
  }

  /* Detail page */
  .back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    color:var(--bordeaux-700);
    font-size:13.5px;
    font-weight:600;
    padding:8px 0;
    margin-bottom:20px;
    transition:gap .15s ease, color .15s ease;
  }
  .back-link:hover{gap:11px; color:var(--bordeaux-900);}

  .detail-header{
    display:flex;
    gap:24px;
    align-items:flex-start;
    margin-bottom:28px;
    flex-wrap:wrap;
  }
  .detail-strip{
    width:14px;
    align-self:stretch;
    min-height:100px;
    border-radius:8px;
    flex-shrink:0;
  }
  .detail-strip.rood{background:var(--rood);}
  .detail-strip.wit{background:var(--wit);}
  .detail-strip.rose{background:var(--rose);}
  .detail-strip.mousserend{background:var(--mousserend);}

  .detail-header-main{flex:1; min-width:240px;}
  .detail-header-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .detail-header-main h2{
    font-size:30px;
    color:var(--bordeaux-950);
    line-height:1.2;
  }
  .detail-meta{
    font-size:14.5px;
    color:var(--ink-soft);
    margin-top:6px;
  }
  .detail-badges{
    display:flex;
    gap:8px;
    margin-top:14px;
    flex-wrap:wrap;
    align-items:center;
  }
  .detail-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
  }

  .detail-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:16px;
  }
  .detail-grid .detail-fact-card.wide{
    grid-column:1/-1;
  }
  @media(max-width:860px){
    .detail-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:480px){
    .detail-grid{grid-template-columns:1fr;}
  }
  .detail-fact-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .detail-fact-card .k{
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--bordeaux-600);
    font-weight:600;
    display:block;
  }
  .detail-fact-card .v{
    font-size:16px;
    color:var(--ink);
    font-weight:500;
    line-height:1.4;
  }

  .detail-notes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:24px;
  }
  @media(max-width:720px){
    .detail-notes{grid-template-columns:1fr;}
  }
  .detail-note-card{
    background:var(--cream-dim);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:18px 20px;
  }
  .detail-note-card h4{
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--bordeaux-700);
    font-weight:700;
    margin-bottom:8px;
  }
  .detail-note-card p{
    font-size:14.5px;
    color:var(--ink);
    line-height:1.6;
    margin:0;
  }

  .detail-side-panels{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:16px;
    margin-bottom:16px;
    align-items:stretch;
  }
  .detail-side-panels .panel{margin-top:0;}
  @media(max-width:720px){
    .detail-side-panels{grid-template-columns:1fr;}
  }

  .panel-label{
    display:block;
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--bordeaux-600);
    font-weight:600;
  }
  .panel-value{
    font-size:19px;
    color:var(--ink);
    font-weight:500;
    margin-top:6px;
  }

  .detail-stock-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
  }
  .detail-stock-panel .stock-control{
    transform:scale(1.1);
    transform-origin:right center;
    flex-shrink:0;
  }
  .detail-location-panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
  }
  .detail-location-panel select{
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:14px;
    color:var(--ink);
    width:100%;
  }

  /* Edit form reuses .form-grid / .field styles */

  /* Bewaarlocaties */
  .location-add-row{
    display:flex;
    gap:10px;
    margin-bottom:18px;
  }
  .location-add-row input{
    flex:1;
    padding:11px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:14px;
    color:var(--ink);
  }
  .location-add-row input:focus{outline:2px solid var(--bordeaux-600);outline-offset:1px;}

  .location-list{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .location-list-empty{
    font-size:13.5px;
    color:var(--ink-soft);
    padding:14px 0;
  }
  .location-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 4px;
    border-bottom:1px dashed var(--line);
  }
  .location-row:last-child{border-bottom:none;}
  .location-row-name{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    color:var(--ink);
    font-weight:500;
  }
  .location-row-name .pin{color:var(--bordeaux-600); flex-shrink:0;}
  .location-row-count{
    font-size:11.5px;
    color:var(--ink-soft);
    font-weight:400;
    background:var(--cream-dim);
    padding:2px 8px;
    border-radius:999px;
  }
  .location-row-actions{
    display:flex;
    gap:6px;
    flex-shrink:0;
  }
  .location-icon-btn{
    width:28px;height:28px;
    border-radius:7px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    transition:all .15s ease;
  }
  .location-icon-btn:hover{border-color:var(--bordeaux-600); color:var(--bordeaux-700); background:var(--cream-dim);}
  .location-icon-btn.danger:hover{border-color:#d9a3a3; color:#9c2f2f; background:#fbeaea;}
  .location-rename-input{
    flex:1;
    padding:7px 10px;
    border:1px solid var(--bordeaux-500);
    border-radius:var(--radius-s);
    font-size:14px;
    background:#fff;
  }

  /* Location filter + badge on cards */
  .location-select-filter{
    padding:9px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper);
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
  }
  .location-select-filter:focus{outline:2px solid var(--bordeaux-600); outline-offset:1px;}

  .wine-location{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
  }
  .wine-location .pin{color:var(--bordeaux-600); flex-shrink:0;}
  .wine-location select{
    border:1px solid var(--line);
    background:var(--cream-dim);
    border-radius:6px;
    padding:4px 8px;
    font-size:12px;
    color:var(--ink);
    max-width:180px;
  }
  .wine-location select:focus{outline:2px solid var(--bordeaux-600); outline-offset:1px;}

  .settings-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap;
  }
  .settings-row:last-child{border-bottom:none;}
  .settings-row-text h4{font-size:15px;color:var(--ink);margin-bottom:3px;font-weight:600;}
  .settings-row-text p{font-size:13px;color:var(--ink-soft);max-width:420px;}

  input[type="file"]{display:none;}

  .stat-line{
    display:flex;
    justify-content:space-between;
    font-size:13.5px;
    padding:9px 0;
    border-bottom:1px dashed var(--line);
  }
  .stat-line:last-child{border-bottom:none;}
  .stat-line span:last-child{font-weight:600;color:var(--bordeaux-900);}

  .modal-overlay{
    position:fixed;inset:0;
    background:rgba(51,42,34,0.5);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal{
    background:var(--paper);
    border-radius:var(--radius-l);
    padding:26px;
    max-width:400px;
    width:100%;
    box-shadow:var(--shadow-lg);
  }
  .modal h3{color:var(--bordeaux-950); font-size:18px; margin-bottom:8px;}
  .modal p{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px; line-height:1.5;}
  .modal .btn-row{margin-top:0;}

  #openedModalOverlay .modal{max-width:440px;}

  /* ---------- Barcode-scanner modal ---------- */
  .scan-modal{max-width:440px;}
  .scan-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .scan-modal-header h3{margin-bottom:0;}
  .scan-close-btn{
    background:none;
    border:none;
    font-size:16px;
    color:var(--ink-soft);
    padding:4px 8px;
    border-radius:6px;
  }
  .scan-close-btn:hover{background:var(--cream-dim); color:var(--ink);}

  .scan-camera-wrap{
    position:relative;
    width:100%;
    min-height:280px;
    background:#111;
    border-radius:var(--radius-m);
    overflow:hidden;
  }
  #scanReaderDiv{
    width:100%;
  }
  #scanReaderDiv video{
    width:100% !important;
    height:auto !important;
    object-fit:cover;
    border-radius:var(--radius-m);
  }
  /* html5-qrcode tekent zelf een scan-kader (canvas overlay) over de video —
     geen eigen .scan-frame meer nodig, dat zou dubbelop zijn. */
  .scan-hint{
    font-size:13px;
    color:var(--ink-soft);
    text-align:center;
    margin:14px 0 0;
  }
  .scan-unsupported{
    margin-top:16px;
    padding:14px;
    background:var(--cream-dim);
    border-radius:var(--radius-s);
    font-size:13px;
    color:var(--ink);
  }
  .scan-unsupported input{
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    font-size:14px;
  }

  .scan-found-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    background:var(--cream-dim);
    border-radius:var(--radius-m);
    margin-bottom:16px;
  }
  .scan-found-card .strip{
    width:8px;
    align-self:stretch;
    border-radius:4px;
    flex-shrink:0;
  }
  .scan-found-card h4{font-size:17px; color:var(--bordeaux-950); margin-bottom:4px;}
  .scan-found-meta{font-size:13px; color:var(--ink-soft); margin-bottom:8px;}
  .scan-found-stock{
    font-size:14px;
    font-weight:600;
    color:var(--bordeaux-800);
  }
  .scan-found-stock.zero{color:#9c2f2f;}

  .scan-unknown-intro{
    font-size:13.5px;
    color:var(--ink-soft);
    margin-bottom:16px;
    line-height:1.5;
  }
  .scan-unknown-intro code{
    background:var(--cream-dim);
    padding:2px 6px;
    border-radius:4px;
    font-size:12.5px;
  }
  #scanLinkSelect{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:14px;
  }
  .scan-or-divider{
    text-align:center;
    font-size:12px;
    color:var(--ink-soft);
    margin:14px 0;
    position:relative;
  }
  .scan-or-divider::before, .scan-or-divider::after{
    content:"";
    position:absolute;
    top:50%;
    width:40%;
    height:1px;
    background:var(--line);
  }
  .scan-or-divider::before{left:0;}
  .scan-or-divider::after{right:0;}

  #openedModalForm .field label{
    font-size:12px;
    font-weight:600;
    color:var(--bordeaux-800);
    letter-spacing:0.02em;
    display:block;
    margin-bottom:6px;
  }
  #openedModalForm input[type="date"],
  #openedModalForm textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:14px;
    color:var(--ink);
    font-family:inherit;
  }
  #openedModalForm textarea{min-height:70px; resize:vertical;}
  #openedModalForm input[type="date"]:focus,
  #openedModalForm textarea:focus{outline:2px solid var(--bordeaux-600); outline-offset:1px;}

  .star-rating{
    display:flex;
    gap:4px;
  }
  .star-btn{
    background:none;
    border:none;
    font-size:28px;
    line-height:1;
    color:var(--line);
    cursor:pointer;
    padding:2px;
    transition:color .15s ease, transform .1s ease;
  }
  .star-btn:hover{transform:scale(1.1);}
  .star-btn.filled{color:var(--gold);}

  /* Proefgeschiedenis-kaart */
  .opened-card .wine-card-body{gap:10px;}
  .opened-date-row{
    font-size:13px;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .opened-stars{
    display:flex;
    gap:2px;
  }
  .opened-star{
    font-size:16px;
    color:var(--line);
  }
  .opened-star.filled{color:var(--gold);}
  .opened-note{
    font-size:13px;
    color:var(--ink);
    background:var(--cream-dim);
    border-radius:var(--radius-s);
    padding:10px 12px;
    line-height:1.5;
    font-style:italic;
  }

  /* Mobile sidebar */
  .mobile-topbar{display:none;}
  /* Mobile menu overlay: verborgen op desktop, gebruikt als klik-om-te-sluiten laag op mobiel */
  .mobile-menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(51,42,34,0.5);
    z-index:998;
  }
  .mobile-menu-overlay.show{display:block;}

  .mobile-menu-toggle{
    display:none;
    background:transparent;
    border:none;
    color:var(--ink);
    padding:6px;
    border-radius:8px;
    flex-shrink:0;
  }
  .mobile-menu-toggle:hover{background:var(--cream-dim);}
  .sidebar-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  @media(max-width:880px){
    .app{flex-direction:column;}

    .sidebar{
      position:sticky;
      top:0;
      z-index:999;
      width:100%;
      height:auto;
      flex-direction:column;
      align-items:stretch;
      padding:14px 18px;
      gap:0;
    }
    .sidebar-brand{margin-bottom:0;}
    .sidebar-sub{display:none;}

    .mobile-menu-toggle{display:flex; align-items:center; justify-content:center;}

    /* Uitklapbaar menu: standaard verborgen, volledige breedte, onder de topbar */
    .nav{
      display:none;
      flex-direction:column;
      gap:4px;
      margin:16px 0 0;
      padding-top:16px;
      border-top:1px solid var(--line);
    }
    .nav.mobile-open{display:flex;}
    .nav-item{padding:13px 14px;}
    .nav-item span.txt{display:inline;} /* labels blijven zichtbaar in het uitgeklapte menu */

    .sidebar-cta{
      display:none;
      margin-top:16px;
      flex-direction:column;
      gap:10px;
    }
    .sidebar-cta.mobile-open{display:flex;}
    .btn-add span.txt{display:inline;}

    .main{padding:20px 16px 60px;}
  }

  @media(min-width:881px){
    /* Op desktop nooit tonen, ook niet als de mobiele "open"-class per ongeluk blijft hangen */
    .mobile-menu-toggle{display:none;}
    .mobile-menu-overlay{display:none !important;}
  }