body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #fafafa;
  margin: 0;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
}

.header h1 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #333;
}
.subtitle {
  margin: 0 0 16px;
  color: #666;
  font-size: 14px;
}

.controls {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 16px;
}
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.label {
  flex: 0 0 100px;
  white-space: nowrap;
  color: #333;
}
.inline { color: #666; }
.unit { color: #666; margin-right: 8px; }
.checkbox-inline { color: #333; display: inline-flex; align-items: center; gap: 6px; }

input[type="number"], select {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}

input[type="file"] {
  padding: 6px;
}

button {
  padding: 8px 14px;
  background: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
button:hover {
  background: #218838;
  box-shadow: 0 6px 14px rgba(33, 136, 56, 0.3);
  transform: translateY(-1px);
}

/* DPI slider */
#dpi {
  width: 200px;
  -webkit-appearance: none;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}
#dpi::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 12px;
  background: linear-gradient(to bottom, #28a745, #218838);
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
#dpi::-moz-range-thumb {
  width: 30px;
  height: 12px;
  background: linear-gradient(to bottom, #28a745, #218838);
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  cursor: pointer;
}

.thumbs {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  max-width: 800px;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  margin: 16px 0 0;
}
.thumb {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.thumb .badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #f44336;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
}
.thumb .badge.done {
  background: #28a745;
  color: #fff;
}

.thumb .crop-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
}

/* 裁剪弹窗样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  overflow-y: auto;
}
.modal-inner {
  background: #fff;
  width: 900px;
  max-width: calc(100% - 40px);
  margin: 40px auto;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}
.modal-header .title { font-weight: 600; }
.close-btn {
  background: transparent !important;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #333; /* 始终可见 */
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.close-btn:hover {
  background: rgba(0,0,0,0.06) !important; /* 轻微高亮，不影响主题 */
  color: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  transform: scale(1.06); /* 轻微放大，增强交互感 */
}
.close-btn:active {
  background: rgba(0,0,0,0.10) !important;
  transform: scale(0.96);
}
.close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.35);
}
.modal-body { padding: 10px 12px; display: flex; justify-content: center; overflow: auto; }
#crop-canvas { background: #222; border-radius: 8px; }
/* 预览弹窗图片尺寸约束 */
#preview-img {
  max-width: calc(100% - 20px);
  max-height: 72vh;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 16px;
}
.toolbar { display: flex; align-items: center; gap: 10px; }
.actions { display: flex; gap: 10px; }
.actions button { padding: 8px 14px; }

.result { margin-top: 16px; }
.pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.page-preview {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 10px;
}
.page-preview img { width: 100%; height: auto; border-radius: 4px; }
.page-meta { font-size: 12px; color: #666; margin-top: 4px; display: flex; justify-content: space-between; }

.actions { margin-top: 12px; }
.loading { margin-top: 12px; color: #333; }

@media (max-width: 768px) {
  .controls { padding: 12px; }
  .row { gap: 8px; }
}

@media (max-height: 700px) {
  .modal-inner { margin: 20px auto; max-height: calc(100vh - 40px); }
}

/* ---- Buttons: unified styles for photo_layout ---- */
.controls .row button,
.actions button,
.modal .actions button,
.modal .toolbar button {
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.controls .row button:hover,
.actions button:hover,
.modal .actions button:hover,
.modal .toolbar button:hover {
  background-color: #218838;
  box-shadow: 0 6px 14px rgba(33,136,56,0.35);
  transform: translateY(-1px);
}
.controls .row button:active,
.actions button:active,
.modal .actions button:active,
.modal .toolbar button:active {
  transform: translateY(0);
}
.controls .row button:disabled,
.actions button:disabled,
.modal .actions button:disabled,
.modal .toolbar button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary/secondary emphasis */
#generate,
#download-all,
#crop-save {
  background: linear-gradient(to bottom, #2ecc71, #28a745);
}

#crop-cancel,
#crop-reset {
  background: #6c757d;
}
#crop-cancel:hover,
#crop-reset:hover {
  background: #5a6268;
}

/* Make clear button match the upload (file-select) style */
#clear {
  background: linear-gradient(to bottom, #2ecc71, #28a745);
}

#crop-rotate {
  background: #007bff;
}
#crop-rotate:hover {
  background: #0069d9;
}

/* --- DPI modal refinements --- */
.modal-small .modal-inner { width: 460px; }
#dpi-modal .modal-body { padding: 16px; display: block; }
#dpi-modal .modal-footer { justify-content: flex-end; padding: 8px 16px 16px; }
#dpi-modal .modal-header { padding: 10px 16px; }
#dpi-modal .modal-body .row { display: flex; align-items: center; gap: 8px; }
#dpi-modal input[type="range"] { width: 100%; }

/* File input button styling */
.controls input[type="file"]::file-selector-button {
  background: linear-gradient(to bottom, #2ecc71, #28a745);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.controls input[type="file"]::file-selector-button:hover {
  background-color: #218838;
  box-shadow: 0 6px 14px rgba(33,136,56,0.35);
  transform: translateY(-1px);
}
/* Safari/legacy WebKit fallback */
.controls input[type="file"]::-webkit-file-upload-button {
  background: linear-gradient(to bottom, #2ecc71, #28a745);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.controls input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #218838;
  box-shadow: 0 6px 14px rgba(33,136,56,0.35);
  transform: translateY(-1px);
}

/* Keep thumbnail crop button readable over image */
.thumb .crop-btn {
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
}
/* 统一控件宽度与对齐，避免大小不一致导致错乱 */
.controls .row select { width: 160px; height: 32px; }
.controls .row input[type="number"] { width: 120px; height: 32px; }
.controls .row .inline, .controls .row .unit { min-width: 24px; text-align: center; }

@media (max-width: 768px) {
  .controls .row select { width: 140px; }
  .controls .row input[type="number"] { width: 100px; }
}

/* 使用网格布局让下拉与输入框上下左对齐 */
.controls .row.row-photo,
.controls .row.row-paper {
  display: grid;
  grid-template-columns: 80px 160px 24px 120px 32px 24px 120px 32px; /* label | select | 宽 | 宽值 | mm | 高 | 高值 | mm */
  column-gap: 10px;
  align-items: center;
}

.controls .row.row-gap {
  display: grid;
  grid-template-columns: 80px 120px 32px; /* label | 值 | mm */
  column-gap: 10px;
  align-items: center;
}
.modal-small { /* allow flex centering when shown */
  align-items: center;
  justify-content: center;
}
.modal-small .modal-inner { margin: 0; }