:root {
  --ink: #23282b;
  --ink-2: #5b6469;
  --ink-3: #6b7276;
  --paper: #faf9f7;
  --card: #ffffff;
  --line: #e4e0d9;
  --line-2: #efece6;
  --accent: #2f5d50;
  --alert: #a8442b;
  --alert-bg: #fdf4f1;
  --alert-line: #e8cfc6;
  --ok: #4a7c59;
  --off: #9aa0a3;
  --radius: 10px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }
mark { background: #fbf0c4; padding: 0 1px; color: inherit; border-radius: 2px; }
code { color: var(--ink-2); background: var(--line-2); padding: .05rem .3rem; border-radius: 3px; font-size: .88em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.site-nav { background: var(--card); border-bottom: 1px solid var(--line); padding: .6rem 0; }
.navbar-brand { font-weight: 700; letter-spacing: .02em; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.navbar-brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(47,93,80,.15); }
.site-nav .nav-link { color: var(--ink-2); font-size: .95rem; padding: .35rem .85rem; }
.site-nav .nav-link:hover { color: var(--ink); }
.site-nav .nav-link.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

.hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 3rem 0 2.2rem; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  border: 1px solid var(--line-2); border-radius: 50%; pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; right: 30px; bottom: -110px; width: 200px; height: 200px;
  border: 1px solid var(--line-2); border-radius: 50%; pointer-events: none;
}
.hero-compact { padding: 1.5rem 0 1.4rem; }
.hero-compact::after, .hero-compact::before { display: none; }
.hero-title { font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.015em; margin-bottom: .5rem; }
.hero-sub { color: var(--ink-2); max-width: 58ch; margin-bottom: 1.5rem; font-size: 1.02rem; }
.hero-sub strong { color: var(--ink); }

.search-box { max-width: 58rem; position: relative; z-index: 1; }
.search-main { display: flex; gap: .5rem; position: relative; }
.search-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none; color: var(--ink-3);
}
.search-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-input {
  height: 52px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1.02rem; padding: 0 1rem 0 2.6rem; min-width: 0;
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,93,80,.12); }
.btn-search {
  height: 52px; min-width: 100px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-weight: 600; border: 1px solid var(--ink); flex: none;
}
.btn-search:hover { background: #000; color: #fff; }

.search-filters { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-top: .8rem; }
.search-filters .form-select {
  width: auto; min-width: 158px; border: 1px solid var(--line); border-radius: 7px;
  font-size: .89rem; color: var(--ink-2); padding: .35rem 2rem .35rem .7rem;
}
.chk-group { display: flex; flex-wrap: wrap; gap: .5rem .95rem; align-items: center; }
.chk { font-size: .88rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none; }
.chk input { accent-color: var(--accent); }

.hero-meta { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.4rem; font-size: .88rem; color: var(--ink-2); position: relative; z-index: 1; }
.hero-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-meta strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-ok { background: var(--ok); }
.dot-alert { background: var(--alert); }
.dot-off { background: var(--off); }

.sub-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 2.2rem 0 1.7rem; }
.sub-hero-alert { border-bottom-color: var(--alert-line); box-shadow: inset 0 3px 0 var(--alert-bg); }
.sub-hero h1 { font-size: 1.85rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.01em; }
.sub-hero p { color: var(--ink-2); max-width: 62ch; margin-bottom: 0; }
.sub-hero p strong { color: var(--ink); }
.inline-search { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 54rem; margin-top: 1.1rem; }
.inline-search .form-control, .inline-search .form-select {
  border: 1px solid var(--line); border-radius: 7px; height: 42px; width: auto; flex: 1 1 200px; min-width: 0; font-size: .92rem;
}
.inline-search .btn-search { height: 42px; min-width: 84px; flex: none; }
.inline-search .btn-ghost { height: 42px; display: inline-flex; align-items: center; flex: none; }

.page-body { padding: 2rem 0 3.5rem; }

.chip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.chip-bar-label { font-size: .78rem; color: var(--ink-3); margin-right: .2rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: .12rem .5rem .12rem .7rem; font-size: .82rem; color: var(--ink-2);
}
.filter-chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.fc-k { color: var(--ink-3); font-size: .74rem; }
.fc-v { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-x { color: var(--ink-3); font-size: .95rem; line-height: 1; }
.filter-chip:hover .fc-x { color: var(--alert); }
.filter-clear { font-size: .8rem; color: var(--ink-3); margin-left: .3rem; }

.result-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: .6rem; padding-bottom: .85rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.result-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.result-count { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.result-kw { color: var(--ink-2); font-size: .9rem; }
.result-time { color: var(--ink-3); font-size: .78rem; border: 1px solid var(--line-2); border-radius: 3px; padding: 0 .3rem; }
.sort-links { display: flex; gap: 1rem; font-size: .88rem; }
.sort-links a { color: var(--ink-3); }
.sort-links a.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

.food-list { display: flex; flex-direction: column; gap: .65rem; }
.food-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; display: flex; gap: 1.2rem; justify-content: space-between;
  align-items: flex-start; max-width: 100%; transition: border-color .12s, transform .12s;
}
.food-card:hover { border-color: #cfc9bd; transform: translateY(-1px); }
.food-card-alert { border-color: var(--alert-line); background: #fffdfc; }
.food-main { min-width: 0; flex: 1; }
.food-name { font-size: 1.03rem; font-weight: 600; margin: 0 0 .45rem; display: flex; align-items: baseline; gap: .5rem; overflow-wrap: anywhere; }
.food-name a { color: var(--ink); }
.food-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.chip { font-size: .77rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: .08rem .45rem; background: #fbfaf8; }
.chip-alert { color: var(--alert); border-color: var(--alert-line); background: var(--alert-bg); }
.chip-off { color: var(--ink-3); }
.chip-ok { color: var(--ok); border-color: #cfe0d3; background: #f4f9f5; }
.food-mat { font-size: .86rem; color: var(--ink-2); margin: 0; display: flex; gap: .45rem; align-items: flex-start; }
.lbl { font-size: .72rem; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 .3rem; flex: none; margin-top: .18rem; }
.food-side { text-align: right; flex: none; max-width: 200px; }
.food-company { display: block; font-size: .84rem; color: var(--ink-2); margin-bottom: .45rem; overflow-wrap: anywhere; }
.btn-ghost { border: 1px solid var(--line); color: var(--ink-2); background: transparent; border-radius: 6px; font-size: .84rem; }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); background: #fbfaf8; }

.mat-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.mat-tag {
  font-size: .79rem; color: var(--ink-2); background: #f7f5f1;
  border: 1px solid var(--line-2); border-radius: 4px; padding: .04rem .42rem; overflow-wrap: anywhere;
}
.mat-tag-hit { background: #fbf0c4; border-color: #e8d99a; color: var(--ink); }
.mat-tag-more { background: transparent; color: var(--ink-3); border-style: dashed; }

.nutri-basis { font-size: .8rem; color: var(--ink-3); margin: 0 0 .5rem; }
.nutri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0; margin: 0; }
.nutri-cell { padding: .35rem .7rem .4rem 0; border-top: 1px solid var(--line-2); }
.nutri-grid dt { font-weight: 500; color: var(--ink-3); font-size: .8rem; margin: 0; }
.nutri-grid dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.pager-wrap { margin-top: 1.8rem; display: flex; justify-content: center; }
.pagination .page-link { color: var(--ink-2); border-color: var(--line); font-size: .88rem; }
.pagination .active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }

.empty-state { padding-top: .3rem; }
.quick-block { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.quick-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.quick-label { font-size: .82rem; color: var(--ink-3); margin-right: .3rem; min-width: 4.6rem; }
.tag {
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .7rem;
  font-size: .85rem; color: var(--ink-2); background: var(--card);
  display: inline-flex; align-items: center; gap: .35rem;
}
.tag:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.tag-n { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.state-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.6rem 1.5rem; text-align: center;
}
.state-art { width: 120px; height: 90px; margin-bottom: .8rem; fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; }
.state-title { font-size: 1.1rem; font-weight: 650; margin-bottom: .35rem; }
.state-sub { color: var(--ink-2); font-size: .9rem; margin-bottom: 1.1rem; }
.state-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.state-actions .btn { padding: .4rem 1.1rem; }

.crumb { font-size: .85rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.crumb-now { color: var(--ink-2); }
.alert-strip {
  background: var(--alert-bg); border: 1px solid var(--alert-line);
  border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1.3rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .92rem;
}
.alert-icon {
  width: 22px; height: 22px; border-radius: 50%; background: var(--alert); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; flex: none;
}
.alert-strip strong { color: var(--alert); display: block; }
.alert-sub { color: var(--ink-2); font-size: .84rem; }
.alert-strip > a { margin-left: auto; font-size: .86rem; white-space: nowrap; }

.detail-head { margin-bottom: 1.4rem; }
.detail-head h1 { font-size: 1.45rem; font-weight: 700; display: flex; gap: .55rem; align-items: baseline; overflow-wrap: anywhere; }
.detail-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 .4rem; }
.detail-id { font-size: .82rem; color: var(--ink-3); margin: 0; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; max-width: 100%; }
.panel-title {
  font-size: .86rem; font-weight: 650; color: var(--ink-2);
  padding: .7rem 1.1rem; margin: 0; border-bottom: 1px solid var(--line-2); background: #fcfbf9;
  display: flex; align-items: center; gap: .55rem;
}
.pt-no { font-size: .7rem; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.panel-body { padding: 1rem 1.1rem; font-size: .92rem; overflow-wrap: anywhere; }
.panel-body p { margin-bottom: .25rem; max-width: 74ch; }
.panel-body .mat-tags, .panel-body .nutri-grid { max-width: 96ch; }
.panel-alert { border-color: var(--alert-line); }
.panel-alert .panel-title { background: var(--alert-bg); color: var(--alert); border-bottom-color: var(--alert-line); }
.h-100 { height: 100%; }

.side-panel .panel-body { font-size: .88rem; }
.side-sticky { position: sticky; top: 1rem; }
.side-company { font-weight: 600; margin-bottom: .6rem; overflow-wrap: anywhere; }
.side-dl, .failed-dl, .fail-dl { display: grid; grid-template-columns: auto 1fr; gap: .18rem .8rem; margin: 0 0 .8rem; }
.side-dl dt, .failed-dl dt, .fail-dl dt { font-weight: 500; color: var(--ink-3); font-size: .81rem; white-space: nowrap; }
.side-dl dd, .failed-dl dd, .fail-dl dd { margin: 0; font-size: .87rem; overflow-wrap: anywhere; }
.dd-small { font-size: .8rem; color: var(--ink-3); max-width: 72ch; }
.sib-list { list-style: none; padding: 0; margin: 0; }
.sib-list li { display: flex; align-items: center; gap: .5rem; padding: .32rem 0; border-bottom: 1px dashed var(--line-2); font-size: .87rem; }
.sib-list li:last-child { border-bottom: none; }
.sib-list a { overflow-wrap: anywhere; }

.failed-item { border-bottom: 1px solid var(--line-2); padding-bottom: 1rem; margin-bottom: 1rem; }
.failed-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.failed-top { display: flex; gap: .8rem; font-size: .8rem; color: var(--ink-3); }
.failed-reason-big { font-size: 1.05rem; font-weight: 650; color: var(--alert); margin: .25rem 0 .7rem; }
.failed-img, .fail-img { display: inline-block; }
.failed-img img, .fail-img img { max-width: 220px; border: 1px solid var(--line); border-radius: 6px; display: block; }
.img-cap { display: block; font-size: .76rem; color: var(--ink-3); margin-top: .3rem; }

.note-line {
  font-size: .85rem; color: var(--ink-3); background: #fbfaf8;
  border: 1px solid var(--line-2); border-radius: 6px; padding: .55rem .75rem; margin-bottom: .8rem; max-width: 68ch;
}
.note-line strong { color: var(--ink-2); }

.blacklist-note {
  background: #fcfbf9; border: 1px solid var(--line);
  border-radius: 6px; padding: .7rem 1rem; margin-bottom: 1.2rem; font-size: .88rem; color: var(--ink-2); max-width: 72ch;
}
.blacklist-note strong { color: var(--ink); margin-right: .5rem; }
.fail-list { display: flex; flex-direction: column; gap: .85rem; }
.fail-card {
  background: var(--card); border: 1px solid var(--alert-line);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  display: flex; gap: 1.3rem; justify-content: space-between; align-items: flex-start; max-width: 100%;
}
.fail-card .fail-body { max-width: 74ch; }
.fail-name::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--alert); margin-right: .5rem; vertical-align: middle;
}
.fail-body { min-width: 0; flex: 1; }
.fail-top { display: flex; gap: .8rem; font-size: .8rem; color: var(--ink-3); margin-bottom: .25rem; }
.fail-name { font-size: 1.05rem; font-weight: 650; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.fail-company { font-size: .87rem; color: var(--ink-2); margin-bottom: .6rem; }
.fail-reason { margin-bottom: .7rem; font-size: .93rem; display: flex; gap: .45rem; align-items: flex-start; max-width: 70ch; }
.fail-dl { max-width: 76ch; }
.fail-reason .val { color: var(--alert); font-weight: 600; }
.fail-img { flex: none; }

.table-scroll { overflow-x: auto; }
.data-table { font-size: .87rem; margin: 0; }
.data-table thead th { background: #fcfbf9; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink-2); font-size: .8rem; white-space: nowrap; }
.data-table td { border-color: var(--line-2); vertical-align: middle; }
.data-table tbody tr:hover { background: #fcfbf9; }
.row-hit { background: #fdfbf3; }
.td-violation { min-width: 250px; color: var(--ink-2); }
.td-alert { color: var(--alert); }
.td-dim { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

.comp-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.05rem 1.15rem; height: 100%; display: flex; flex-direction: column; max-width: 100%;
}
.comp-card:hover { border-color: #cfc9bd; }
.comp-name { font-size: .97rem; font-weight: 650; margin-bottom: .3rem; overflow-wrap: anywhere; }
.comp-loc { font-size: .81rem; color: var(--ink-3); margin-bottom: .35rem; }
.comp-loc .sep { margin: 0 .35rem; }
.comp-addr { font-size: .85rem; color: var(--ink-2); flex: 1; margin-bottom: .7rem; overflow-wrap: anywhere; }
.comp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .81rem; color: var(--ink-3); border-top: 1px solid var(--line-2); padding-top: .6rem;
}
.comp-count { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.site-foot { background: var(--card); border-top: 1px solid var(--line); padding: 1.7rem 0; font-size: .86rem; color: var(--ink-2); }
.foot-strong { font-weight: 600; color: var(--ink); }
.foot-small { font-size: .84rem; color: var(--ink-3); line-height: 1.7; max-width: 70ch; }
.foot-right { text-align: right; }
.foot-link { font-size: .82rem; color: var(--ink-3); }

@media (max-width: 991px) {
  .side-sticky { position: static; }
}

@media (max-width: 768px) {
  .food-card, .fail-card { flex-direction: column; gap: .8rem; }
  .food-side { text-align: left; max-width: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; }
  .food-company { margin-bottom: 0; }
  .search-filters { gap: .5rem; }
  .search-filters .form-select { min-width: 0; width: 100%; flex: 1 1 100%; }
  .chk-group { width: 100%; gap: .4rem .9rem; }
  .inline-search .form-control, .inline-search .form-select { flex: 1 1 100%; }
  .hero { padding: 2rem 0 1.6rem; }
  .hero::after, .hero::before { display: none; }
  .result-head { flex-direction: column; align-items: flex-start; }
  .fail-img img, .failed-img img { max-width: 100%; }
  .side-dl, .failed-dl, .fail-dl { grid-template-columns: 1fr; }
  .side-dl dt, .failed-dl dt, .fail-dl dt { margin-top: .45rem; }
  .foot-right { text-align: left; }
  .alert-strip > a { margin-left: 0; }
  .quick-label { min-width: 100%; }
}

.alert-block { border: 1px solid var(--alert-line); background: var(--alert-bg); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin-bottom: 1.3rem; }
.alert-block-title { font-size: .92rem; font-weight: 650; color: var(--alert); margin: 0 0 .7rem; display: flex; align-items: center; gap: .55rem; }
.alert-block .food-card { border-color: var(--alert-line); }

.board { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--line-2); background: #fcfbf9; }
.board-head h2 { font-size: .9rem; font-weight: 650; margin: 0; }
.board-head a { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line-2); }
.board-list li:last-child { border-bottom: none; }
.board-list-tight li { padding: .55rem 1.1rem; }
.bl-main { min-width: 0; }
.bl-name { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.bl-company { display: block; font-size: .8rem; color: var(--ink-3); overflow-wrap: anywhere; }
.bl-side { text-align: right; flex: none; }
.bl-reason { display: block; font-size: .82rem; color: var(--alert); font-weight: 600; }
.bl-date { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.nutri-filter { margin-top: .8rem; border: 1px solid var(--line); border-radius: 8px; background: #fcfbf9; }
.nutri-filter > summary { cursor: pointer; padding: .5rem .9rem; font-size: .88rem; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: .4rem; }
.nutri-filter > summary::-webkit-details-marker { display: none; }
.nutri-filter > summary::before { content: "▸"; color: var(--ink-3); font-size: .8rem; }
.nutri-filter[open] > summary { border-bottom: 1px solid var(--line-2); }
.nutri-filter[open] > summary::before { content: "▾"; }
.nf-body { padding: .8rem .9rem .9rem; }
.nf-note { font-size: .84rem; color: var(--ink-3); margin-bottom: .8rem; line-height: 1.65; max-width: 62ch; }
.nf-note strong { color: var(--ink-2); }
.nf-rows { display: flex; flex-wrap: wrap; gap: .8rem 2rem; }
.nf-row { display: flex; align-items: center; gap: .4rem; }
.nf-label { font-size: .86rem; color: var(--ink-2); min-width: 3.6rem; }
.nf-row .form-control { width: 5.2rem; height: 34px; border: 1px solid var(--line); border-radius: 6px; font-size: .86rem; padding: 0 .5rem; }
.nf-dash, .nf-unit { color: var(--ink-3); font-size: .84rem; }
.nf-presets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line-2); }
.nf-preset-label { font-size: .8rem; color: var(--ink-3); margin-right: .2rem; }

.food-nutri { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .4rem; font-size: .84rem; color: var(--ink-2); }
.food-nutri .nv strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.food-nutri .nv-dim { color: var(--ink-3); }

.dm-box { border: 1px solid var(--line-2); border-radius: 8px; background: #fcfbf9; padding: .7rem .85rem; margin-bottom: .9rem; }
.dm-head { font-size: .82rem; color: var(--ink-2); font-weight: 600; margin-bottom: .55rem; display: flex; align-items: baseline; gap: .6rem; }
.dm-help { font-size: .76rem; color: var(--ink-3); font-weight: 400; border-bottom: 1px dotted var(--ink-3); cursor: help; }
.dm-vals { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.dm-item { display: flex; flex-direction: column; }
.dm-k { font-size: .78rem; color: var(--ink-3); }
.dm-v { font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.dm-v-dim { color: var(--ink-2); font-weight: 600; }
.dm-raw { font-size: .74rem; color: var(--ink-3); }
.dm-foot { font-size: .8rem; color: var(--ink-3); margin: .6rem 0 0; max-width: 62ch; }

@media (max-width: 768px) {
  .nf-rows { gap: .6rem; }
  .nf-row { flex: 1 1 100%; }
  .nf-row .form-control { flex: 1; width: auto; }
}

.panel > .table-scroll,
.panel.table-scroll { padding: .25rem; }
.panel.table-scroll .data-table thead th:first-child,
.panel.table-scroll .data-table tbody td:first-child { padding-left: .85rem; }
.panel.table-scroll .data-table thead th:last-child,
.panel.table-scroll .data-table tbody td:last-child { padding-right: .85rem; }
.panel.table-scroll .data-table tbody tr:last-child td { border-bottom: none; }

.tabbar { display: none; }

@media (max-width: 768px) {
  .site-nav .navbar-toggler, .site-nav #nav { display: none !important; }
  .site-nav { padding: .5rem 0; position: sticky; top: 0; z-index: 20; }
  body.has-tabbar { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: .45rem 0 .4rem; color: var(--ink-3); text-decoration: none; min-height: 54px;
  }
  .tab:hover, .tab:focus { color: var(--ink-2); text-decoration: none; }
  .tab.on { color: var(--accent); }
  .tab-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .tab-label { font-size: .68rem; letter-spacing: .01em; }
  .tab.on .tab-label { font-weight: 600; }
  .site-foot { margin-bottom: .5rem; }
}

.install-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  z-index: 50; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 2px 8px rgba(35,40,43,.10);
  display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem .6rem .9rem;
}
.ib-text { flex: 1; font-size: .85rem; color: var(--ink-2); }
.install-bar .btn-search { height: 34px; min-width: 62px; font-size: .84rem; border-radius: 7px; }
.ib-no { border: 0; background: transparent; color: var(--ink-3); font-size: 1.3rem; line-height: 1; padding: 0 .3rem; cursor: pointer; }
@media (min-width: 769px) { .install-bar { left: auto; right: 20px; bottom: 20px; max-width: 26rem; } }

body.is-offline .site-nav::after {
  content: "離線中 · 顯示的是先前載入的內容";
  display: block; text-align: center; font-size: .76rem; color: var(--alert);
  background: var(--alert-bg); border-top: 1px solid var(--alert-line);
  margin: .5rem -12px -.5rem; padding: .25rem;
}

.note-warn { background: var(--alert-bg); border-color: var(--alert-line); color: var(--ink-2); max-width: 72ch; }
.note-warn strong { color: var(--alert); margin-right: .5rem; }