/* Marketplace workspace refresh: neutral surfaces, violet actions, clear review states. */
:root {
  color: #20283b;
  background: #f4f5fa;
  --green: #6354d9;
  --line: #e5e7ef;
  --muted: #727b8f;
  font-size: 13px;
}
header {
  height: 68px;
  background: #171d30;
  color: #fff;
  border: 0;
  padding: 0 30px;
  box-shadow: 0 3px 14px #12182b12;
}
.brand {
  font-size: 18px;
  letter-spacing: -0.4px;
}
.brand small {
  color: #aeb5cc;
  border-color: #3b4257;
  font-size: 10px;
}
.brandmark {
  background: #7869ef;
  border-radius: 11px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
}
.brandmark svg {
  width: 23px;
  height: 23px;
}
.local {
  color: #bcc2d5;
  letter-spacing: 1.4px;
  font-size: 9px;
}
header button {
  background: #282f45;
  color: #e6e9f4;
  border-color: #41485d;
}
main {
  max-width: 1840px;
  padding: 28px 30px;
}
.topline {
  margin-bottom: 26px;
}
.eyebrow {
  color: #7b70c8;
  letter-spacing: 1.7px;
  font-size: 9px;
}
h1 {
  font-size: 28px;
  letter-spacing: -1px;
  color: #1e263a;
  font-weight: 700;
}
.topline p {
  font-size: 12px;
}
h2 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.2px;
}
.panel {
  border-radius: 14px;
  box-shadow: 0 3px 12px #17214404;
}
.panelhead {
  padding: 17px 18px;
  background: #fff;
}
.panelhead > .small {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #f0eefc;
  color: #796dc5;
  font-size: 10px;
  font-weight: 700;
}
.pad {
  padding: 18px;
}
input,
select {
  border-color: #e0e3ed;
  border-radius: 7px;
  color: #323b52;
  padding: 9px 10px;
  font-size: 12px;
  background: #fff;
}
label {
  font-size: 10px;
  color: #737c90;
  font-weight: 600;
}
input[type="range"],
input[type="checkbox"] {
  accent-color: #7363dd;
}
button,
.filebutton {
  border-radius: 7px;
  border-color: #e0e3ed;
  color: #566079;
  font-size: 11px;
  padding: 9px 12px;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
button:hover,
.filebutton:hover {
  background: #f2f0fd;
  border-color: #d4cef5;
}
.primary {
  background: #6758dc;
  color: #fff;
  border-color: #6758dc;
  box-shadow: 0 3px 7px #6758dc1c;
}
.primary:hover {
  background: #5746cc;
  color: white;
}
button:disabled {
  cursor: default;
  opacity: 0.55;
}
.danger {
  color: #af5667;
  background: #fff8fa;
  border-color: #f0dce2;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: #a99cf1;
}
.profile {
  background: #fbfbfe;
  border-color: #e8e9f2;
  padding: 12px;
  border-radius: 10px;
}
.profile summary {
  font-size: 11px;
  color: #3b4359;
}
.profile[open] {
  background: #fff;
  border-color: #d6cff5;
  box-shadow: 0 2px 9px #6656d506;
}
.preset-actions button {
  font-size: 10px;
  padding: 7px 9px;
}
.help {
  font-size: 10px;
  color: #8a91a3;
}
.upload {
  background: #f8f7ff;
  border: 1px dashed #c3b9ee;
  padding: 32px 12px;
  border-radius: 12px;
}
.upload strong {
  color: #51458d;
  font-size: 16px;
}
.upload.drag {
  background: #ede8ff;
}
.stats {
  padding: 12px;
  gap: 8px;
  border-bottom: 0;
  background: white;
}
.stat {
  border: 0;
  border-radius: 9px;
  padding: 15px 12px;
  background: #f6f7fb;
}
.stat:nth-child(2) {
  background: #eff9f5;
}
.stat:nth-child(3) {
  background: #fff8ed;
}
.stat b {
  font-size: 29px;
  letter-spacing: -1px;
  font-weight: 650;
  line-height: 1.2;
}
.stat span {
  font-size: 10px;
  color: #81899b;
}
.ok {
  color: #238b6c;
}
.progress {
  height: 3px;
  background: #eeedf8;
}
.progress > div {
  background: #8c7be8;
}
.toolbar {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  gap: 7px;
}
.bulkbar {
  background: #fafafe;
  padding: 9px 12px;
}
.bulkbar select {
  background: transparent;
  border-color: #e7e8f0;
  color: #82899a;
  font-size: 10px;
}
.bulkbar span {
  font-size: 10px;
}
.bulkbar button {
  font-size: 10px;
}
th {
  background: #fcfcff;
  color: #9198aa;
  letter-spacing: 1px;
  font-size: 9px;
  padding: 12px;
}
td {
  border-color: #f0f1f6;
  padding: 13px 12px;
}
.filename {
  color: #414a62;
  font-size: 11px;
}
.sub {
  color: #969db0;
  font-size: 9px;
}
.badge {
  font-size: 9px;
  padding: 5px 8px;
  letter-spacing: 0.1px;
}
.badge.done {
  background: #e8f8f0;
  color: #278265;
}
.badge.blocked,
.badge.review {
  background: #fff2d9;
  color: #aa791f;
}
.badge.failed {
  background: #ffe8ec;
  color: #ac4f65;
}
tr.selected {
  background: #f1eefd;
  box-shadow: inset 3px 0 #8b78e9;
}
tr[data-index]:hover {
  background: #f7f5ff;
}
.issuehint {
  color: #a88242;
  font-size: 10px;
}
.tabs {
  padding: 12px;
  gap: 5px;
  background: #fcfcff;
}
.tabs button {
  border-color: transparent;
  background: transparent;
  font-size: 10px;
}
.tabs button.active {
  background: #eeebfb;
  color: #7160ce;
  border-color: #e4def8;
}
.preview {
  background: repeating-conic-gradient(#f6f7fb 0% 25%, #eef0f6 0% 50%) 50%/18px
    18px;
  margin: 0 12px;
  border-radius: 10px;
}
.warning {
  background: #fff9ed;
  border-color: #f4e6c7;
  color: #9d7938;
  font-size: 11px;
}
.cropbox {
  border-color: #e7ac43;
}
.inspector .pad {
  padding: 16px;
}
.inspector .pad > p {
  font-size: 11px;
}
#notice {
  background: #eeebfd;
  color: #66569e;
  border-color: #e1dcf5;
  padding: 10px 30px;
  font-size: 11px;
}
footer {
  color: #969eb2;
  font-size: 10px;
}
.comparegrid section {
  background: #f7f7fc;
}
dialog {
  color: #303950;
  box-shadow: 0 24px 100px #171d3040;
}
.healthgrid > div {
  background: #f6f5fc;
}
@media (min-width: 1200px) {
  .workspace {
    grid-template-columns: 240px minmax(400px, 1fr) 360px;
    gap: 20px;
  }
  .workspace > aside:first-child > .pad {
    max-height: calc(100vh - 270px);
    overflow: auto;
  }
  .tablewrap {
    max-height: calc(100vh - 442px);
    min-height: 270px;
  }
}
@media (min-width: 1550px) {
  .workspace {
    grid-template-columns: 270px minmax(480px, 1fr) 410px;
  }
  .preview,
  .preview img {
    height: 320px;
    max-height: 320px;
  }
}
@media (max-width: 800px) {
  header {
    padding: 12px;
  }
  .topline > .row {
    width: 100%;
  }
  .local {
    display: none;
  }
  main {
    padding: 20px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}