:root {
  --paper: #f7f4ed;
  --ink: #1e2528;
  --muted: #687276;
  --line: #d8d0c1;
  --field: #fffaf0;
  --field-strong: #fff0bd;
  --panel: #ffffff;
  --accent: #b83f2e;
  --accent-2: #286f63;
  --warn: #8b5b00;
  --bad: #a92f2f;
  --good: #226a4b;
  --shadow: 0 18px 50px rgba(30, 37, 40, 0.12);
  --content-max: 1880px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(184, 63, 46, 0.10), transparent 32%),
    linear-gradient(220deg, rgba(40, 111, 99, 0.12), transparent 36%),
    var(--paper);
  color: var(--ink);
  font-family: "Songti SC", "Noto Serif CJK SC", "PingFang SC", serif;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  padding: 24px;
}

.topbar {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
  gap: 20px;
  margin: 0 auto 18px;
  max-width: var(--content-max);
}

.topbar > div {
  min-width: 0;
}

.eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 6px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.05;
}

h2 {
  font-size: 17px;
  line-height: 1.2;
}

.top-actions,
.submit-row,
.chips,
.refine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.refine-filter-row {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.refine-search-label {
  margin: 0;
}

.top-actions {
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.top-actions button,
.refine-actions button,
.submit-row button,
.sequence-board-actions button {
  white-space: nowrap;
}

button {
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  min-height: 36px;
  padding: 8px 12px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 700;
}

.secondary {
  background: #fff8e7;
  color: var(--ink);
}

.danger {
  background: #fff1ef;
  border-color: #ddb4ad;
  color: var(--bad);
}

.layout {
  display: grid;
  gap: 18px;
  align-items: start;
  grid-template-columns: minmax(560px, 720px) minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--content-max);
}

.app-tabs {
  display: flex;
  gap: 8px;
  margin: 0 auto 18px;
  max-width: var(--content-max);
  overflow-x: auto;
  padding-bottom: 2px;
}

.public-notice {
  margin: 0 auto 18px;
  max-width: var(--content-max);
  background: linear-gradient(135deg, #fff8e7, #f0f7f4);
  border: 1px solid #f3d4a4;
  border-left: 5px solid var(--accent-2);
  border-radius: 12px;
  padding: 10px 12px;
}

.public-notice-line {
  font-size: 14px;
  color: #5f4d31;
  line-height: 1.45;
}

.public-notice-line strong {
  color: #7a5a27;
  font-weight: 700;
}

.public-footer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: var(--content-max);
  padding: 8px 2px 0;
}

.public-footer a {
  color: var(--accent-strong);
  font-weight: 700;
}

.tab-button {
  background: #fff8e7;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 700;
  min-width: 92px;
}

.tab-button.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: white;
}

.tab-panel[hidden] {
  display: none;
}

.refine-layout {
  display: grid;
  gap: 18px;
  grid-template-areas:
    "queue active"
    "sequence sequence";
  grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.15fr);
  margin: 0 auto;
  max-width: var(--content-max);
}

.refine-queue {
  grid-area: queue;
}

.refine-active {
  grid-area: active;
}

.refine-history {
  grid-area: sequence;
  min-width: 0;
}

.entry-panel,
.review-panel {
  display: grid;
  gap: 14px;
}

.entry-panel {
  max-width: 720px;
  width: 100%;
}

.review-panel {
  min-width: 0;
}

.band,
.reference,
.sequence-board {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.band-title,
.history-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.counter-pill,
.decision-chip {
  background: #ece6d8;
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
}

.meta-line {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 10px;
}

.sequence-card,
.fixed-box {
  background: #fff4cf;
  border: 1px solid #e1c56d;
  border-radius: 7px;
  display: grid;
  gap: 6px;
  line-height: 1.45;
  margin-top: 10px;
  padding: 10px;
}

.sequence-card span,
.fixed-box span {
  color: var(--muted);
  font-size: 13px;
}

.slot-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 42px 74px 42px minmax(96px, auto);
  margin-top: 10px;
}

.slot-control span {
  color: var(--muted);
  font-size: 13px;
}

.slot-control input {
  min-height: 36px;
  text-align: center;
}

.rule-box {
  background: #f8f1df;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 10px 0;
  padding: 9px 10px;
}

.selected-forge-score {
  background: #fff6cf;
  border: 1px solid #d4af59;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  margin: 8px 0 10px;
  padding: 8px 10px;
}

.selected-forge-score > strong {
  color: var(--accent-2);
}

.selected-forge-score > span,
.selected-forge-score-meta {
  color: var(--muted);
  font-size: 12px;
}

.selected-forge-score-head {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.selected-forge-score-head strong {
  color: var(--ink);
  font-size: 14px;
}

.selected-forge-score-head span {
  color: var(--accent-2);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.selected-forge-score-line {
  display: grid;
  gap: 8px;
  grid-template-columns: 38px 1fr;
  line-height: 1.35;
}

.selected-forge-score-line b {
  color: var(--accent-2);
  font-size: 12px;
}

.selected-forge-score-line span {
  color: var(--ink);
  font-size: 12px;
}

.selected-forge-score-line.warning-text span {
  color: var(--bad);
}

.muted,
.label,
label span,
.ref-row span,
.history-head span {
  color: var(--muted);
  font-size: 13px;
}

.grid {
  display: grid;
  gap: 10px;
}

.grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 6px;
}

.wide {
  margin-top: 10px;
}

input,
select {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 38px;
  padding: 7px 10px;
  width: 100%;
}

.control-group {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.control-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.chip,
.part-card {
  background: #fff8e7;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 34px;
}

.chip.active,
.part-card.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: white;
}

.chip:disabled,
.part-card.disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.chips.tight .chip {
  min-width: 56px;
}

.part-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.part-card {
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
}

.part-card strong {
  font-size: 15px;
}

.part-card span {
  color: inherit;
  font-size: 12px;
  opacity: 0.75;
}

.affix-rows {
  display: grid;
  gap: 10px;
}

.affix-row {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(0, 1.2fr) minmax(90px, 0.5fr);
}

.slot-label {
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 10px;
}

.checkline {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.checkline input {
  min-height: auto;
  width: auto;
}

.warnings {
  display: grid;
  gap: 8px;
}

.warning {
  background: #fff6d9;
  border: 1px solid #ead38a;
  border-radius: 6px;
  color: var(--warn);
  padding: 8px 10px;
}

.warning.bad {
  background: #fff0ef;
  border-color: #e2b0aa;
  color: var(--bad);
}

.reference {
  display: grid;
  gap: 12px;
}

.ref-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
}

.ref-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ref-row.large p {
  line-height: 1.55;
}

.refine-list,
.refine-attempt-list {
  display: grid;
  gap: 8px;
  overflow: auto;
}

.refine-list {
  grid-template-columns: minmax(0, 1fr);
  max-height: 360px;
  padding-right: 2px;
}

.refine-category-tabs {
  margin-top: 10px;
}

.refine-attempt-list {
  max-height: none;
  overflow: visible;
}

.refine-card,
.refine-attempt,
.refine-active-card {
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.refine-card {
  cursor: pointer;
  gap: 3px;
  min-height: 0;
  padding: 6px 7px;
}

.refine-active-card {
  max-height: 560px;
  min-height: 300px;
  overflow: hidden;
}

.refine-summary-head,
.refine-summary-item-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.refine-summary-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.refine-summary-list {
  display: grid;
  gap: 10px;
  max-height: 416px;
  overflow-y: auto;
  padding-right: 4px;
}

.refine-status-controls {
  background: #fff3cb;
  border: 1px solid #e1c984;
  border-radius: 7px;
  display: grid;
  gap: 6px;
  padding: 7px;
}

.refine-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.refine-status-button {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 37, 40, 0.16);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 0;
  padding: 4px 8px;
}

.refine-status-button.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: white;
}

.refine-status-button.bad.active {
  background: var(--bad);
  border-color: var(--bad);
}

.refine-status-button.done.active {
  background: var(--good);
  border-color: var(--good);
}

.refine-target-note {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 42px minmax(0, 1fr);
}

.refine-target-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.refine-target-note input {
  min-height: 0;
  padding: 5px 7px;
}

.refine-summary-group {
  display: grid;
  gap: 6px;
}

.refine-summary-group-head {
  align-items: center;
  background: #eadfca;
  border-radius: 6px;
  color: var(--ink);
  display: flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: space-between;
  padding: 5px 7px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.refine-summary-group-head span {
  color: var(--muted);
  font-weight: 800;
}

.refine-summary-item {
  background: #fff6dc;
  border: 1px solid #e7d7b7;
  border-radius: 7px;
  display: grid;
  gap: 8px;
  min-height: 84px;
  padding: 10px;
}

.refine-summary-item.active {
  border-color: var(--accent-2);
  box-shadow: inset 5px 0 0 var(--accent-2);
}

.summary-item-open {
  background: transparent;
  border: 0;
  display: grid;
  gap: 3px;
  justify-items: start;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.summary-item-open strong {
  font-size: 14px;
}

.summary-item-open span {
  color: var(--muted);
  font-size: 12px;
}

.refine-summary-value-list {
  display: grid;
  gap: 7px;
}

.refine-summary-row {
  background: #fff0bd;
  border: 1px solid #ddb86a;
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  gap: 3px 8px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 36px;
  padding: 7px 9px;
  text-align: left;
}

.refine-summary-row span,
.refine-summary-row small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.refine-summary-row em {
  color: var(--accent-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.refine-summary-row small {
  color: var(--muted);
  font-size: 12px;
  grid-column: 2 / -1;
}

.refine-summary-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
}

.refine-card.active,
.refine-card.imported {
  border-color: var(--accent-2);
}

.refine-card.refine-marked {
  box-shadow: inset 3px 0 0 var(--bad);
}

.refine-card.quality-green {
  background: #eff8e8;
  border-color: #a8c68a;
}

.refine-card.quality-blue {
  background: #e9f3ff;
  border-color: #8fb9df;
}

.refine-card.quality-purple {
  background: #f2e9ff;
  border-color: #b394d8;
}

.refine-card.quality-orange {
  background: #fff0d8;
  border-color: #dc9b46;
}

.refine-card.has-special.quality-green {
  background: #dcefcf;
  border-color: #6f9951;
}

.refine-card.has-special.quality-blue {
  background: #d8eaff;
  border-color: #4f8cc0;
}

.refine-card.has-special.quality-purple {
  background: #eadcff;
  border-color: #8358bd;
}

.refine-card.has-special.quality-orange {
  background: #ffe1ae;
  border-color: #c67619;
}

.refine-special-line {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refine-score-pill {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(30, 37, 40, 0.12);
  border-radius: 999px;
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 5px;
}

.refine-card-main,
.refine-status-row,
.refine-locks,
.refine-attempt-actions,
.refine-mud-buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.refine-card-main {
  align-items: center;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
}

.refine-card-main strong {
  font-size: 13px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refine-card-subline {
  align-items: center;
  display: flex;
  gap: 4px;
  min-width: 0;
}

.refine-state-chip {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(30, 37, 40, 0.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 2px 5px;
}

.refine-state-chip.imported {
  background: #dceee4;
  color: var(--good);
}

.refine-state-chip.bad {
  background: #ffe0d6;
  color: var(--bad);
}

.refine-state-chip.done {
  background: #dceee4;
  color: var(--good);
}

.refine-state-chip.working {
  background: #e7f2ff;
  color: #315c8d;
}

.refine-card-meta,
.refine-affix-line,
.refine-attempt {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.refine-affix-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refine-marker-line {
  background: #ffe0d6;
  border: 1px solid rgba(184, 63, 46, 0.22);
  border-radius: 5px;
  color: var(--bad);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refine-queue-group {
  margin: 0;
}

.refine-queue-table {
  grid-auto-rows: minmax(52px, max-content);
}

.refine-queue-cell {
  align-content: start;
  display: grid;
  gap: 3px;
  min-height: 52px;
}

.refine-queue-cell.active,
.refine-queue-cell.imported {
  border-color: var(--accent-2);
  box-shadow:
    inset 0 0 0 2px rgba(40, 111, 99, 0.24),
    0 0 0 1px rgba(40, 111, 99, 0.12);
}

.refine-queue-cell-head {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  min-width: 0;
}

.matrix-cell .refine-queue-cell-head,
.matrix-cell .refine-queue-cell-head strong,
.matrix-cell .refine-queue-cell-head em {
  min-width: 0;
  width: auto;
}

.refine-queue-cell-head em {
  font-style: normal;
}

.refine-queue-cell .refine-affix-line,
.refine-queue-cell .refine-special-line,
.refine-queue-cell .refine-marker-line {
  width: 100%;
}

.refine-status-pill {
  background: #ece6d8;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
}

.refine-status-pill.done {
  background: #dceee4;
  color: var(--good);
}

.refine-status-pill.bad {
  background: #ffe0d6;
  color: var(--bad);
}

.refine-status-pill.working {
  background: #e7f2ff;
  color: #315c8d;
}

.refine-attempt-form,
.refine-result-grid,
.refine-sequence-editor,
.refine-sequence-workbench {
  display: grid;
  gap: 8px;
}

.refine-sequence-toolbar,
.refine-sequence-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.refine-sequence-toolbar {
  background: #fff3d0;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  margin-top: 8px;
  padding: 8px;
}

.refine-jump {
  max-width: 110px;
}

.refine-sequence-position {
  color: var(--ink);
  font-weight: 800;
}

.refine-silver-cost {
  align-items: center;
  background: #fff3d0;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 6px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 6px;
  padding: 5px 7px;
}

.refine-silver-cost span,
.refine-silver-cost strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.refine-silver-cost input {
  min-height: 0;
  padding: 4px 6px;
}

.refine-quick-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

button.quick-slot {
  background: #e8f2e7;
  border-color: #aac8a7;
  color: var(--good);
  font-weight: 800;
  min-width: 48px;
}

.refine-sequence-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: min(68vh, 760px);
  min-height: 540px;
  overflow: auto;
}

.refine-sequence-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1080px;
  table-layout: fixed;
  width: 100%;
}

.refine-sequence-table th,
.refine-sequence-table td {
  border-bottom: 1px solid #eadfc9;
  font-size: 12px;
  line-height: 1.05;
  padding: 1px 4px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.refine-sequence-table th:nth-child(1),
.refine-sequence-table td:nth-child(1) {
  width: 42px;
}

.refine-sequence-table th:nth-child(2),
.refine-sequence-table th:nth-child(3),
.refine-sequence-table th:nth-child(4),
.refine-sequence-table td:nth-child(2),
.refine-sequence-table td:nth-child(3),
.refine-sequence-table td:nth-child(4) {
  width: 166px;
}

.refine-sequence-table th:nth-child(5),
.refine-sequence-table td:nth-child(5) {
  width: 54px;
}

.refine-sequence-table th:nth-child(6),
.refine-sequence-table td:nth-child(6) {
  width: 210px;
}

.refine-sequence-table th:nth-child(7),
.refine-sequence-table td:nth-child(7) {
  width: 72px;
}

.refine-sequence-table th:nth-child(8),
.refine-sequence-table td:nth-child(8) {
  width: 82px;
}

.refine-sequence-table th:nth-child(9),
.refine-sequence-table td:nth-child(9) {
  width: 120px;
}

.refine-sequence-table th {
  background: #f1e0bc;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}

.refine-sequence-record {
  cursor: pointer;
}

.refine-sequence-record:hover {
  background: #fff0c4;
}

.refine-sequence-record.selected {
  background: #ffe7a3;
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.refine-sequence-record.current {
  box-shadow: inset 4px 0 0 var(--good);
}

.refine-sequence-record.has-value td {
  background: #fff8df;
}

.refine-sequence-record.has-value td:first-child {
  box-shadow: inset 4px 0 0 #d99b2b;
}

.refine-sequence-record.milestone td {
  border-top: 2px solid var(--accent);
}

.sequence-cell-edit {
  align-items: center;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(58px, 1fr) 44px;
}

.sequence-cell-edit input,
.refine-sequence-table td > input[type="text"] {
  background: rgba(255, 250, 240, 0.62);
  border-color: rgba(216, 208, 193, 0.68);
  border-radius: 4px;
  height: 21px;
  line-height: 1;
  min-height: 21px;
  min-width: 0;
  padding: 1px 3px;
}

.sequence-cell-edit input:focus,
.refine-sequence-table td > input[type="text"]:focus {
  background: var(--field);
  border-color: var(--accent-2);
  outline: 1px solid rgba(40, 111, 99, 0.18);
}

.refine-affix-type-input {
  font-weight: 800;
}

.refine-sequence-table input[type="checkbox"] {
  height: 13px;
  min-height: 13px;
  width: 13px;
}

.refine-lock-mud,
.refine-row-actions {
  align-items: center;
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.refine-lock-mud span,
.refine-lock-toggle span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.refine-lock-toggle {
  align-items: center;
  display: inline-flex;
  gap: 2px;
}

.refine-row-actions {
  gap: 3px;
}

.changed-cell {
  background: #fff1c7;
}

.appeared-cell {
  box-shadow: inset 0 0 0 2px rgba(40, 111, 99, 0.42);
}

.appeared-slot-input {
  font-size: 13px;
  font-weight: 900;
  min-width: 36px;
  text-align: center;
  width: 36px;
}

.refine-alias-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mud-tier {
  background: #efe7d3;
  border-radius: 999px;
  color: var(--ink);
  display: inline-block;
  font-weight: 800;
  padding: 1px 5px;
}

.mud-tier.max {
  background: #dceee4;
  color: var(--good);
}

button.compact {
  font-size: 12px;
  line-height: 1;
  min-height: 22px;
  padding: 2px 5px;
}

.talent-layout {
  display: grid;
  gap: 18px;
  grid-template-areas:
    "control summary"
    "catalog catalog"
    "original replacement";
  grid-template-columns: minmax(720px, 1.05fr) minmax(520px, 0.95fr);
  margin: 0 auto;
  max-width: var(--content-max);
}

.talent-control-panel {
  grid-area: control;
}

.talent-summary-panel {
  grid-area: summary;
}

.talent-catalog-panel {
  grid-area: catalog;
  min-width: 0;
}

.talent-original-panel {
  grid-area: original;
  min-width: 0;
}

.talent-replacement-panel {
  grid-area: replacement;
  min-width: 0;
}

.talent-control-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.talent-current-grid {
  background: #fff7e3;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  padding: 10px;
}

.talent-current-grid label span {
  color: var(--accent-2);
  font-weight: 900;
}

.talent-current-grid input:disabled {
  opacity: 0.45;
}

.talent-fast-entry {
  margin-top: 12px;
}

.talent-fast-entry input {
  font-size: 18px;
  font-weight: 800;
}

.talent-hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 8px;
}

.talent-table-wrap,
.talent-lanes,
.talent-summary-list,
.talent-catalog-wrap {
  max-height: min(68vh, 760px);
  overflow: auto;
}

.talent-catalog-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: min(42vh, 430px);
}

.talent-special-title {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 900;
  margin: 10px 0 6px;
}

.talent-special-catalog {
  max-height: min(28vh, 260px);
}

.talent-catalog-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 980px;
  width: 100%;
}

.talent-catalog-table th,
.talent-catalog-table td {
  border-bottom: 1px solid #eadfc9;
  line-height: 1.25;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.talent-catalog-table thead th {
  background: #f1e0bc;
  position: sticky;
  top: 0;
  z-index: 1;
}

.talent-catalog-table tbody th {
  background: #fff3d0;
  color: var(--accent-2);
  font-weight: 900;
  white-space: nowrap;
}

.talent-catalog-badge {
  background: #f4ebd7;
  border-radius: 999px;
  display: inline-block;
  font-weight: 800;
  margin: 0 4px 4px 0;
  padding: 3px 7px;
  white-space: nowrap;
}

.talent-catalog-badge.green {
  background: #e4f3dc;
  color: #3f6b2e;
}

.talent-catalog-badge.blue {
  background: #dfeaf6;
  color: #22577a;
}

.talent-catalog-badge.purple {
  background: #efe2ff;
  color: #663a8f;
}

.talent-catalog-empty {
  color: var(--muted);
}

.talent-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 540px;
}

.talent-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1320px;
  width: 100%;
}

.talent-table.compact-table {
  min-width: 940px;
}

.talent-table th,
.talent-table td {
  border-bottom: 1px solid #eadfc9;
  line-height: 1.05;
  padding: 4px 6px;
  text-align: left;
  white-space: nowrap;
}

.talent-table th {
  background: #f1e0bc;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}

.talent-record {
  cursor: pointer;
}

.talent-record:hover {
  background: #fff0c4;
}

.talent-record.selected {
  background: #ffe7a3;
  box-shadow: inset 4px 0 0 var(--accent-2);
}

.talent-slot {
  background: #efe7d3;
  border-radius: 999px;
  display: inline-block;
  font-weight: 800;
  padding: 3px 7px;
}

.talent-slot.blue {
  background: #dfeaf6;
  color: #22577a;
}

.talent-slot.purple {
  background: #efe2ff;
  color: #663a8f;
}

.talent-slot.empty {
  color: var(--muted);
  font-weight: 600;
}

.talent-lanes {
  display: grid;
  gap: 12px;
}

.talent-lane-card {
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.talent-lane-head {
  align-items: start;
  background: #fff3d0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px;
}

.talent-lane-head div {
  display: grid;
  gap: 4px;
}

.talent-lane-head span,
.talent-lane-cost span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.talent-lane-cost {
  text-align: right;
}

.talent-summary-list {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 520px);
}

.talent-summary-row {
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 4px;
  padding: 9px;
}

.talent-summary-row strong {
  font-size: 15px;
}

.talent-summary-row span,
.talent-summary-row small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.refine-selected-summary {
  background: #fff3d0;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
}

.refine-selected-summary-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.refine-selected-summary-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.refine-affix-baseline {
  align-items: center;
  background: #fff7da;
  border: 1px solid #e2c77c;
  border-radius: 6px;
  display: grid;
  gap: 6px;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  padding: 5px 8px;
}

.refine-affix-baseline strong,
.refine-current-label {
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 900;
}

.refine-affix-baseline span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refine-original-affix {
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(151, 114, 42, 0.18);
  border-radius: 4px;
  padding: 3px 6px;
}

.refine-current-label {
  margin-top: 2px;
}

.refine-final-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.refine-final-slot {
  background: #fffaf0;
  border: 1px solid #e7d7b7;
  border-radius: 6px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
}

.refine-final-slot.locked {
  background: #e6f3df;
  border-color: #87b66b;
  box-shadow: inset 0 0 0 2px rgba(83, 132, 57, 0.16);
}

.refine-final-slot strong {
  color: var(--accent-2);
  font-size: 12px;
}

.refine-final-slot span {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refine-final-slot small {
  color: var(--muted);
  font-size: 11px;
}

.sequence-affix-tag {
  background: #efe7d3;
  border-radius: 999px;
  color: var(--ink);
  display: inline-block;
  font-weight: 700;
  padding: 3px 7px;
}

.sequence-affix-tag.important {
  background: #dceee4;
  color: var(--good);
}

.sequence-affix-tag.changed {
  background: #ffe0a8;
  color: #8a4a00;
}

.sequence-affix-tag.important.changed {
  background: #cdebd1;
  box-shadow: inset 0 0 0 2px #f0b64a;
}

.refine-sequence-row {
  background: #fff7e3;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.refine-sequence-row.current {
  border-color: var(--accent-2);
  box-shadow: inset 3px 0 0 var(--accent-2);
}

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

.refine-slot {
  background: #fff7e3;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.refine-slot.locked {
  opacity: 0.62;
}

.refine-slot-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.sequence-list {
  display: grid;
  flex: 1;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.sequence-board {
  display: flex;
  flex-direction: column;
  height: min(78vh, 760px);
  max-height: 760px;
  min-height: 560px;
}

.sequence-board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 10px;
}

.sequence-category-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.sequence-category-tab {
  background: #fff8e7;
  border-color: var(--line);
  color: var(--ink);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  min-height: 32px;
  padding: 6px 10px;
}

.sequence-category-tab span {
  color: var(--muted);
  font-size: 11px;
  margin-left: 4px;
}

.sequence-category-tab.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: white;
}

.sequence-category-tab.active span {
  color: rgba(255, 255, 255, 0.82);
}

.sequence-group {
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 7px;
  overflow: visible;
  padding: 10px;
}

.sequence-group.active {
  border-color: var(--accent-2);
  box-shadow: inset 3px 0 0 var(--accent-2);
}

.sequence-group-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.sequence-group-head span,
.sequence-row em,
.sequence-row small,
.sequence-empty {
  color: var(--muted);
  font-size: 12px;
}

.sequence-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: 36px minmax(84px, 0.7fr) minmax(92px, 0.7fr) minmax(0, 1.2fr);
  padding-top: 7px;
}

.sequence-row span {
  color: var(--accent-2);
  font-weight: 700;
}

.sequence-row em {
  font-style: normal;
}

.sequence-empty {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.sequence-matrix-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

.sequence-matrix {
  align-content: start;
  display: grid;
  gap: 6px;
  grid-auto-rows: minmax(34px, max-content);
}

.matrix-head,
.matrix-slot,
.matrix-cell {
  border-radius: 6px;
  min-height: 34px;
  padding: 5px 7px;
}

.matrix-head {
  background: #eadfca;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

.matrix-gear-head {
  cursor: grab;
  user-select: none;
}

.matrix-gear-head:active,
.matrix-gear-head.dragging {
  cursor: grabbing;
}

.matrix-gear-head.dragging {
  opacity: 0.64;
}

.matrix-slot {
  align-items: center;
  background: #f0e8d8;
  color: var(--accent-2);
  display: flex;
  font-weight: 800;
}

.matrix-slot.active {
  background: var(--accent-2);
  color: white;
}

.matrix-cell {
  align-items: center;
  background: #fff7e3;
  border: 1px solid var(--line);
  display: flex;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}

button.matrix-cell {
  cursor: pointer;
}

.matrix-cell.empty {
  border-style: dashed;
  color: var(--muted);
}

.matrix-cell.empty:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.matrix-cell.recorded {
  background: #fffaf0;
  border-color: #ccb98e;
}

.matrix-cell.quality-green {
  background: #eff8e8;
  border-color: #a8c68a;
}

.matrix-cell.quality-blue {
  background: #e9f3ff;
  border-color: #8fb9df;
}

.matrix-cell.quality-purple {
  background: #f2e9ff;
  border-color: #b394d8;
}

.matrix-cell.quality-orange {
  background: #fff0d8;
  border-color: #dc9b46;
}

.matrix-cell.has-special.quality-green {
  background: #f0ffd8;
  border-color: #6f9951;
}

.matrix-cell.has-special.quality-blue {
  background: #d9f1ff;
  border-color: #4f8cc0;
}

.matrix-cell.has-special.quality-purple {
  background: #f6e2ff;
  border-color: #8358bd;
}

.matrix-cell.has-special.quality-orange {
  background: #ffdf8d;
  border-color: #c67619;
}

.matrix-cell.has-special {
  box-shadow:
    inset 0 0 0 2px rgba(184, 63, 46, 0.34),
    0 0 0 1px rgba(184, 63, 46, 0.14);
}

.matrix-cell.refine-marked {
  border-color: var(--bad);
  box-shadow:
    inset 0 0 0 2px rgba(184, 63, 46, 0.38),
    0 0 0 1px rgba(184, 63, 46, 0.16);
}

.matrix-cell.recorded.editable:hover {
  border-color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(40, 111, 99, 0.24);
}

.matrix-cell.recorded.selected {
  border-color: var(--accent-2);
  box-shadow:
    inset 0 0 0 2px rgba(40, 111, 99, 0.34),
    0 0 0 2px rgba(40, 111, 99, 0.12);
}

.matrix-cell span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.matrix-cell.has-special span {
  color: #23170a;
  font-weight: 900;
}

.matrix-cell.refine-marked span {
  color: #6f2117;
  font-weight: 900;
}

.matrix-context-menu {
  background: #fffaf0;
  border: 1px solid #ccb98e;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(47, 36, 22, 0.22);
  display: grid;
  gap: 4px;
  min-width: 118px;
  padding: 6px;
  position: fixed;
  z-index: 30;
}

.matrix-context-menu[hidden] {
  display: none;
}

.matrix-context-menu button {
  background: transparent;
  border-color: transparent;
  justify-content: flex-start;
  min-height: 32px;
  padding: 6px 10px;
  text-align: left;
}

.matrix-context-menu button:hover,
.matrix-context-menu button:focus-visible {
  background: #fff1d4;
  border-color: #e3c88f;
}

.matrix-context-menu .danger {
  color: var(--bad);
}

@media (max-width: 1120px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .refine-layout {
    grid-template-areas:
      "queue"
      "active"
      "sequence";
    grid-template-columns: 1fr;
  }

  .talent-layout {
    grid-template-areas:
      "control"
      "summary"
      "catalog"
      "original"
      "replacement";
    grid-template-columns: 1fr;
  }

  .refine-sequence-table-wrap {
    max-height: 70vh;
    min-height: 420px;
  }

  .talent-table-wrap {
    max-height: 70vh;
    min-height: 420px;
  }

  .sequence-board {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .sequence-list {
    max-height: 72vh;
    min-height: 280px;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 14px;
  }

  .topbar,
  .control-row,
  .grid.compact {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
    gap: 12px;
  }

  h1 {
    font-size: 26px;
  }

  .app-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tab-button {
    min-width: 0;
  }

  .public-notice {
    align-items: stretch;
    display: grid;
    gap: 10px;
  }

  .top-actions,
  .submit-row,
  .refine-actions,
  .sequence-board-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    width: 100%;
  }

  .top-actions button,
  .submit-row button,
  .refine-actions button,
  .sequence-board-actions button {
    width: 100%;
  }

  .part-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .affix-row {
    grid-template-columns: 42px minmax(0, 1fr) 84px;
  }

  .slot-control {
    grid-template-columns: auto 40px 64px 40px;
  }

  .slot-control #slotAutoButton {
    grid-column: 1 / -1;
  }

  .sequence-row {
    align-items: start;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .sequence-row em,
  .sequence-row small {
    grid-column: 2;
  }

  .refine-result-grid {
    grid-template-columns: 1fr;
  }

  .talent-control-grid {
    grid-template-columns: 1fr;
  }

  .talent-lane-head {
    display: grid;
  }

  .talent-lane-cost {
    text-align: left;
  }

  .refine-sequence-table-wrap {
    min-height: 360px;
  }

  .talent-table-wrap {
    min-height: 360px;
  }
}