:root {
  --table: #161412;
  --table-2: #1e1b16;
  --ivory: #f3ece1;
  --kraft: #8b6f4e;
  --leader: #e2c36a;
  --grease: #c45c4a;
  --teal: #7aa39a;
  --muted-dtr: #b7ad9c;
  --line-dtr: #3a342b;
}

.dtr-page {
  background:
    radial-gradient(900px 420px at 0% -10%, #2a2418 0%, transparent 55%),
    var(--table);
  color: var(--ivory);
  padding: 18px 16px 72px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.dtr-page .site-nav {
  width: min(1120px, 100%);
  margin: 0 auto 22px;
}

.dtr-page .site-nav a[aria-current="page"] {
  color: var(--leader);
}

.dtr-hero,
.stage,
.bins-wrap,
.review,
.roll-card {
  width: min(1120px, 100%);
  margin: 0 auto 28px;
}

.dtr-hero h1 {
  font-family: Bahnschrift, "Segoe UI Condensed", "Segoe UI", sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 0.95;
}

.kicker {
  margin: 0 0 6px;
  color: var(--leader);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lede {
  margin: 0;
  max-width: 46rem;
  color: var(--muted-dtr);
  font-size: 1.02rem;
}

.film {
  width: min(1120px, 100%);
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  background: #0e0c0a;
  border: 1px solid #2a261f;
  min-height: 118px;
}

.sprocket {
  background:
    repeating-linear-gradient(
      180deg,
      #0e0c0a 0 10px,
      #0e0c0a 10px 14px,
      #d8c9a4 14px 22px,
      #0e0c0a 22px 26px
    );
  opacity: 0.85;
}

.film-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 12px;
  align-items: center;
  background: #14110d;
  min-width: 0;
}

.film-empty {
  margin: 0;
  color: #8a7f6e;
  font-size: 0.92rem;
}

.chip {
  flex: 0 0 auto;
  border: 1px solid #3f382e;
  background: #1a1713;
  color: var(--ivory);
  padding: 8px 10px 6px;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.25;
  max-width: 180px;
}

.chip b {
  display: block;
  font-weight: 650;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 3px;
}

.chip.drop {
  border-style: dashed;
  border-color: var(--grease);
  color: #e8c8c2;
}

.chip.drop b { color: var(--grease); }

.chip.keep {
  background: var(--leader);
  border-color: var(--leader);
  color: #1a1408;
}

.chip.keep b { color: #5c4814; }

.stage {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 18px;
}

.load-card, .legend, .bins-wrap, .review, .roll-card {
  background: color-mix(in srgb, var(--table-2) 88%, transparent);
  border: 1px solid var(--line-dtr);
  padding: 18px;
}

.load-card h2, .legend h2, .bins-head h2, .review h2, .roll-card h2 {
  margin: 0 0 12px;
  font-family: Bahnschrift, "Segoe UI Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
}

.bins-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.bins-head h2 { margin: 0; }

.drop {
  display: grid;
  gap: 6px;
  border: 1px dashed var(--kraft);
  padding: 18px;
  margin-bottom: 14px;
  cursor: pointer;
  background: #14120f;
}

.drop strong { font-size: 1.05rem; }
.drop span { color: var(--muted-dtr); font-size: 0.88rem; }
.drop.hot { border-color: var(--leader); background: #221c12; }

.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  margin: 12px 0;
}

.look-filters {
  border: 1px solid var(--line-dtr);
  margin: 0 0 12px;
  padding: 10px 12px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.look-filters legend {
  padding: 0 6px;
  color: var(--muted-dtr);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.hf-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
}

.dtr-page select {
  width: 100%;
  border: 1px solid var(--line-dtr);
  background: #0e0c0a;
  color: var(--ivory);
  padding: 10px 12px;
}

.dtr-page .field { max-width: none; }
.dtr-page .field span, .dtr-page .check span { color: var(--muted-dtr); }
.dtr-page input[type="number"],
.dtr-page input[type="text"],
.dtr-page textarea {
  background: #0e0c0a;
  border-color: var(--line-dtr);
  color: var(--ivory);
}

.dtr-page button {
  background: linear-gradient(180deg, var(--leader), #b8892e);
  color: #1a1408;
}

.dtr-page button.ghost {
  background: transparent;
  color: var(--ivory);
  border: 1px solid var(--line-dtr);
}

.status {
  margin: 8px 0 0;
  color: var(--muted-dtr);
  font-size: 0.88rem;
}

.legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.legend li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted-dtr);
  font-size: 0.92rem;
}

.swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}
.swatch.drop { background: var(--grease); }
.swatch.keep { background: var(--leader); }

.note, .hint {
  color: var(--muted-dtr);
  font-size: 0.86rem;
  margin: 12px 0 0;
}

.bins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.dtr-page button.bin {
  text-align: left;
  background: #14120f;
  border: 1px solid var(--line-dtr);
  color: var(--ivory);
  padding: 10px;
  border-radius: 0;
  font-weight: 500;
}

.dtr-page button.bin.on { outline: 1px solid var(--leader); }

.dtr-page button.bin .n {
  display: block;
  font-family: Bahnschrift, sans-serif;
  font-size: 1.4rem;
  color: var(--leader);
}

.dtr-page button.bin small { color: var(--muted-dtr); }

.bin-peek {
  margin: 12px 0 0;
  max-height: 180px;
  overflow: auto;
  background: #0e0c0a;
  border: 1px solid var(--line-dtr);
  color: var(--ivory);
  padding: 10px;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.dropped {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.pill {
  border: 1px dashed var(--grease);
  color: #e8c8c2;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.other-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
}

.other-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 52px;
  gap: 8px;
  align-items: center;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
}

.other-row select {
  background: #0e0c0a;
  color: var(--ivory);
  border: 1px solid var(--line-dtr);
  padding: 6px;
}

.roll-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
}

.roll-buckets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0;
}

.roll-buckets label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--muted-dtr);
}

.roll-card textarea {
  min-height: 36vh;
  margin-top: 12px;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}

.review h2 small {
  color: var(--muted-dtr);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 800px) {
  .stage { grid-template-columns: 1fr; }
  .film { grid-template-columns: 12px 1fr 12px; }
  .hf-row { grid-template-columns: 1fr; }
}