:root {
  --purple: #7358c7;
  --purple-dark: #5f46ae;
  --purple-soft: #eee9ff;
  --text: #25242a;
  --muted: #88868f;
  --line: #ecebf0;
  --surface: #ffffff;
  --background: #f7f6f9;
  --danger: #b33e50;
  --shadow: 0 12px 34px rgba(35, 25, 75, .14);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--background);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); }
body { min-height: 100vh; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.entry-pending body { visibility: hidden; }

.app-shell {
  min-height: 100vh;
  background: var(--surface);
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 0 1px #efedf3;
}

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: env(safe-area-inset-top) 12px 0;
  background: var(--purple);
  color: white;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 {
  font-size: 1.25rem;
  margin: 0;
  flex: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions { display: flex; }
.icon-button, .plain-button, .drawer-close {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: white;
  font-size: 1.35rem;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-button:hover { background: rgba(255,255,255,.10); }
.menu-icon { font-size: 1.45rem; }
.plain-button, .drawer-close {
  font-size: 1.8rem;
  line-height: 1;
  padding: 4px 8px;
  color: var(--muted);
}

.list-content { padding-bottom: 112px; min-height: calc(100vh - 72px); }
.item-list { width: 100%; }
.item-row {
  min-height: 67px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 44px;
  gap: 9px;
  align-items: center;
  padding: 7px 14px 7px 12px;
  border-bottom: 1px solid var(--line);
  background: white;
  -webkit-user-select:none;
  user-select:none;
  touch-action:pan-y;
}
.item-row.long-press-active { background:#faf9fd; }
.category-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: var(--purple-soft);
  user-select: none;
}
.cat-produce { background:#e7f4df; }
.cat-bakery { background:#f7ead7; }
.cat-chilled { background:#e8f0fb; }
.cat-meat_fish { background:#f8e2e0; }
.cat-drinks { background:#e2f1f4; }
.cat-frozen { background:#e4effb; }
.cat-pantry { background:#f3e8d9; }
.cat-snacks { background:#f7e3ed; }
.cat-household { background:#eee9f8; }
.cat-cleaning { background:#dff3ef; }
.cat-drugstore { background:#f2e6f4; }
.cat-pet { background:#eee7dc; }
.cat-other { background:#eeeeef; }
.item-name-wrap { display:flex; align-items:center; gap:8px; min-width:0; }
.item-name { font-size: 1rem; line-height: 1.25; font-weight: 580; overflow-wrap:anywhere; min-width:0; }
.item-quantity { color: var(--purple); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.item-photo-button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:#f1eef8;
  color:var(--purple-dark);
  font-size:1rem;
  cursor:pointer;
}
.check-button {
  width: 31px;
  height: 31px;
  border: 2px solid #c7c4ce;
  background: white;
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  font-size: 1rem;
  padding:0;
}
.check-button.checked { border-color: var(--purple); background: var(--purple); }
.checked-section { margin-top: 16px; }
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px 8px;
  color:#7b7882;
}
.section-heading h2 { margin:0; font-size:1rem; font-weight:700; }
.section-heading span { font-size:.78rem; }
.checked-list .item-row { opacity:.62; min-height:60px; }
.checked-list .item-name { text-decoration:line-through; }
.checked-list .category-icon { filter:saturate(.55); }

.empty-state {
  text-align:center;
  color:var(--muted);
  padding:72px 20px;
}
.empty-basket {
  width:48px;
  height:48px;
  stroke:#aaa6b1;
  stroke-width:2.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.empty-state p { margin:10px 0 0; }
.entry-empty { padding-top:70px; }

.fab {
  position: fixed;
  right: max(20px, calc((100vw - 760px)/2 + 20px));
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  background: var(--purple);
  color: transparent;
  font-size: 0;
  line-height: 0;
  padding: 0;
  box-shadow: 0 8px 22px rgba(74,52,150,.28);
  cursor: pointer;
  z-index: 18;
}
.fab::before,
.fab::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.fab::before {
  width: 23px;
  height: 2.4px;
}
.fab::after {
  width: 2.4px;
  height: 23px;
}
.fab:active { transform: scale(.97); }

.drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - 760px)/2));
  width: min(84vw, 340px);
  background: white;
  transform: translateX(-18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  box-shadow: var(--shadow);
  padding: 18px;
}
.drawer.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.drawer-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 4px 20px;
  font-size:1.15rem;
}
.drawer-link {
  width:100%;
  display:block;
  text-align:left;
  border:0;
  background:transparent;
  text-decoration:none;
  color:var(--text);
  padding:14px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.drawer-link:hover { background:#f4f2f8; }
.danger-link { color:var(--danger); }
.backdrop {
  position:fixed;
  inset:0;
  border:0;
  padding:0;
  background:rgba(20,16,34,.30);
  z-index:45;
  cursor:default;
}

input {
  width:100%;
  border:1px solid #dcd9e5;
  background:white;
  border-radius:14px;
  padding:14px 15px;
  outline:none;
  color:var(--text);
}
input:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(115,88,199,.12); }
.field-label { display:block; font-weight:700; font-size:.9rem; margin-bottom:8px; }
.primary-button, .secondary-button {
  border:0;
  border-radius:14px;
  padding:13px 18px;
  font-weight:750;
  cursor:pointer;
}
.primary-button { background:var(--purple); color:white; }
.primary-button:hover { background:var(--purple-dark); }
.secondary-button { background:#f0eef5; color:var(--text); }
.full-width { width:100%; margin-top:12px; }
.form-error { color:var(--danger); font-size:.9rem; margin:10px 0 0; }
.optional { color:var(--muted); font-weight:500; }
.two-fields { display:grid; grid-template-columns:1fr 1.25fr; gap:12px; margin-top:14px; }

.edit-quantity-field { margin-top:14px; max-width:220px; }
.sheet-dialog, .center-dialog, .image-dialog { border:0; padding:0; background:transparent; }
.sheet-dialog::backdrop, .center-dialog::backdrop, .image-dialog::backdrop { background:rgba(25,20,40,.35); }
.sheet-dialog { margin:auto 0 0; width:100%; max-width:none; }
.sheet-card {
  width:min(100%,760px);
  margin:0 auto;
  background:white;
  border-radius:24px 24px 0 0;
  padding:12px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow);
}
.sheet-handle { width:42px; height:5px; border-radius:999px; background:#d6d3dc; margin:0 auto 16px; }
.sheet-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheet-title-row h2 { margin:0 0 18px; font-size:1.25rem; }
.center-dialog { width:min(calc(100% - 30px),500px); margin:auto; }
.dialog-card { background:white; border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.share-url-box {
  padding:12px;
  border-radius:12px;
  background:#f5f3f8;
  font-size:.82rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.share-actions { display:flex; gap:10px; margin-top:16px; }
.share-actions > button { flex:1; }

.photo-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.photo-action {
  min-height:52px;
  border:1px solid #e1ddea;
  border-radius:14px;
  background:#f8f7fb;
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  font-weight:650;
  cursor:pointer;
}
.photo-action-icon {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:2px solid var(--purple);
  color:var(--purple);
  border-radius:5px;
  line-height:1;
}
.camera-glyph { border-radius:7px; font-size:.6rem; }
.photo-preview {
  position:relative;
  margin-top:12px;
  width:100%;
  max-height:210px;
  border-radius:14px;
  overflow:hidden;
  background:#f2f0f5;
}
.photo-preview img { display:block; width:100%; max-height:210px; object-fit:contain; }
.remove-photo {
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(30,28,35,.72);
  color:white;
  font-size:1.4rem;
  cursor:pointer;
}
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.image-dialog {
  width:min(94vw,760px);
  max-width:760px;
  margin:auto;
  overflow:visible;
}
.image-dialog img {
  display:block;
  max-width:100%;
  max-height:86vh;
  margin:auto;
  border-radius:16px;
  background:#111;
}
.image-close {
  position:absolute;
  top:-14px;
  right:-4px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#26232c;
  color:transparent;
  font-size:0;
  line-height:0;
  padding:0;
  z-index:2;
  cursor:pointer;
}
.image-close::before,
.image-close::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transform-origin:center;
}
.image-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.image-close::after { transform:translate(-50%,-50%) rotate(-45deg); }

.toast {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:100px;
  transform:translateX(-50%);
  background:#2e2b35;
  color:white;
  padding:11px 16px;
  border-radius:999px;
  font-size:.9rem;
  box-shadow:var(--shadow);
  white-space:nowrap;
  max-width:90vw;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-content { padding:18px 14px 110px; }
.home-lists { display:grid; gap:10px; }
.saved-list {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  min-height:58px;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:white;
  text-decoration:none;
  color:var(--text);
  font-weight:650;
}
.saved-list small { color:var(--purple); font-size:1.45rem; font-weight:400; }

/* 404 page */
.landing-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.landing-card { width:min(100%,520px); background:white; border-radius:24px; padding:28px; box-shadow:var(--shadow); }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--purple); color:white; font-size:1.5rem; }
.landing-copy, .muted { color:var(--muted); }
.link-button { display:inline-block; text-decoration:none; }

@media (max-width: 520px) {
  .topbar { height:64px; }
  .list-content { min-height:calc(100vh - 64px); }
  .drawer { left:0; }
  .two-fields { grid-template-columns:1fr 1fr; }
}

/* v0.8: category is edited only by tapping the category icon. */
.category-icon {
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.category-icon:active { transform: scale(.96); }
.category-sheet { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.category-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.category-option {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #e4e1ea;
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  padding: 8px 11px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.category-option.selected {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(115,88,199,.10);
}
.category-option-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.12rem;
  background: rgba(255,255,255,.38);
}
.category-option-label {
  font-weight: 650;
  line-height: 1.15;
}
@media (max-width: 430px) {
  .category-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .category-option { padding: 7px 8px; gap: 8px; }
  .category-option-label { font-size: .9rem; }
}

/* v0.9: direct item editing and manual product mappings. */
.cat-dairy { background:#e6f1fb; }
.item-name-button {
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:8px 0;
  margin:-8px 0;
  text-align:left;
  cursor:pointer;
  font:inherit;
  font-weight:580;
  width:auto;
  max-width:100%;
}
.item-name-button:active { opacity:.68; }
select {
  width:100%;
  border:1px solid #dcd9e5;
  background:white;
  border-radius:14px;
  padding:14px 38px 14px 15px;
  outline:none;
  color:var(--text);
  font:inherit;
}
select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(115,88,199,.12); }
.edit-fields { margin-top:14px; }
.manual-category-options { margin-top:16px; }
.order-sheet { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.order-options { display:grid; gap:7px; }
.order-row {
  min-height:54px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding:5px 0;
}
.order-icon {
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.05rem;
}
.order-label { font-weight:650; }
.order-controls { display:flex; gap:6px; }
.order-button {
  width:38px;
  height:38px;
  border:1px solid #ddd9e7;
  border-radius:11px;
  background:#f8f7fb;
  color:var(--purple-dark);
  font-size:1.15rem;
  cursor:pointer;
}
.order-button:disabled { opacity:.28; cursor:default; }