/* edu-light tokens — 見 DESIGN.md，未經批准不得偏離 */
:root {
  --bg-base: #fafafa;
  --bg-surface: #ffffff;
  --bg-elevated: #f4f4f8;
  --primary-50: #eef2ff;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --success-50: #d1fae5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-800: #065f46; /* 6.78:1 contrast on --success-50 for text; meets WCAG AA 4.5:1 */
  --warning-50: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-800: #92400e; /* 6.37:1 contrast on --warning-50 for text; meets WCAG AA 4.5:1 */
  --error-50: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-800: #991b1b; /* 6.80:1 contrast on --error-50 for text; meets WCAG AA 4.5:1 */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-default: #e5e7eb;
  --border-strong: #d1d5db;
  --radius: 12px;
  --shadow: 0 1px 3px rgb(17 24 39 / 8%), 0 4px 12px rgb(17 24 39 / 5%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
}

.wrap { max-width: 880px; margin: 0 auto; }

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 1rem;
}
header.site h1 { font-size: 1.75rem; font-weight: 700; margin: 0; }
header.site a { color: var(--text-secondary); text-decoration: none; font-size: .95rem; }
header.site a:hover { color: var(--primary-600); }

.privacy {
  background: var(--success-50);
  color: var(--success-800);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.tool-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tool-card:hover {
  border-color: var(--primary-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.tool-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; color: var(--primary-600); }
.tool-card p  { margin: 0; font-size: .92rem; color: var(--text-secondary); }

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over {
  border-color: var(--primary-500);
  background: var(--primary-50);
  color: var(--primary-700);
}
/* 工具跑緊一個 job 期間鎖住 dropzone（toolpage.mjs 嘅 dz.setEnabled(false)），
   避免畫面睇落仲可以拖放但其實輸入已被拒收。同 button.primary:disabled
   用返同一套「淡化 + not-allowed」語言，唔加新顏色。 */
.dropzone.disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }

.filelist { list-style: none; margin: 1rem 0 0; padding: 0; }
.filelist li {
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg-elevated);
  border-radius: 8px; padding: .6rem .85rem; margin-bottom: .4rem;
  font-size: .92rem;
}
/* grab 游標只喺真係支援拖曳排序嘅清單先顯示（merge／images-to-pdf）；
   split／organize／nup／margin 用單檔或者唔支援排序嘅清單，冇拖曳功能，
   唔應該暗示拖得郁。sortable class 由 dropzone.mjs 嘅 renderFileList() 掛。 */
.filelist.sortable li { cursor: grab; }
.filelist li.dragging { opacity: .4; }
.filelist .grip { color: var(--text-muted); }
.filelist .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist button {
  border: none; background: none; color: var(--error-600);
  cursor: pointer; font-size: .85rem;
}

label { display: block; font-weight: 600; font-size: .92rem; margin: 1rem 0 .35rem; }
input[type="text"], input[type="number"], textarea, select {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-elevated); color: var(--text-primary);
  font: inherit; font-size: .95rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary-500); outline-offset: 1px; }
textarea { min-height: 9rem; resize: vertical; font-family: ui-monospace, monospace; }
.radio-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .5rem 0; }
.radio-row label { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.hint { font-size: .85rem; color: var(--text-muted); margin-top: .3rem; }

button.primary {
  background: var(--primary-500); color: #fff;
  border: none; border-radius: 8px;
  padding: .7rem 1.4rem; font: inherit; font-weight: 600;
  cursor: pointer; margin-top: 1.25rem;
}
button.primary:hover:not(:disabled) { background: var(--primary-600); }
button.primary:disabled { background: var(--border-strong); cursor: not-allowed; }
button.secondary {
  background: var(--bg-surface); color: var(--primary-600);
  border: 1px solid var(--primary-500); border-radius: 8px;
  padding: .7rem 1.4rem; font: inherit; font-weight: 600;
  cursor: pointer; margin-top: 1.25rem;
}

.msg { border-radius: 8px; padding: .7rem 1rem; margin-top: 1rem; font-size: .92rem; }
.msg.error   { background: var(--error-50);   color: var(--error-800); }
.msg.ok      { background: var(--success-50); color: var(--success-800); }
.msg.warn    { background: var(--warning-50); color: var(--warning-800); }
.msg[hidden] { display: none; }

table.preview { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
table.preview th, table.preview td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border-default); }
table.preview th { color: var(--text-secondary); font-weight: 600; }
table.preview tr.warn { background: var(--warning-50); }
table.preview tr.dup  { background: var(--error-50); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; margin-top: 1rem; }
.thumb { position: relative; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 8px; padding: .4rem; cursor: grab; }
.thumb.dragging { opacity: .4; }
.thumb canvas { width: 100%; height: auto; display: block; }
.thumb .no { position: absolute; top: .3rem; left: .3rem; background: rgb(17 24 39 / 70%); color: #fff; font-size: .7rem; padding: .05rem .35rem; border-radius: 4px; }
.thumb .acts { display: flex; justify-content: center; gap: .5rem; margin-top: .3rem; }
.thumb .acts button { border: none; background: none; cursor: pointer; font-size: .95rem; color: var(--text-secondary); }
.thumb.removed { opacity: .3; }