/* 採購文件小助手：樸素版面，無框架 */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
  background: #f6f5f2;
  color: #262420;
  line-height: 1.6;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #262420;
  color: #fff;
}
.topbar .name { font-weight: 700; }
.topbar .spacer { flex: 1; }
.topbar a { color: #d8d3c8; text-decoration: none; }

.wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 60px; }
.wrap.narrow { max-width: 620px; }

.badge {
  display: inline-block;
  font-size: 13px;
  color: #6b6459;
  border: 1px solid #cfc9bd;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

h1 { font-size: 28px; margin: 6px 0 14px; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 16px 0 8px; }
.accent { color: #a8631f; }
.lede { color: #4b463d; margin-bottom: 20px; }

.card {
  background: #fff;
  border: 1px solid #e4dfd3;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  color: #a8631f;
  font-weight: 700;
  margin-bottom: 6px;
}

label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  color: #40392f;
}
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid #cfc9bd;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: #fffefb;
}
textarea { min-height: 64px; resize: vertical; }
.hint { font-size: 13px; color: #7a7466; margin: -6px 0 14px; }

.row-inline { display: flex; gap: 14px; flex-wrap: wrap; }
.row-inline > * { flex: 1; min-width: 140px; }

button, .btn {
  display: inline-block;
  background: #a8631f;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
button.ghost, .btn.ghost {
  background: transparent;
  color: #a8631f;
  border: 1px solid #a8631f;
}
button.danger { background: #8a3324; }
button:disabled { opacity: .5; cursor: default; }
.actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.notice-box {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14px;
}
.notice-box.error { background: #fbe9e6; border: 1px solid #e3a494; color: #7a2a17; }
.notice-box.warn { background: #fdf3e0; border: 1px solid #eccb8c; color: #6b4a10; }
.notice-box.info { background: #eaf1f6; border: 1px solid #a9c6d8; color: #1f4a63; }
.notice-box.ok { background: #eaf4ea; border: 1px solid #a8cdac; color: #295a2f; }

details.pics { margin-bottom: 18px; font-size: 14px; }
details.pics summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 14px;
  background: #efeae0;
  border-radius: 8px;
}
details.pics .body { padding: 12px 14px 4px; color: #4b463d; }
details.pics ul { margin: 6px 0; padding-left: 20px; }

table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14px; }
th, td { border: 1px solid #e4dfd3; padding: 7px 9px; text-align: left; }
th { background: #f1ede3; }

.issue-list { list-style: none; padding: 0; margin: 0 0 18px; }
.issue-list li {
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}
.issue-list li.blocking { background: #fbe9e6; color: #7a2a17; border: 1px solid #e3a494; }
.issue-list li.warning { background: #fdf3e0; color: #6b4a10; border: 1px solid #eccb8c; }
.issue-list li.info { background: #eaf1f6; color: #1f4a63; border: 1px solid #a9c6d8; }

.dl {
  display: block;
  border: 1px solid #cfc9bd;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  background: #fffefb;
}
.dl .lang { display: block; font-weight: 700; color: #a8631f; }
.dl .fname { display: block; font-size: 13px; color: #6b6459; margin-top: 4px; }

.item-row, .supplier-row { border-top: 1px dashed #e4dfd3; padding-top: 12px; margin-top: 12px; }
.item-row:first-of-type, .supplier-row:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.prices { display: flex; gap: 12px; flex-wrap: wrap; }
.prices label { flex: 1; min-width: 130px; }