:root{--wine-dark:#6b1a2a;--wine:#8b2335;--wine-light:#a83248;--wine-bg:#fdf4f5;--gold:#a07820;--gold-bg:#fdf8ed;--green:#1a7a3a;--green-bg:#edf7f1;--amber:#c07020;--amber-bg:#fef8ed;--red:#c02020;--red-bg:#fef0f0;--text:#1f2937;--text-light:#6b7280;--text-muted:#9ca3af;--bg:#f9f7f8;--white:#fff;--border:#e5e0e2;--border-light:#f3f0f1;--shadow:0 2px 8px #6b1a2a14;--shadow-md:0 4px 16px #6b1a2a1f;--radius:8px;--radius-lg:12px;color:var(--text);background:var(--bg);font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{margin:0}button{cursor:pointer;font:inherit;border-radius:var(--radius);border:none;padding:8px 16px;transition:all .2s}input,select,textarea{font:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);color:var(--text);outline:none;padding:8px 12px;transition:border-color .2s}input:focus,select:focus,textarea:focus{border-color:var(--wine);box-shadow:0 0 0 3px #8b23351a}a{color:var(--wine);text-decoration:none}a:hover{text-decoration:underline}.btn-primary{background:var(--wine);color:#fff;font-weight:600}.btn-primary:hover{background:var(--wine-dark)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--border-light);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:#991818}.btn-sm{padding:4px 10px;font-size:.85rem}.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.25rem}.form-group{margin-bottom:1rem}.form-label{color:var(--text);margin-bottom:.35rem;font-size:.875rem;font-weight:600;display:block}.error-message{background:var(--red-bg);color:#991b1b;border-radius:var(--radius);border:1px solid #fecaca;margin-bottom:1rem;padding:.75rem 1rem;font-size:.9rem}.success-message{background:var(--green-bg);color:#065f46;border-radius:var(--radius);border:1px solid #a7f3d0;margin-bottom:1rem;padding:.75rem 1rem;font-size:.9rem}.empty-state{text-align:center;color:var(--text-muted);padding:3rem 1rem}.empty-state-icon{margin-bottom:.75rem;font-size:3.5rem}.app{flex-direction:column;min-height:100vh;display:flex}.navbar{background:var(--wine-dark);color:#fff;z-index:100;justify-content:space-between;align-items:center;height:56px;padding:0 1rem;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #00000040}.nav-brand{letter-spacing:.02em;align-items:center;gap:.4rem;font-size:1.2rem;font-weight:700;display:flex}.nav-links{align-items:center;gap:.25rem;display:flex}.nav-links a{color:#ffffffbf;border-radius:6px;padding:.35rem .65rem;font-size:.9rem;text-decoration:none;transition:all .15s}.nav-links a:hover,.nav-links a.active{color:#fff;background:#ffffff26}.nav-logout{color:#ffffffbf!important;cursor:pointer!important;background:0 0!important;border:1px solid #ffffff59!important;border-radius:6px!important;margin-left:.25rem!important;padding:.3rem .7rem!important;font-size:.85rem!important}.nav-logout:hover{color:#fff!important;border-color:#ffffffb3!important}.main-content{flex:1;width:100%;max-width:960px;margin:0 auto;padding:1.5rem 1rem}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.page-title{color:var(--wine-dark);font-size:1.4rem;font-weight:700}.bottom-nav{display:none}@media (width<=700px){.nav-links{display:none}.navbar{justify-content:center}.main-content{padding:1rem .75rem 5rem}.bottom-nav{background:var(--wine-dark);z-index:200;border-top:1px solid #ffffff26;height:60px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 12px #00000040}.bottom-nav-item{color:#fff9;-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;padding:.3rem 0;font-size:.62rem;text-decoration:none;transition:color .15s;display:flex}.bottom-nav-item.active{color:#f4a3b0}.bottom-nav-icon{font-size:1.35rem;line-height:1}}.upload-area{border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;background:var(--white);cursor:pointer;padding:2.5rem 1.5rem;transition:all .2s}.upload-area:hover,.upload-area.drag-over{border-color:var(--wine);background:var(--wine-bg)}.upload-area.has-photo{border-color:var(--wine);background:var(--wine-bg);padding:0;overflow:hidden}.upload-area img{object-fit:contain;width:100%;max-height:300px;display:block}.upload-icon{margin-bottom:.5rem;font-size:2.5rem}.upload-text{color:var(--text-light);margin-bottom:.75rem;font-size:.95rem}.upload-hint{color:var(--text-muted);font-size:.8rem}.spinner-wrap{color:var(--wine-dark);flex-direction:column;align-items:center;gap:1rem;padding:2rem;font-weight:600;display:flex}.spinner{border:4px solid var(--border);border-top-color:var(--wine);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.flessen-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.65rem;display:grid}.fles-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);cursor:pointer;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s;display:block;overflow:hidden}.fles-card:hover{box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-2px)}.fles-card-foto{object-fit:cover;background:var(--wine-bg);justify-content:center;align-items:center;width:100%;height:110px;font-size:2.5rem;display:flex}.fles-card-foto img{object-fit:cover;width:100%;height:110px}.fles-card-body{padding:.55rem .65rem}.fles-card-naam{color:var(--wine-dark);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.15rem;font-size:.78rem;font-weight:700;overflow:hidden}.fles-card-sub{color:var(--text-light);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.4rem;font-size:.7rem;overflow:hidden}.fles-card-footer{justify-content:space-between;align-items:center;display:flex}.status-badge{border-radius:99px;align-items:center;gap:.3rem;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.status-groen{background:var(--green-bg);color:var(--green)}.status-oranje{background:var(--amber-bg);color:var(--amber)}.status-rood{background:var(--red-bg);color:var(--red)}.detail-layout{grid-template-columns:220px 1fr;align-items:start;gap:1.5rem;display:grid}.detail-foto{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--wine-bg);justify-content:center;align-items:center;min-height:280px;font-size:5rem;display:flex;overflow:hidden}.detail-foto img{width:100%;display:block}.detail-info{flex-direction:column;gap:1rem;display:flex}.detail-naam{color:var(--wine-dark);font-size:1.5rem;font-weight:700;line-height:1.2}.detail-wijnhuis{color:var(--text-light);margin-top:.15rem;font-size:1rem}.info-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.info-item{background:var(--bg);border-radius:var(--radius);padding:.6rem .8rem}.info-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.15rem;font-size:.72rem;font-weight:600}.info-value{color:var(--text);font-size:.92rem;font-weight:600}.advies-box{background:var(--wine-bg);border-left:4px solid var(--wine);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);padding:.75rem 1rem;font-size:.9rem;line-height:1.5}.food-pairing-list{flex-wrap:wrap;gap:.4rem;display:flex}.food-tag{background:var(--gold-bg);color:var(--gold);border:1px solid #e8d090;border-radius:99px;padding:3px 10px;font-size:.8rem;font-weight:500}.section-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.4rem;font-size:.8rem;font-weight:700}@media (width<=640px){.detail-layout{grid-template-columns:1fr}.detail-foto{max-height:280px}.flessen-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.fles-card-foto,.fles-card-foto img{height:140px}.info-grid{grid-template-columns:1fr}}.view-toggle{border:1px solid var(--border);border-radius:8px;display:flex;overflow:hidden}.view-toggle-btn{background:var(--white);cursor:pointer;color:var(--text-muted);border:none;padding:.35rem .65rem;font-size:1rem;line-height:1;transition:background .15s,color .15s}.view-toggle-btn:first-child{border-right:1px solid var(--border)}.view-toggle-btn.active{background:var(--wine-dark);color:#fff}.rek-container{background:linear-gradient(160deg,#7a4a28 0%,#5c3218 50%,#7a4a28 100%);border-radius:14px;padding:1rem 1rem .75rem;box-shadow:0 6px 24px #00000059,inset 0 1px #ffffff1f}.rek-legenda{flex-wrap:wrap;gap:1rem;margin-bottom:.85rem;display:flex}.rek-legenda-item{color:#ffffffbf;align-items:center;gap:.35rem;font-size:.75rem;display:flex}.rek-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.rek-leeg-dot{background:#00000059;border:1px solid #ffffff1a}.rek-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px;display:grid}.rek-slot{aspect-ratio:1;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex;position:relative}.rek-leeg{background:radial-gradient(circle at 38% 32%,#2a1508,#0d0503);box-shadow:inset 0 3px 8px #000000e6,inset 0 -1px 3px #ffffff0a}.rek-fles{cursor:pointer}.rek-fles:hover{z-index:2;transform:scale(1.12)}.rek-status-groen{background:radial-gradient(circle at 38% 32%,#4aa84a,#1d5c1d);box-shadow:inset 0 3px 8px #0006,0 2px 6px #0006}.rek-status-groen:hover{box-shadow:inset 0 3px 8px #0000004d,0 4px 14px #2d8c2d99}.rek-status-oranje{background:radial-gradient(circle at 38% 32%,#e09820,#8b5c00);box-shadow:inset 0 3px 8px #0006,0 2px 6px #0006}.rek-status-oranje:hover{box-shadow:inset 0 3px 8px #0000004d,0 4px 14px #c8820099}.rek-status-rood{background:radial-gradient(circle at 38% 32%,#c03535,#5c0a0a);box-shadow:inset 0 3px 8px #0006,0 2px 6px #0006}.rek-status-rood:hover{box-shadow:inset 0 3px 8px #0000004d,0 4px 14px #b41e1e99}.rek-kurk{pointer-events:none;background:radial-gradient(circle at 40% 35%,#e8c99a,#b08050);border-radius:50%;width:34%;height:34%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000080}.rek-fles:after{content:attr(data-tooltip);color:#f5e6d0;white-space:nowrap;opacity:0;pointer-events:none;z-index:20;letter-spacing:.01em;background:#140804eb;border-radius:7px;padding:5px 10px;font-size:.72rem;font-weight:500;transition:opacity .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0006}.rek-fles:before{content:"";opacity:0;pointer-events:none;z-index:20;border:5px solid #0000;border-top-color:#140804eb;transition:opacity .15s;position:absolute;bottom:calc(100% + 3px);left:50%;transform:translate(-50%)}.rek-fles:hover:after,.rek-fles:hover:before{opacity:1}.rek-footer{text-align:center;color:#ffffff80;margin-top:.75rem;font-size:.75rem}.foto-pair{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}.foto-label{color:var(--text-light);margin-bottom:.35rem;font-size:.85rem;font-weight:600;display:block}.analyse-result{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-top:1.5rem;padding:1.25rem}.veld-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}@media (width<=580px){.foto-pair,.veld-grid{grid-template-columns:1fr}}