:root {
  --ink: #27231b;
  --ink-soft: #514a3d;
  --muted: #7b7363;
  --line: #e6dac0;
  --line-strong: #d3c19e;
  --canvas: #f7efdf;
  --paper: #fffdf8;
  --paper-warm: #fff8e8;
  --gold: #f2bf37;
  --gold-dark: #775000;
  --gold-soft: #fff0b7;
  --amber: #bd760d;
  --green: #15926e;
  --green-dark: #0b644c;
  --green-soft: #d9f1e7;
  --red: #d24740;
  --red-dark: #8f2f2b;
  --blue: #3f76ae;
  --shadow-ink: #6f5b351f;
  font-family: "Avenir Next", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 7px;
  pointer-events: none;
  background: var(--gold);
  box-shadow: 0 1px 0 #fff5c2, 0 5px 18px #aa7a1d2e;
  z-index: 30;
}
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, select { min-height: 42px; }
button {
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}
button:not(:disabled):hover { transform: translateY(-2px); }
button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); }
button:disabled { cursor: not-allowed; opacity: .48; }
button[aria-busy="true"] { cursor: wait; }
button[aria-busy="true"] svg { display: none; }
button[aria-busy="true"]::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin .7s linear infinite;
}
[hidden] { display: none !important; }

@keyframes button-spin { to { transform: rotate(360deg); } }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 5px #3f76ae22; } }
@keyframes retry-pulse { 50% { box-shadow: 0 0 0 6px #bd760d22; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes view-enter { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  button[aria-busy="true"]::before, .operation-bubble { animation: none; }
}

.topbar {
  height: 76px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 9px 0 #eaddc21f, 0 15px 32px #6f5b3514;
}
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.brand-lockup h1 { margin: 0; font: 800 23px/1.05 "Avenir Next", "Noto Sans SC", sans-serif; letter-spacing: 0; }
.brand-lockup p { margin: 5px 0 0; color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: uppercase; }
.brand-lockup.compact h1 { font-size: 18px; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--gold);
  border: 1px solid #bd850f;
  border-radius: 12px;
  box-shadow: 0 4px 0 #b77d0d, inset 0 1px 0 #fff6be, inset 0 -3px 8px #c38b1e44;
  font: 900 21px/1 sans-serif;
}
.top-actions { display: flex; align-items: center; gap: 18px; }
.health { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.health span { width: 9px; height: 9px; background: var(--green); border: 2px solid #bde6d5; border-radius: 50%; box-shadow: 0 0 0 2px #15926e22; }
.icon-button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-soft);
  background: var(--paper);
  box-shadow: 0 3px 0 #cdbb98, inset 0 1px 0 #ffffff;
}
.icon-button:hover { color: var(--ink); border-color: var(--amber); background: var(--paper-warm); box-shadow: 0 5px 0 #cdbb98, inset 0 1px 0 #ffffff; }
.icon-button svg { width: 18px; height: 18px; }

main { max-width: 1480px; margin: 0 auto; padding: 34px 36px 58px; }
.view-switch {
  width: fit-content;
  margin: 0 0 26px;
  padding: 5px;
  display: flex;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #eadfc9;
  box-shadow: inset 0 2px 3px #6f5b3522, 0 3px 0 #d5c5a6;
}
.view-switch-button {
  min-height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}
.view-switch-button svg { width: 16px; height: 16px; }
.view-switch-button:hover { color: var(--ink); background: #fffdf8a8; }
.view-switch-button.active {
  color: var(--ink);
  border-color: #bd850f;
  background: var(--gold);
  box-shadow: 0 3px 0 #b77d0d, inset 0 1px 0 #fff6be;
}
.view-panel { animation: view-enter 180ms ease-out; }
.workflow-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.workflow-head h2 { margin: 4px 0 0; font: 800 28px/1.15 "Avenir Next", "Noto Sans SC", sans-serif; letter-spacing: 0; }
.eyebrow { margin: 0; color: var(--amber); font-size: 11px; font-weight: 850; letter-spacing: 0; }
.task-summary { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.task-summary > span {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 3px 0 #d6c6a7, inset 0 1px 0 #ffffff;
}
.task-summary strong { margin-left: 3px; color: var(--ink); font: 850 14px ui-monospace, monospace; }

.workspace-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  min-height: 670px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 7px 0 #ddcfb2, 0 19px 42px var(--shadow-ink), inset 0 1px 0 #ffffff;
}
.control-pane, .tasks-pane { min-width: 0; padding: 27px; }
.control-pane { background: #fffaf0; }
.tasks-pane { border-left: 1px solid var(--line); background: #fbf5e8; }
.section-title { display: flex; gap: 11px; align-items: center; margin-bottom: 19px; }
.section-title h3 { margin: 0; font-size: 16px; font-weight: 850; }
.step-index { color: var(--amber); font: 850 12px ui-monospace, monospace; }
.task-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-heading-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.task-heading h3 { margin: 0; font-size: 17px; font-weight: 850; }
.task-count { min-width: 28px; padding: 4px 8px; border: 1px solid #b8ddcd; border-radius: 8px; color: var(--green-dark); background: var(--green-soft); text-align: center; font: 850 11px ui-monospace, monospace; }
.operation-bubble {
  padding: 7px 12px;
  border: 1px solid #dbac43;
  border-radius: 999px;
  color: var(--gold-dark);
  background: var(--gold-soft);
  box-shadow: 0 3px 0 #d4b15f, inset 0 1px 0 #fffbe0;
  font: 800 11px ui-monospace, monospace;
  animation: retry-pulse 1.4s ease-in-out infinite;
}
.task-tools { margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.task-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px; }
.task-filter {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--muted);
  background: var(--paper);
  box-shadow: 0 3px 0 #d7c8aa, inset 0 1px 0 #ffffff;
  font-size: 12px;
  font-weight: 800;
}
.task-filter strong { margin-left: 4px; color: inherit; font: 850 11px ui-monospace, monospace; }
.task-filter:hover { border-color: var(--amber); color: var(--ink); box-shadow: 0 5px 0 #d7c8aa, inset 0 1px 0 #ffffff; }
.task-filter:focus-visible { outline: 3px solid #f2bf3766; outline-offset: 2px; }
.task-filter.active { border-color: var(--ink); color: #fffdf8; background: var(--ink); box-shadow: 0 3px 0 #12100d, inset 0 1px 0 #ffffff2c; }
.task-filter.plan-20x.active { border-color: #bd850f; color: var(--gold-dark); background: var(--gold); box-shadow: 0 3px 0 #b77d0d, inset 0 1px 0 #fff6be; }
.task-filter.plan-5x.active { border-color: var(--green-dark); color: #ffffff; background: var(--green); box-shadow: 0 3px 0 #09523e, inset 0 1px 0 #c8f1df66; }
.batch-toolbar { min-height: 44px; margin-top: 12px; display: flex; align-items: center; gap: 11px; }
.select-all-control { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; cursor: pointer; }
.select-all-control input, .task-selection input { width: 17px; height: 17px; margin: 0; accent-color: var(--amber); }
.select-all-control:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.selected-count { color: var(--muted); font: 750 12px ui-monospace, monospace; }
.export-selected, .retry-visible { min-height: 38px; margin: 0; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.export-selected { color: var(--green-dark); border-color: #9bcab8; background: var(--paper); box-shadow: 0 3px 0 #82b39e, inset 0 1px 0 #ffffff; }
.export-selected:hover { color: #064b38; border-color: var(--green); background: var(--green-soft); box-shadow: 0 5px 0 #82b39e, inset 0 1px 0 #ffffff; }
.export-selected svg, .retry-visible svg { width: 16px; height: 16px; }
.retry-visible { margin-left: auto; color: var(--gold-dark); border-color: #d7ae5a; background: var(--paper-warm); box-shadow: 0 3px 0 #c99d43, inset 0 1px 0 #fffef1; }
.retry-visible:hover { border-color: var(--amber); background: var(--gold-soft); box-shadow: 0 5px 0 #c99d43, inset 0 1px 0 #fffef1; }
.retry-visible strong { min-width: 21px; padding: 2px 6px; border-radius: 6px; color: var(--gold-dark); background: #f3d58d; font: 850 11px ui-monospace, monospace; }
.task-list { max-height: calc(100vh - 300px); margin: 16px 0 0; padding: 0 5px 4px 0; overflow: auto; list-style: none; }
.task-list li + li { margin-top: 12px; }
.task-item {
  min-height: 158px;
  padding: 17px 19px;
  display: grid;
  grid-template-rows: minmax(32px, auto) auto 6px minmax(22px, auto);
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #b6aa90;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 4px 0 #e0d3b9, 0 10px 20px #6f5b3512, inset 0 1px 0 #ffffff;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.task-item:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #e0d3b9, 0 15px 25px #6f5b3520, inset 0 1px 0 #ffffff; }
.task-item.busy { border-left-color: var(--blue); }
.task-item.retrying { border-color: #e1c17c; border-left-color: var(--amber); background: #fffaf0; }
.task-item.ready, .task-item.paid { border-left-color: var(--green); }
.task-item.failed { border-color: #efc7c3; border-left-color: var(--red); background: #fff9f7; box-shadow: 0 4px 0 #e8c6bc, 0 10px 20px #b33b3b16, inset 0 1px 0 #ffffff; }
.task-item.selected { border-color: #72b39d; box-shadow: 0 4px 0 #9bcdb9, 0 0 0 3px #15926e1c, 0 12px 22px #15926e1b; }
.task-item-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.task-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.task-selection { flex: 0 0 auto; margin: 0; display: grid; place-items: center; }
.task-selection input:disabled { cursor: not-allowed; opacity: .38; }
.task-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 850; }
.task-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.task-item-status { flex: 0 0 auto; padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: #f0eadc; box-shadow: 0 2px 0 #d9ccb2, inset 0 1px 0 #ffffff; font-size: 13px; font-weight: 850; }
.task-item-status.busy { color: var(--blue); border-color: #b6cee5; background: #e6f0fb; }
.task-item-status.ready { color: var(--green-dark); border-color: #acd8c5; background: var(--green-soft); }
.task-item-status.retrying { color: var(--gold-dark); border-color: #e0bd6c; background: var(--gold-soft); animation: retry-pulse 1.35s ease-in-out infinite; }
.task-item-status.failed { color: var(--red-dark); border-color: #e9b7b2; background: #fde7e4; }
.task-item-status.paid { color: #ffffff; border-color: var(--green-dark); background: var(--green); box-shadow: 0 3px 0 #09523e, inset 0 1px 0 #d7ffea55; }
.task-item-status.paid.plan-20x { color: var(--gold-dark); border-color: #bd850f; background: var(--gold); box-shadow: 0 3px 0 #b77d0d, inset 0 1px 0 #fff6be; }
.task-item-status.paid.plan-5x { color: #ffffff; border-color: var(--green-dark); background: var(--green); box-shadow: 0 3px 0 #09523e, inset 0 1px 0 #d7ffea55; }
.task-facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 20px; }
.task-facts div { min-width: 0; }
.task-facts dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.task-facts dd { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 14px/21px ui-monospace, monospace; }
.task-payment-fact dd, .task-email-fact dd { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.task-payment-fact, .task-email-fact { grid-column: span 2; }
.task-payment-select {
  width: min(100%, 320px);
  min-height: 36px;
  padding: 6px 30px 6px 9px;
  font: 650 13px/20px ui-monospace, monospace;
}
.task-payment-select:disabled { cursor: not-allowed; opacity: .62; }
.task-payment-select option { color: var(--ink); background: var(--paper); }
.task-email-value { min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.task-email-text { min-width: 0; overflow-wrap: anywhere; }
.task-inline-action {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: var(--paper);
  box-shadow: 0 2px 0 #d7c8aa, inset 0 1px 0 #ffffff;
  font-size: 12px;
  font-weight: 800;
}
.task-inline-action:hover { color: var(--ink); border-color: var(--amber); background: var(--paper-warm); box-shadow: 0 4px 0 #d7c8aa, inset 0 1px 0 #ffffff; }
.task-inline-action:focus-visible { outline: 3px solid #f2bf3766; outline-offset: 2px; }
.task-inline-action svg { width: 16px; height: 16px; pointer-events: none; }
.task-download-sub2 { color: var(--green-dark); border-color: #9bcab8; }
.task-download-sub2:hover { color: #064b38; border-color: var(--green); background: var(--green-soft); }
.task-retry { color: var(--gold-dark); border-color: #d7ae5a; background: var(--paper-warm); }
.task-retry:hover { color: #5c3c00; border-color: var(--amber); background: var(--gold-soft); }
.task-progress { width: 100%; height: 7px; display: block; overflow: hidden; border-radius: 4px; background: #e7ddc9; box-shadow: inset 0 1px 2px #6f5b3527; }
.task-progress-fill { height: 100%; display: block; background: #aaa08d; box-shadow: inset 0 1px 0 #ffffff55; transition: width 180ms ease; }
.task-progress.busy .task-progress-fill { background: var(--blue); }
.task-progress.retrying .task-progress-fill { background: var(--amber); }
.task-progress.ready .task-progress-fill, .task-progress.paid .task-progress-fill { background: var(--green); }
.task-progress.failed .task-progress-fill { background: var(--red); }
.task-item-detail { min-width: 0; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.task-item-detail.failed, .task-error-detail { color: var(--red-dark); }
.task-credential-status { margin-left: auto; text-align: right; font-weight: 750; }
.task-credential-status.busy { color: var(--blue); }
.task-credential-status.paid { color: var(--green-dark); }
.task-credential-status.failed { color: var(--red-dark); }
.task-empty { min-height: 240px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }

label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 750; }
textarea, input, select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 2px 4px #6f5b3510, 0 1px 0 #ffffff;
}
textarea { min-height: 118px; padding: 13px; resize: vertical; font: 12px/1.55 ui-monospace, monospace; }
input, select { padding: 10px 12px; }
textarea:focus, input:focus, select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px #f2bf3740, inset 0 2px 4px #6f5b3510; }
.account-file-import { min-height: 44px; margin-top: 11px; display: flex; align-items: center; gap: 12px; }
.account-file-import .secondary { flex: 0 0 auto; margin-top: 0; }
.account-file-status { min-width: 0; margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.account-file-status.error { color: var(--red-dark); }

.primary, .secondary {
  width: fit-content;
  min-height: 44px;
  margin-top: 15px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-weight: 850;
  text-decoration: none;
}
.primary {
  border: 1px solid #bd850f;
  color: var(--gold-dark);
  background: var(--gold);
  box-shadow: 0 4px 0 #b77d0d, inset 0 1px 0 #fff6be;
}
.primary:hover { color: #4f3500; background: #f7ca4c; box-shadow: 0 6px 0 #b77d0d, inset 0 1px 0 #fff6be; }
.secondary {
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--paper);
  box-shadow: 0 4px 0 #cdbb98, inset 0 1px 0 #ffffff;
}
.secondary:hover { color: var(--ink); border-color: var(--amber); background: var(--paper-warm); box-shadow: 0 6px 0 #cdbb98, inset 0 1px 0 #ffffff; }
.primary svg, .secondary svg { width: 17px; height: 17px; }
.full { width: 100%; }
.divider { height: 1px; margin: 31px 0; background: var(--line); box-shadow: 0 1px 0 #ffffff; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.login-panel { width: min(400px, 100%); padding: 32px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); box-shadow: 0 7px 0 #ddcfb2, 0 20px 45px var(--shadow-ink), inset 0 1px 0 #ffffff; }
.login-panel .brand-lockup { margin-bottom: 29px; }
.form-error { min-height: 20px; margin: 12px 0 0; color: var(--red-dark); font-size: 12px; }
.notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: min(470px, calc(100vw - 48px));
  padding: 13px 17px;
  border: 1px solid #8b7a5b;
  border-left: 5px solid var(--gold);
  border-radius: 12px;
  background: var(--ink);
  color: #fffdf8;
  box-shadow: 0 5px 0 #17130d, 0 15px 32px #6f5b3533;
  font-size: 13px;
  line-height: 20px;
  z-index: 20;
  animation: toast-in 180ms ease-out;
}
.notice.error { border-color: #9f3a36; border-left-color: #ff8d79; background: var(--red-dark); box-shadow: 0 5px 0 #62201d, 0 15px 32px #8f2f2b33; }
.task-copy-notice { bottom: 82px; }

.history-view { min-height: 660px; }
.history-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.history-head h2 { margin: 4px 0 0; font: 800 28px/1.15 "Avenir Next", "Noto Sans SC", sans-serif; }
.history-stats {
  margin-top: 20px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 5px 0 #ddcfb2, 0 14px 30px #6f5b3514, inset 0 1px 0 #ffffff;
}
.history-stat {
  min-width: 112px;
  padding: 10px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 #ffffff;
  font-size: 12px;
  font-weight: 800;
}
.history-stat strong { font: 850 18px ui-monospace, monospace; }
.history-stat.neutral { color: var(--ink-soft); border-color: #d9cfbb; background: #f5f0e6; }
.history-stat.gold { color: var(--gold-dark); border-color: #e0bd6c; background: var(--gold-soft); box-shadow: 0 3px 0 #d4b15f, inset 0 1px 0 #fffbe0; }
.history-stat.green { color: var(--green-dark); border-color: #a5d2bd; background: var(--green-soft); box-shadow: 0 3px 0 #8dbda7, inset 0 1px 0 #ffffff; }
.history-stat.red { color: var(--red-dark); border-color: #e5b9b4; background: #fde7e4; box-shadow: 0 3px 0 #d8a19a, inset 0 1px 0 #ffffff; }
.history-toolbar { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; }
.history-filters { display: flex; gap: 8px; }
.history-filter {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--muted);
  background: var(--paper);
  box-shadow: 0 3px 0 #d7c8aa, inset 0 1px 0 #ffffff;
  font-size: 12px;
  font-weight: 800;
}
.history-filter:hover { color: var(--ink); border-color: var(--amber); box-shadow: 0 5px 0 #d7c8aa, inset 0 1px 0 #ffffff; }
.history-filter.active { color: #fffdf8; border-color: var(--ink); background: var(--ink); box-shadow: 0 3px 0 #12100d, inset 0 1px 0 #ffffff2c; }
.history-filter.gold.active { color: var(--gold-dark); border-color: #bd850f; background: var(--gold); box-shadow: 0 3px 0 #b77d0d, inset 0 1px 0 #fff6be; }
.history-filter.green.active { color: #ffffff; border-color: var(--green-dark); background: var(--green); box-shadow: 0 3px 0 #09523e, inset 0 1px 0 #c8f1df66; }
.history-filter.red.active { color: #ffffff; border-color: var(--red-dark); background: var(--red); box-shadow: 0 3px 0 #8f2f2b, inset 0 1px 0 #ffd3ce66; }
.history-list {
  margin: 16px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 5px 0 #ddcfb2, 0 14px 30px #6f5b3514;
  list-style: none;
}
.history-row + .history-row { border-top: 1px solid var(--line); }
.history-row { background: var(--paper); transition: background 150ms ease; }
.history-row:hover, .history-row.expanded { background: #fff9ed; }
.history-row-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; }
.history-toggle {
  min-width: 0;
  min-height: 80px;
  padding: 14px 10px 14px 19px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(410px, auto) 22px;
  align-items: center;
  gap: 17px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.history-identity { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.history-date { font-size: 14px; font-weight: 850; }
.history-meta { color: var(--muted); font-size: 12px; }
.history-results { display: flex; justify-content: flex-end; gap: 8px; }
.history-metric {
  min-width: 78px;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 #ffffff;
  font-size: 11px;
  font-weight: 800;
}
.history-metric strong { font: 850 12px ui-monospace, monospace; }
.history-metric.neutral { color: var(--ink-soft); border-color: #d9cfbb; background: #f5f0e6; }
.history-metric.gold { color: var(--gold-dark); border-color: #e0bd6c; background: var(--gold-soft); }
.history-metric.green { color: var(--green-dark); border-color: #a5d2bd; background: var(--green-soft); }
.history-metric.red { color: var(--red-dark); border-color: #e5b9b4; background: #fde7e4; }
.history-chevron { width: 17px; height: 17px; color: var(--muted); transition: transform 160ms ease; }
.history-row.expanded .history-chevron { transform: rotate(180deg); }
.history-download {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #9bcab8;
  border-radius: 9px;
  color: var(--green-dark);
  background: var(--paper);
  box-shadow: 0 3px 0 #82b39e, inset 0 1px 0 #ffffff;
}
.history-download:hover { border-color: var(--green); background: var(--green-soft); box-shadow: 0 5px 0 #82b39e, inset 0 1px 0 #ffffff; }
.history-download svg { width: 16px; height: 16px; }
.history-detail { padding: 0 19px 17px; animation: view-enter 160ms ease-out; }
.history-detail-loading, .history-empty { min-height: 120px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.history-empty.error { color: var(--red-dark); }
.history-task-list { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; list-style: none; }
.history-task + .history-task { border-top: 1px solid var(--line); }
.history-task { min-height: 54px; padding: 10px 13px; display: grid; grid-template-columns: minmax(170px, .8fr) 140px minmax(240px, 1.6fr); align-items: center; gap: 15px; background: #fffaf0; }
.history-task-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.history-task-identity strong { font-size: 12px; }
.history-task-identity span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.history-task-status { width: fit-content; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 850; }
.history-task-status.gold { color: var(--gold-dark); border-color: #e0bd6c; background: var(--gold-soft); }
.history-task-status.green { color: var(--green-dark); border-color: #a5d2bd; background: var(--green-soft); }
.history-task-status.red { color: var(--red-dark); border-color: #e5b9b4; background: #fde7e4; }
.history-task-status.amber { color: var(--gold-dark); border-color: #e0bd6c; background: #fff4d8; }
.history-task-status.neutral { color: var(--ink-soft); border-color: #d9cfbb; background: #f5f0e6; }
.history-task-message { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.history-load-more { margin: 18px auto 0; }

@media (max-width: 980px) {
  main { padding-left: 22px; padding-right: 22px; }
  .workspace-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .history-toggle { grid-template-columns: minmax(180px, 1fr) minmax(300px, auto) 22px; }
}

@media (max-width: 780px) {
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar .brand-lockup { min-width: 0; gap: 9px; }
  .topbar .brand-lockup > div { min-width: 0; }
  .topbar .brand-lockup h1, .topbar .brand-lockup p, .health { white-space: nowrap; }
  .top-actions { flex: 0 0 auto; gap: 9px; }
  main { padding: 26px 16px 40px; }
  .view-switch-button { white-space: nowrap; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .control-pane, .tasks-pane { padding: 20px; }
  .tasks-pane { border-left: 0; border-top: 1px solid var(--line); }
  .workflow-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .workflow-head h2 { font-size: 23px; }
  .task-summary { flex-wrap: wrap; justify-content: flex-start; gap: 6px 12px; }
  .task-summary > span { padding: 5px 8px; }
  .task-list { max-height: none; }
  .task-heading-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .batch-toolbar { align-items: center; flex-wrap: wrap; }
  .retry-visible { margin-left: 0; }
  .export-selected { width: 100%; margin-left: 0; }
  .task-facts { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .task-payment-fact { grid-column: 1 / -1; }
  .task-email-fact { grid-column: 1 / -1; }
  .task-item-head { align-items: flex-start; flex-wrap: wrap; }
  .task-head-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .task-item-detail { flex-direction: column; gap: 2px; }
  .account-file-import { align-items: flex-start; flex-direction: column; }
  .history-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .history-stat { width: 100%; min-width: 0; gap: 8px; }
  .history-stat:last-child { grid-column: 1 / -1; }
  .history-toolbar { align-items: flex-start; }
  .history-filters { max-width: 100%; flex-wrap: wrap; }
  .history-filter { white-space: nowrap; }
  .history-toggle {
    min-height: 0;
    padding: 14px 8px 14px 14px;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 10px;
  }
  .history-identity { grid-column: 1; grid-row: 1; }
  .history-chevron { grid-column: 2; grid-row: 1; }
  .history-results {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .history-metric { width: 100%; min-width: 0; }
  .history-detail { padding: 0 10px 12px; }
  .history-task { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .history-task-message { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
}