/* 證件照製作 */
.tool { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .tool { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; } .tool > .lead, .tool > .notes, .tool > .status { grid-column: 1 / -1; } }
.lead { margin: 0; text-align: center; color: var(--muted); }
.panel { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.panel h2 { margin: 0 0 10px; font-size: 1.125rem; }

.drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px; text-align: center;
  border: 2px dashed var(--accent); border-radius: 12px; background: var(--panel); cursor: pointer;
}
.drop input { max-width: 100%; }
.drop small { color: var(--muted); }

.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > span { font-weight: 700; }
.field select, .field input[type="number"] {
  font: inherit; font-size: 1.0625rem; padding: 8px 10px; border: 2px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--ink); width: 100%;
}
.field input[type="range"] { width: 100%; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; margin-bottom: 8px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.preview { display: grid; justify-items: center; gap: 10px; }
.preview .frame {
  display: grid; place-items: center; min-height: 14rem; width: 100%; padding: 12px;
  background: repeating-conic-gradient(#f3f3f3 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); border-radius: 8px;
}
.preview img { max-width: 100%; max-height: 28rem; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.empty { color: var(--muted); }
.meta { margin: 0; color: var(--muted); font-size: .9375rem; text-align: center; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.btn-s {
  min-height: 46px; padding: 6px 18px; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
}
.btn-s:hover:not(:disabled), .btn-s:focus-visible { border-color: var(--accent); outline: none; }
.btn-s:disabled { opacity: .4; cursor: default; }
.btn-s.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.status { margin: 0; font-weight: 700; }
.error { color: #C0392B; }
.notes { margin: 0; padding-left: 1.25rem; color: var(--muted); }