:root {
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: #172033;
  background: #f4f6fa;
  line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; }
.app-shell { margin-left: 88px; min-height: 100vh; }
.settings-button { position: fixed; top: 14px; right: 16px; z-index: 80; display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #edf1f7; color: #2c3b54; box-shadow: 0 4px 14px rgba(18,33,60,.14); }
.settings-button:first-letter { font-size: 18px; }
.side-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: 88px;
  background: #0d1830; display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; padding: 18px 9px;
}
.nav-item { background: transparent; color: #aebbd4; padding: 12px 5px; display: grid; gap: 4px; place-items: center; }
.nav-item span { font-size: 25px; line-height: 1; }
.nav-item small { font-size: 11px; }
.nav-item.active { background: #2f66f6; color: white; }
.page-heading { background: #13213c; color: white; padding: 44px max(24px, calc((100vw - 1380px) / 2)); }
.page-heading h1 { margin-bottom: 5px; }
.page-heading p:last-child { margin-bottom: 0; color: #c6d0e3; }
.simple-page { max-width: 1200px; }
.search-overlay { position: fixed; inset: 0; z-index: 100; padding: 28px; overflow: auto; background: rgba(8,16,32,.72); backdrop-filter: blur(5px); }
.search-overlay-card { max-width: 1200px; min-height: 65vh; margin: 3vh auto; padding: 24px; border-radius: 18px; background: #f4f6fa; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.search-overlay-title { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.search-overlay-title .eyebrow { color: #4d6090; }
.settings-card { max-width: 720px; }
.voice-settings-form { display: grid; gap: 18px; margin-top: 26px; }
.voice-settings-form label { display: grid; gap: 8px; font-weight: 700; color: #34425d; }
.voice-settings-form select { width: 100%; border: 1px solid #bdc7d8; border-radius: 8px; padding: 11px; font: inherit; background: white; }
.voice-settings-form input[type="range"] { padding: 0; }
.voice-toggle { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.voice-toggle input { width: auto; }
.voice-settings-actions { display: flex; justify-content: flex-end; gap: 9px; }
.escape-button { display: flex; align-items: center; gap: 8px; background: #e1e7f1; color: #28354b; }
.escape-button kbd { padding: 3px 7px; border: 1px solid #aeb9cb; border-bottom-width: 2px; border-radius: 5px; background: white; font: 700 12px/1.2 inherit; }
.add-wishlist-button { background: #18854b; }
.search-product-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.search-stock, .search-recall { padding: 6px 9px; border-radius: 999px; font-size: 12px; text-decoration: none; }
.search-stock { background: #e3f2e8; color: #176333; }
.search-stock.empty-stock { background: #fff0d8; color: #8a4d00; }
.search-stock.unknown { background: #edf0f5; color: #58657b; }
.search-recall.none { background: #edf3ee; color: #4d6855; }
.search-recall.older { background: #fff0d8; color: #8a4d00; }
.search-recall.recent { background: #cf2637; color: white; font-weight: 800; animation: recall-pulse 1.35s ease-in-out infinite; }
.global-search { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: white; padding: 10px; border-radius: 15px; box-shadow: 0 8px 28px rgba(25,38,70,.1); }
.global-search > span { font-size: 28px; color: #64718a; padding-left: 9px; }
.global-search input { border: 0; outline: 0; font-size: 18px; min-width: 0; }
.search-suggestions { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 20; background: white; border: 1px solid #d8dfec; border-radius: 12px; box-shadow: 0 12px 30px rgba(20,35,65,.16); overflow: hidden; }
.search-suggestions button { width: 100%; border-radius: 0; background: white; color: #172033; display: flex; justify-content: space-between; text-align: left; border-bottom: 1px solid #edf0f5; }
.search-suggestions button:hover { background: #f2f5fb; }
.search-suggestions small { color: #68738a; }
.search-status { margin: 22px 0; padding: 16px; color: #68738a; background: #eef2f8; border-radius: 10px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 16px; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.recipe-card { padding: 19px; border-radius: 14px; background: white; box-shadow: 0 6px 22px rgba(25,38,70,.08); }
.recipe-card h3 { margin: 12px 0 7px; }.recipe-image-wrap { position: relative; min-height: 150px; }.recipe-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 9px; }.recipe-completion { --recipe-color: #d7463f; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, white 0 59%, transparent 61%), conic-gradient(var(--recipe-color) var(--recipe-progress), rgba(255,255,255,.88) 0); color: #1d2638; font-size: 12px; font-weight: 900; box-shadow: 0 2px 8px rgba(21,33,58,.25); }.recipe-completion.green { --recipe-color: #21a35a; }.recipe-completion.orange { --recipe-color: #ef941b; }.recipe-completion.red { --recipe-color: #dc4343; }.recipe-card p { color: #68738a; font-size: 13px; }.recipe-card strong { color: #176333; }.recipe-card small { display: block; margin-top: 11px; color: #58657b; }.recipe-card .button { margin-top: 14px; }
.recipe-sources { margin-top: 24px; }.recipe-source-links { display: flex; flex-wrap: wrap; gap: 9px; }.recipe-source-links a { padding: 8px 11px; border-radius: 999px; background: #edf2ff; color: #284fa1; font-weight: 700; text-decoration: none; }
.recipe-search { margin-bottom: 18px; }.recipe-search label { display: block; font-weight: 800; margin-bottom: 9px; }.recipe-search-row { display: flex; gap: 9px; }.recipe-search-row input { flex: 1; min-width: 0; }.recipe-search p { margin: 9px 0 0; color: #68738a; font-size: 13px; }.recipe-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.recipe-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: #e5f6e9; color: #176333; font-weight: 700; }.recipe-tag button { border: 0; background: transparent; color: inherit; padding: 0; min-width: auto; font-size: 18px; line-height: 1; cursor: pointer; }.recipe-stock-suggestions { margin-top: 7px; overflow: hidden; border: 1px solid #dce4f2; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(25,38,70,.10); }.recipe-stock-suggestions button { display: block; width: 100%; border: 0; border-bottom: 1px solid #edf0f5; padding: 10px 12px; text-align: left; background: white; cursor: pointer; }.recipe-stock-suggestions button:last-child { border-bottom: 0; }.recipe-stock-suggestions button:hover { background: #f4f8ff; }.recipe-stock-suggestions small { display: block; color: #68738a; margin-top: 2px; }
.recipe-buy-button { border: 0; border-radius: 7px; margin-left: 7px; padding: 2px 7px; background: #fff3e7; color: #a44c0a; font-size: 16px; font-weight: 800; cursor: pointer; vertical-align: middle; }.recipe-buy-button:hover { background: #ffe4ca; }.recipe-buy-items { margin: 14px 0 0; padding: 0; list-style: none; }.recipe-buy-items li { padding: 10px 2px; border-bottom: 1px solid #edf0f5; }.recipe-buy-items li::before { content: "•"; color: #f08a16; font-weight: 900; margin-right: 9px; }
.recipe-stock-line { color: #176333; }.recipe-stock-button { border: 0; border-radius: 7px; margin-left: 7px; padding: 2px 7px; background: #e5f6e9; color: #176333; font-size: 16px; font-weight: 800; cursor: pointer; vertical-align: middle; }.recipe-stock-button:hover { background: #ccefd6; }.recipe-buy-heading { color: #b85b0c !important; }.recipe-stock-items { margin: 14px 0 0; padding: 0; list-style: none; }.recipe-stock-items li { padding: 10px 2px; border-bottom: 1px solid #edf0f5; }.recipe-stock-items strong, .recipe-stock-items small { display: block; }.recipe-stock-items small { margin-top: 3px; color: #176333; }.recipe-stock-items li::before { content: "✓"; color: #21a35a; font-weight: 900; margin-right: 9px; float: left; }
.search-product-card { overflow: hidden; border-radius: 14px; background: white; box-shadow: 0 6px 22px rgba(25,38,70,.08); }
.search-product-card > img, .product-placeholder { width: 100%; height: 170px; object-fit: contain; background: #f1f4f9; display: grid; place-items: center; font-size: 42px; color: #a7b1c4; }
.product-card-body { padding: 17px; }
.product-card-body h3 { margin: 5px 0 8px; }
.product-card-body code { color: #58657b; }
.search-ean-barcode { margin: 12px 0 2px; padding: 8px 10px 4px; border: 1px solid #d8dfec; border-radius: 8px; background: #fff; }
.search-ean-barcode svg { display: block; width: 100%; height: 54px; color: #111827; }
.search-ean-barcode rect { fill: currentColor; }
.search-ean-barcode text { fill: currentColor; font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.product-card-body p { color: #68738a; margin: 9px 0; font-size: 13px; }
.product-card-body button { margin-top: 14px; width: 100%; }
.wishlist-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wishlist-card-actions button { width: auto; }
.wishlist-price { display: block; margin-top: 8px; color: #176333; font-size: 18px; }
.source-page-link { display: inline-block; margin-top: 8px; color: #2856b6; }
.product-info-row td, .product-info-line { background: #eef5ff; color: #32445f; }
.product-info-row td { padding: 9px 16px 12px 30px; }
.product-info-line { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px; border-radius: 9px; }
.info-logo { flex: 0 0 22px; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: #2f66f6; color: white; font-weight: 900; font-family: serif; animation: info-bounce 1.5s ease-in-out infinite; }
@keyframes info-bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.08); } }
textarea { width: 100%; resize: vertical; border: 1px solid #cbd4e4; border-radius: 9px; padding: 10px; font: inherit; }
.internal-product-fields { margin: 14px 0; padding: 14px; border: 1px solid #cbd4e4; border-radius: 10px; background: #f8faff; }
.internal-product-fields legend { padding: 0 6px; color: #2f66f6; font-weight: 800; }
.internal-product-fields p { color: #68738a; font-size: 13px; }
.qr-panel { background: white; padding: 20px; border-radius: 14px; margin-bottom: 22px; box-shadow: 0 6px 22px rgba(25,38,70,.08); }
.qr-actions { margin: 14px 0; }
.bluetooth-ready { display: inline-block; margin: 12px 0 2px; padding: 9px 12px; border-radius: 999px; background: #e5f4ea; color: #176333; font-weight: 700; }
.qr-reader { max-width: 520px; padding: 12px; background: #111a2d; color: white; border-radius: 12px; }
.qr-reader video { width: 100%; max-height: 380px; border-radius: 9px; background: #05080f; }
.qr-reader p { margin: 9px 0; }
.page-url-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
.page-url-form input { min-width: 0; border: 1px solid #cbd4e4; border-radius: 9px; padding: 11px; font: inherit; }
.page-preview { margin-top: 16px; }
header {
  background: #13213c;
  color: white;
  padding: 28px max(24px, calc((100vw - 1500px) / 2));
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(28px, 4vw, 44px); }
h2 { margin-bottom: 4px; }
.eyebrow { letter-spacing: .12em; font-size: 12px; opacity: .72; margin-bottom: 6px; }
.subtitle { margin-bottom: 0; opacity: .75; }
.mode-panel { text-align: right; }
.mode-panel > span { display: block; font-size: 13px; opacity: .75; margin-bottom: 8px; }
.mode-buttons { display: flex; gap: 8px; }
button, .button {
  border: 0;
  border-radius: 9px;
  padding: 11px 15px;
  background: #2f66f6;
  color: white;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { filter: brightness(.96); }
.mode-buttons button { background: rgba(255,255,255,.12); }
.mode-buttons button.active { background: white; color: #13213c; }
.secondary { background: #e7ecf6; color: #172033; }
.danger { background: #c33838; }
.hidden { display: none !important; }
main { max-width: 1500px; margin: 0 auto; padding: 24px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -45px; }
.cards article {
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 8px 28px rgba(25, 38, 70, .09);
}
.cards span { display: block; color: #657089; margin-bottom: 8px; }
.cards strong { display: block; font-size: 32px; }
.cards small { display: block; color: #68738a; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards .warning strong { color: #b45b00; }
.voice-card strong[data-state="listening"] { color: #17733c; }
.voice-card strong[data-state="model_missing"],
.voice-card strong[data-state="microphone_error"] { color: #aa341f; }
.scan-box, .panel {
  margin-top: 20px;
  background: white;
  border: 1px solid #e1e6ef;
  border-radius: 14px;
  padding: 20px;
}
.scan-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.scan-box p, .panel-title p, .voice-debug p { color: #68738a; margin-bottom: 0; }
.inline-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 12px; color: #4d5870; }
.inline-check input { width: auto; }
#scan-form, #voice-form { display: flex; gap: 8px; }
.produce-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.4fr) 105px 110px auto; gap: 8px; align-items: center; padding-top: 14px; border-top: 1px solid #e5eaf2; }
.produce-form div { display: grid; gap: 3px; color: #265d35; }
.produce-form small { color: #68738a; }
.produce-form select { border: 1px solid #bdc7d8; border-radius: 8px; padding: 11px 10px; font: inherit; background: white; }
.produce-form .produce-name-field { display: flex; padding: 0; border: 0; }
.produce-name-field input { border-radius: 8px 0 0 8px; }
.produce-name-field button { min-width: 46px; border-radius: 0 8px 8px 0; padding: 0; font-size: 21px; }
.produce-picker-modal { width: min(1000px, calc(100vw - 28px)); max-height: min(780px, calc(100vh - 28px)); padding: 22px; border: 0; border-radius: 18px; box-shadow: 0 22px 65px #15213d55; }
.produce-picker-modal::backdrop { background: #13213e88; }
.shopping-create form, .shopping-item-form { display: flex; gap: 8px; }
.shopping-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.shopping-manager { display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px; margin-top:16px; }.shopping-list-nav,.shopping-list-detail { background:white; border:1px solid #e1e6ef; border-radius:14px; padding:12px; }.shopping-list-nav button { width:100%; display:flex; align-items:center; gap:8px; text-align:left; margin-bottom:7px; background:#f6f8fc; color:#2a3851; }.shopping-list-nav button>span:nth-child(2) { display:grid; gap:3px; }.shopping-list-nav button>span:nth-child(2) small { display:block; color:#718097; }.shopping-list-nav button.active { background:#dceadf; color:#1f6332; }.shopping-list-nav button .shopping-delete-list { margin-left:auto; background:transparent; color:#b33; padding:2px 6px; }.shopping-list-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }.shopping-list-toolbar select { padding:8px; border:1px solid #bdc7d8; border-radius:8px; }.shopping-category-heading { margin:14px 0 4px; color:#4a7054; font-size:14px; }
.shopping-list { margin-top: 0; }
.shopping-list h2 { margin: 0; }.shopping-list p { color:#68738a; }.shopping-list ul { list-style:none; padding:0; }.shopping-list li { border-top:1px solid #edf0f4; padding:9px 0; }.shopping-list label { display:flex; gap:8px; align-items:center; }.shopping-list small { color:#68738a; }.shopping-list .purchased strong { text-decoration:line-through; color:#7b8797; }
.shopping-list-product { display:grid; grid-template-columns:auto 46px 1fr auto; gap:10px; align-items:center; }.shopping-list-product img,.shopping-product-placeholder { width:46px; height:46px; object-fit:contain; border:1px solid #e1e7ef; border-radius:9px; background:#f7f9fc; }.shopping-product-placeholder { display:grid; place-items:center; }.shopping-list-product div { display:grid; gap:3px; }.shopping-info-button { padding:6px 9px; border-radius:50%; background:#e9f1ff; color:#2759a5; }.shopping-item-modal-content { display:grid; gap:10px; }.shopping-item-modal-content>img { width:105px; height:105px; object-fit:contain; border:1px solid #e1e7ef; border-radius:10px; }.shopping-item-modal-content ul { padding-left:20px; color:#596579; }
.shopping-list-actions { display:flex; gap:5px; }.shopping-transfer-button { padding:6px 8px; background:#edf4ee; color:#246137; }
.shopping-delete-item { padding:6px 9px; background:#fff0f0; color:#b32424; }
.shopping-transfer-targets { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; margin:14px 0; }.shopping-transfer-target { display:grid; gap:3px; text-align:left; border:1px solid #dce5ef; background:#f8fafc; color:#35445d; }.shopping-transfer-target span { font-size:20px; }.shopping-transfer-target small { color:#718097; }.shopping-transfer-target.selected { border-color:#2e8a4a; background:#e5f4e8; color:#185b2c; box-shadow:0 0 0 2px #b9dfc1; }
.camera-scan-modal { width:min(560px,calc(100vw - 24px)); border:0; border-radius:18px; padding:18px; box-shadow:0 24px 70px #14213d77; }.camera-scan-modal::backdrop { background:#14213d99; }.camera-preview { position:relative; overflow:hidden; border-radius:14px; background:#101a2d; aspect-ratio:3/4; }.camera-preview video { width:100%; height:100%; object-fit:cover; }.camera-frame { position:absolute; inset:30% 8%; border:3px solid #72e095; border-radius:12px; box-shadow:0 0 0 200vmax #0005; }
.produce-picker-art { width: 98px; height: 72px; object-fit: contain; margin-left: auto; }
.produce-picker-search { display: flex; align-items: center; gap: 9px; margin: 14px 0 18px; padding: 0 12px; border: 1px solid #bdc7d8; border-radius: 10px; background: #fff; font-size: 21px; }
.produce-picker-search input { border: 0; outline: 0; font-size: 16px; }
.produce-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; overflow: auto; max-height: 560px; padding: 2px; }
.produce-picker-heading { grid-column: 1 / -1; margin: 13px 0 0; color: #406348; font-size: 15px; }
.produce-picker-item { display: grid; min-height: 104px; align-content: center; justify-items: center; gap: 7px; padding: 10px 7px; border: 1px solid #d9e5da; border-radius: 12px; color: #245331; background: linear-gradient(180deg, #fff, #f5faf4); font-weight: 700; text-align: center; }
.produce-picker-item:hover { border-color: #3c8d51; background: #e9f6e9; transform: translateY(-1px); }
.produce-picker-icon { font-size: 36px; line-height: 1; }
input {
  min-width: 0;
  width: 100%;
  border: 1px solid #bdc7d8;
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
}
#manual-barcode { width: min(420px, 42vw); }
#toast { grid-column: 1 / -1; min-height: 0; border-radius: 8px; }
#toast.show, #toast.error { padding: 10px 12px; background: #eef2f8; color: #34425d; border-left: 5px solid #6b7891; }
.recall-alert {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px;
  border: 2px solid #bd2028;
  border-radius: 10px;
  background: #fff0f0;
  color: #7b151b;
}
.recall-alert div { display: grid; gap: 4px; }
.recall-alert span { display: block; }
.recall-alert a {
  align-self: center;
  white-space: nowrap;
  color: white;
  background: #bd2028;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}
.recall-count {
  display: inline-block;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.recall-count.none { background: #edf0f5; color: #657089; }
.recall-count.older { background: #fff0d5; color: #8a5100; }
.recall-count.recent {
  background: #c8212b;
  color: white;
  box-shadow: 0 0 0 3px rgba(200, 33, 43, .13);
}
.voice-debug { display: grid; grid-template-columns: 1fr minmax(360px, .8fr); gap: 16px; align-items: center; }
.voice-debug code { background: #eef1f7; padding: 2px 5px; border-radius: 5px; }
.voice-last { grid-column: 1 / -1; background: #f5f7fb; border-radius: 8px; padding: 10px 12px; color: #4c5870; }
.layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(350px, 1fr); gap: 20px; }
.panel-title { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 16px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid #e7ebf2; text-align: left; }
th { font-size: 13px; color: #69748a; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f6f8fc; }
.category-row { cursor: default; }
.category-row:hover { background: inherit; }
.category-row td { border-bottom: 0; }
.category-level-1 td {
  padding: 14px 10px 8px;
  background: #e9effb;
  color: #1f417e;
  font-size: 15px;
  font-weight: 800;
}
.category-level-2 td {
  padding: 9px 10px 7px 24px;
  background: #f3f6fc;
  color: #3b557f;
  font-size: 13px;
  font-weight: 750;
}
.category-level-3 td {
  padding: 7px 10px 6px 40px;
  background: #fafbfe;
  color: #67748a;
  font-size: 12px;
  font-weight: 700;
}
.product-row td:first-child { padding-left: 26px; }
.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  background: #e6f5eb;
  color: #176333;
}
.badge.low { background: #fff0da; color: #915100; }
.history { display: grid; gap: 9px; max-height: 365px; overflow: auto; }
.history.compact { max-height: 260px; }
.history-item {
  padding: 11px;
  border: 1px solid #e5e9f1;
  border-radius: 9px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.history-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: #e8f7ed; color: #166032;
}
.history-icon.out { background: #fdebec; color: #9c222a; }
.history-main strong { display: block; }
.history-main small, .history-time { color: #748097; }
.voice-history-title { margin: 22px 0 10px; font-size: 16px; }
.voice-history-item { border-left: 3px solid #5881ed; padding: 7px 10px; background: #f7f8fc; }
.voice-history-item.error-row { border-left-color: #c84141; }
.voice-history-item strong, .voice-history-item small { display: block; }
.voice-history-item small { color: #748097; margin-top: 3px; }
dialog {
  border: 0;
  border-radius: 14px;
  width: min(560px, calc(100vw - 24px));
  box-shadow: 0 20px 80px rgba(0,0,0,.25);
}
dialog::backdrop { background: rgba(11, 20, 39, .55); }
#product-form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-title, .modal-actions { display: flex; align-items: center; gap: 10px; }
.modal-title { justify-content: space-between; }
.modal-title h2 { margin: 0; }
.modal-actions { margin-top: 8px; }
.modal-actions span { flex: 1; }
.icon { background: transparent; color: #172033; font-size: 25px; padding: 4px 9px; }
.empty { color: #748097; padding: 20px 0; }
@media (max-width: 1050px) {
  .cards { grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
  .layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; }
  .mode-panel { text-align: left; }
  .scan-box, .voice-debug { grid-template-columns: 1fr; }
  #scan-form, #voice-form { grid-column: 1; }
  .produce-form { grid-template-columns: 1fr 1fr; }
  #manual-barcode { width: 100%; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  #scan-form, #voice-form, .panel-title { flex-direction: column; }
  .produce-form { grid-template-columns: 1fr; }
  .produce-picker-grid { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Enrichissement EAN / données ouvertes ---- */
.cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ean-card strong { color: #2759cf; }
.open-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #f8fbff, #f2f6ff);
}
.open-data p { color: #5f6c84; margin-bottom: 0; max-width: 950px; }
.license-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.license-pills span {
  padding: 7px 10px;
  border-radius: 999px;
  background: white;
  border: 1px solid #cfd9ef;
  color: #334f8f;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.product-cell { display: flex; align-items: center; gap: 11px; min-width: 230px; }
.product-cell small { display: block; color: #748097; margin-top: 3px; }
.product-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 44px;
  border-radius: 8px;
  border: 1px solid #e0e6ef;
  background: white;
}
.product-thumb.placeholder { display: grid; place-items: center; color: #8290aa; background: #f2f5fa; }
.badge.neutral { background: #edf0f5; color: #596579; }
.badge.source { background: #eaf0ff; color: #234ea8; }
.badge.source a { color: inherit; text-decoration: none; }
.badge.source a:hover { text-decoration: underline; }
.barcode-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.barcode-row button { margin-bottom: 0; white-space: nowrap; }
.lookup-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 11px 12px;
  border: 1px solid #dce3ef;
}
.lookup-summary.muted { color: #657089; background: #f7f9fc; }
.lookup-summary.found { color: #164d2d; background: #edf8f1; border-color: #b9dfc5; }
.lookup-summary.error { color: #8e1d25; background: #fdebec; border-color: #efc1c5; }
.lookup-summary img { width: 58px; height: 58px; object-fit: contain; border-radius: 8px; background: white; }
.lookup-summary strong, .lookup-summary span, .lookup-summary small { display: block; }
.lookup-summary span { margin-top: 3px; }
.lookup-summary small { margin-top: 4px; opacity: .78; }
.price-comparison {
  border: 1px solid #d8dfec;
  border-radius: 10px;
  padding: 12px;
  background: #f8faff;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0;
}
.price-card {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #dce3ef;
  border-radius: 9px;
  color: #34425d;
  background: white;
  text-decoration: none;
}
.price-card.best { border-color: #55a36c; background: #edf8f1; }
.price-card span, .price-card small { color: #68738a; }
.price-card strong { font-size: 18px; }
.nutrition-analysis {
  border: 1px solid #d8dfec;
  border-radius: 10px;
  padding: 12px;
  background: #fbfcf8;
}
.nutrition-title { display: grid; gap: 9px; }
.nutrition-scores { display: flex; flex-wrap: wrap; gap: 7px; }
.nutrition-score {
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf0f5;
  color: #46536a;
  font-size: 12px;
  font-weight: 800;
}
.nutri-a, .eco-a { background: #d8f1df; color: #176333; }
.nutri-b, .eco-b { background: #e8f3d1; color: #4e6a16; }
.nutri-c, .eco-c { background: #fff2bd; color: #795b00; }
.nutri-d, .eco-d { background: #ffe0bd; color: #8a4600; }
.nutri-e, .eco-e { background: #f9cccc; color: #8e1d25; }
.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  margin: 12px 0;
  font-size: 13px;
}
.nutrition-grid span { color: #68738a; }
.nutrition-links { display: flex; gap: 12px; font-size: 13px; }
footer {
  margin: 24px 0 10px;
  padding: 15px 18px;
  color: #5f6c84;
  background: #eef2f8;
  border-radius: 10px;
  font-size: 13px;
}
@media (max-width: 1250px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { margin-left: 0; padding-bottom: 72px; }
  .settings-button { top: 10px; right: 10px; }
  .settings-button span { display: none; }
  .side-nav { inset: auto 0 0 0; width: auto; height: 68px; flex-direction: row; justify-content: space-around; padding: 6px; }
  .nav-item { flex: 1; padding: 6px; }
  .nav-item span { font-size: 20px; }
  .global-search { grid-template-columns: auto 1fr; }
  .global-search > button { grid-column: 1 / -1; }
  .page-url-form { grid-template-columns: 1fr; }
  .open-data { align-items: flex-start; flex-direction: column; }
  .license-pills { justify-content: flex-start; }
  .barcode-row { grid-template-columns: 1fr; }
  header h1,.page-heading h1 { font-size:28px; }.cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.cards article { padding:13px; }.scan-box { padding:14px; }.scan-box h2 { font-size:19px; } #scan-form { display:grid; grid-template-columns:1fr 1fr; } #scan-form input { grid-column:1/-1; } .shopping-manager { grid-template-columns:1fr; }.shopping-list-nav { display:flex; overflow:auto; gap:8px; padding:8px; }.shopping-list-nav button { min-width:145px; margin:0; }.shopping-list-product { grid-template-columns:auto 42px minmax(0,1fr); }.shopping-list-actions { grid-column:3; }.shopping-list-product img,.shopping-product-placeholder { width:42px;height:42px; }.recipe-grid { grid-template-columns:1fr; }.recipe-card { min-height:0; }.shopping-create form { flex-direction:column; }
}

.manual-links {
  border: 1px solid #d8dfec;
  border-radius: 10px;
  padding: 11px 12px;
  background: #f8f9fc;
}
.manual-links > strong, .manual-links > small { display: block; }
.manual-links > div { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0; }
.manual-link {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid #bfcbe3;
  background: white;
  color: #254c9b;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.manual-link:hover { background: #edf2ff; }
.manual-links small { color: #68738a; }