.status-row {
  transition: color .2s ease;
}

.status-row.is-busy {
  color: #c9d9ed;
}

.status-row.is-busy .status-dot {
  background: #58a5ff;
  box-shadow: 0 0 0 4px #3378f622, 0 0 14px #58a5ff;
  animation: generation-pulse 1.3s ease-in-out infinite;
}

@keyframes generation-pulse {
  0%, 100% { opacity: .5; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}

.history-item {
  min-height: 48px;
}

.history-preview,
.history-swatch {
  width: 52px;
  height: 40px;
  flex: 0 0 52px;
  border-radius: 6px;
  overflow: hidden;
}

.history-preview {
  display: block;
  border: 1px solid #536783;
  background: #17202b;
}

.history-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-prompt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.history-page-head h2 { margin:0; font-size:21px; }
.history-toolbar { display:flex; gap:8px; }
.history-tool { height:34px; padding:0 16px; border:1px solid #4a5d74; border-radius:18px; background:#1d2a3a; color:#d8e3ef; cursor:pointer; font-size:12px; }
.history-tool.primary { border-color:#3d85f5; background:#3378f6; color:#fff; }
.history-tool:hover { border-color:#73a8f9; color:#fff; }
.history-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; padding:14px 18px; border:1px solid #31445b; border-radius:12px; background:#182535; }
.history-summary > div { display:flex; align-items:center; gap:8px; min-width:0; color:#b9c7d7; font-size:12px; }
.history-summary strong { color:#78a8fb; font-size:20px; margin-left:2px; }
.history-summary em { color:#98a9bc; font-style:normal; }
.summary-icon { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:800; }
.summary-icon.blue { background:#3378f6; }.summary-icon.green { background:#26ad72; }.summary-icon.teal { background:#238c9b; }
.history-filter { display:flex; align-items:end; gap:10px; margin:0 0 12px; padding:12px; border:1px solid #31445b; border-radius:8px; background:#172333; }
.history-filter label { display:grid; gap:5px; color:#9fb0c3; font-size:11px; }.history-filter input,.history-filter select { height:34px; }
.history-record-list { margin-top:0; border:1px solid #31445b; border-radius:12px; overflow:hidden; background:#182535; }
.history-record { display:grid; grid-template-columns:28px 72px minmax(180px,1fr) minmax(155px,.8fr) 110px 140px; align-items:center; gap:14px; min-height:100px; padding:15px 18px; border-bottom:1px solid #2b4055; }
.history-record:last-child { border-bottom:0; }.history-record:hover { background:#1d3045; }
.history-record .history-preview,.history-record .history-swatch { width:72px; height:72px; flex:none; border-radius:10px; }
.history-record .history-swatch { display:grid; place-items:center; color:#82a9db; background:linear-gradient(135deg,#223c5d,#355e8d); font-size:22px; }
.history-task { min-width:0; display:grid; gap:7px; }.history-task strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#edf4fc; font-size:15px; }.history-task small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#a5b5c8; font-size:12px; }
.history-record time { color:#b5c1cf; font-size:12px; }.history-state,.history-detail { justify-self:end; }.history-state { padding:9px 12px; border-radius:18px; background:#245fb4; color:#fff; font-size:11px; white-space:nowrap; }.history-detail { border:0; border-radius:18px; padding:9px 13px; background:#253f67; color:#9bc6ff; cursor:pointer; font-size:11px; white-space:nowrap; }.history-detail:hover { background:#3378f6; color:#fff; }
.history-select { position:relative; width:22px; height:22px; }.history-select input { position:absolute; opacity:0; }.history-select span { display:block; width:22px; height:22px; border:2px solid #9eabb9; border-radius:6px; cursor:pointer; }.history-select input:checked + span { border-color:#3378f6; background:#3378f6; box-shadow:inset 0 0 0 4px #182535; }
@media (max-width:900px) { .history-record { grid-template-columns:26px 58px minmax(0,1fr) auto; gap:10px; }.history-record .history-preview,.history-record .history-swatch { width:58px; height:58px; }.history-record time { grid-column:3; }.history-state { grid-column:4; grid-row:1; }.history-detail { grid-column:3/5; grid-row:3; justify-self:start; }.history-summary { grid-template-columns:1fr; gap:10px; } }
@media (max-width:560px) { .history-page-head { align-items:flex-start; flex-direction:column; }.history-toolbar { width:100%; }.history-tool { flex:1; }.history-record { grid-template-columns:22px 48px minmax(0,1fr); padding:12px 10px; gap:8px; }.history-record .history-preview,.history-record .history-swatch { width:48px; height:48px; }.history-record time,.history-state,.history-detail { grid-column:3; grid-row:auto; justify-self:start; }.history-state { padding:6px 9px; } }

.brand-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
  color: #718096;
  font-size: 10px;
  line-height: 1.2;
}

.brand-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: #52647a;
}

.account-bar .account-btn {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .build-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.account-overview {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: #9cabbd;
  font-size: 11px;
}

.account-overview .quota-status {
  color: #7eacf9;
  font-weight: 700;
}

@media (min-width: 901px) {
  .preview-frame {
    max-height: 360px;
  }
}

.result-art {
  position: relative;
  overflow: hidden;
}

.result-art > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.result-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.result-grid.hidden {
  display: none;
}

.result-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.result-grid.multiple { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.result-tile.hidden { display: none; }
.image-count-field { margin-top: 14px; gap: 0; }
.image-count-field .setting-help { margin-bottom: 0; }

.result-grid.single .result-tile:nth-child(2) {
  display: none;
}

.result-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #35445a;
  border-radius: 6px;
  background: #0d1219;
}

.result-tile img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.result-download {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  background: rgba(12, 18, 27, 0.88);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.result-download:hover {
  border-color: #00d8cc;
  color: #00d8cc;
}

/* History workspace: keep the record geometry stable while actions are added. */
.history-panel {
  overflow: visible;
}

.history-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.history-summary > div {
  min-height: 44px;
  padding: 2px 8px;
  white-space: nowrap;
}

.history-summary > div + div {
  border-left: 1px solid #2c4057;
}

.history-summary-item {
  overflow: hidden;
}

.history-summary-item > span:not(.summary-icon),
.history-summary-item > em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-summary .summary-icon.cyan {
  background: #238c9b;
}

.history-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: 0 0 10px;
  padding: 0 2px;
}

.history-bulkbar .text-link {
  min-height: 28px;
  padding: 0 4px;
  font-size: 11px;
  white-space: nowrap;
}

.history-bulkbar .text-link:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.history-selection-count {
  margin-left: auto;
  color: #8397ad;
  font-size: 11px;
  white-space: nowrap;
}

.history-record-list {
  overflow: hidden;
}

.history-record {
  position: relative;
  grid-template-columns: 28px 72px minmax(220px, 1.45fr) minmax(170px, .9fr) max-content minmax(130px, max-content);
  grid-template-areas: "select preview task time state actions";
  align-items: center;
  gap: 14px;
  min-height: 100px;
  padding: 15px 18px;
  background: #182535;
  transition: background-color .15s ease, border-color .15s ease;
}

.history-record > .history-select { grid-area: select; }
.history-record > .history-preview,
.history-record > .history-swatch { grid-area: preview; }
.history-record > .history-task { grid-area: task; }
.history-record > time { grid-area: time; }
.history-record > .history-state { grid-area: state; }
.history-record > .history-detail { grid-area: actions; }

.history-record > .history-actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.history-task {
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.history-prompt-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.history-prompt-row .history-prompt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a5b5c8;
  font-size: 12px;
}

.history-prompt-row .history-copy-prompt {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 13px;
  line-height: 23px;
  font-size: 10px;
}

.history-task strong,
.history-task small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.45;
}

.history-task strong {
  color: #edf4fc;
  font-size: 14px;
}

.history-task small {
  color: #a5b5c8;
  font-size: 12px;
}

.history-record time {
  min-width: 0;
  color: #b5c1cf;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.history-record time .history-date,
.history-record time .history-time {
  display: block;
}

.history-state,
.history-detail,
.history-copy-prompt,
.history-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-height: 32px;
  border-radius: 17px;
  padding: 0 12px;
  white-space: nowrap;
  font-size: 11px;
  line-height: 30px;
}

.history-detail,
.history-copy-prompt {
  border: 1px solid #315689;
  background: #253f67;
  color: #a9ceff;
  cursor: pointer;
}

.history-detail:hover,
.history-copy-prompt:hover,
.history-detail:focus-visible,
.history-copy-prompt:focus-visible {
  border-color: #5d9cff;
  background: #3378f6;
  color: #fff;
  outline: 0;
}

.history-delete {
  border: 1px solid #75404a;
  background: #3b2730;
  color: #ffb6be;
  cursor: pointer;
}

.history-delete:hover,
.history-delete:focus-visible {
  border-color: #ef7884;
  background: #6a303b;
  color: #fff;
  outline: 0;
}

/* The label owns the hit target; the native input remains accessible and does
   not resize the grid when the checked state changes. */
.history-select {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  cursor: pointer;
}

.history-select input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.history-select span {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid #9eabb9;
  border-radius: 6px;
  background: transparent;
  pointer-events: none;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.history-select:hover span,
.history-select input:focus-visible + span {
  border-color: #72a9ff;
  box-shadow: 0 0 0 3px #3378f633;
}

.history-select input:checked + span {
  border-color: #3378f6;
  background: #3378f6;
  box-shadow: inset 0 0 0 4px #182535;
}

.history-record.selected,
.history-record.history-selected,
.history-record.is-selected {
  border-color: #55a7ff;
  background: #1769b0;
}

.history-record.selected .history-task strong,
.history-record.selected .history-task small,
.history-record.selected time,
.history-record.history-selected .history-task strong,
.history-record.history-selected .history-task small,
.history-record.history-selected time,
.history-record.is-selected .history-task strong,
.history-record.is-selected .history-task small,
.history-record.is-selected time {
  color: #fff;
}

.history-detail-modal,
.history-details-modal {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 9, 16, .78);
}

.history-detail-modal.hidden,
.history-details-modal.hidden {
  display: none;
}

.history-detail-panel,
.history-details-panel,
.history-detail-card {
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  padding: 20px;
  border: 1px solid #465a73;
  border-radius: 10px;
  background: #1b2533;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .55);
}

.history-detail-card .drawer-head {
  margin-bottom: 16px;
}

.history-detail-body {
  color: #c7d3e2;
  font-size: 12px;
  line-height: 1.65;
}

.history-detail-body > *:first-child {
  margin-top: 0;
}

.history-detail-body > *:last-child {
  margin-bottom: 0;
}

.history-detail-panel pre,
.history-details-panel pre,
.history-detail-prompt {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid #30445b;
  border-radius: 7px;
  background: #141e2b;
  color: #dce7f5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.slider-captcha-modal { z-index:120; }
.slider-captcha-card { width:min(368px, calc(100vw - 32px)); }
.slider-captcha-card .drawer-head { align-items:flex-start; margin-bottom:16px; }
.slider-captcha-card .drawer-head .auth-note { margin:4px 0 0; }

.behavior-verify-wrap{display:grid;gap:7px;margin:-2px 0 14px}.behavior-verify-label{color:#bac6d5;font-size:12px}.behavior-verify{position:relative;width:100%;height:46px;display:grid;grid-template-columns:46px minmax(0,1fr) 38px;align-items:center;padding:0;border:1px solid #3a485d;border-radius:7px;overflow:hidden;background:#222c3b;color:#e6edf7;cursor:pointer;text-align:left;transition:border-color .18s,background .18s,box-shadow .18s}.behavior-verify:hover{border-color:#5b8fe8;background:#253246}.behavior-verify:focus-visible{outline:2px solid #70a7f8;outline-offset:2px}.behavior-verify-rail{position:absolute;inset:0 auto 0 0;width:4px;background:#3378f6}.behavior-verify-icon{width:28px;height:28px;margin-left:9px;display:grid;place-items:center;border-radius:50%;background:#3378f6;color:#fff;font-size:17px;font-weight:800}.behavior-verify strong{min-width:0;padding:0 9px;color:#e6edf7;font-size:12px;letter-spacing:0}.behavior-verify-target{justify-self:center;color:#8395ab;font-size:22px}.behavior-verify.is-scanning{background-image:linear-gradient(90deg,transparent,#3378f61f,transparent);background-size:180% 100%;animation:behavior-scan 1s linear infinite}.behavior-verify.is-scanning .behavior-verify-icon{animation:behavior-spin .8s linear infinite}.behavior-verify.is-verified{border-color:#32c98f;background:#18382f}.behavior-verify.is-verified .behavior-verify-rail,.behavior-verify.is-verified .behavior-verify-icon{background:#32c98f}.behavior-verify.is-verified .behavior-verify-target{color:#67e0b2}.behavior-verify.is-error{border-color:#d76470;background:#3a222b}.behavior-verify.is-error .behavior-verify-rail,.behavior-verify.is-error .behavior-verify-icon{background:#d76470}@keyframes behavior-scan{to{background-position:-180% 0}}@keyframes behavior-spin{to{transform:rotate(360deg)}}

.login-security-note{display:flex;align-items:flex-start;gap:10px;margin:13px 0 0;padding:11px 12px;border:1px solid #38516c;border-radius:7px;background:#172638;color:#76d7d1}
.login-security-note>span{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:#1e3b4b;color:#00d8cc;font-size:13px}
.login-security-note div{display:grid;gap:3px}.login-security-note strong{font-size:12px;color:#e1edf8}.login-security-note small{color:#91a5b8;font-size:10px;line-height:1.55}
.login-verify-card{width:min(420px,100%)}.login-verify-card .drawer-head{align-items:flex-start;margin-bottom:18px}.login-verify-card .drawer-head h2{margin:0}.login-verify-card .drawer-head .auth-note{margin:4px 0 0}
.login-verify-card .login-security-note{margin:0 0 14px}
.login-verify-destination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:12px 13px;border:1px solid #344a62;border-radius:7px;background:#162332;color:#8fa3b7;font-size:11px}.login-verify-destination strong{color:#78dcd6;font-size:12px}
.login-verify-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-6px;color:#8294a7;font-size:10px}.login-verify-meta strong{color:#9eb2c7;font-weight:600}
.login-verify-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:18px}.login-verify-actions button{width:100%;margin:0}.login-verify-actions button:disabled{cursor:not-allowed;opacity:.5}
.slider-puzzle-stage { position:relative; width:100%; aspect-ratio:320 / 146; overflow:hidden; border:1px solid #38516c; border-radius:7px; background:#162437; box-shadow:inset 0 0 0 1px #ffffff08; }
.slider-puzzle-stage > img:first-child { display:block; width:100%; height:100%; object-fit:cover; }
.slider-puzzle-piece { position:absolute; z-index:2; left:0; top:0; width:15%; height:auto; filter:drop-shadow(0 3px 4px #07111eb3); pointer-events:none; }
.slider-puzzle-refresh { position:absolute; z-index:3; top:8px; right:8px; width:30px; height:30px; padding:0; border:1px solid #d8e8f566; border-radius:50%; background:#0d1b29cc; color:#edf8ff; font-size:18px; line-height:28px; cursor:pointer; }
.slider-puzzle-refresh:hover { border-color:#00d8cc; color:#00d8cc; }
.slider-puzzle-refresh:disabled { cursor:wait; opacity:.55; }
.slider-control { --slider-fill:0%; position:relative; height:46px; margin-top:14px; overflow:hidden; border:1px solid #38516c; border-radius:7px; background:linear-gradient(90deg,#00d8cc2b 0 var(--slider-fill),#162437 var(--slider-fill) 100%); }
.slider-control::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--slider-fill); border-right:1px solid #00d8cc80; background:#00d8cc12; pointer-events:none; }
.slider-control-label { position:absolute; inset:0; display:grid; place-items:center; padding-left:42px; color:#8fa3ba; font-size:12px; pointer-events:none; transition:opacity .15s; }
.slider-control.moving .slider-control-label { opacity:.28; }
.slider-control input[type="range"] { position:absolute; z-index:2; inset:0; width:100%; height:100%; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:grab; }
.slider-control input[type="range"]:active { cursor:grabbing; }
.slider-control input[type="range"]::-webkit-slider-runnable-track { height:44px; background:transparent; }
.slider-control input[type="range"]::-webkit-slider-thumb { width:46px; height:44px; margin-top:0; appearance:none; -webkit-appearance:none; border:0; border-radius:6px; background:#00d8cc; box-shadow:0 0 0 1px #a9fff8 inset,0 4px 14px #00d8cc38; }
.slider-control input[type="range"]::-moz-range-track { height:44px; background:transparent; }
.slider-control input[type="range"]::-moz-range-thumb { width:46px; height:44px; border:0; border-radius:6px; background:#00d8cc; box-shadow:0 0 0 1px #a9fff8 inset,0 4px 14px #00d8cc38; }
.slider-control input[type="range"]:focus-visible { outline:2px solid #70a7f8; outline-offset:-3px; }
.slider-control input[type="range"]:disabled { cursor:wait; opacity:.72; }
.slider-captcha-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:20px; margin-top:7px; color:#8296ad; font-size:11px; }
.slider-captcha-meta strong { color:#7fb4f7; font-size:11px; font-variant-numeric:tabular-nums; }
.slider-captcha-card.expired .slider-puzzle-stage { opacity:.55; filter:grayscale(.7); }
.slider-captcha-card.expired .slider-captcha-meta strong,
.slider-captcha-card.error .slider-captcha-meta span { color:#e07a84; }
.slider-captcha-card.success .slider-captcha-meta span { color:#43d9a3; }

@media (prefers-reduced-motion:reduce){.behavior-verify.is-scanning,.behavior-verify.is-scanning .behavior-verify-icon{animation:none}}

@media (max-width: 1100px) {
  .history-record {
    grid-template-columns: 28px 64px minmax(170px, 1fr) minmax(145px, .8fr) max-content;
    grid-template-areas:
      "select preview task time state"
      "select preview task actions actions";
  }

  .history-record > .history-actions,
  .history-record > .history-detail { justify-self: end; }
}

@media (max-width: 900px) {
  .history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-summary > div:nth-child(odd) { border-left: 0; }
  .history-record {
    grid-template-columns: 26px 58px minmax(0, 1fr) auto;
    grid-template-areas:
      "select preview task state"
      "select preview time actions";
    gap: 10px;
  }
  .history-record time { justify-self: start; }
  .history-record > .history-actions,
  .history-record > .history-detail { justify-self: start; }
}

@media (max-width: 560px) {
  .history-summary { grid-template-columns: 1fr; }
  .history-summary > div + div { border-left: 0; border-top: 1px solid #2c4057; }
  .history-record {
    grid-template-columns: 22px 48px minmax(0, 1fr);
    grid-template-areas:
      "select preview task"
      "select preview time"
      "select preview state"
      "select preview actions";
    padding: 12px 10px;
    gap: 8px;
  }
  .history-record .history-preview,
  .history-record .history-swatch { width: 48px; height: 48px; }
  .history-record > .history-actions,
  .history-record > .history-detail,
  .history-record > .history-state { justify-self: start; }
  .history-state,
  .history-detail,
  .history-copy-prompt,
  .history-delete { min-height: 28px; line-height: 26px; padding: 0 9px; }
}

/* History details: square, uncropped image preview; original opens independently. */
#historyDetailBody .history-detail-media{display:grid;gap:16px;margin-top:16px;min-width:0}
#historyDetailBody .history-detail-image{margin:0;min-width:0}
#historyDetailBody .history-detail-square{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1 / 1;overflow:hidden;border:1px solid #3b5068;border-radius:8px;background:#121b27}
#historyDetailBody .history-detail-square img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain}
#historyDetailBody .history-detail-image figcaption{display:flex;justify-content:flex-end;padding-top:9px}
#historyDetailBody .history-view-original{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border:1px solid #456b9a;border-radius:6px;background:#243e60;color:#cce4ff;text-decoration:none;font-size:12px;font-weight:600}
#historyDetailBody .history-view-original:hover{background:#30547d;color:#fff}
#historyDetailBody .history-view-original:focus-visible,#historyDetailBody .history-detail-square:focus-visible{outline:2px solid #77b8ff;outline-offset:3px}

#historyDetailBody .history-detail-task-id{font-family:ui-monospace,Consolas,monospace;font-size:12px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;user-select:text}

/* A friendly creation heading and compact, inline detail labels. */
#historyDetailBody .history-creation-heading{padding:14px 16px;margin-bottom:16px;border:1px solid #354c65;border-radius:10px;background:linear-gradient(125deg,#22364d,#1a293b)}
#historyDetailBody .history-creation-kicker{display:block;margin-bottom:7px;color:#8cb8ec;font-size:11px;font-weight:600}
#historyDetailBody .history-creation-heading h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:#e6effb;font-size:15px;font-weight:600;line-height:1.65;overflow-wrap:anywhere}
#historyDetailBody .history-detail-meta{display:grid;gap:9px;margin:0 0 16px;padding:0 2px}
#historyDetailBody .history-detail-meta>div{display:flex;align-items:baseline;gap:0;min-width:0}
#historyDetailBody .history-detail-meta dt{flex:0 0 auto;margin:0;color:#92a7bf;font-size:12px;line-height:1.65}
#historyDetailBody .history-detail-meta dt::after{content: ":";margin-inline:2px 7px}
#historyDetailBody .history-detail-meta dd{min-width:0;margin:0;color:#d6e2f1;font-size:12px;line-height:1.65;overflow-wrap:anywhere}

/* Consistent history actions: clear primary, secondary and destructive hierarchy. */
.history-record > .history-actions{gap:8px}
.history-record .history-actions > button{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:34px;margin:0;padding:0 11px;border:1px solid #40516a;border-radius:6px;background:#243246;color:#c5d3e5;font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s}
.history-record .history-actions > button svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.history-record .history-actions > .history-detail{border-color:#3b6ca5;background:#223e60;color:#bddaff}
.history-record .history-actions > .history-detail:hover{border-color:#5b9be9;background:#2e5582;color:#fff}
.history-record .history-actions > .history-export:hover{border-color:#6b829e;background:#30435b;color:#fff}
.history-record .history-actions > .history-delete{border-color:#67404c;background:transparent;color:#e69eac}
.history-record .history-actions > .history-delete:hover{border-color:#bc6277;background:#452a35;color:#ffd5dd}
.history-record .history-actions > button:focus-visible{outline:2px solid #85bbff;outline-offset:3px}
@media(max-width:560px){.history-record > .history-actions{gap:6px}.history-record .history-actions > button{min-height:32px;padding-inline:9px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.history-record .history-actions > button{transition:none}}

/* Separate finished work from pending, failed and cancelled records. */
.history-status-group{min-width:0;margin-bottom:22px}
.history-status-group:last-child{margin-bottom:0}
.history-status-group-head{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 2px 12px}
.history-status-group-head h3{margin:0;color:#dbe7f5;font-size:14px;font-weight:600}
.history-status-group-head::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ac7a1}
.history-status-group.is-incomplete .history-status-group-head::before{background:#e5b45e}
.history-status-group-count{display:inline-flex;justify-content:center;min-width:23px;padding:1px 6px;border:1px solid #384e66;border-radius:5px;color:#9fb5cd;background:#1d2c3e;font-size:11px;font-variant-numeric:tabular-nums}
.history-status-group-list{display:grid;gap:10px;min-width:0}
.history-group-empty{padding:19px 16px;border:1px dashed #3c5067;border-radius:8px;color:#91a6bf;background:#192737;font-size:12px;text-align:center}
.history-record .history-state.is-incomplete{color:#f4cf90;background:#4b3a21}