:root {
  --bg: #f5f4ef;
  --surface: #ffffff;
  --surface-2: #f1f0ea;
  --text: #171815;
  --muted: #6d7068;
  --line: #dedfd8;
  --accent: #1f5d47;
  --accent-soft: #e5f1ec;
  --danger: #a92b2b;
  --shadow: 0 18px 50px rgba(26, 31, 27, .12);
  --radius: 22px;
  font-family: Inter, "Noto Sans SC", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
img { display: block; max-width: 100%; }

.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(16px); background: rgba(245,244,239,.9); border-bottom: 1px solid rgba(222,223,216,.9); }
.header-inner { max-width: 1180px; margin: auto; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; min-width: 0; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--text); color: white; font-weight: 900; font-size: 21px; flex: 0 0 auto; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 540px; }
.header-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.primary-button, .secondary-button, .ghost-button { min-height: 42px; border-radius: 12px; padding: 9px 14px; font-weight: 800; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.primary-button { border: 1px solid var(--text); background: var(--text); color: white; }
.secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.ghost-button { border: 1px solid var(--line); background: transparent; color: var(--text); }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: wait; transform: none !important; }
.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 800; padding: 6px; cursor: pointer; }
.text-button.danger { color: var(--danger); }

.page-shell { max-width: 1180px; margin: auto; padding: 26px 20px 80px; }
.connection-panel { border: 1px solid #d1a94d; background: #fff8dc; border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.connection-panel p { margin: 4px 0 0; color: #6f5b2b; font-size: 13px; }
.connection-row { display: flex; gap: 8px; min-width: min(520px, 55vw); }
.connection-row input { flex: 1; min-width: 0; }

.hero-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 28px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 28px; align-items: end; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero-panel h1 { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.03; letter-spacing: -.045em; }
.hero-panel p:not(.eyebrow) { max-width: 720px; margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.hero-stats div { padding: 15px 10px; border-radius: 16px; background: var(--surface-2); text-align: center; }
.hero-stats strong, .hero-stats span { display: block; }
.hero-stats strong { font-size: 22px; }
.hero-stats span { color: var(--muted); font-size: 11px; margin-top: 2px; }

.control-panel { margin-top: 16px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(150px,.7fr) minmax(160px,.8fr) auto; gap: 11px; align-items: end; }
.control-panel label, .form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--text); padding: 10px 11px; outline: none; }
input, select { min-height: 43px; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.check-row { display: flex !important; align-items: center; gap: 8px !important; min-height: 43px; padding: 0 5px; }
.check-row input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.check-row.inline { align-self: end; }
.status-line { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 8px 4px 2px; color: var(--muted); font-size: 12px; }

.results { display: grid; gap: 20px; margin-top: 8px; }
.group-section { background: var(--surface); border: 1px solid var(--line); border-radius: 23px; overflow: hidden; }
.group-head { padding: 20px 22px 17px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.group-head h2 { margin: 0; font-size: 23px; }
.group-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.winner-copy { text-align: right; max-width: 380px; }
.winner-copy span { display: block; color: var(--muted); font-size: 11px; }
.winner-copy strong { display: block; font-size: 16px; margin: 2px 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.product-card { min-width: 0; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.product-card:nth-child(3n) { border-right: 0; }
.product-card:hover { background: #fcfbf8; }
.product-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 15px; background: var(--surface-2); cursor: pointer; }
.rank-line { color: var(--muted); font-size: 11px; font-weight: 900; }
.product-card h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.brand-line { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.price-row { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.price-row strong { font-size: 25px; letter-spacing: -.035em; }
.price-row span { color: var(--muted); text-align: right; font-size: 11px; }
.unit-price { font-size: 16px; font-weight: 900; }
.offer-meta { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.offer-meta strong { color: var(--text); }
.card-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-actions button { min-height: 40px; }
.stale-note { color: var(--danger); font-size: 11px; }
.empty-state { padding: 70px 20px; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--text); }

.floating-add { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 26; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--text); color: white; font-size: 30px; box-shadow: var(--shadow); cursor: pointer; }

.modal { width: min(1000px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.3); overflow: auto; }
.modal::backdrop { background: rgba(20,22,20,.58); backdrop-filter: blur(4px); }
.modal-close { position: sticky; z-index: 10; top: 10px; float: right; margin: 10px 10px 0 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.94); font-size: 24px; cursor: pointer; }
.modal-title { padding: 27px 28px 18px; border-bottom: 1px solid var(--line); }
.modal-title h2 { margin: 0; font-size: clamp(25px, 4vw, 36px); }
.modal-title p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); line-height: 1.6; }

.detail-hero { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 23px; padding: 26px; }
.detail-hero img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; background: var(--surface-2); }
.detail-hero h2 { margin: 7px 0 5px; font-size: clamp(26px, 4vw, 38px); line-height: 1.12; }
.detail-hero p { color: var(--muted); }
.detail-best { margin-top: 17px; padding: 15px; background: var(--accent-soft); border-radius: 15px; }
.detail-best span, .detail-best strong { display: block; }
.detail-best strong { margin: 4px 0; font-size: 23px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.detail-section { padding: 20px 26px 27px; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 12px; }
.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 12px; }
.price-table th, .price-table td { padding: 11px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table th { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.table-actions { display: flex; gap: 6px; }
.table-actions button { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.evidence-image { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

.entry-form { background: var(--surface); }
.import-box { margin: 18px 28px 0; padding: 15px; border-radius: 16px; background: var(--surface-2); display: grid; grid-template-columns: minmax(180px,.7fr) minmax(260px,1.3fr) auto; gap: 12px; align-items: center; }
.import-box p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.import-box textarea { min-height: 78px; }
.form-section { padding: 22px 28px; border-bottom: 1px solid var(--line); }
.form-section.compact { padding-top: 16px; padding-bottom: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-head > div { display: flex; align-items: center; gap: 9px; }
.section-head div > span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--text); color: white; font-weight: 900; }
.section-head h3 { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.form-grid label.wide { grid-column: span 2; }
.form-grid textarea { min-height: 85px; }
.image-picker-grid { display: grid; grid-template-columns: minmax(240px, 420px); gap: 12px; margin-top: 14px; }
.image-picker { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.image-picker input { padding: 8px; }
.image-preview { min-height: 160px; border: 1px dashed #b9bbb3; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--muted); cursor: pointer; outline: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.image-preview:hover, .image-preview:focus-visible, .image-preview.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(23, 109, 78, .12); }
.image-preview.is-dragover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.image-preview img { width: 100%; height: 210px; object-fit: cover; }
.image-empty { max-width: 300px; padding: 20px; display: grid; gap: 7px; text-align: center; font-weight: 700; }
.image-empty strong { color: var(--text); font-size: 14px; }
.image-empty small { color: var(--muted); font-size: 11px; line-height: 1.6; font-weight: 600; }
.calculation-preview { margin-top: 14px; padding: 13px 15px; border-radius: 13px; background: var(--accent-soft); font-weight: 800; }
.form-actions { position: sticky; bottom: 0; z-index: 5; padding: 15px 28px calc(15px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }
.form-feedback { min-height: 0; margin: 0; padding: 0 28px 18px; color: var(--accent); font-size: 13px; }

.history-list { padding: 16px 24px 28px; display: grid; gap: 10px; }
.history-item { border: 1px solid var(--line); border-radius: 14px; padding: 13px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.history-item strong, .history-item span { display: block; }
.history-item span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.history-item button { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 7px 10px; cursor: pointer; font-weight: 800; }

.toast-host { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(430px, calc(100vw - 28px)); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 12px 15px; border-radius: 12px; background: #171815; color: white; box-shadow: var(--shadow); font-size: 13px; animation: toast-in .2s ease; }
.toast.error { background: #8f2424; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 900px) {
  .hero-panel { grid-template-columns: 1fr; }
  .control-panel { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .product-card:nth-child(2n) { border-right: 0; }
  .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .import-box { grid-template-columns: 1fr; }
  .connection-panel { align-items: stretch; flex-direction: column; }
  .connection-row { min-width: 0; }
}
@media (max-width: 640px) {
  .header-inner { padding: 10px 12px; }
  .brand small { display: none; }
  .header-actions #openHistory { display: none; }
  .header-actions #openBatchImport { padding-inline: 9px; font-size: 12px; }
  .header-actions .primary-button { padding-inline: 11px; }
  .page-shell { padding: 14px 10px 74px; }
  .hero-panel { padding: 20px 17px; border-radius: 20px; }
  .hero-panel h1 { font-size: 35px; }
  .hero-stats { grid-template-columns: repeat(3,1fr); }
  .control-panel { grid-template-columns: 1fr; }
  .check-row { min-height: 34px; }
  .group-head { align-items: start; flex-direction: column; padding: 17px; }
  .winner-copy { text-align: left; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card, .product-card:nth-child(2n), .product-card:nth-child(3n) { border-right: 0; }
  .detail-hero { grid-template-columns: 1fr; padding: 18px; }
  .detail-section { padding: 18px; }
  .modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal-title { padding: 24px 17px 15px; }
  .import-box { margin: 14px 14px 0; }
  .form-section { padding: 20px 15px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide { grid-column: span 1; }
  .form-actions { padding: 12px 15px calc(12px + env(safe-area-inset-bottom)); }
  .form-actions button { flex: 1; }
  .image-picker-grid { grid-template-columns: 1fr; }
  .connection-row { flex-direction: column; }
}

/* V2.3 批量导入 */
.batch-modal { width: min(980px, calc(100vw - 24px)); }
.batch-body { padding: 4px 28px 24px; display: grid; gap: 14px; }
.batch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.file-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.batch-text { width: 100%; min-height: 260px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.55; }
.batch-options { display: grid; grid-template-columns: minmax(180px,.55fr) minmax(260px,1.45fr); gap: 12px; }
.batch-options label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.batch-summary { padding: 13px 15px; border-radius: 13px; background: var(--surface-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 16px; color: var(--muted); font-size: 12px; }
.batch-summary strong { color: var(--text); font-size: 13px; }
.batch-summary .batch-error { color: var(--danger); }
.batch-preview { max-height: 310px; overflow: auto; display: grid; gap: 8px; }
.batch-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.batch-row > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 900; }
.batch-row div { min-width: 0; }
.batch-row strong, .batch-row small { display: block; }
.batch-row small { margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-row > div:last-child { text-align: right; }
.batch-feedback { padding: 0; }

@media (max-width: 640px) {
  .batch-body { padding: 4px 15px 20px; }
  .batch-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .batch-toolbar .text-button { grid-column: span 2; justify-self: start; }
  .batch-text { min-height: 230px; }
  .batch-options { grid-template-columns: 1fr; }
  .batch-row { grid-template-columns: 28px minmax(0,1fr); }
  .batch-row > div:last-child { grid-column: 2; text-align: left; }
}
.evidence-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--text); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.product-link:hover { border-color: var(--accent); color: var(--accent); }

/* V2.5 简化操作流程 */
.compact-hero { padding: 22px 24px; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.compact-hero h1 { font-size: clamp(29px,4vw,43px); }
.compact-hero p:not(.eyebrow) { margin-top: 8px; }
.simple-controls { grid-template-columns: minmax(240px,1.7fr) minmax(150px,.7fr) minmax(160px,.8fr) auto; }
.filter-more { align-self: end; position: relative; }
.filter-more > summary { min-height: 43px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; color: var(--text); font-size: 12px; font-weight: 800; list-style: none; }
.filter-more > summary::-webkit-details-marker { display:none; }
.filter-more[open] .check-row { position: absolute; right: 0; top: calc(100% + 7px); z-index: 12; min-width: 190px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.more-menu { position: relative; }
.more-menu > summary { display: grid; place-items: center; min-width: 42px; padding: 0 12px; list-style: none; font-size: 21px; line-height: 1; }
.more-menu > summary::-webkit-details-marker { display:none; }
.more-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 180px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.more-menu-panel button { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; font-weight: 750; }
.more-menu-panel button:hover { background: var(--surface-2); }
.action-modal { width: min(600px,calc(100vw - 24px)); }
.action-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px 26px 28px; }
.action-choice { min-height: 155px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; cursor: pointer; text-align: left; transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.action-choice:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.action-choice strong,.action-choice span { display:block; }
.action-choice strong { font-size: 19px; }
.action-choice span { margin-top: 8px; color: var(--muted); line-height: 1.6; }
.quick-entry-section { padding: 20px 28px 24px; border-bottom: 1px solid var(--line); }
.quick-photo-row { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(320px,1.25fr); gap:14px; align-items:stretch; }
.main-image-picker .image-preview { min-height: 230px; }
.paste-card { display:grid; align-content:start; gap:8px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.paste-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.paste-card textarea { min-height:112px; }
.paste-card button { justify-self:start; }
.core-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.core-fields label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:800; }
.core-fields .wide { grid-column:span 2; }
.entry-form.has-existing-product .new-product-core { display:none; }
.entry-form[data-mode="quick"] .quick-photo-row { display:none; }
.entry-form[data-mode="quick"] .core-fields { margin-top:0; }
.entry-form[data-mode="quick"] .advanced-details { display:none; }
.advanced-details { border-bottom:1px solid var(--line); }
.advanced-details > summary { padding:15px 28px; cursor:pointer; color:var(--accent); font-size:13px; font-weight:850; background:#fbfaf7; }
.advanced-details[open] > summary { border-bottom:1px solid var(--line); }
.calculation-preview { display:grid; gap:3px; }
.calculation-preview strong { font-size:15px; }
.calculation-preview span { color:var(--accent); font-size:13px; }
.status-line #dataStatus { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-card .card-actions { grid-template-columns:1.2fr .8fr; }

@media (max-width:900px) {
  .compact-hero { grid-template-columns:1fr; }
  .simple-controls { grid-template-columns:1fr 1fr; }
  .quick-photo-row { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .header-actions { gap:6px; }
  .more-menu > summary { min-width:38px; min-height:40px; }
  .compact-hero { padding:18px 16px; }
  .compact-hero h1 { font-size:31px; }
  .simple-controls { grid-template-columns:1fr; }
  .filter-more[open] .check-row { position:static; margin-top:7px; }
  .action-choice-grid { grid-template-columns:1fr; padding:16px; }
  .action-choice { min-height:118px; padding:19px; }
  .quick-entry-section { padding:17px 14px 20px; }
  .core-fields { grid-template-columns:1fr; }
  .core-fields .wide { grid-column:span 1; }
  .advanced-details > summary { padding:14px 15px; }
  .paste-card button { width:100%; }
}

/* V2.6 主页减法美化与设置集中化 */
:root {
  --bg: #f6f6f2;
  --surface: #ffffff;
  --surface-2: #f1f2ed;
  --text: #181a17;
  --muted: #71766f;
  --line: #e1e3dc;
  --accent: #315f50;
  --accent-soft: #e8f0ec;
  --shadow-soft: 0 14px 38px rgba(31, 38, 33, .075);
}
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(49,95,80,.07), transparent 25rem),
    linear-gradient(180deg, #fafaf7 0, var(--bg) 34rem);
}
.site-header { background: rgba(250,250,247,.88); border-bottom-color: rgba(225,227,220,.75); }
.header-inner { min-height: 68px; }
.brand-mark { background: linear-gradient(145deg,#1c211e,#315f50); box-shadow: 0 8px 22px rgba(31,38,33,.18); }
.header-actions { align-items: center; }
.icon-button {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72);
  color: var(--text); font-size: 22px; cursor: pointer; list-style: none;
}
.icon-button::-webkit-details-marker { display: none; }
.sync-indicator {
  display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px;
  border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.58);
  font-size: 11px; font-weight: 750; white-space: nowrap;
}
.sync-indicator[data-tone="loading"]::before { content:""; width:7px; height:7px; margin-right:6px; border:2px solid #96a29b; border-top-color:transparent; border-radius:50%; animation:lp-spin .8s linear infinite; }
.sync-indicator[data-tone="success"] { color: var(--accent); }
.sync-indicator[data-tone="error"] { color: var(--danger); }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.page-shell { padding-top: 34px; }
.home-intro {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end;
  padding: 34px 36px; border: 1px solid rgba(225,227,220,.86); border-radius: 30px;
  background: rgba(255,255,255,.82); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px);
}
.home-intro h1 { max-width: 760px; margin: 0; font-size: clamp(32px,5vw,57px); line-height: 1.04; letter-spacing: -.052em; }
.home-intro > div > p:not(.eyebrow) { max-width: 680px; margin: 16px 0 0; color: var(--muted); line-height: 1.75; }
.mini-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mini-stats span { padding: 10px 13px; border-radius: 13px; background: var(--surface-2); color: var(--muted); font-size: 11px; white-space: nowrap; }
.mini-stats strong { margin-right: 4px; color: var(--text); font-size: 15px; }

.search-section { margin-top: 18px; }
.main-search { position: relative; display: block; }
.main-search input { height: 58px; padding: 0 48px 0 49px; border-radius: 18px; border-color: rgba(222,223,216,.95); background: rgba(255,255,255,.9); box-shadow: 0 10px 28px rgba(31,38,33,.045); font-size: 16px; }
.search-icon { position: absolute; left: 18px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--muted); font-size: 24px; line-height: 1; }
.clear-search { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%; background:var(--surface-2); color:var(--muted); font-size:20px; cursor:pointer; }
.category-chips { display:flex; gap:8px; margin-top:11px; padding:2px 1px 7px; overflow-x:auto; scrollbar-width:none; }
.category-chips::-webkit-scrollbar { display:none; }
.category-chips button { flex:0 0 auto; min-height:38px; padding:0 15px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.65); color:var(--muted); font-size:12px; font-weight:800; cursor:pointer; }
.category-chips button.active { border-color:var(--text); background:var(--text); color:#fff; }

.cheapest-section { margin-top: 34px; }
.section-heading, .list-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:14px; padding:0 3px; }
.section-heading h2, .list-heading h2 { margin:0; font-size:clamp(24px,3vw,32px); letter-spacing:-.035em; }
.section-heading > p { margin:0; color:var(--muted); font-size:12px; }
.cheapest-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.summary-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; padding:15px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.84); text-align:left; cursor:pointer; box-shadow:0 8px 24px rgba(31,38,33,.045); transition:transform .16s ease,box-shadow .16s ease; }
.summary-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.summary-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--surface-2); color:var(--accent); font-size:21px; }
.summary-main { min-width:0; }
.summary-main small,.summary-main strong,.summary-main em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.summary-main small { color:var(--muted); font-size:10px; font-weight:800; }
.summary-main strong { margin-top:3px; font-size:13px; }
.summary-main em { margin-top:4px; color:var(--accent); font-size:11px; font-style:normal; font-weight:800; }
.summary-arrow { color:#a3a8a2; font-size:22px; }
.summary-empty { grid-column:1/-1; padding:28px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; }
.list-heading { margin-top:42px; }

.results { gap: 26px; }
.group-section { overflow:visible; border:0; border-radius:0; background:transparent; }
.group-head { padding:0 3px 13px; border:0; align-items:end; }
.group-head h2 { font-size:22px; }
.group-head p { font-size:11px; }
.winner-copy { max-width:420px; }
.winner-copy strong { font-size:14px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.product-card, .product-card:nth-child(2n), .product-card:nth-child(3n) {
  overflow:hidden; padding:13px; border:1px solid var(--line); border-radius:21px; background:rgba(255,255,255,.88);
  box-shadow:0 8px 26px rgba(31,38,33,.045); gap:10px; transition:transform .16s ease,box-shadow .16s ease;
}
.product-card:hover { transform:translateY(-2px); background:#fff; box-shadow:var(--shadow-soft); }
.product-media { width:100%; aspect-ratio:4/3; padding:0; overflow:hidden; border:0; border-radius:15px; background:#f1f2ee; cursor:pointer; }
.product-media img { width:100%; height:100%; object-fit:contain; padding:10px; mix-blend-mode:multiply; }
.product-placeholder { display:grid; place-items:center; align-content:center; gap:5px; color:var(--muted); }
.product-placeholder span { font-size:35px; color:#7c8c84; }
.product-placeholder small { font-weight:850; }
.product-placeholder em { font-size:10px; font-style:normal; opacity:.75; }
.card-copy { min-height:67px; }
.rank-line { color:var(--accent); font-size:10px; letter-spacing:.02em; }
.product-card h3 { display:-webkit-box; overflow:hidden; min-height:45px; font-size:16px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.brand-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.price-row { align-items:end; }
.price-row strong { font-size:24px; letter-spacing:-.03em; }
.price-row span { font-size:11px; }
.unit-price { padding:10px 11px; border-radius:12px; background:var(--surface-2); color:var(--text); font-size:14px; }
.offer-meta { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:10px; }
.card-actions { display:grid; grid-template-columns:.8fr 1.2fr !important; gap:7px; margin-top:auto; }
.quiet-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 12px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--muted); font-size:12px; font-weight:800; text-decoration:none; cursor:pointer; }
.quiet-button:hover { background:var(--surface-2); color:var(--text); }

.empty-state { max-width:600px; margin:36px auto; padding:56px 20px; border:1px dashed var(--line); border-radius:24px; background:rgba(255,255,255,.55); }
.empty-illustration { width:56px; height:56px; display:grid; place-items:center; margin:0 auto 14px; border-radius:18px; background:var(--surface-2); color:var(--accent); font-size:28px; }
.empty-state p { margin:8px 0 20px; }
.empty-actions { display:flex; justify-content:center; gap:9px; }

.settings-modal { width:min(780px,calc(100vw - 24px)); }
.settings-body { display:grid; gap:13px; padding:18px 26px 28px; }
.settings-section { padding:19px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.settings-section-head { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:15px; }
.settings-section-head h3 { margin:0; font-size:17px; }
.settings-section-head p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.connection-badge { flex:0 0 auto; padding:5px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:10px; font-weight:850; }
.connection-badge.connected { background:var(--accent-soft); color:var(--accent); }
.connection-badge.error { background:#f8e8e8; color:var(--danger); }
.settings-field { display:grid; gap:7px; }
.settings-field > label,.settings-grid label { color:var(--muted); font-size:11px; font-weight:800; }
.settings-inline { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.settings-actions { display:flex; align-items:center; gap:8px; margin-top:10px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.settings-grid label { display:grid; gap:6px; }
.settings-check { align-self:end; padding:0; }
.settings-tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

.detail-modal { width:min(940px,calc(100vw - 24px)); }
.detail-hero { grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); align-items:start; }
.detail-image-shell { min-height:280px; }
.detail-copy h2 { margin:6px 0 4px; }
.detail-brand { margin:0 0 10px !important; font-weight:800; }
.detail-best { display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:end; margin:19px 0; padding:17px 18px; border-radius:17px; background:var(--surface-2); }
.detail-best > span { grid-column:1/-1; color:var(--muted); font-size:10px; font-weight:850; }
.detail-best strong { font-size:29px; letter-spacing:-.04em; }
.detail-best em { text-align:right; font-style:normal; font-size:12px; font-weight:850; }
.detail-best b { color:var(--accent); font-size:13px; }
.detail-best small { text-align:right; color:var(--muted); }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.detail-section-title { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:12px; }
.detail-section-title h3 { margin:0; }
.detail-section-title > span { color:var(--muted); font-size:11px; }
.offer-ranking { display:grid; gap:8px; }
.offer-rank-card { display:grid; grid-template-columns:34px minmax(0,1fr) minmax(150px,auto) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.offer-rank-card.best { border-color:#b9c8c1; background:#fbfdfc; }
.offer-rank-number { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:11px; font-weight:900; }
.offer-rank-main,.offer-rank-price { min-width:0; }
.offer-rank-main strong,.offer-rank-main span,.offer-rank-main small,.offer-rank-price strong,.offer-rank-price span,.offer-rank-price small { display:block; }
.offer-rank-main strong { font-size:13px; }
.offer-rank-main span,.offer-rank-main small,.offer-rank-price span,.offer-rank-price small { margin-top:3px; color:var(--muted); font-size:10px; }
.offer-rank-price { text-align:right; }
.offer-rank-price strong { font-size:17px; }
.offer-rank-price span { color:var(--accent); font-weight:850; }
.offer-rank-actions { display:flex; gap:3px; }
.offer-rank-actions .quiet-button { min-height:34px; padding:5px 7px; font-size:10px; }

.sync-pill { position:fixed; left:50%; top:78px; z-index:90; transform:translateX(-50%); max-width:calc(100vw - 28px); padding:10px 15px; border:1px solid #d9ddd8; border-radius:999px; background:rgba(28,33,30,.94); color:#fff; box-shadow:0 12px 32px rgba(0,0,0,.17); font-size:12px; font-weight:800; white-space:nowrap; }
.sync-pill.error { background:#8f2424; }
.floating-add { display:none; }

@media (max-width: 980px) {
  .cheapest-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .offer-rank-card { grid-template-columns:34px minmax(0,1fr) auto; }
  .offer-rank-actions { grid-column:2/-1; justify-content:flex-end; }
}
@media (max-width: 640px) {
  .sync-indicator { display:none; }
  .add-top-button { display:none; }
  .page-shell { padding-top:14px; }
  .home-intro { grid-template-columns:1fr; gap:18px; padding:24px 18px; border-radius:22px; }
  .home-intro h1 { font-size:36px; }
  .mini-stats { justify-content:flex-start; }
  .main-search input { height:54px; }
  .cheapest-section { margin-top:27px; }
  .section-heading { align-items:start; flex-direction:column; gap:5px; }
  .cheapest-summary { grid-template-columns:1fr; }
  .summary-card { padding:13px; }
  .list-heading { margin-top:32px; }
  .group-head { padding:0 2px 11px; }
  .winner-copy { width:100%; }
  .product-grid { grid-template-columns:1fr; gap:10px; }
  .product-card { display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto auto auto; align-items:start; }
  .product-media { grid-row:1/5; aspect-ratio:1/1; }
  .card-copy { min-height:0; }
  .product-card h3 { min-height:0; font-size:15px; }
  .price-row strong { font-size:21px; }
  .unit-price { padding:8px 10px; }
  .card-actions { grid-column:2; }
  .floating-add { display:grid; place-items:center; }
  .settings-body { padding:13px; }
  .settings-section { padding:15px; }
  .settings-inline,.settings-grid,.settings-tool-grid { grid-template-columns:1fr; }
  .settings-actions { justify-content:space-between; }
  .detail-hero { grid-template-columns:1fr; }
  .detail-image-shell { min-height:220px; }
  .offer-rank-card { grid-template-columns:30px minmax(0,1fr); }
  .offer-rank-price { grid-column:2; text-align:left; }
  .offer-rank-actions { grid-column:2; justify-content:flex-start; flex-wrap:wrap; }
  .sync-pill { top:64px; white-space:normal; text-align:center; }
}
@media (max-width: 390px) {
  .brand small { display:none; }
  .home-intro h1 { font-size:32px; }
  .mini-stats span { padding:8px 10px; }
  .product-card { grid-template-columns:96px minmax(0,1fr); }
}