:root {
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #dfe5ec;
  --line-soft: #edf1f5;
  --text: #18212f;
  --muted: #667085;
  --accent: #087f8c;
  --accent-dark: #06616b;
  --green: #15803d;
  --amber: #b45309;
  --red: #b42318;
  --blue: #2563eb;
  --shadow: 0 16px 40px rgba(24, 33, 47, .16);
  --radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
input, select, textarea, button {
  font: inherit;
  color: inherit;
}

.app-shell { display: grid; grid-template-columns: 190px 1fr; min-height: 100vh; }
.sidebar {
  background: #111827;
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent);
  color: white;
}
.nav { padding: 10px 8px; display: grid; gap: 3px; }
.nav a {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 13px;
}
.nav a.active, .nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidebar-user {
  margin-top: auto;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: #aab4c3;
}
.sidebar-user strong { color: white; font-size: 13px; }
.sidebar-user a { color: #8ee3eb; }

.main { min-width: 0; padding: 12px; }
.topbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.topbar h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.top-quota { color: var(--muted); font-size: 12px; }
.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.btn:hover { border-color: #b8c2cf; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-dark); }
.btn.full { width: 100%; }

.flash {
  padding: 9px 11px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: #ecfdf3;
  color: #067647;
}
.flash.err { background: #fff1f0; color: var(--red); border-color: #ffd1cc; }

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.filterbar .search { flex: 1 1 240px; }
.filterbar input[type="date"] { width: 142px; }
.filterbar select { width: 130px; }
.filterbar input, .filterbar select, .form-panel input, .form-panel select, .form-panel textarea, .work-side textarea, .review-box textarea, .review-box select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 7px 9px;
  outline: none;
}
.filterbar input:focus, .filterbar select:focus, textarea:focus, input:focus, select:focus { border-color: var(--accent); }
.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}
.task-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
}
.task-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 34px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
  font-weight: 650;
}
.task-table td {
  height: 48px;
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 8px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-table tr:hover td { background: #fbfdff; }
.task-table .check { width: 34px; text-align: center; }
.task-table th:nth-child(2) { width: 62px; }
.task-table th:nth-child(3) { width: 58px; }
.task-table th:nth-child(4) { width: 36%; }
.task-table th:nth-child(5) { width: 82px; }
.task-table th:nth-child(6) { width: 76px; }
.task-table th:nth-child(7) { width: 84px; }
.task-table th:nth-child(8) { width: 82px; }
.task-table th:nth-child(9) { width: 84px; }
.task-table th:nth-child(10) { width: 92px; }
.mono, .time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); font-size: 12px; }
.thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #f8fafc;
}
.mini {
  width: 27px;
  height: 27px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--line);
  margin-right: 3px;
}
.title-cell { display: grid; gap: 2px; }
.title-cell a { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.title-cell span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pill, .status {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  background: #f2f4f7;
  color: #475467;
}
.pill.urgent { background: #fff7ed; color: var(--amber); }
.status.pending, .status.retry { background: #eff6ff; color: var(--blue); }
.status.claimed, .status.processing { background: #fff7ed; color: var(--amber); }
.status.review { background: #ecfeff; color: #0e7490; }
.status.approved { background: #ecfdf3; color: var(--green); }
.status.rejected { background: #fff1f0; color: var(--red); }
.status.archived { background: #f2f4f7; color: #667085; }
.result-slots { display: flex; align-items: center; }
.icon-download { color: var(--accent); font-size: 12px; margin-left: 4px; }
.ops { display: flex; gap: 9px; font-size: 13px; }
.ops a { color: var(--accent); }
.row-process {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
  font-size: 13px;
}
.row-process:disabled { color: var(--muted); cursor: wait; }
.status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amber);
  font-size: 12px;
  white-space: nowrap;
}
.status-live.working::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid #fed7aa;
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: task-spin .8s linear infinite;
}
.status-live.success { color: var(--green); }
.status-live.error { color: var(--red); white-space: normal; }
@keyframes task-spin { to { transform: rotate(360deg); } }
.row-form {
  display: grid;
  grid-template-columns: 130px 70px 82px minmax(120px, 1fr) 66px;
  align-items: center;
  gap: 6px;
}
.row-form select, .row-form input {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: #fff;
}
.users-page { display: grid; gap: 10px; }
.user-create-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.panel-title { display: flex; align-items: baseline; gap: 10px; }
.panel-title h2 { margin: 0; font-size: 15px; }
.panel-title span { color: var(--muted); font-size: 12px; }
.user-create-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(160px, 1.2fr) 130px 100px 126px auto;
  align-items: end;
  gap: 8px;
}
.user-create-grid label { display: grid; gap: 5px; color: #475467; font-size: 12px; }
.user-create-grid input, .user-create-grid select, .table-input, .table-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 8px;
  outline: none;
}
.user-create-grid input:focus, .user-create-grid select:focus, .table-input:focus, .table-select:focus { border-color: var(--accent); }
.create-check { min-height: 34px; display: flex !important; flex-direction: row; align-items: center; gap: 7px !important; padding: 0 4px; white-space: nowrap; }
.create-check input { width: auto; min-height: 0; }
.user-table-wrap { max-width: 100%; }
.user-table { width: 100%; min-width: 1120px; border-collapse: collapse; table-layout: fixed; }
.user-table th { height: 36px; background: #f8fafc; border-bottom: 1px solid var(--line); color: #475467; font-size: 12px; font-weight: 650; text-align: left; padding: 0 8px; }
.user-table td { height: 52px; border-bottom: 1px solid var(--line-soft); padding: 6px 8px; vertical-align: middle; }
.user-table tr:hover td { background: #fbfdff; }
.user-table th:nth-child(1) { width: 58px; }
.user-table th:nth-child(2) { width: 130px; }
.user-table th:nth-child(3) { width: 125px; }
.user-table th:nth-child(4) { width: 128px; }
.user-table th:nth-child(5) { width: 108px; }
.user-table th:nth-child(6) { width: 112px; }
.user-table th:nth-child(7) { width: 86px; }
.user-table th:nth-child(8) { width: 170px; }
.user-table th:nth-child(9) { width: 76px; }
.table-check { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.table-check input { margin: 0; }
.quota-control { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 6px; }
.quota-control span { color: var(--muted); font-size: 10px; line-height: 1.2; }
.password-input::placeholder { color: #98a2b3; }
.empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

.image-preview {
  position: fixed;
  z-index: 999;
  width: 420px;
  max-width: 42vw;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  pointer-events: none;
}
.image-preview img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 5px;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 23, 42, .82);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.image-lightbox[hidden] { display: none; }
.image-lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; background: #fff; box-shadow: var(--shadow); }

.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.form-panel.compact { align-content: start; }
.form-panel label { display: grid; gap: 5px; color: #344054; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 150px 1fr 1fr; gap: 10px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.quota-hint, .muted { color: var(--muted); font-size: 12px; }
.paste-upload {
  min-height: 142px;
  border: 1px dashed #aab8c7;
  border-radius: 7px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: var(--muted);
  text-align: center;
  padding: 10px;
}
.paste-upload:focus, .paste-upload.dragover { border-color: var(--accent); background: #eefcff; outline: none; }
.paste-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.paste-upload img { max-width: 100%; max-height: 180px; object-fit: contain; }
.checkline { display: flex !important; align-items: center; grid-template-columns: auto 1fr; }
.checkline input { width: auto; min-height: 0; }

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 10px;
}
.media-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.media-compare figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 420px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 34px;
  overflow: hidden;
}
.media-compare img { width: 100%; height: 100%; object-fit: contain; background: #f8fafc; }
.media-compare figcaption { padding: 8px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.empty-figure { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #f1f5f9 12px, #f1f5f9 24px); }
.detail-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  overflow: auto;
}
.detail-side h2, .form-panel h2 { margin: 0 0 8px; font-size: 16px; }
.detail-side dt { margin-top: 10px; color: var(--muted); font-size: 12px; }
.detail-side dd { margin: 4px 0 0; }
.pre { white-space: pre-wrap; line-height: 1.55; font-size: 13px; }
.review-box { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.workbench {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 390px;
  gap: 10px;
  min-height: calc(100vh - 76px);
}
.queue, .work-image, .work-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}
.queue { padding: 6px; }
.queue a {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: 7px;
  border: 1px solid transparent;
}
.queue a.active, .queue a:hover { background: #eefcff; border-color: #b7edf2; }
.queue span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.queue em { font-style: normal; color: var(--muted); font-size: 12px; }
.work-image { display: grid; place-items: center; background: #f8fafc; }
.work-image img { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain; }
.work-side { padding: 12px; display: grid; align-content: start; gap: 10px; }
.work-side h2 { margin: 0; font-size: 16px; }
.inline-actions { display: flex; gap: 8px; align-items: center; }
.upload-results { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid var(--line); }

.split {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 10px;
}
.prompt-list { display: grid; gap: 8px; }
.prompt-list article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}
.prompt-list p { color: var(--muted); margin: 6px 0; }
.prompt-list pre {
  margin: 0;
  max-height: 96px;
  overflow: auto;
  white-space: pre-wrap;
  color: #344054;
  background: #f8fafc;
  border: 1px solid var(--line-soft);
  padding: 8px;
  border-radius: 6px;
}
.prompt-list span { display: inline-block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.prompt-list .btn.small { min-height: 27px; margin-left: 8px; padding: 0 8px; }
.batch-progress { color: var(--accent-dark); font-weight: 650; }
.process-message { min-height: 20px; color: var(--muted); font-size: 12px; }
.process-message.err { color: var(--red); }
.quota-field { display: flex; align-items: center; gap: 5px; }
.quota-field input { width: 72px; }
.settings-grid { display: grid; grid-template-columns: minmax(320px, 520px) minmax(260px, 1fr); gap: 10px; }
.switchline { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.switchline input { width: 18px; min-height: 18px; }
.stats-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 8px 12px; }
.stats-panel h2 { grid-column: 1 / -1; margin: 0 0 8px; font-size: 16px; }
.stats-panel strong { font-size: 24px; color: var(--accent-dark); }
.stats-panel span { align-self: center; color: var(--muted); }
.result-history { margin-top: 10px; }
.result-history h2 { margin: 0 0 8px; font-size: 16px; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.history-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px; display: grid; grid-template-columns: 68px 1fr; gap: 9px; min-width: 0; }
.history-grid img { width: 68px; height: 68px; object-fit: cover; border-radius: 5px; cursor: zoom-in; }
.history-grid article div { min-width: 0; display: grid; align-content: center; gap: 4px; }
.history-grid span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-grid a { color: var(--accent); font-size: 12px; }

.login-page {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: 40px clamp(28px, 9vw, 168px);
  background-color: #080d11;
  background-image: url('login-background.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.login-card {
  width: min(410px, calc(100vw - 40px));
  background: rgba(10, 18, 23, .82);
  border: 1px solid rgba(179, 231, 237, .22);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 26px;
  display: grid;
  gap: 15px;
  color: #f8fafc;
}
.login-heading { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; margin-bottom: 5px; }
.login-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(111, 230, 240, .55); border-radius: 7px; background: rgba(8, 127, 140, .2); color: #8ceaf2; font-size: 19px; font-weight: 750; }
.login-card h1 { margin: 0; font-size: 22px; color: #fff; }
.login-card p { margin: 4px 0 0; color: #9fb0ba; font-size: 12px; }
.login-card label { display: grid; gap: 7px; color: #c9d5da; font-size: 12px; }
.login-card input { min-height: 42px; border: 1px solid rgba(194, 222, 226, .2); border-radius: 7px; padding: 9px 11px; background: rgba(255, 255, 255, .07); color: #fff; outline: none; }
.login-card input:focus { border-color: #63dbe6; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(8, 127, 140, .16); }
.login-card .btn.primary { min-height: 42px; background: #078795; border-color: #078795; font-weight: 700; }
.login-card .btn.primary:hover { background: #079baa; }
.login-copyright {
  position: fixed;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(218, 232, 235, .32);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.login-copyright i { width: 1px; height: 8px; background: rgba(218, 232, 235, .2); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 154px 1fr; }
  .sidebar { font-size: 13px; }
  .form-grid, .detail-layout, .workbench, .split, .settings-grid { grid-template-columns: 1fr; }
  .media-compare { grid-template-columns: 1fr; }
  .workbench { min-height: auto; }
}

@media (max-width: 1320px) {
  .user-create-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
}

@media (max-width: 640px) {
  .login-page { justify-items: center; padding: 20px; background-position: 67% center; }
  .login-card { width: 100%; padding: 22px; background: rgba(8, 15, 20, .88); }
  .login-copyright { bottom: 10px; gap: 6px; font-size: 9px; }
}