/* ============================================================
   Pantry — design system
   Apple-HIG inspired: system font stack, generous spacing,
   soft cards, semantic colour coding, light + dark themes.
   ============================================================ */

:root{
  --blue:#007AFF; --green:#34C759; --amber:#FF9500; --red:#FF3B30; --purple:#AF52DE; --teal:#30B8A6;
  --radius-lg:20px; --radius-md:16px; --radius-sm:12px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-theme="light"]{
  --bg:#F2F2F7; --bg-elevated:#FFFFFF; --card:#FFFFFF; --ink:#1C1C1E; --sub:#8E8E93;
  --line:#E5E5EA; --fill:#EDEDF2; --overlay:rgba(0,0,0,.35); --tabbar-bg:rgba(255,255,255,.92);
}
html[data-theme="dark"]{
  --bg:#000000; --bg-elevated:#1C1C1E; --card:#1C1C1E; --ink:#F2F2F7; --sub:#98989D;
  --line:#2C2C2E; --fill:#2C2C2E; --overlay:rgba(0,0,0,.6); --tabbar-bg:rgba(28,28,30,.86);
}
@media (prefers-color-scheme: dark){
  html[data-theme="system"]{
    --bg:#000000; --bg-elevated:#1C1C1E; --card:#1C1C1E; --ink:#F2F2F7; --sub:#98989D;
    --line:#2C2C2E; --fill:#2C2C2E; --overlay:rgba(0,0,0,.6); --tabbar-bg:rgba(28,28,30,.86);
  }
}
@media (prefers-color-scheme: light){
  html[data-theme="system"]{
    --bg:#F2F2F7; --bg-elevated:#FFFFFF; --card:#FFFFFF; --ink:#1C1C1E; --sub:#8E8E93;
    --line:#E5E5EA; --fill:#EDEDF2; --overlay:rgba(0,0,0,.35); --tabbar-bg:rgba(255,255,255,.92);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.02em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--blue); color:#fff; }

/* ---------------- App shell / layout ---------------- */
#app{
  max-width:600px; margin:0 auto; padding:calc(var(--safe-top) + 12px) 20px calc(84px + var(--safe-bottom) + 20px);
  min-height:100%;
}
.screen{ display:none; animation:fadeIn .25s ease; }
.screen.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin:8px 0 20px; }
.page-head h1{ font-size:30px; }
.page-eyebrow{ font-size:13px; font-weight:600; color:var(--sub); margin-bottom:2px; }

.avatar-btn{
  width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;border:none;
  font-weight:700;font-size:17px; display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-card);
}
.icon-btn{
  width:40px;height:40px;border-radius:50%;background:var(--fill);border:none;color:var(--ink);
  font-size:16px; display:flex;align-items:center;justify-content:center; flex:0 0 auto;
}

.section-row{ display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
.section-row h2{ font-size:20px; }
.link-btn{ background:none; border:none; color:var(--blue); font-weight:600; font-size:14px; padding:0; }

.hint-text{ font-size:13px; color:var(--sub); line-height:1.5; }
.hint-text.center{ text-align:center; }

/* ---------------- Dashboard ---------------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-card{
  background:var(--card); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:8px; min-height:84px; justify-content:center;
}
.stat-icon-dot{ width:28px;height:28px;border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; }
.stat-value{ font-size:24px; font-weight:800; }
.stat-label{ font-size:12px; font-weight:500; color:var(--sub); }

.hscroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; margin:0 -20px; padding-left:20px; padding-right:20px; scroll-snap-type:x proximity; }
.hscroll::-webkit-scrollbar{ display:none; }
.expiring-card{
  flex:0 0 auto; width:112px; background:var(--card); border-radius:var(--radius-md); padding:10px; box-shadow:var(--shadow-card);
  scroll-snap-align:start; text-align:left; border:none; color:inherit;
}
.expiring-thumb{ width:100%; height:64px; border-radius:var(--radius-sm); background:var(--fill); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:8px; overflow:hidden; }
.expiring-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm); }
.expiring-name{ font-size:12px; font-weight:700; display:block; }
.expiring-loc{ font-size:10px; color:var(--sub); display:block; margin:2px 0 8px; }

.banner-card{
  width:100%; text-align:left; border:none; background:#111214; color:#fff; border-radius:var(--radius-lg);
  padding:18px 20px; display:flex; align-items:center; justify-content:space-between; margin-top:20px;
}
html[data-theme="light"] .banner-card{ background:#111214; }
.banner-eyebrow{ font-size:12px; font-weight:600; color:#B9B9BE; margin-bottom:4px; }
.banner-title{ font-size:18px; font-weight:800; }
.banner-icon{ width:40px;height:40px;border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:18px; }

.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-stat{ background:var(--card); border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-card); }
.mini-stat-value{ font-size:20px; font-weight:800; }
.mini-stat-label{ font-size:11px; font-weight:500; color:var(--sub); margin-top:4px; }

/* ---------------- Search / filters ---------------- */
.search-row{ display:flex; gap:10px; margin-bottom:12px; }
.search-box{ flex:1; background:var(--fill); border-radius:var(--radius-sm); display:flex; align-items:center; padding:0 12px; height:42px; }
.search-icon{ color:var(--sub); margin-right:8px; font-size:15px; }
.search-box input{ border:none; background:none; outline:none; font-size:15px; flex:1; color:var(--ink); }

.chip-row{ display:flex; gap:8px; overflow-x:auto; margin:0 -20px 10px; padding:0 20px 2px; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; border:none; padding:8px 14px; border-radius:var(--radius-pill); background:var(--card);
  font-size:13px; font-weight:600; color:var(--ink); box-shadow:var(--shadow-card); white-space:nowrap;
}
.chip.active{ background:var(--ink); color:var(--bg); }
.chip-row-secondary .chip{ background:var(--fill); box-shadow:none; }
.chip-row-secondary .chip.active{ background:var(--blue); color:#fff; }

/* ---------------- Item list ---------------- */
.item-list{ display:flex; flex-direction:column; gap:10px; }
.item-row{
  position:relative; overflow:hidden; border-radius:var(--radius-md); background:var(--card); box-shadow:var(--shadow-card);
}
.item-row-inner{
  display:flex; align-items:center; gap:12px; padding:12px; background:var(--card); position:relative; z-index:1;
  transition:transform .18s ease;
}
.item-thumb{ width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:20px; flex:0 0 auto; overflow:hidden; }
.item-thumb img{ width:100%;height:100%;object-fit:cover; }
.item-main{ flex:1; min-width:0; }
.item-name{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-meta{ font-size:11px; color:var(--sub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-fav{ font-size:13px; margin-left:4px; }
.item-swipe-actions{ position:absolute; top:0; right:0; bottom:0; display:flex; z-index:0; }
.swipe-btn{ width:64px; border:none; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.swipe-edit{ background:var(--blue); }
.swipe-delete{ background:var(--red); }

.pill{ font-size:10px; font-weight:800; padding:4px 10px; border-radius:var(--radius-pill); color:#fff; white-space:nowrap; }
.pill-green{ background:var(--green); } .pill-amber{ background:var(--amber); } .pill-red{ background:var(--red); } .pill-gray{ background:var(--sub); }

.empty-state{ text-align:center; color:var(--sub); font-size:14px; padding:60px 20px; line-height:1.6; }

/* ---------------- Storage grid ---------------- */
.storage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.storage-card{ background:var(--card); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-card); border:none; text-align:left; color:inherit; }
.storage-icon{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:18px; margin-bottom:14px; }
.storage-name{ font-size:14px; font-weight:700; }
.storage-count{ font-size:11px; color:var(--sub); margin-top:2px; }

/* ---------------- Shopping list ---------------- */
.shop-section-title{ font-size:12px; font-weight:800; color:var(--sub); letter-spacing:.04em; margin:18px 0 8px; text-transform:uppercase; }
.shop-card{ background:var(--card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden; }
.shop-row{ display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--line); }
.shop-row:last-child{ border-bottom:none; }
.shop-check{ width:22px;height:22px;border-radius:50%; border:2px solid var(--line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:none; }
.shop-check.checked{ background:var(--green); border-color:var(--green); color:#fff; font-size:12px; }
.shop-name{ flex:1; font-size:14px; font-weight:600; }
.shop-name.checked{ color:var(--sub); text-decoration:line-through; }
.shop-tag{ font-size:9px; font-weight:800; padding:4px 8px; border-radius:var(--radius-pill); background:rgba(52,199,89,.15); color:var(--green); }
.shop-del{ background:none; border:none; color:var(--sub); font-size:16px; padding:2px 4px; }

.add-row{ display:flex; gap:10px; margin-top:16px; }
.add-row input{ flex:1; height:46px; border-radius:23px; border:none; background:var(--fill); padding:0 18px; font-size:14px; color:var(--ink); outline:none; }
.add-row-btn{ width:46px;height:46px;border-radius:50%; background:var(--blue); color:#fff; border:none; font-size:20px; flex:0 0 auto; }

/* ---------------- Recipes ---------------- */
.recipe-list{ display:flex; flex-direction:column; gap:12px; }
.recipe-card{ background:var(--card); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-card); }
.recipe-head{ display:flex; align-items:center; gap:12px; }
.recipe-emoji{ font-size:28px; width:48px;height:48px; border-radius:var(--radius-sm); background:var(--fill); display:flex; align-items:center; justify-content:center; }
.recipe-name{ font-size:16px; font-weight:800; }
.recipe-time{ font-size:11px; color:var(--sub); margin-top:2px; }
.recipe-why{ font-size:12px; color:var(--teal); font-weight:600; margin-top:10px; }
.recipe-steps{ font-size:13px; color:var(--sub); margin-top:8px; line-height:1.5; }
.recipe-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.recipe-tag{ font-size:10px; font-weight:700; padding:4px 8px; border-radius:var(--radius-pill); background:var(--fill); color:var(--ink); }
.recipe-tag.have{ background:rgba(52,199,89,.15); color:var(--green); }

/* ---------------- Cards / lists (settings, analytics) ---------------- */
.card{ background:var(--card); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-card); margin-bottom:14px; }
.card h3{ font-size:14px; margin-bottom:12px; }
.list-card{ padding:4px 18px; }
.list-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.list-row:last-child{ border-bottom:none; }
.list-row-btn{ width:100%; text-align:left; background:none; border:none; color:var(--blue); font-weight:600; }
.list-row-btn.danger{ color:var(--red); }
.simple-list .list-row{ font-weight:500; }

.segmented{ display:flex; background:var(--fill); border-radius:var(--radius-sm); padding:3px; gap:2px; }
.seg-btn{ border:none; background:none; padding:7px 12px; border-radius:9px; font-size:12px; font-weight:700; color:var(--sub); flex:1; }
.seg-btn.active{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }

.switch{ position:relative; width:50px; height:30px; display:inline-block; }
.switch input{ opacity:0; width:0; height:0; }
.switch-track{ position:absolute; inset:0; background:var(--line); border-radius:30px; transition:.2s; }
.switch-track::before{ content:""; position:absolute; width:26px;height:26px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .switch-track{ background:var(--green); }
.switch input:checked + .switch-track::before{ transform:translateX(20px); }

.tiny-input{ width:44px; text-align:center; border:none; background:var(--fill); border-radius:8px; height:32px; color:var(--ink); }

.progress-row{ display:flex; align-items:center; gap:12px; }
.progress-track{ flex:1; height:10px; border-radius:5px; background:var(--fill); overflow:hidden; }
.progress-fill{ height:100%; background:var(--green); border-radius:5px; transition:width .3s ease; }
#compliance-pct{ font-weight:800; font-size:14px; }

/* ---------------- Tab bar ---------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; height:calc(72px + var(--safe-bottom));
  background:var(--tabbar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-around;
  padding-top:8px; z-index:40;
}
.tab-btn{ background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--sub); font-size:10px; font-weight:600; width:64px; }
.tab-btn.active{ color:var(--blue); }
.tab-icon{ font-size:20px; }
.tab-fab{
  width:52px;height:52px;border-radius:50%; margin-top:-14px; border:none; color:#fff; font-size:26px;
  background:linear-gradient(135deg, var(--teal), var(--blue)); box-shadow:0 6px 16px rgba(0,122,255,.4);
  display:flex; align-items:center; justify-content:center;
}

/* ---------------- Sheets / modals ---------------- */
.scrim{ position:fixed; inset:0; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:45; }
.scrim.show{ opacity:1; pointer-events:auto; }
.sheet-overlay{ position:fixed; left:0; right:0; bottom:0; top:6%; z-index:50; display:flex; flex-direction:column; justify-content:flex-end; transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1); pointer-events:none; }
.sheet-overlay.show{ transform:translateY(0); pointer-events:auto; }
.sheet{
  background:var(--bg-elevated); border-radius:24px 24px 0 0; max-height:94vh; overflow-y:auto;
  padding-bottom:calc(24px + var(--safe-bottom)); box-shadow:0 -12px 40px rgba(0,0,0,.25);
}
.sheet-grab{ width:36px;height:5px;border-radius:3px; background:var(--line); margin:10px auto 4px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 20px 14px; }
.sheet-head h3{ font-size:16px; }
.text-btn{ background:none; border:none; color:var(--ink); font-size:15px; font-weight:500; padding:6px; }
.text-btn-primary{ color:var(--blue); font-weight:700; }

/* Scan sheet */
.scan-sheet{ position:relative; }
.mode-row{ display:flex; gap:8px; padding:14px 20px 6px; overflow-x:auto; }
.mode-btn{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--fill); border:none; border-radius:var(--radius-sm); padding:10px 16px; font-size:10px; font-weight:700; color:var(--ink); }
.mode-btn span{ font-size:18px; }
.mode-btn.active{ background:var(--green); color:#fff; }
.mode-panel{ padding:14px 20px 10px; }
.camera-wrap{ position:relative; background:#000; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; }
.camera-wrap video{ width:100%; height:100%; object-fit:cover; }
.scan-frame{ position:absolute; inset:20% 12%; border:3px solid var(--green); border-radius:18px; pointer-events:none; }
.camera-hint{ position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#fff; font-size:12px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.voice-wrap{ text-align:center; padding:20px 0 6px; }
.voice-mic{ width:84px;height:84px;border-radius:50%; border:none; background:linear-gradient(135deg,var(--teal),var(--blue)); color:#fff; font-size:32px; margin-bottom:16px; }
.voice-mic.recording{ animation:pulse 1.1s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(0,122,255,.5);} 70%{box-shadow:0 0 0 18px rgba(0,122,255,0);} 100%{box-shadow:0 0 0 0 rgba(0,122,255,0);} }
.voice-transcript{ margin-top:14px; font-size:14px; font-weight:600; min-height:20px; }
.receipt-drop{ display:flex; flex-direction:column; align-items:center; gap:8px; border:2px dashed var(--line); border-radius:var(--radius-lg); padding:36px 20px; text-align:center; }
.sheet-close{ position:absolute; top:14px; right:16px; width:32px;height:32px; border-radius:50%; background:var(--fill); border:none; font-size:14px; color:var(--ink); z-index:5; }

/* Editor sheet */
.editor-form{ padding:6px 20px 10px; display:flex; flex-direction:column; gap:14px; }
.photo-row{ display:flex; align-items:center; gap:14px; }
.photo-well{ width:84px;height:84px;border-radius:var(--radius-md); background:var(--fill); display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; color:var(--sub); font-weight:600; overflow:hidden; flex:0 0 auto; }
.photo-well img{ width:100%;height:100%;object-fit:cover; }
.fav-btn{ margin-left:auto; width:44px;height:44px;border-radius:50%; background:var(--fill); border:none; font-size:20px; color:var(--amber); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:700; color:var(--sub); }
.field input, .field select, .field textarea{
  border:none; background:var(--fill); border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; color:var(--ink); outline:none; width:100%;
}
.field textarea{ resize:vertical; font-family:inherit; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }

/* Detail sheet */
.detail-sheet{ padding-bottom:0; }
.detail-hero{ height:200px; background:linear-gradient(135deg, rgba(48,184,166,.18), rgba(0,122,255,.14)); border-radius:24px 24px 0 0; position:relative; display:flex; align-items:center; justify-content:center; font-size:56px; }
.detail-close, .detail-edit{ position:absolute; top:14px; width:36px;height:36px; border-radius:50%; background:rgba(255,255,255,.85); border:none; font-size:16px; font-weight:700; color:#1C1C1E; }
.detail-close{ left:16px; } .detail-edit{ right:16px; width:auto; padding:0 14px; font-size:13px; }
.detail-body{ padding:18px 20px calc(24px + var(--safe-bottom)); }
.detail-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.detail-title-row h2{ font-size:22px; }
.detail-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.fact-label{ font-size:10px; font-weight:800; color:var(--sub); letter-spacing:.03em; }
.fact-value{ font-size:13px; font-weight:700; margin-top:4px; }
.qty-stepper{ display:flex; align-items:center; gap:16px; margin:10px 0 20px; }
.qty-btn{ width:40px;height:40px;border-radius:var(--radius-sm); background:var(--fill); border:none; font-size:18px; color:var(--ink); }
#detail-qty-value{ font-size:16px; font-weight:800; min-width:56px; text-align:center; }
.detail-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.btn-secondary{ background:var(--fill); border:none; border-radius:var(--radius-pill); padding:14px; font-weight:700; font-size:13px; color:var(--ink); }
.btn-primary{ width:100%; margin-top:10px; background:linear-gradient(135deg,var(--teal),var(--blue)); border:none; border-radius:var(--radius-pill); padding:16px; font-weight:700; font-size:14px; color:#fff; }

/* Manage sheet */
.manage-sheet .simple-list .list-row{ padding:12px 0; }
.remove-x{ background:none; border:none; color:var(--red); font-size:16px; }

/* Toast */
.toast{
  position:fixed; top:calc(var(--safe-top) + 12px); left:50%; transform:translateX(-50%) translateY(-140%);
  background:#111214; color:#fff; padding:12px 20px; border-radius:var(--radius-pill); font-size:13px; font-weight:600;
  z-index:100; transition:transform .3s cubic-bezier(.32,.72,0,1); box-shadow:0 8px 24px rgba(0,0,0,.3); max-width:88vw; text-align:center;
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ---------------- Charts (pure SVG, no dependency) ---------------- */
.pc-bar-chart{ width:100%; height:auto; }
.pc-bar-chart .axis-label{ font-size:9px; fill:var(--sub); font-family:var(--font); }
.pc-bar-chart .value-label{ font-size:9px; fill:var(--ink); font-weight:700; font-family:var(--font); }

/* ---------------- Responsive: tablet / desktop web ---------------- */
@media (min-width:720px){
  #app{ max-width:920px; padding-left:32px; padding-right:32px; }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
  .storage-grid{ grid-template-columns:repeat(4,1fr); }
  .item-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .split-grid{ grid-template-columns:repeat(4,1fr); }
  .sheet-overlay{ align-items:center; justify-content:center; top:0; }
  .sheet{ max-width:440px; margin:0 auto; border-radius:24px; max-height:88vh; }
  .tabbar{ max-width:600px; left:50%; transform:translateX(-50%); border-radius:24px 24px 0 0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}