:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #657180;
  --line: #d9e0e7;
  --paper: #fff;
  --canvas: #eef2f5;
  --core: #16845b;
  --core-soft: #eaf7f1;
  --ready: #2563b8;
  --ready-soft: #edf4ff;
  --build: #c66a12;
  --build-soft: #fff6e9;
  --later: #8056a6;
  --later-soft: #f6f0fb;
  --pause: #87919c;
  --pause-soft: #f4f6f8;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; color: var(--ink); background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  border-bottom: 3px solid #25394e;
  background: #fff;
}

.kicker { margin: 0 0 4px; color: var(--ready); font-size: 12px; font-weight: 800; }
h1 { margin: 0; font-size: 28px; letter-spacing: 0; }
.subtitle { margin: 5px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.source-document { display: flex; align-items: center; gap: 10px; min-width: 210px; min-height: 52px; padding: 8px 12px; border: 1px solid #b9c5d1; border-radius: 6px; color: #26394c; background: #fff; text-decoration: none; }
.source-document:hover { border-color: var(--ready); background: #f5f9ff; }
.pdf-mark { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 4px; color: #fff; background: #bd2c3b; font-size: 11px; font-weight: 900; }
.source-document strong, .source-document small { display: block; }
.source-document strong { font-size: 14px; }
.source-document small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.secondary, #firstWaveButton {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #aeb8c2;
  border-radius: 6px;
  background: #fff;
  color: #293b4d;
  font-weight: 800;
}

#firstWaveButton { border-color: var(--core); color: #fff; background: var(--core); }
.full { width: 100%; margin-top: 4px; }

.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; width: min(1700px, calc(100vw - 32px)); margin: 16px auto; }
.filters { display: flex; flex-direction: column; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.stat strong { display: block; font-size: 24px; }
.stat span { color: var(--muted); font-size: 12px; font-weight: 700; }

.filter-panel, .template-panel, .positioning {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.filter-panel, .template-panel { display: grid; gap: 8px; }
.filter-panel label:not(.check-row), .template-panel label { margin-top: 4px; color: #536171; font-size: 12px; font-weight: 800; }
.field-heading { margin-top: 4px; color: #536171; font-size: 12px; font-weight: 800; }
.filter-panel input[type="search"], .filter-panel select, .template-panel input, .template-panel select, .template-panel textarea { width: 100%; min-width: 0; padding: 0 10px; border: 1px solid #bcc6d0; border-radius: 5px; background: #fff; color: var(--ink); }
.filter-panel input[type="search"], .filter-panel select, .template-panel input, .template-panel select { height: 40px; }
.template-panel textarea { padding: 9px 10px; resize: vertical; line-height: 1.45; }
.workspace-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 7px; }
.workspace-row button { min-width: 0; padding: 0 8px; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 8px 0 3px; font-size: 14px; font-weight: 700; }
.check-row input { width: 18px; height: 18px; }
.fit-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fit-option { display: flex; align-items: center; gap: 6px; min-height: 34px; margin: 0 !important; padding: 5px 7px; border: 1px solid var(--line); border-left: 4px solid; border-radius: 5px; background: #fff; cursor: pointer; }
.fit-option input { width: 16px; height: 16px; margin: 0; }
.fit-option.core { border-left-color: var(--core); }
.fit-option.ready { border-left-color: var(--ready); }
.fit-option.build { border-left-color: var(--build); }
.fit-option.later { border-left-color: var(--later); }
.fit-option.pause { border-left-color: var(--pause); }
.fit-option.pause:last-child { grid-column: 1 / -1; }
.template-union-filters { display: grid; gap: 6px; }
.template-filter-group { display: grid; gap: 5px; }
.template-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 1px 0; color: var(--muted); font-size: 10px; font-weight: 900; }
.template-filter-heading em { padding: 2px 5px; border-radius: 3px; background: #edf1f5; color: #596676; font-style: normal; }
.template-filter-option { display: grid; grid-template-columns: 16px 14px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 36px; margin: 0 !important; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.template-filter-option input { width: 16px; height: 16px; margin: 0; }
.template-filter-option i { width: 14px; height: 14px; border-radius: 50%; }
.template-filter-option.system { background: #f6f9fc; border-style: dashed; }
.template-filter-option.system i { border-radius: 2px; }
.template-filter-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.filter-placeholder { padding: 8px; border: 1px dashed var(--line); border-radius: 5px; color: var(--muted); font-size: 11px; text-align: center; }

.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.panel-title span { font-weight: 900; }
.panel-title strong { color: var(--core); font-size: 12px; }
.primary { min-height: 40px; padding: 0 12px; border: 1px solid var(--core); border-radius: 6px; color: #fff; background: var(--core); font-weight: 800; cursor: pointer; }
.danger { min-height: 38px; padding: 0 10px; border: 1px solid #c85858; border-radius: 6px; color: #a13333; background: #fff7f7; font-weight: 800; cursor: pointer; }
.button-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.button-pair button { min-width: 0; padding: 0 8px; }
.export-title { margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--line); color: #536171; font-size: 12px; font-weight: 800; }
.template-message { min-height: 18px; margin: 0; color: var(--core); font-size: 12px; line-height: 1.4; }
.template-identity { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #f7f9fb; font-size: 11px; line-height: 1.35; }
.template-identity i { width: 14px; height: 14px; border-radius: 50%; background: #9aa4af; flex: 0 0 auto; }

.positioning { border-left: 5px solid var(--ready); }
.positioning span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.positioning strong { display: block; margin-top: 6px; line-height: 1.35; }
.positioning p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.content { min-width: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 15px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #4b5866; font-size: 12px; font-weight: 800; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border: 3px solid; }
.legend .core i { border-color: var(--core); }
.legend .ready i { border-color: var(--ready); }
.legend .build i { border-color: var(--build); }
.legend .later i { border-color: var(--later); }
.legend .pause i { border-color: var(--pause); }

.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 2px 10px; }
.result-bar strong { font-size: 18px; }
.result-bar span { margin-left: 8px; color: var(--muted); font-size: 13px; }

.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid #cdd9e4;
  border-radius: 6px;
  background: #f7fafc;
  color: #536171;
  font-size: 12px;
  font-weight: 700;
}
.selection-bar div { display: flex; gap: 7px; }
.selection-bar button { min-height: 34px; font-size: 12px; }

.groups { display: grid; gap: 14px; }
.group { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.group-header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.group-header h2 { margin: 0; font-size: 18px; }
.group-header span { color: var(--muted); font-size: 12px; font-weight: 800; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }

.card { position: relative; min-height: 122px; padding: 11px 12px; border: 2px solid; border-radius: 5px; cursor: pointer; }
.card.selected { box-shadow: 0 0 0 3px rgba(23, 33, 43, 0.2); }
.card.core { border-color: var(--core); background: var(--core-soft); }
.card.ready { border-color: var(--ready); background: var(--ready-soft); }
.card.build { border-color: var(--build); background: var(--build-soft); }
.card.later { border-color: var(--later); background: var(--later-soft); }
.card.pause { border-color: #c9d0d7; background: var(--pause-soft); }
.card-top { display: flex; justify-content: space-between; align-items: start; gap: 7px; margin-bottom: 6px; }
.card-code-wrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
.item-check { width: 18px; height: 18px; margin: 0; accent-color: var(--core); flex: 0 0 auto; }
.code { font-size: 12px; font-weight: 900; }
.fit { padding: 2px 6px; border-radius: 3px; color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; }
.core .fit { background: var(--core); }
.ready .fit { background: var(--ready); }
.build .fit { background: var(--build); }
.later .fit { background: var(--later); }
.pause .fit { background: var(--pause); }
.card h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.card p { margin: 6px 0 0; color: #566373; font-size: 12px; line-height: 1.45; }
.opinion-dots { display: flex; flex-wrap: wrap; gap: 6px; min-height: 14px; margin-top: 9px; }
.opinion-dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(23, 33, 43, 0.18); }
.empty { padding: 48px; border: 1px dashed #aeb8c2; border-radius: 6px; color: var(--muted); background: #fff; text-align: center; }

footer { display: flex; justify-content: space-between; gap: 16px; padding: 13px 28px; border-top: 1px solid var(--line); color: var(--muted); background: #fff; font-size: 12px; }
.site-credit { color: #31465a; font-weight: 800; }

body.capture-mode { background: #fff; }
body.capture-mode .topbar { padding: 14px 20px; }
body.capture-mode .topbar button, body.capture-mode .filters, body.capture-mode footer, body.capture-mode .result-bar button, body.capture-mode .selection-bar { display: none; }
body.capture-mode .layout { grid-template-columns: 1fr; width: calc(100vw - 24px); margin: 12px; }
body.capture-mode .result-bar { padding-top: 9px; }
body.capture-mode .group { break-inside: avoid; }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topbar, footer { align-items: stretch; flex-direction: column; }
  .source-document { width: 100%; }
  .layout { grid-template-columns: 1fr; width: calc(100vw - 20px); margin: 10px; }
  .cards { grid-template-columns: 1fr; }
  .result-bar { align-items: stretch; flex-direction: column; }
}

@media print {
  @page { size: A3 landscape; margin: 8mm; }
  body { background: #fff; }
  .topbar { padding: 0 0 10px; }
  .topbar button, .filters, footer, .result-bar button { display: none; }
  .layout { grid-template-columns: 1fr; width: 100%; margin: 8px 0 0; }
  .group, .card { break-inside: avoid; }
}