:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #101815;
  color: #f6edcf;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(8, 19, 15, 0.93), rgba(8, 19, 15, 0.97)),
    url("./assets/scenes/tea-sea-morning.png") center / cover fixed;
}

button, select, textarea, a { font: inherit; }

button, select, a {
  min-height: 38px;
  border: 1px solid rgba(218, 174, 90, 0.38);
  border-radius: 6px;
}

button {
  padding: 8px 14px;
  color: #f7e9bd;
  background: #243a31;
  cursor: pointer;
}

button:hover, button:focus-visible, select:focus-visible, a:focus-visible {
  border-color: #e8ba62;
  outline: 2px solid rgba(232, 186, 98, 0.2);
}

.media-lab {
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 60px;
}

.lab-header, .section-title, .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lab-header {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(230, 190, 105, 0.26);
}

.lab-header h1, .section-title h2 { margin: 2px 0 8px; letter-spacing: 0; }
.lab-header p { margin: 0; max-width: 760px; color: #cdbf9c; line-height: 1.6; }
.eyebrow { color: #ddb666 !important; font-size: 12px; font-weight: 800; }

nav, .mapping-actions, .segmented { display: flex; flex-wrap: wrap; gap: 8px; }
nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  color: #f5e5b8;
  text-decoration: none;
  background: rgba(41, 61, 53, 0.92);
}
.primary-link, button.save { background: #a36527; }

.toolbar {
  margin: 22px 0 28px;
  padding: 12px 14px;
  border: 1px solid rgba(221, 179, 94, 0.28);
  background: rgba(13, 28, 23, 0.82);
}
.segmented button.active { color: #1d231e; background: #e7c36e; }
.audit-badge { color: #9fe0b0; font-size: 13px; }

.section-title { margin: 26px 0 14px; }
.section-title h2 { font-size: 22px; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(221, 179, 94, 0.28);
  background: #204136;
}
.asset-grid.background-light { background: #e9e5dc; }
.asset-grid.background-dark { background: #0a0d0c; }
.asset-grid.background-checker {
  background-color: #d9d9d9;
  background-image: linear-gradient(45deg, #aaa 25%, transparent 25%), linear-gradient(-45deg, #aaa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #aaa 75%), linear-gradient(-45deg, transparent 75%, #aaa 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

.asset-card {
  display: grid;
  grid-template-rows: 220px auto;
  overflow: hidden;
  border: 1px solid rgba(235, 206, 137, 0.32);
  background: rgba(7, 14, 12, 0.72);
}
.asset-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(9, 14, 12, 0.18);
}
.asset-preview img {
  display: block;
  max-width: 92%;
  max-height: 200px;
  opacity: 1;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}
.asset-replay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 32px;
  padding: 5px 10px;
  background: rgba(12, 26, 21, 0.88);
}
.asset-info { padding: 12px; background: rgba(9, 17, 14, 0.9); }
.asset-title { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.glyph-badge { color: #151c18; background: #e9c871; padding: 2px 8px; border-radius: 4px; }
.asset-meta { margin: 8px 0 0; color: #b9ad91; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.alpha-ok { color: #9fe0b0; }

.mapping-section { margin-top: 34px; }
.mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.mapping-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.6fr) minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(219, 174, 87, 0.24);
  background: rgba(16, 31, 25, 0.9);
}
.mapping-row label { font-weight: 750; }
.mapping-row select { width: 100%; padding: 8px 9px; color: #f6e9bf; background: #1c322a; }
.mapping-row.mismatch { border-color: rgba(230, 102, 71, 0.8); }
.mapping-row.mismatch::after { content: "所选素材文字与行为不同"; grid-column: 1 / -1; color: #ffad8d; font-size: 12px; }

.output-label { display: block; margin-top: 18px; color: #dcb568; font-weight: 800; }
#mapping-output {
  width: 100%;
  min-height: 220px;
  margin-top: 8px;
  padding: 12px;
  resize: vertical;
  border: 1px solid rgba(219, 174, 87, 0.3);
  border-radius: 4px;
  color: #d8eadf;
  background: #09120f;
}

@media (max-width: 760px) {
  .media-lab { width: min(100% - 20px, 1500px); padding-top: 16px; }
  .lab-header, .section-title, .toolbar { align-items: flex-start; flex-direction: column; }
  .asset-grid { grid-template-columns: 1fr; }
}