.rps { max-width: 720px; }
.rps-intro { font-size: 13.5px; color: #5b6b56; margin: 0 0 16px; }

.rps-app { display: flex; flex-direction: column; gap: 12px; }

fieldset.rps-fieldset { border: 1px solid #d9e0d4; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
fieldset.rps-fieldset legend { font-size: 13px; font-weight: 700; color: #27331f; padding: 0 6px; }

.rps-app label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: #27331f; }
.rps-app input, .rps-app select {
  padding: 9px 11px; font-size: 14.5px; border: 1px solid #d9e0d4; border-radius: 6px; font-family: inherit;
  background: #fff; color: #27331f;
}
.rps-app input:focus, .rps-app select:focus { outline: 2px solid #19616a; outline-offset: 1px; }
.rps-app input[type="file"] { padding: 7px; font-size: 13px; }

.rps-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rps-row3 { display: grid; grid-template-columns: 2fr 2fr 3fr auto; gap: 10px; align-items: end; }

.rps-hint { font-size: 12.5px; color: #5b6b56; margin: 4px 0 0; }
.rps-note { margin-top: 16px; font-size: 13px; color: #5b6b56; }
.rps-caveat {
  font-size: 12.5px; color: #7a4a00; background: #fff6e6; border: 1px solid #f0d9a0; border-radius: 6px;
  padding: 8px 10px; margin: 0;
}
.rps-legend { font-size: 12.5px; color: #5b6b56; margin: 0; }
.rps-legend b { font-weight: 700; }

.rps-btn {
  padding: 10px 16px; font-size: 14px; font-weight: 700; border: 1px solid #19616a; border-radius: 6px;
  background: #19616a; color: #fff; cursor: pointer; align-self: flex-start;
}
.rps-btn:hover { background: #144e55; border-color: #144e55; }
.rps-btn:disabled { background: #9fb0a0; border-color: #9fb0a0; cursor: not-allowed; }
.rps-btn-secondary { background: #fff; color: #19616a; }
.rps-btn-secondary:hover { background: #f3f4f8; }

.rps-list { display: flex; flex-direction: column; gap: 8px; }
.rps-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: #f3f4f8; border: 1px solid #d9e0d4; border-radius: 6px; font-size: 13px;
}
.rps-file-row .rps-file-name { font-weight: 700; color: #27331f; word-break: break-all; }
.rps-file-row .rps-file-meta { font-size: 12px; color: #5b6b56; }
.rps-file-order { display: flex; gap: 4px; }
.rps-file-remove, .rps-order-btn {
  border: 1px solid #d9e0d4; background: #fff; color: #27331f; border-radius: 6px; cursor: pointer;
  font-size: 12px; padding: 4px 8px;
}
.rps-file-remove:hover { background: #fbe6e6; border-color: #e0a0a0; }
.rps-order-btn:hover { background: #f3f4f8; border-color: #19616a; color: #19616a; }
.rps-order-btn:disabled { color: #d9e0d4; cursor: not-allowed; }

.rps-override {
  display: grid; grid-template-columns: 2fr 2fr 3fr auto; gap: 10px; align-items: end;
  padding: 10px 12px; background: #f3f4f8; border: 1px solid #d9e0d4; border-radius: 6px;
}
.rps-override label { gap: 4px; }
.rps-override-meta { font-size: 11.5px; color: #5b6b56; margin-top: 2px; }

.rps-log { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rps-log-title { font-size: 13px; font-weight: 700; color: #27331f; }
.rps-log-empty { font-size: 12.5px; color: #5b6b56; }
.rps-log-item {
  padding: 8px 10px; background: #f3f4f8; border: 1px solid #d9e0d4; border-radius: 6px;
  font-size: 12.5px; color: #27331f; font-family: ui-monospace, monospace;
}

.rps-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 12px;
  background: #f3f4f8; border: 1px solid #d9e0d4; border-radius: 6px; font-size: 13px;
}
.rps-summary div { display: flex; flex-direction: column; gap: 2px; }
.rps-summary span.rps-summary-label { font-size: 12px; color: #5b6b56; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.rps-summary span.rps-summary-value { font-size: 15px; color: #27331f; font-weight: 700; }

.rps-error {
  padding: 10px 12px; background: #fbe6e6; border: 1px solid #e0a0a0; border-radius: 6px;
  font-size: 13px; color: #7a2222; font-weight: 700;
}
.rps-status { font-size: 12.5px; color: #5b6b56; }

.rps-download {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; font-weight: 700;
  border-radius: 6px; background: #19616a; color: #fff !important; text-decoration: none; align-self: flex-start;
}
.rps-download:hover { background: #144e55; }

.rps-icon-preview { display: flex; align-items: center; gap: 12px; }
.rps-icon-preview img {
  width: 48px; height: 48px; object-fit: contain; border: 1px solid #d9e0d4; border-radius: 6px; background: #fff;
  image-rendering: pixelated;
}

@media (max-width: 560px) {
  .rps-row2, .rps-row3, .rps-summary, .rps-override { grid-template-columns: 1fr; }
}