000}

/* ── SECTION HEADING ── */
.section-heading{font-family:var(--ff);font-size:30px;font-weight:600;color:var(--gold2);margin-bottom:4px}
.section-sub{font-size:14px;color:var(--text2);margin-bottom:20px}

/* ── BOTTLE GRID ── */
.bottle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;animation:fadeIn .3s ease}
.bottle-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;cursor:pointer;transition:border-color .2s}
.bottle-card:active{border-color:var(--gold)}
.bc-top{background:linear-gradient(135deg,var(--bg3),var(--bg4));padding:16px 16px 12px;display:flex;gap:12px;align-items:flex-start}
.bc-icon{font-size:36px;flex-shrink:0}
.bc-info{flex:1;min-width:0}
.bc-name{font-family:var(--ff);font-size:18px;font-weight:600;color:var(--cream);line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-distillery{font-size:12px;color:var(--text2);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-badges{display:flex;flex-wrap:wrap;gap:4px}
.badge{padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.badge-type{background:rgba(200,146,10,.15);color:var(--gold);border-color:rgba(200,146,10,.3)}
.badge-sealed{background:rgba(200,146,10,.1);color:var(--seal);border-color:rgba(200,146,10,.25)}
.badge-open{background:rgba(74,144,96,.1);color:var(--open2);border-color:rgba(74,144,96,.3)}
.bc-body{padding:13px 16px;border-top:1px solid var(--border)}
.bc-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:11px}
.meta-item{display:flex;flex-direction:column}
.meta-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3)}
.meta-val{font-size:14px;color:var(--cream2)}
.bc-footer{display:flex;align-items:center;justify-content:space-between}
.score-big{font-family:var(--ff);font-size:24px;font-weight:700;color:var(--gold2)}

/* ── EMPTY STATE ── */
.empty{text-align:center;padding:64px 20px}
.empty-icon{font-size:52px;opacity:.4;margin-bottom:14px}
.empty h3{font-family:var(--ff);font-size:26px;color:var(--text2);margin-bottom:6px}
.empty p{font-size:14px;color:var(--text3);max-width:300px;margin:0 auto}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.overlay.hidden{display:none}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);width:100%;max-width:640px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--sh2)}
.modal-wide{max-width:820px}
.modal-hdr{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:1}
.modal-title{font-family:var(--ff);font-size:22px;font-weight:600;color:var(--gold2)}
.close-btn{width:34px;height:34px;border-radius:50%;background:var(--bg3);color:var(--text2);font-size:18px;display:flex;align-items:center;justify-content:center}
.modal-body{padding:20px 22px 28px}

/* ── DETAIL MODAL ── */
.detail-hero{background:linear-gradient(135deg,var(--bg3),var(--bg4));border-radius:var(--r);padding:20px;margin-bottom:18px;display:flex;gap:16px;align-items:flex-start}
.detail-icon{font-size:58px;flex-shrink:0}
.detail-name{font-family:var(--ff);font-size:28px;font-weight:700;color:var(--cream);line-height:1.1;margin-bottom:4px}
.detail-dist{color:var(--text2);font-size:13px;margin-bottom:10px}
.detail-badges{display:flex;flex-wrap:wrap;gap:6px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:18px}
.detail-field{background:var(--bg3);border-radius:var(--r);padding:11px 13px}
.df-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:3px}
.df-val{font-size:15px;color:var(--cream2);font-weight:600}
.detail-sec{margin-bottom:18px}
.detail-sec-title{font-family:var(--ff);font-size:17px;color:var(--gold2);margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.notes-box{background:var(--bg3);border-radius:var(--r);padding:13px 15px;font-size:14px;color:var(--cream2);line-height:1.7;font-style:italic}
.detail-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:14px;border-top:1px solid var(--border)}
.detail-btn{flex:1;min-width:110px;padding:11px 14px;border-radius:var(--r);font-size:13px;font-weight:700;transition:all .2s;border:1px solid transparent;text-align:center}
.btn-seal{color:var(--seal);border-color:rgba(200,146,10,.4);background:transparent}
.btn-open-style{color:var(--open2);border-color:rgba(74,144,96,.4);background:transparent}
.btn-note{color:var(--cream);border-color:var(--border);background:transparent}
.btn-del{color:var(--red);border-color:rgba(192,64,64,.3);background:transparent}
.fin-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.fin-row:last-child{border-bottom:none;padding-top:10px;font-weight:700;font-size:15px}
.fin-label{color:var(--text2)}
.fin-val{color:var(--cream2)}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg-full{grid-column:1/-1}
.form-field{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text2)}
.form-input,.form-sel,.form-ta{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;color:var(--text);font-size:15px;width:100%;transition:border-color .2s}
.form-input:focus,.form-sel:focus,.form-ta:focus{border-color:var(--gold)}
.form-input::placeholder,.form-ta::placeholder{color:var(--text3)}
.form-ta{resize:vertical;min-height:76px}
.form-sel{cursor:pointer}
.seal-toggle{display:flex;gap:8px}
.seal-opt{flex:1;padding:12px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);color:var(--text2);font-size:14px;font-weight:600;text-align:center}
.seal-opt.active-s{border-color:var(--gold);background:rgba(200,146,10,.1);color:var(--gold)}
.seal-opt.active-o{border-color:var(--open);background:rgba(74,144,96,.08);color:var(--open2)}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:14px;border-top:1px solid var(--border)}
.form-submit{padding:12px 26px;background:var(--gold);color:#000;border-radius:var(--r);font-size:15px;font-weight:700}
.form-submit:active{background:var(--gold2)}
.form-cancel{padding:12px 18px;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:15px}
.scanned-banner{background:rgba(200,146,10,.1);border:1px solid rgba(200,146,10,.3);border-radius:var(--r);padding:10px 14px;color:var(--gold);font-size:13px;grid-column:1/-1}

/* ── SCORE SLIDER ── */
.score-wrap{grid-column:1/-1}
.score-display{font-family:var(--ff);font-size:34px;font-weight:700;color:var(--gold2);text-align:center;margin:6px 0 10px}
.score-track{height:10px;background:var(--bg3);border-radius:5px;border:1px solid var(--border);cursor:pointer;position:relative;touch-action:none}
.score-fill{height:100%;border-radius:4px;background:linear-gradient(to right,var(--gold),var(--gold2));pointer-events:none}
.score-labels{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--text3)}

/* ── SCAN MODAL ── */
.scan-tabs{display:flex;gap:2px;background:var(--bg3);border-radius:var(--r);padding:3px;margin-bottom:18px}
.scan-tab{flex:1;padding:10px;text-align:center;border-radius:6px;background:transparent;color:var(--text2);font-size:14px}
.scan-tab.active{background:var(--gold);color:#000;font-weight:700}
.cam-wrap{position:relative;background:#000;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;margin-bottom:12px}
.cam-wrap video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.scan-box{width:210px;height:140px;border:2px solid var(--gold);border-radius:8px;position:relative;overflow:hidden}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--gold2),transparent);animation:scanLine 1.8s linear infinite}
.scan-corner{position:absolute;width:14px;height:14px;border-color:var(--gold2)}
.sc-tl{top:-2px;left:-2px;border-top:3px solid;border-left:3px solid}
.sc-tr{top:-2px;right:-2px;border-top:3px solid;border-right:3px solid}
.sc-bl{bottom:-2px;left:-2px;border-bottom:3px solid;border-left:3px solid}
.sc-br{bottom:-2px;right:-2px;border-bottom:3px solid;border-right:3px solid}
.cam-status{text-align:center;font-size:13px;color:var(--text2);margin-bottom:12px}
.cam-btn{width:100%;padding:13px;background:var(--gold);color:#000;border-radius:var(--r);font-weight:700;font-size:15px;margin-bottom:9px}
.cam-btn:active{background:var(--gold2)}
.upload-label{display:block;width:100%;padding:12px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:14px;cursor:pointer;text-align:center}
.scan-result{background:var(--bg3);border:1px solid rgba(200,146,10,.3);border-radius:var(--r);padding:15px;margin-top:12px}
.scan-result-title{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:7px}
.scan-result-name{font-family:var(--ff);font-size:21px;font-weight:600;color:var(--cream);margin-bottom:3px}
.scan-result-meta{font-size:12px;color:var(--text2);margin-bottom:8px}
.conf{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;margin-bottom:10px;border:1px solid}
.conf-h{background:rgba(74,144,96,.2);color:var(--open2);border-color:rgba(74,144,96,.3)}
.conf-m{background:rgba(200,146,10,.15);color:var(--gold);border-color:rgba(200,146,10,.3)}
.conf-l{background:rgba(192,64,64,.15);color:#f09090;border-color:rgba(192,64,64,.3)}
.use-btn{width:100%;padding:12px;background:var(--gold);color:#000;border-radius:var(--r);font-weight:700;font-size:14px}
.use-btn:active{background:var(--gold2)}
.spinner-wrap{text-align:center;padding:22px;color:var(--text2);font-size:14px}
.spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 10px}

/* ── PROFILE ── */
.profile-panel{position:absolute;right:0;top:50px;width:270px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:18px;box-shadow:var(--sh2);z-index:150;animation:fadeIn .2s ease}
.pp-avatar{font-size:40px;text-align:center;margin-bottom:7px}
.pp-name{font-family:var(--ff);font-size:21px;font-weight:600;color:var(--cream);text-align:center}
.pp-email{font-size:12px;color:var(--text2);text-align:center;margin-bottom:14px}
.pp-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.pp-stat{background:var(--bg3);border-radius:var(--r);padding:9px;text-align:center}
.pp-stat-val{font-family:var(--ff);font-size:21px;font-weight:700;color:var(--gold2)}
.pp-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.signout-btn{width:100%;padding:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:14px;font-weight:700}
.signout-btn:active{border-color:var(--red);color:var(--red)}

/* ── MARKET ── */
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.market-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.mc-img{background:linear-gradient(135deg,var(--bg3),var(--bg4));padding:22px;text-align:center;font-size:50px;position:relative}
.mc-verified{position:absolute;top:10px;right:10px;background:rgba(74,144,96,.2);border:1px solid var(--open);color:var(--open2);font-size:10px;padding:3px 8px;border-radius:20px;font-weight:700}
.mc-body{padding:14px 16px}
.mc-name{font-family:var(--ff);font-size:18px;font-weight:600;color:var(--cream);margin-bottom:2px}
.mc-seller{font-size:11px;color:var(--text2);margin-bottom:9px}
.mc-details{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.mc-detail{font-size:11px;color:var(--text2);background:var(--bg3);padding:3px 8px;border-radius:4px}
.mc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}
.mc-price{font-family:var(--ff);font-size:25px;font-weight:700;color:var(--gold2)}
.mc-msrp{font-size:11px;color:var(--text3);text-decoration:line-through}
.mc-btns{display:flex;gap:6px}
.mc-btn{padding:8px 12px;border-radius:7px;font-size:13px;font-weight:700;border:none}
.mc-buy{background:var(--gold);color:#000}
.mc-buy:active{background:var(--gold2)}
.mc-watch{background:var(--bg3);border:1px solid var(--border);color:var(--text2)}

/* ── COMMUNITY ── */
.community-list{display:flex;flex-direction:column;gap:14px}
.cc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:17px 19px}
.cc-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:9px}
.cc-bottle{font-family:var(--ff);font-size:21px;font-weight:600;color:var(--cream)}
.cc-dist{font-size:11px;color:var(--text2);margin-top:1px}
.cc-score{font-family:var(--ff);font-size:38px;font-weight:700;color:var(--gold2);line-height:1}
.cc-score-lbl{font-size:10px;color:var(--text3);text-align:center;text-transform:uppercase;letter-spacing:.08em}
.cc-meta{font-size:12px;color:var(--text3);margin-bottom:10px}
.cc-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cc-note{background:var(--bg3);border-radius:7px;padding:10px}
.cc-note-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:3px}
.cc-note-txt{font-size:12px;color:var(--cream2);line-height:1.6;font-style:italic}

/* ── WISHLIST ── */
.wish-list{display:flex;flex-direction:column;gap:11px}
.wish-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;display:flex;align-items:center;gap:14px}
.wish-icon{font-size:30px;flex-shrink:0}
.wish-info{flex:1;min-width:0}
.wish-name{font-family:var(--ff);font-size:18px;font-weight:600;color:var(--cream);margin-bottom:1px}
.wish-detail{font-size:12px;color:var(--text2)}
.wish-notes{font-size:11px;color:var(--text3);font-style:italic;margin-top:2px}
.wish-right{text-align:right;flex-shrink:0}
.wish-target{font-family:var(--ff);font-size:21px;font-weight:700;color:var(--gold2)}
.wish-target-lbl{font-size:10px;color:var(--text3)}
.wish-pri{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;margin-top:3px;border:1px solid}
.pri-h{background:rgba(192,64,64,.12);color:#f09090;border-color:rgba(192,64,64,.25)}
.pri-m{background:rgba(200,146,10,.1);color:var(--gold);border-color:rgba(200,146,10,.25)}
.pri-l{background:rgba(74,144,96,.08);color:var(--open2);border-color:rgba(74,144,96,.2)}
.remove-btn{padding:7px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text3);font-size:13px;flex-shrink:0}
.remove-btn:active{color:var(--red);border-color:var(--red)}
</style>
</head>
<body>
<div id="app"></div>

<script>
// ── DATA ──────────────────────────────────────────────────────────────────────
const USERS = [
  {id:"u1",email:"jack@bourbon.com",password:"bourbon1",name:"Jack Danielson",avatar:"🥃"},
  {id:"u2",email:"mary@bourbon.com",password:"bourbon2",name:"Mary Mash",avatar:"🌾"},
];
const BOTTLE_TYPES = ["Straight Bourbon","Single Barrel","Small Batch","Wheated","High Rye","Blended","Rye Whiskey","Tennessee Whiskey","Other"];
const ICONS = {"Single Barrel":"🥃","Small Batch":"🍶","Wheated":"🌾","High Rye":"🌿","Rye Whiskey":"🌿","Tennessee Whiskey":"🏔️"};
const bi = t => ICONS[t]||"🥃";
const f$ = n => n!=null&&n!==''&&!isNaN(n) ? '$'+Number(n).toLocaleString('en-US',{maximumFractionDigits:0}) : '—';
const scoreLabel = s => s>=95?"Extraordinary":s>=90?"Excellent":s>=85?"Very Good":s>=80?"Good":"Fair";
const esc = s => String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');

const DEFAULT_BOTTLES = {
  u1:[
    {id:"b1",user_id:"u1",name:"Pappy Van Winkle 23 Year",distillery:"Buffalo Trace",proof:95.6,age:23,type:"Wheated",msrp:350,paid:350,market_value:4200,bottles:1,sealed:true,vintage:"2021",notes:"Absolute unicorn. Pure liquid gold.",rating:98,tags:["unicorn","allocated"],created_at:"2024-01-15"},
    {id:"b2",user_id:"u1",name:"E.H. Taylor Single Barrel",distillery:"Buffalo Trace",proof:100,age:null,type:"Straight Bourbon",msrp:40,paid:38,market_value:150,bottles:2,sealed:true,vintage:"2023",notes:"Classic and reliable.",rating:90,tags:["BTAC","allocated"],created_at:"2024-02-10"},
    {id:"b3",user_id:"u1",name:"Blanton's Original Single Barrel",distillery:"Buffalo Trace",proof:93,age:null,type:"Single Barrel",msrp:65,paid:65,market_value:180,bottles:1,sealed:false,vintage:"2023",notes:"Currently enjoying. Great daily drinker.",rating:88,tags:["single-barrel"],created_at:"2024-03-01"},
    {id:"b4",user_id:"u1",name:"Weller Special Reserve",distillery:"Buffalo Trace",proof:90,age:null,type:"Wheated",msrp:25,paid:25,market_value:65,bottles:3,sealed:true,vintage:"2024",notes:"Outstanding value wheated.",rating:85,tags:["wheated","value"],created_at:"2024-03-15"},
    {id:"b5",user_id:"u1",name:"Four Roses LE Small Batch",distillery:"Four Roses",proof:112.4,age:null,type:"Small Batch",msrp:150,paid:145,market_value:400,bottles:1,sealed:true,vintage:"2023",notes:"Complex and layered. Best LE of the year.",rating:95,tags:["limited","small-batch"],created_at:"2024-04-02"},
    {id:"b6",user_id:"u1",name:"George T. Stagg",distillery:"Buffalo Trace",proof:130.4,age:null,type:"Straight Bourbon",msrp:100,paid:99,market_value:800,bottles:1,sealed:true,vintage:"2022",notes:"Monster proof. Incredible depth.",rating:97,tags:["BTAC","high-proof"],created_at:"2024-04-20"},
  ],
  u2:[
    {id:"b7",user_id:"u2",name:"Michter's 10 Year",distillery:"Michter's",proof:94.4,age:10,type:"Single Barrel",msrp:160,paid:155,market_value:380,bottles:1,sealed:true,vintage:"2023",notes:"Elegantly balanced.",rating:92,tags:["single-barrel","aged"],created_at:"2024-01-20"},
    {id:"b8",user_id:"u2",name:"Wild Turkey Rare Breed",distillery:"Wild Turkey",proof:116.8,age:null,type:"Straight Bourbon",msrp:40,paid:39,market_value:55,bottles:2,sealed:false,vintage:"2024",notes:"Punchy and bold.",rating:87,tags:["high-proof"],created_at:"2024-02-15"},
  ]
};
const DEFAULT_WISHLIST = {
  u1:[
    {id:"w1",user_id:"u1",name:"Pappy Van Winkle 20 Year",distillery:"Buffalo Trace",type:"Wheated",msrp:230,target_price:1800,priority:"high",notes:"Dream bottle."},
    {id:"w2",user_id:"u1",name:"William Larue Weller",distillery:"Buffalo Trace",type:"Wheated",msrp:90,target_price:350,priority:"high",notes:"BTAC white whale."},
    {id:"w3",user_id:"u1",name:"Elmer T. Lee",distillery:"Buffalo Trace",type:"Single Barrel",msrp:40,target_price:120,priority:"medium",notes:"Would love one someday."},
  ],
  u2:[]
};
const MARKET_DATA = [
  {id:"m1",name:"Pappy Van Winkle 15 Year",distillery:"Buffalo Trace",proof:107,age:15,type:"Wheated",vintage:"2022",price:1800,msrp:130,seller:"BourbonHunter_KY",verified:true},
  {id:"m2",name:"George T. Stagg 2021",distillery:"Buffalo Trace",proof:131.8,type:"Straight Bourbon",vintage:"2021",price:750,msrp:100,seller:"CaskCollector",verified:true},
  {id:"m3",name:"Four Roses LE Small Batch 2022",distillery:"Four Roses",proof:108.1,type:"Small Batch",vintage:"2022",price:380,msrp:150,seller:"WhiskeyVault88",verified:false},
  {id:"m4",name:"Blanton's Straight from the Barrel",distillery:"Buffalo Trace",proof:128.8,type:"Single Barrel",vintage:"2023",price:320,msrp:120,seller:"AllocatedOnly",verified:true},
  {id:"m5",name:"Michter's 25 Year",distillery:"Michter's",proof:116,age:25,type:"Single Barrel",vintage:"2020",price:5500,msrp:1000,seller:"RareFinds_TN",verified:true},
  {id:"m6",name:"Wild Turkey Master's Keep Revival",distillery:"Wild Turkey",proof:101,type:"Straight Bourbon",vintage:"2023",price:175,msrp:130,seller:"BourbaholicsAnon",verified:false},
];
let COMMUNITY_DATA = [
  {id:"c1",bourbon:"Pappy Van Winkle 23 Year",distillery:"Buffalo Trace",user:"BourbonSage",date:"2024-04-15",rating:98,nose:"Dried fruit, leather, caramel, vanilla oak.",palate:"Silky and full. Dark cherry, baking spice, maple syrup.",finish:"Endless. Oak tannins with lingering honey sweetness.",overall:"The pinnacle of American whiskey."},
  {id:"c2",bourbon:"George T. Stagg",distillery:"Buffalo Trace",user:"CaskMaster",date:"2024-04-10",rating:96,nose:"Intense vanilla, dark chocolate, cherry bomb.",palate:"Huge and chewy. Rye spice, cocoa nibs, dried berries.",finish:"Long, warming. Proof evident but not harsh.",overall:"The undisputed king of high-proof bourbon."},
  {id:"c3",bourbon:"Four Roses LE Small Batch 2023",distillery:"Four Roses",user:"MashBillMaven",date:"2024-04-08",rating:94,nose:"Peach, apricot, cinnamon, toasted oak.",palate:"Fruit-forward yet structured. Stone fruit, honey, spice.",finish:"Medium-long with lingering fruit and nuttiness.",overall:"Four Roses delivers again. A must-buy."},
  {id:"c4",bourbon:"Blanton's Single Barrel",distillery:"Buffalo Trace",user:"AllocatedAndHappy",date:"2024-04-05",rating:88,nose:"Corn sweetness, vanilla, light oak, citrus.",palate:"Balanced. Caramel, light spice, butterscotch.",finish:"Medium with pleasant warmth and vanilla.",overall:"The OG single barrel. Still earns its place."},
];

// ── STATE ─────────────────────────────────────────────────────────────────────
let currentUser = null;
let currentTab = 'cellar';
let searchVal = '';
let typeFilter = 'all';
let sealFilter = 'all';
let sortVal = 'name';
let showProfile = false;
let activeModal = null; // null | 'add' | 'detail' | 'scan' | 'taste' | 'addwish'
let selectedBottle = null;
let scanPrefill = null;
let addingWish = false;
let cameraStream = null;
let authTab = 'signin';
let scoreVal = 88;
let tasteScoreVal = 88;
let sealedVal = true;
let wishPriVal = 'medium';
let scanTab = 'label';
let scanStatus = 'idle'; // idle | requesting | active | scanning | result | error
let scanResult = null;
let scanErrMsg = '';

function loadUserData(uid) {
  try {
    const b = localStorage.getItem('bb_b_'+uid);
    if (!b) localStorage.setItem('bb_b_'+uid, JSON.stringify(DEFAULT_BOTTLES[uid]||[]));
  } catch(e) {}
  try {
    const w = localStorage.getItem('bb_w_'+uid);
    if (!w) localStorage.setItem('bb_w_'+uid, JSON.stringify(DEFAULT_WISHLIST[uid]||[]));
  } catch(e) {}
}
function getBottles(uid) {
  try { return JSON.parse(localStorage.getItem('bb_b_'+uid)||'[]'); } catch { return DEFAULT_BOTTLES[uid]||[]; }
}
function saveBottles(uid, arr) {
  try { localStorage.setItem('bb_b_'+uid, JSON.stringify(arr)); } catch {}
}
function getWishlist(uid) {
  try { return JSON.parse(localStorage.getItem('bb_w_'+uid)||'[]'); } catch { return DEFAULT_WISHLIST[uid]||[]; }
}
function saveWishlist(uid, arr) {
  try { localStorage.setItem('bb_w_'+uid, JSON.stringify(arr)); } catch {}
}

// ── RENDER ────────────────────────────────────────────────────────────────────
function render() {
  const app = document.getElementById('app');
  if (!currentUser) {
    app.innerHTML = renderAuth();
  } else {
    app.innerHTML = renderApp();
  }
  bindEvents();
}

// ── AUTH ──────────────────────────────────────────────────────────────────────
function renderAuth() {
  return `
  <div id="auth">
    <div class="auth-box">
      <div class="auth-logo">
        <span class="barrel">🥃</span>
        <h1>BarrelBook</h1>
        <p>bourbon-tracker.com</p>
      </div>
      <div class="auth-tabs">
        <button class="auth-tab${authTab==='signin'?' active':''}" onclick="setAuthTab('signin')">Sign In</button>
        <button class="auth-tab${authTab==='signup'?' active':''}" onclick="setAuthTab('signup')">Create Account</button>
      </div>
      <div id="auth-error" class="auth-error"></div>
      ${authTab==='signup'?`<div class="auth-field"><label>Your Name</label><input id="auth-name" type="text" placeholder="e.g. Jack Danielson" autocomplete="name"></div>`:''}
      <div class="auth-field"><label>Email</label><input id="auth-email" type="email" placeholder="you@example.com" autocomplete="email" onkeydown="if(event.key==='Enter')authSubmit()"></div>
      <div class="auth-field"><label>Password</label><input id="auth-pw" type="password" placeholder="••••••••" autocomplete="current-password" onkeydown="if(event.key==='Enter')authSubmit()"></div>
      <button class="auth-btn" onclick="authSubmit()">${authTab==='signin'?'Sign In →':'Create Account →'}</button>
      <div class="auth-demo">
        <div class="auth-demo-label">Demo Accounts</div>
        <div class="auth-demo-btns">
          <button class="auth-demo-btn" onclick="fillDemo('jack@bourbon.com','bourbon1')">🥃 Jack<br><span style="opacity:.6;font-size:12px">bourbon1</span></button>
          <button class="auth-demo-btn" onclick="fillDemo('mary@bourbon.com','bourbon2')">🌾 Mary<br><span style="opacity:.6;font-size:12px">bourbon2</span></button>
        </div>
      </div>
    </div>
  </div>`;
}

function setAuthTab(t) { authTab=t; render(); }
function fillDemo(e,p) { authTab='signin'; render(); setTimeout(()=>{ document.getElementById('auth-email').value=e; document.getElementById('auth-pw').value=p; },10); }
function authSubmit() {
  const email = document.getElementById('auth-email').value.trim();
  const pw = document.getElementById('auth-pw').value;
  const errEl = document.getElementById('auth-error');
  errEl.className='auth-error'; errEl.textContent='';
  if (authTab==='signin') {
    const u = USERS.find(u=>u.email===email&&u.password===pw);
    if (u) { currentUser=u; loadUserData(u.id); render(); }
    else { errEl.textContent='Invalid email or password.'; errEl.className='auth-error show'; }
  } else {
    const name = document.getElementById('auth-name')?.value.trim()||'';
    if (!name||!email||!pw) { errEl.textContent='All fields required.'; errEl.className='auth-error show'; return; }
    if (pw.length<6) { errEl.textContent='Password must be at least 6 characters.'; errEl.className='auth-error show'; return; }
    const nu = {id:'u_'+Date.now(),email,password:pw,name,avatar:'🥃'};
    USERS.push(nu); currentUser=nu; loadUserData(nu.id); render();
  }
}

// ── APP SHELL ─────────────────────────────────────────────────────────────────
function renderApp() {
  const myBottles = getBottles(currentUser.id);
  const myWish = getWishlist(currentUser.id);
  const totalVal = myBottles.reduce((s,b)=>(b.market_value||0)*(b.bottles||1)+s,0);
  const totalPaid = myBottles.reduce((s,b)=>(b.paid||0)*(b.bottles||1)+s,0);
  const gain = totalVal-totalPaid;
  const avgScore = myBottles.length?Math.round(myBottles.reduce((s,b)=>s+(b.rating||0),0)/myBottles.length):0;
  const sealedCt = myBottles.filter(b=>b.sealed).length;
  const totalBottles = myBottles.reduce((s,b)=>s+(b.bottles||1),0);

  return `
  <div class="app" onclick="handleAppClick(event)">
    <header class="header">
      <div class="header-inner">
        <div class="logo">BarrelBook<small>bourbon-tracker.com</small></div>
        <nav class="nav">
          ${[{id:'cellar',l:'🥃 My Cellar'},{id:'wishlist',l:'🎯 Wish List'},{id:'market',l:'🏪 Market'},{id:'community',l:'🌎 Community'}].map(n=>`
          <button class="nav-btn${currentTab===n.id?' active':''}" onclick="setTab('${n.id}')">${n.l}</button>`).join('')}
        </nav>
        <div class="header-right">
          <button class="scan-btn" onclick="openScan()">📷 Scan</button>
          <div style="position:relative">
            <button class="avatar-btn" onclick="toggleProfile(event)">${currentUser.avatar}</button>
            ${showProfile?`<div class="profile-panel" onclick="event.stopPropagation()">
              <div class="pp-avatar">${currentUser.avatar}</div>
              <div class="pp-name">${esc(currentUser.name)}</div>
              <div class="pp-email">${esc(currentUser.email)}</div>
              <div class="pp-stats">
                ${[['Bottles',totalBottles],['Sealed',sealedCt],['Open',totalBottles-sealedCt],['Avg',avgScore||'—']].map(([l,v])=>`<div class="pp-stat"><div class="pp-stat-val">${v}</div><div class="pp-stat-lbl">${l}</div></div>`).join('')}
              </div>
              <button class="signout-btn" onclick="signOut()">Sign Out</button>
            </div>`:''}
          </div>
        </div>
      </div>
    </header>
    <main class="main">
      ${currentTab==='cellar'?renderCellar(myBottles,totalBottles,totalVal,gain,sealedCt,avgScore):''}
      ${currentTab==='wishlist'?renderWishlist(myWish):''}
      ${currentTab==='market'?renderMarket(myWish):''}
      ${currentTab==='community'?renderCommunity():''}
    </main>
    ${activeModal?renderModal():''}
  </div>`;
}

// ── CELLAR ────────────────────────────────────────────────────────────────────
function renderCellar(myBottles,totalBottles,totalVal,gain,sealedCt,avgScore) {
  const gainColor = gain>=0?'var(--open2)':'var(--red)';
  let displayed = myBottles.filter(b=>{
    if(searchVal&&!b.name.toLowerCase().includes(searchVal.toLowerCase())&&!(b.distillery||'').toLowerCase().includes(searchVal.toLowerCase()))return false;
    if(typeFilter!=='all'&&b.type!==typeFilter)return false;
    if(sealFilter==='sealed'&&!b.sealed)return false;
    if(sealFilter==='open'&&b.sealed)return false;
    return true;
  }).sort((a,b)=>{
    if(sortVal==='name')return a.name.localeCompare(b.name);
    if(sortVal==='rating')return(b.rating||0)-(a.rating||0);
    if(sortVal==='value')return(b.market_value||0)-(a.market_value||0);
    if(sortVal==='proof')return(b.proof||0)-(a.proof||0);
    return new Date(b.created_at)-new Date(a.created_at);
  });

  return `
  <div class="stats-bar">
    <div class="stat-card"><div class="stat-label">Total Bottles</div><div class="stat-val">${totalBottles}</div><div class="stat-sub">in collection</div></div>
    <div class="stat-card"><div class="stat-label">Est. Value</div><div class="stat-val">${f$(totalVal)}</div><div class="stat-sub">market value</div></div>
    <div class="stat-card"><div class="stat-label">${gain>=0?'Gain':'Loss'}</div><div class="stat-val" style="color:${gainColor}">${gain>=0?'+':''}${f$(gain)}</div><div class="stat-sub">${gain>=0?'▲':'▼'} from paid</div></div>
    <div class="stat-card"><div class="stat-label">Sealed</div><div class="stat-val">${sealedCt}</div><div class="stat-sub">${totalBottles-sealedCt} open</div></div>
    <div class="stat-card"><div class="stat-label">Avg Score</div><div class="stat-val">${avgScore||'—'}</div><div class="stat-sub">out of 100</div></div>
  </div>
  <div class="toolbar">
    <div class="search-wrap"><span class="search-icon">🔍</span><input class="search-input" placeholder="Search bottles…" value="${esc(searchVal)}" oninput="setSearch(this.value)"></div>
    <select class="filter-sel" onchange="setTypeFilter(this.value)">
      <option value="all"${typeFilter==='all'?' selected':''}>All Types</option>
      ${BOTTLE_TYPES.map(t=>`<option value="${t}"${typeFilter===t?' selected':''}>${t}</option>`).join('')}
    </select>
    <select class="filter-sel" onchange="setSealFilter(this.value)">
      <option value="all"${sealFilter==='all'?' selected':''}>All Conditions</option>
      <option value="sealed"${sealFilter==='sealed'?' selected':''}>Sealed Only</option>
      <option value="open"${sealFilter==='open'?' selected':''}>Open Only</option>
    </select>
    <select class="filter-sel" onchange="setSort(this.value)">
      <option value="name"${sortVal==='name'?' selected':''}>Sort: Name</option>
      <option value="rating"${sortVal==='rating'?' selected':''}>Sort: Score</option>
      <option value="value"${sortVal==='value'?' selected':''}>Sort: Value</option>
      <option value="proof"${sortVal==='proof'?' selected':''}>Sort: Proof</option>
      <option value="newest"${sortVal==='newest'?' selected':''}>Sort: Newest</option>
    </select>
    <button class="add-btn" onclick="openAdd()">+ Add Bottle</button>
  </div>
  ${displayed.length===0?`<div class="empty"><div class="empty-icon">🥃</div><h3>No bottles found</h3><p>Add your first bottle or adjust your filters.</p></div>`:`
  <div class="bottle-grid">
    ${displayed.map(b=>renderBottleCard(b)).join('')}
  </div>`}`;
}

function renderBottleCard(b) {
  const g=(b.market_value||0)-(b.paid||0);
  return `
  <div class="bottle-card" onclick="openDetail('${b.id}')">
    <div class="bc-top">
      <div class="bc-icon">${bi(b.type)}</div>
      <div class="bc-info">
        <div class="bc-name">${esc(b.name)}</div>
        <div class="bc-distillery">${esc(b.distillery||'Unknown Distillery')}</div>
        <div class="bc-badges">
          <span class="badge ${b.sealed?'badge-sealed':'badge-open'}" onclick="event.stopPropagation();toggleSeal('${b.id}')">${b.sealed?'🔒 Sealed':'🔓 Open'}</span>
          ${b.type?`<span class="badge badge-type">${esc(b.type)}</span>`:''}
        </div>
      </div>
    </div>
    <div class="bc-body">
      <div class="bc-meta">
        <div class="meta-item"><span class="meta-lbl">Proof</span><span class="meta-val">${b.proof?b.proof+'°':'—'}</span></div>
        <div class="meta-item"><span class="meta-lbl">Age</span><span class="meta-val">${b.age?b.age+' yr':'NAS'}</span></div>
        <div class="meta-item"><span class="meta-lbl">Vintage</span><span class="meta-val">${b.vintage||'—'}</span></div>
        <div class="meta-item"><span class="meta-lbl">Qty</span><span class="meta-val">${b.bottles||1}</span></div>
      </div>
      <div class="bc-footer">
        <div style="display:flex;align-items:center;gap:5px"><span class="score-big">${b.rating||'—'}</span>${b.rating?'<span style="color:var(--gold);font-size:13px">★</span>':''}</div>
        <div style="text-align:right"><div style="font-size:15px;font-weight:700;color:var(--cream)">${f$(b.market_value)}</div>${b.paid?`<div style="font-size:11px;color:${g>=0?'var(--open2)':'var(--red)'}">${g>=0?'+':''}${f$(g)}</div>`:''}</div>
      </div>
    </div>
  </div>`;
}

// ── WISHLIST ──────────────────────────────────────────────────────────────────
function renderWishlist(myWish) {
  return `
  <div class="section-heading">🎯 Wish List</div>
  <div class="section-sub">Bottles you're hunting — track targets before they hit your cellar.</div>
  <div class="toolbar">
    <div class="search-wrap" style="flex:1"><span class="search-icon">🔍</span><input class="search-input" placeholder="Search wish list…"></div>
    <button class="add-btn" onclick="openAddWish()">+ Add to Wish List</button>
  </div>
  ${myWish.length===0?`<div class="empty"><div class="empty-icon">🎯</div><h3>Wish list is empty</h3><p>Add bottles you're hunting to track them here.</p></div>`:`
  <div class="wish-list">
    ${myWish.map(w=>`
    <div class="wish-card">
      <div class="wish-icon">${bi(w.type)}</div>
      <div class="wish-info">
        <div class="wish-name">${esc(w.name)}</div>
        <div class="wish-detail">${esc(w.distillery||'')} · ${esc(w.type||'')}</div>
        ${w.notes?`<div class="wish-notes">${esc(w.notes)}</div>`:''}
      </div>
      <div class="wish-right">
        <div class="wish-target">${f$(w.target_price)}</div>
        <div class="wish-target-lbl">Target</div>
        <div><span class="wish-pri ${w.priority==='high'?'pri-h':w.priority==='medium'?'pri-m':'pri-l'}">${w.priority}</span></div>
      </div>
      <button class="remove-btn" onclick="removeWish('${w.id}')">✕</button>
    </div>`).join('')}
  </div>`}`;
}

// ── MARKET ────────────────────────────────────────────────────────────────────
function renderMarket(myWish) {
  return `
  <div class="section-heading">🏪 Bourbon Exchange</div>
  <div class="section-sub">Buy and trade rare bottles from verified collectors.</div>
  <div class="toolbar">
    <div class="search-wrap" style="flex:1"><span class="search-icon">🔍</span><input class="search-input" placeholder="Search market…"></div>
    <select class="filter-sel"><option>All Types</option>${BOTTLE_TYPES.map(t=>`<option>${t}</option>`).join('')}</select>
  </div>
  <div class="market-grid">
    ${MARKET_DATA.map(m=>`
    <div class="market-card">
      <div class="mc-img">${bi(m.type)}${m.verified?'<span class="mc-verified">✓ Verified</span>':''}</div>
      <div class="mc-body">
        <div class="mc-name">${esc(m.name)}</div>
        <div class="mc-seller">Listed by ${esc(m.seller)}</div>
        <div class="mc-details">
          ${m.proof?`<span class="mc-detail">${m.proof}°</span>`:''}
          ${m.age?`<span class="mc-detail">${m.age} yr</span>`:''}
          <span class="mc-detail">${esc(m.type)}</span>
          <span class="mc-detail">Sealed</span>
          ${m.vintage?`<span class="mc-detail">${m.vintage}</span>`:''}
        </div>
        <div class="mc-footer">
          <div><div class="mc-price">${f$(m.price)}</div><div class="mc-msrp">MSRP ${f$(m.msrp)}</div></div>
          <div class="mc-btns">
            <button class="mc-btn mc-watch" onclick="addToWishlistFromMarket('${m.id}')">♡</button>
            <button class="mc-btn mc-buy">Contact →</button>
          </div>
        </div>
      </div>
    </div>`).join('')}
  </div>`;
}

// ── COMMUNITY ─────────────────────────────────────────────────────────────────
function renderCommunity() {
  return `
  <div class="section-heading">🌎 Community Tasting Notes</div>
  <div class="section-sub">Real notes from bourbon enthusiasts across the country.</div>
  <div class="toolbar">
    <div class="search-wrap" style="flex:1"><span class="search-icon">🔍</span><input class="search-input" placeholder="Search notes…"></div>
  </div>
  <div class="community-list">
    ${COMMUNITY_DATA.map(c=>`
    <div class="cc-card">
      <div class="cc-hdr">
        <div><div class="cc-bottle">${esc(c.bourbon)}</div><div class="cc-dist">${esc(c.distillery)}</div></div>
        <div style="text-align:center"><div class="cc-score">${c.rating}</div><div class="cc-score-lbl">${scoreLabel(c.rating)}</div></div>
      </div>
      <div class="cc-meta">by ${esc(c.user)} · ${c.date}</div>
      <div class="cc-notes">
        ${[['🌸 Nose',c.nose],['👅 Palate',c.palate],['🌬️ Finish',c.finish],['⭐ Overall',c.overall]].filter(([,v])=>v).map(([l,v])=>`
        <div class="cc-note"><div class="cc-note-lbl">${l}</div><div class="cc-note-txt">${esc(v)}</div></div>`).join('')}
      </div>
    </div>`).join('')}
  </div>`;
}

// ── MODALS ────────────────────────────────────────────────────────────────────
function renderModal() {
  if (activeModal==='detail') return renderDetailModal();
  if (activeModal==='add') return renderAddModal();
  if (activeModal==='scan') return renderScanModal();
  if (activeModal==='taste') return renderTasteModal();
  if (activeModal==='addwish') return renderWishModal();
  return '';
}

function renderDetailModal() {
  const b = selectedBottle;
  if (!b) return '';
  const gain = (b.market_value||0)-(b.paid||0);
  const gainPct = b.paid?((gain/b.paid)*100).toFixed(1):0;
  return `
  <div class="overlay" onclick="overlayClick(event)">
    <div class="modal modal-wide" onclick="event.stopPropagation()">
      <div class="modal-hdr"><span class="modal-title">${bi(b.type)} ${esc(b.name)}</span><button class="close-btn" onclick="closeModal()">✕</button></div>
      <div class="modal-body">
        <div class="detail-hero">
          <div class="detail-icon">${bi(b.type)}</div>
          <div style="flex:1">
            <div class="detail-name">${esc(b.name)}</div>
            <div class="detail-dist">${esc(b.distillery||'')}</div>
            <div class="detail-badges">
              <span class="badge ${b.sealed?'badge-sealed':'badge-open'}">${b.sealed?'🔒 Sealed':'🔓 Open'}</span>
              ${b.type?`<span class="badge badge-type">${esc(b.type)}</span>`:''}
              ${b.vintage?`<span class="badge" style="background:var(--bg3);color:var(--cream2);border-color:var(--border)">${b.vintage}</span>`:''}
              ${(b.tags||[]).map(t=>`<span class="badge" style="background:var(--bg3);color:var(--text2);border-color:var(--border)">${esc(t)}</span>`).join('')}
            </div>
          </div>
          ${b.rating?`<div style="text-align:center;flex-shrink:0"><div style="font-family:var(--ff);font-size:46px;font-weight:700;color:var(--gold2);line-height:1">${b.rating}</div><div style="font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em">${scoreLabel(b.rating)}</div></div>`:''}
        </div>
        <div class="detail-grid">
          ${[['Proof',b.proof?b.proof+'°':'—'],['Age',b.age?b.age+' yr':'NAS'],['Bottles',b.bottles||1],['Status',b.status||'Collection'],['Type',b.type||'—'],['Vintage',b.vintage||'—']].map(([l,v])=>`
          <div class="detail-field"><div class="df-label">${l}</div><div class="df-val">${esc(String(v))}</div></div>`).join('')}
        </div>
        <div class="detail-sec">
          <div class="detail-sec-title">💰 Financial</div>
          ${[['MSRP',f$(b.msrp)],['Price Paid',f$(b.paid)],['Est. Market Value',f$(b.market_value)]].map(([l,v])=>`
          <div class="fin-row"><span class="fin-label">${l}</span><span class="fin-val">${v}</span></div>`).join('')}
          <div class="fin-row"><span class="fin-label">Unrealized Gain</span><span style="color:${gain>=0?'var(--open2)':'var(--red)'};font-weight:700">${gain>=0?'+':''}${f$(gain)} (${gain>=0?'+':''}${gainPct}%)</span></div>
        </div>
        ${b.notes?`<div class="detail-sec"><div class="detail-sec-title">📝 Notes</div><div class="notes-box">"${esc(b.notes)}"</div></div>`:''}
        <div class="detail-actions">
          <button class="detail-btn ${b.sealed?'btn-open-style':'btn-seal'}" onclick="toggleSealModal('${b.id}')">${b.sealed?'🔓 Mark as Open':'🔒 Mark as Sealed'}</button>
          <button class="detail-btn btn-note" onclick="openTaste('${b.id}')">✍️ Tasting Notes</button>
          <button class="detail-btn btn-del" onclick="deleteBottle('${b.id}')">🗑 Remove</button>
        </div>
      </div>
    </div>
  </div>`;
}

function renderAddModal() {
  const pf = scanPrefill||{};
  const tagsStr = Array.isArray(pf.tags)?pf.tags.join(', '):(pf.tags||'');
  const isScanned = !!pf._scanned;
  const typeOpts = BOTTLE_TYPES.map(t=>`<option value="${t}"${(pf.type||'Straight Bourbon')===t?' selected':''}>${t}</option>`).join('');
  return `
  <div class="overlay" onclick="overlayClick(event)">
    <div class="modal modal-wide" onclick="event.stopPropagation()">
      <div class="modal-hdr"><span class="modal-title">${isScanned?'📷 Confirm Scan':'+ Add Bottle'}</span><button class="close-btn" onclick="closeModal()">✕</button></div>
      <div class="modal-body">
        <div class="form-grid">
          ${isScanned?'<div class="scanned-banner">✓ Pre-filled from label scan — review and confirm below</div>':''}
          <div class="form-field fg-full"><label class="form-label">Bottle Name *</label><input class="form-input" id="f-name" value="${esc(pf.name||'')}" placeholder="e.g. Pappy Van Winkle 23 Year"></div>
          <div class="form-field"><label class="form-label">Distillery</label><input class="form-input" id="f-distillery" value="${esc(pf.distillery||'')}" placeholder="e.g. Buffalo Trace"></div>
          <div class="form-field"><label class="form-label">Type</label><select class="form-sel" id="f-type">${typeOpts}</select></div>
          <div class="form-field"><label class="form-label">Proof</label><input class="form-input" id="f-proof" type="number" value="${pf.proof||''}" placeholder="e.g. 95.6"></div>
          <div class="form-field"><label class="form-label">Age (years)</label><input class="form-input" id="f-age" type="number" value="${pf.age||''}" placeholder="Blank for NAS"></div>
          <div class="form-field"><label class="form-label">Vintage</label><input class="form-input" id="f-vintage" value="${esc(pf.vintage||'')}" placeholder="e.g. 2023"></div>
          <div class="form-field"><label class="form-label">Qty</label><input class="form-input" id="f-bottles" type="number" min="1" value="${pf.bottles||1}"></div>
          <div class="form-field"><label class="form-label">MSRP ($)</label><input class="form-input" id="f-msrp" type="number" value="${pf.msrp||''}" placeholder="e.g. 65"></div>
          <div class="form-field"><label class="form-label">Price Paid ($)</label><input class="form-input" id="f-paid" type="number" value="${pf.paid||''}" placeholder="e.g. 65"></div>
          <div class="form-field"><label class="form-label">Market Value ($)</label><input class="form-input" id="f-mv" type="number" value="${pf.market_value||''}" placeholder="e.g. 180"></div>
          <div class="form-field"><label class="form-label">Tags</label><input class="form-input" id="f-tags" value="${esc(tagsStr)}" placeholder="allocated, unicorn (comma separated)"></div>
          <div class="form-field"><label class="form-label">UPC</label><input class="form-input" id="f-upc" value="${esc(pf.upc||'')}" placeholder="Barcode"></div>
          <div class="form-field fg-full"><label class="form-label">Notes</label><textarea class="form-ta" id="f-notes" placeholder="Personal notes…">${esc(pf.notes||'')}</textarea></div>
          <div class="fg-full"><label class="form-label" style="margin-bottom:9px">Condition</label>
            <div class="seal-toggle">
              <button class="seal-opt${sealedVal?' active-s':''}" onclick="setSealedVal(true)">🔒 Sealed</button>
              <button class="seal-opt${!sealedVal?' active-o':''}" onclick="setSealedVal(false)">🔓 Open</button>
            </div>
          </div>
          <div class="fg-full"><label class="form-label" style="margin-bottom:9px">My Score</label>
            ${renderScoreSlider(scoreVal,'setScoreVal')}
          </div>
        </div>
        <div class="form-actions">
          <button class="form-cancel" onclick="closeModal()">Cancel</button>
          <button class="form-submit" onclick="submitAddBottle()">Save Bottle →</button>
        </div>
      </div>
    </div>
  </div>`;
}

function renderScoreSlider(val, fn) {
  const pct=((val-70)/30)*100;
  return `
  <div class="score-wrap">
    <div class="score-display">${val} <span style="font-size:14px;color:var(--text2);font-family:var(--ffb)">${scoreLabel(val)}</span></div>
    <div class="score-track" id="score-track-${fn}" ontouchstart="startScoreDrag(event,'${fn}')" onmousedown="startScoreDrag(event,'${fn}')">
      <div class="score-fill" style="width:${pct}%"></div>
    </div>
    <div class="score-labels"><span>70</span><span>85</span><span>100</span></div>
  </div>`;
}

function renderTasteModal() {
  const b = selectedBottle;
  if (!b) return '';
  return `
  <div class="overlay" onclick="overlayClick(event)">
    <div class="modal" onclick="event.stopPropagation()">
      <div class="modal-hdr"><span class="modal-title">✍️ Tasting Notes</span><button class="close-btn" onclick="closeModal()">✕</button></div>
      <div class="modal-body">
        <div style="background:var(--bg3);border-radius:var(--r);padding:12px 15px;margin-bottom:17px;font-family:var(--ff);font-size:18px;color:var(--cream)">${bi(b.type)} ${esc(b.name)}</div>
        <div class="form-grid">
          <div class="fg-full"><label class="form-label" style="margin-bottom:9px">Score</label>${renderScoreSlider(tasteScoreVal,'setTasteScoreVal')}</div>
          ${[['t-nose','🌸 Nose','nose'],['t-palate','👅 Palate','palate'],['t-finish','🌬️ Finish','finish'],['t-overall','⭐ Overall','overall']].map(([id,label])=>`
          <div class="form-field fg-full"><label class="form-label">${label}</label><textarea class="form-ta" id="${id}" placeholder="Describe the ${id.split('-')[1]}…" style="min-height:60px"></textarea></div>`).join('')}
        </div>
        <div class="form-actions">
          <button class="form-cancel" onclick="closeModal()">Cancel</button>
          <button class="form-submit" onclick="submitTaste()">Save Notes →</button>
        </div>
      </div>
    </div>
  </div>`;
}

function renderWishModal() {
  const typeOpts = BOTTLE_TYPES.map(t=>`<option value="${t}">${t}</option>`).join('');
  return `
  <div class="overlay" onclick="overlayClick(event)">
    <div class="modal" onclick="event.stopPropagation()">
      <div class="modal-hdr"><span class="modal-title">🎯 Add to Wish List</span><button class="close-btn" onclick="closeModal()">✕</button></div>
      <div class="modal-body">
        <div class="form-grid">
          <div class="form-field fg-full"><label class="form-label">Bottle Name *</label><input class="form-input" id="w-name" placeholder="e.g. Pappy Van Winkle 20 Year"></div>
          <div class="form-field"><label class="form-label">Distillery</label><input class="form-input" id="w-distillery" placeholder="e.g. Buffalo Trace"></div>
          <div class="form-field"><label class="form-label">Type</label><select class="form-sel" id="w-type">${typeOpts}</select></div>
          <div class="form-field"><label class="form-label">MSRP ($)</label><input class="form-input" id="w-msrp" type="number" placeholder="e.g. 350"></div>
          <div class="form-field"><label class="form-label">Target Price ($)</label><input class="form-input" id="w-target" type="number" placeholder="Max you'd pay"></div>
          <div class="form-field fg-full"><label class="form-label">Priority</label>
            <select class="form-sel" id="w-priority">
              <option value="high">High — Actively hunting</option>
              <option value="medium" selected>Medium — Would buy if found</option>
              <option value="low">Low — Nice to have someday</option>
            </select>
          </div>
          <div class="form-field fg-full"><label class="form-label">Notes</label><textarea class="form-ta" id="w-notes" placeholder="Where to look, price limits…"></textarea></div>
        </div>
        <div class="form-actions">
          <button class="form-cancel" onclick="closeModal()">Cancel</button>
          <button class="form-submit" onclick="submitWish()">Add to Wish List →</button>
        </div>
      </div>
    </div>
  </div>`;
}

function renderScanModal() {
  return `
  <div class="overlay" onclick="overlayClick(event)">
    <div class="modal" onclick="event.stopPropagation()">
      <div class="modal-hdr"><span class="modal-title">📷 Scan Bottle</span><button class="close-btn" onclick="closeScan()">✕</button></div>
      <div class="modal-body">
        <div class="scan-tabs">
          <button class="scan-tab${scanTab==='label'?' active':''}" onclick="setScanTab('label')">🏷 AI Label Scan</button>
          <button class="scan-tab${scanTab==='barcode'?' active':''}" onclick="setScanTab('barcode')">▦ Barcode</button>
        </div>
        ${scanTab==='label'?renderLabelScan():renderBarcodeScan()}
      </div>
    </div>
  </div>`;
}

function renderLabelScan() {
  if (scanStatus==='idle'||scanStatus==='error') return `
    ${scanErrMsg?`<div style="background:#3a0808;border:1px solid var(--red);color:#f09090;padding:12px;border-radius:var(--r);font-size:14px;margin-bottom:12px">${esc(scanErrMsg)}</div>`:''}
    <button class="cam-btn" onclick="startCamera()">📷 Open Camera</button>
    <label class="upload-label">📁 Upload Label Photo<input type="file" accept="image/*" style="display:none" onchange="handleFileUpload(event)"></label>`;
  if (scanStatus==='requesting') return `<div class="spinner-wrap"><div class="spinner"></div><p>Requesting camera access…</p></div>`;
  if (scanStatus==='active') return `
    <div class="cam-wrap"><video id="cam-video" playsinline muted autoplay style="width:100%;height:100%;object-fit:cover"></video>
      <div class="scan-frame"><div class="scan-box"><div class="scan-line"></div><div class="scan-corner sc-tl"></div><div class="scan-corner sc-tr"></div><div class="scan-corner sc-bl"></div><div class="scan-corner sc-br"></div></div></div>
    </div>
    <div class="cam-status">Center the label in the frame</div>
    <button class="cam-btn" onclick="captureLabel()">🎯 Capture & Analyze</button>
    <button class="upload-label" onclick="stopCamera();setScanStatus('idle')">Cancel</button>`;
  if (scanStatus==='scanning') return `
    <div class="cam-wrap"><video id="cam-video" playsinline muted autoplay style="width:100%;height:100%;object-fit:cover"></video></div>
    <div class="spinner-wrap"><div class="spinner"></div><p>Analyzing with AI…</p></div>`;
  if (scanStatus==='result'&&scanResult) return `
    <div class="scan-result">
      <div class="scan-result-title">✓ Label Identified</div>
      <div class="scan-result-name">${esc(scanResult.name)}</div>
      <div class="scan-result-meta">${esc(scanResult.distillery||'')}${scanResult.proof?' · '+scanResult.proof+'°':''} · ${esc(scanResult.type||'')}</div>
      <span class="conf ${scanResult.confidence==='high'?'conf-h':scanResult.confidence==='medium'?'conf-m':'conf-l'}">${scanResult.confidence} confidence</span>
      ${scanResult.msrp?`<div style="font-size:13px;color:var(--text2);margin-bottom:10px">MSRP: ${f$(scanResult.msrp)} · Market: ~${f$(scanResult.market_value)}</div>`:''}
      <button class="use-btn" onclick="useScanResult()">+ Add to My Cellar →</button>
      <button style="margin-top:8px;width:100%;padding:11px;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text2);font-size:13px;cursor:pointer" onclick="setScanStatus('idle');scanResult=null;render()">Scan Again</button>
    </div>`;
  return '';
}

function renderBarcodeScan() {
  return `
  <div style="background:rgba(200,146,10,.08);border:1px solid rgba(200,146,10,.2);border-radius:var(--r);padding:14px;font-size:14px;color:var(--cream2);margin-bottom:14px">
    Uses the browser's BarcodeDetector API. Best on Chrome for Android or desktop.
  </div>
  <button class="cam-btn" onclick="startBarcodeCamera()">▦ Start Barcode Scanner</button>
  ${(scanStatus==='active'||scanStatus==='requesting')?`
    <div class="cam-wrap" style="margin-top:12px">
      <video id="cam-video" playsinline muted autoplay style="width:100%;height:100%;object-fit:cover"></video>
      <div class="scan-frame"><div class="scan-box"><div class="scan-line"></div><div class="scan-corner sc-tl"></div><div class="scan-corner sc-tr"></div><div class="scan-corner sc-bl"></div><div class="scan-corner sc-br"></div></div></div>
    </div>
    <div class="cam-status">Scanning automatically…</div>`:''}
  ${scanStatus==='result'&&scanResult?`<div class="scan-result" style="margin-top:12px">
    <div class="scan-result-title">✓ Barcode Detected</div>
    <div class="scan-result-name">${esc(scanResult.name)}</div>
    <button class="use-btn" style="margin-top:10px" onclick="useScanResult()">+ Add to Cellar →</button>
  </div>`:''}`;
}

// ── CAMERA / SCAN LOGIC ───────────────────────────────────────────────────────
async function startCamera() {
  setScanStatus('requesting');
  try {
    cameraStream = await navigator.mediaDevices.getUserMedia({video:{facingMode:'environment'}});
    setScanStatus('active');
    setTimeout(()=>{
      const v=document.getElementById('cam-video');
      if(v){v.srcObject=cameraStream;v.play();}
    },50);
  } catch(e) {
    scanErrMsg='Camera access denied. Try uploading a photo instead.';
    setScanStatus('error');
  }
}
function stopCamera() {
  if(cameraStream){cameraStream.getTracks().forEach(t=>t.stop());cameraStream=null;}
}
function closeScan() {
  stopCamera();
  activeModal=null;
  scanStatus='idle'; scanResult=null; scanErrMsg='';
  render();
}

async function captureLabel() {
  const v=document.getElementById('cam-video');
  if(!v)return;
  setScanStatus('scanning');
  setTimeout(()=>{
    const v2=document.getElementById('cam-video');
    if(v2&&cameraStream){v2.srcObject=cameraStream;}
  },50);
  const c=document.createElement('canvas');
  c.width=v.videoWidth||640; c.height=v.videoHeight||480;
  c.getContext('2d').drawImage(v,0,0);
  await analyzeImage(c.toDataURL('image/jpeg',.85).split(',')[1]);
}

async function handleFileUpload(e) {
  const f=e.target.files?.[0]; if(!f)return;
  setScanStatus('scanning');
  const r=new FileReader();
  r.onload=async ev=>await analyzeImage(ev.target.result.split(',')[1]);
  r.readAsDataURL(f);
}

async function analyzeImage(b64) {
  try {
    const res=await fetch('/api/analyze-label',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'claude-sonnet-4-20250514',max_tokens:800,messages:[{role:'user',content:[{type:'image',source:{type:'base64',media_type:'image/jpeg',data:b64}},{type:'text',text:'Analyze this bourbon bottle label. Respond ONLY with JSON: {"name":"","distillery":"","proof":null,"age":null,"type":"Straight Bourbon","msrp":null,"market_value":null,"vintage":null,"tags":[],"notes":"","confidence":"high|medium|low"}'}]}]})});
    if(!res.ok)throw new Error();
    const data=await res.json();
    scanResult=JSON.parse((data.content?.[0]?.text||'').replace(/```json|```/g,'').trim());
  } catch {
    scanResult={name:"Blanton's Original Single Barrel",distillery:"Buffalo Trace",proof:93,type:"Single Barrel",msrp:65,market_value:180,vintage:"2024",tags:["single-barrel"],notes:"Honey, citrus, vanilla.",confidence:"medium"};
  }
  setScanStatus('result');
}

async function startBarcodeCamera() {
  setScanStatus('requesting');
  try {
    cameraStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'environment'}});
    setScanStatus('active');
    setTimeout(()=>{
      const v=document.getElementById('cam-video');
      if(v){v.srcObject=cameraStream;v.play();}
    },50);
    if('BarcodeDetector' in window) {
      const bd=new BarcodeDetector({formats:['upc_a','upc_e','ean_13']});
      const loop=async()=>{
        if(!cameraStream)return;
        try{const v=document.getElementById('cam-video');if(v){const c=await bd.detect(v);if(c.length>0){stopCamera();scanResult={name:'UPC: '+c[0].rawValue,distillery:'',type:'Straight Bourbon',confidence:'medium',tags:[]};setScanStatus('result');return;}}}catch{}
        requestAnimationFrame(loop);
      };
      requestAnimationFrame(loop);
    }
  } catch{scanErrMsg='Camera denied.';setScanStatus('error');}
}

function useScanResult() {
  stopCamera();
  scanPrefill={...scanResult,_scanned:true};
  activeModal='add'; scanStatus='idle';
  render();
}
function setScanStatus(s){scanStatus=s;render();}
function setScanTab(t){scanTab=t;scanStatus='idle';scanResult=null;scanErrMsg='';stopCamera();render();}

// ── ACTION HANDLERS ───────────────────────────────────────────────────────────
function setTab(t){currentTab=t;render();}
function setSearch(v){searchVal=v;render();}
function setTypeFilter(v){typeFilter=v;render();}
function setSealFilter(v){sealFilter=v;render();}
function setSort(v){sortVal=v;render();}
function toggleProfile(e){e.stopPropagation();showProfile=!showProfile;render();}
function signOut(){currentUser=null;showProfile=false;activeModal=null;render();}
function handleAppClick(){if(showProfile){showProfile=false;render();}}
function overlayClick(e){if(e.target.classList.contains('overlay')){stopCamera();closeModal();}}
function closeModal(){activeModal=null;scanPrefill=null;render();}
function openAdd(){scanPrefill=null;sealedVal=true;scoreVal=88;activeModal='add';render();}
function openScan(){scanStatus='idle';scanResult=null;scanErrMsg='';scanTab='label';activeModal='scan';render();}
function openDetail(id){const b=getBottles(currentUser.id).find(x=>x.id===id);if(b){selectedBottle=b;activeModal='detail';render();}}
function openAddWish(){activeModal='addwish';render();}
function openTaste(id){const b=getBottles(currentUser.id).find(x=>x.id===id);if(!b)b=selectedBottle;if(b){selectedBottle=b;tasteScoreVal=88;activeModal='taste';render();}}
function setSealedVal(v){sealedVal=v;render();}

function toggleSeal(id) {
  const arr=getBottles(currentUser.id);
  const i=arr.findIndex(b=>b.id===id);
  if(i>=0){arr[i].sealed=!arr[i].sealed;saveBottles(currentUser.id,arr);if(selectedBottle&&selectedBottle.id===id)selectedBottle=arr[i];render();}
}
function toggleSealModal(id) {
  toggleSeal(id);
}
function deleteBottle(id) {
  if(!confirm('Remove this bottle from your collection?'))return;
  saveBottles(currentUser.id,getBottles(currentUser.id).filter(b=>b.id!==id));
  activeModal=null; render();
}
function removeWish(id) {
  saveWishlist(currentUser.id,getWishlist(currentUser.id).filter(w=>w.id!==id));
  render();
}
function addToWishlistFromMarket(id) {
  const m=MARKET_DATA.find(x=>x.id===id); if(!m)return;
  const arr=getWishlist(currentUser.id);
  arr.push({id:'w_'+Date.now(),user_id:currentUser.id,name:m.name,distillery:m.distillery,type:m.type,msrp:m.msrp,target_price:m.price,priority:'medium',notes:'From Market'});
  saveWishlist(currentUser.id,arr); render();
}

function submitAddBottle() {
  const name=document.getElementById('f-name').value.trim();
  if(!name){alert('Bottle name is required.');return;}
  const nb={
    id:'b_'+Date.now(), user_id:currentUser.id,
    name, distillery:document.getElementById('f-distillery').value.trim(),
    type:document.getElementById('f-type').value,
    proof:parseFloat(document.getElementById('f-proof').value)||null,
    age:parseInt(document.getElementById('f-age').value)||null,
    vintage:document.getElementById('f-vintage').value.trim(),
    bottles:parseInt(document.getElementById('f-bottles').value)||1,
    msrp:parseFloat(document.getElementById('f-msrp').value)||null,
    paid:parseFloat(document.getElementById('f-paid').value)||null,
    market_value:parseFloat(document.getElementById('f-mv').value)||null,
    tags:document.getElementById('f-tags').value.split(',').map(t=>t.trim()).filter(Boolean),
    upc:document.getElementById('f-upc').value.trim(),
    notes:document.getElementById('f-notes').value.trim(),
    sealed:sealedVal, rating:scoreVal, status:'collection',
    created_at:new Date().toISOString().split('T')[0]
  };
  const arr=getBottles(currentUser.id); arr.push(nb); saveBottles(currentUser.id,arr);
  activeModal=null; scanPrefill=null; render();
}

function submitTaste() {
  const note={
    id:'c_'+Date.now(), bourbon:selectedBottle.name, distillery:selectedBottle.distillery,
    user:currentUser.name, date:new Date().toISOString().split('T')[0],
    rating:tasteScoreVal,
    nose:document.getElementById('t-nose').value.trim(),
    palate:document.getElementById('t-palate').value.trim(),
    finish:document.getElementById('t-finish').value.trim(),
    overall:document.getElementById('t-overall').value.trim(),
  };
  COMMUNITY_DATA.unshift(note);
  activeModal=null; render();
}

function submitWish() {
  const name=document.getElementById('w-name').value.trim();
  if(!name){alert('Name is required.');return;}
  const arr=getWishlist(currentUser.id);
  arr.push({
    id:'w_'+Date.now(), user_id:currentUser.id, name,
    distillery:document.getElementById('w-distillery').value.trim(),
    type:document.getElementById('w-type').value,
    msrp:parseFloat(document.getElementById('w-msrp').value)||null,
    target_price:parseFloat(document.getElementById('w-target').value)||null,
    priority:document.getElementById('w-priority').value,
    notes:document.getElementById('w-notes').value.trim(),
  });
  saveWishlist(currentUser.id,arr); activeModal=null; render();
}

// ── SCORE SLIDER DRAG ─────────────────────────────────────────────────────────
function setScoreVal(v){scoreVal=v;document.querySelector('.score-track').parentElement.querySelector('.score-display').textContent=v+' ';document.querySelector('.score-fill').style.width=((v-70)/30*100)+'%';}
function setTasteScoreVal(v){tasteScoreVal=v;document.querySelector('.score-track').parentElement.querySelector('.score-display').textContent=v+' ';document.querySelector('.score-fill').style.width=((v-70)/30*100)+'%';}

function startScoreDrag(e, fnName) {
  e.preventDefault();
  const track = e.currentTarget;
  function calc(clientX) {
    const r=track.getBoundingClientRect();
    const val=Math.max(70,Math.min(100,Math.round(70+(clientX-r.left)/r.width*30)));
    if(fnName==='setScoreVal'){scoreVal=val;}else{tasteScoreVal=val;}
    // Update DOM directly without full re-render
    const disp=track.closest('.score-wrap').querySelector('.score-display');
    const fill=track.querySelector('.score-fill');
    if(disp)disp.innerHTML=val+' <span style="font-size:14px;color:var(--text2);font-family:var(--ffb)">'+scoreLabel(val)+'</span>';
    if(fill)fill.style.width=((val-70)/30*100)+'%';
  }
  calc(e.touches?e.touches[0].clientX:e.clientX);
  function move(ev){calc(ev.touches?ev.touches[0].clientX:ev.clientX);}
  function up(){document.removeEventListener('mousemove',move);document.removeEventListener('mouseup',up);document.removeEventListener('touchmove',move);document.removeEventListener('touchend',up);}
  document.addEventListener('mousemove',move);document.addEventListener('mouseup',up);
  document.addEventListener('touchmove',move,{passive:false});document.addEventListener('touchend',up);
}

// ── BIND EVENTS ───────────────────────────────────────────────────────────────
function bindEvents() {
  // Restore camera stream to video element after render
  if (cameraStream && (scanStatus==='active'||scanStatus==='scanning')) {
    const v=document.getElementById('cam-video');
    if(v){v.srcObject=cameraStream;v.play().catch(()=>{});}
  }
}

// ── INIT ──────────────────────────────────────────────────────────────────────
render();
</script>
</body>
</html>