:root {
  --ok: #547a2a;
  --bad: #9a4032;
  --warn: #a77722;
}

body.theme-vip-workshop {
  background:
    linear-gradient(180deg, rgba(23, 16, 10, 0.28), rgba(23, 16, 10, 0.62)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    url("../assets/tf2-classified/concept-ylw-architecture.png") right top / min(42vw, 620px) auto no-repeat,
    url("../assets/tf2-classified/concept-grn-architecture.png") left bottom / min(40vw, 560px) auto no-repeat,
    url("../assets/tf2-classified/wood.jpg") center top / 420px 420px repeat,
    linear-gradient(180deg, #544132, #302219);
  background-size: auto, 48px 48px, 48px 48px, min(42vw, 620px) auto, min(40vw, 560px) auto, 420px 420px, auto;
}

.theme-vip-workshop .sectionRibbon,
.theme-vip-workshop .eyebrow {
  background: linear-gradient(180deg, #d3b14e, #8c6b1b);
}

.vipWorkshop {
  display: grid;
  gap: 22px;
}

.vipHero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 22px;
  padding: 24px;
}

.vipHero__copy,
.vipHero__status {
  display: grid;
  gap: 14px;
}

.vipHero__copy h1 {
  max-width: 10ch;
}

.workshopActions,
.actions,
.headBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.viewer,
.notice,
.box,
.previewLine,
.status {
  border-radius: 16px;
}

.viewer {
  padding: 14px 16px;
  border: 3px solid rgba(73, 47, 22, 0.16);
  background: linear-gradient(180deg, rgba(255, 249, 238, 0.82), rgba(239, 227, 205, 0.86));
  color: var(--ink);
  font-family: "TF2 Build", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notice {
  padding: 16px;
  border: 3px solid rgba(73, 47, 22, 0.16);
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.88), rgba(236, 224, 196, 0.92));
  display: grid;
  gap: 10px;
}

.notice.bad {
  border-color: rgba(154, 64, 50, 0.4);
  background: linear-gradient(180deg, rgba(255, 238, 232, 0.9), rgba(241, 212, 203, 0.92));
}

.notice.warn {
  border-color: rgba(167, 119, 34, 0.4);
  background: linear-gradient(180deg, rgba(255, 247, 228, 0.92), rgba(244, 226, 189, 0.94));
}

.workshopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 18px;
}

.workshopEditor,
.workshopPreview {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.cardHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: end;
}

.cardHead h2 {
  margin-top: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid rgba(73, 47, 22, 0.14);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-soft);
  font-family: "TF2 Build", Impact, sans-serif;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge.ok {
  background: rgba(84, 122, 42, 0.18);
  color: #405d1b;
}

.badge.warn {
  background: rgba(167, 119, 34, 0.18);
  color: #6a4b12;
}

.targetInfo,
.mini {
  color: var(--muted);
  font-size: 0.86rem;
}

.box {
  padding: 16px;
  border: 3px solid rgba(73, 47, 22, 0.14);
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.7), rgba(239, 228, 204, 0.82));
  display: grid;
  gap: 12px;
}

.boxHead {
  display: grid;
  gap: 4px;
}

.boxHead h3 {
  margin: 0;
}

.boxHead p {
  color: var(--muted);
}

.row,
.row3 {
  display: grid;
  gap: 10px;
}

.row {
  grid-template-columns: 1fr 1fr;
}

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

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field--actions {
  align-content: end;
}

label {
  color: var(--ink-soft);
  font-size: 0.84rem;
}

input[type="text"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(73, 47, 22, 0.16);
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  outline: none;
  font: inherit;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(126, 171, 198, 0.9);
  box-shadow: 0 0 0 3px rgba(126, 171, 198, 0.18);
}

textarea {
  min-height: 160px;
  resize: vertical;
  font-family: "Courier New", monospace;
  font-size: 0.86rem;
}

.theme-vip-workshop .btn,
.theme-vip-workshop .ghost {
  min-height: 40px;
}

.theme-vip-workshop .btn.ok {
  background: linear-gradient(180deg, #93b14f, #5f7b30);
}

.theme-vip-workshop .btn.warn {
  background: linear-gradient(180deg, #d7af48, #9c721e);
}

.theme-vip-workshop .btn.bad {
  background: linear-gradient(180deg, #d46a53, #983d2f);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid rgba(73, 47, 22, 0.14);
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink);
  font-family: "TF2 Build", Impact, sans-serif;
  cursor: pointer;
  user-select: none;
}

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

.teamBtn {
  min-height: 44px;
  border-radius: 12px;
  border: 3px solid rgba(73, 47, 22, 0.16);
  background: rgba(255, 255, 255, 0.34);
  color: var(--ink);
  font-family: "TF2 Build", Impact, sans-serif;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.teamBtn.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.teamBtn[data-team="RED"].active {
  background: linear-gradient(180deg, rgba(211, 116, 79, 0.94), rgba(155, 79, 62, 0.94));
  color: #fff6f1;
}

.teamBtn[data-team="BLU"].active {
  background: linear-gradient(180deg, rgba(126, 171, 198, 0.94), rgba(88, 125, 152, 0.94));
  color: #f3fbff;
}

.teamBtn[data-team="GRN"].active {
  background: linear-gradient(180deg, rgba(145, 173, 79, 0.94), rgba(97, 124, 48, 0.94));
  color: #f4fbe6;
}

.teamBtn[data-team="YLW"].active {
  background: linear-gradient(180deg, rgba(235, 189, 85, 0.94), rgba(177, 123, 23, 0.96));
  color: #fff7de;
}

.previewLine,
.status {
  padding: 12px 14px;
  border: 2px dashed rgba(73, 47, 22, 0.18);
  background: rgba(255, 255, 255, 0.34);
  word-break: break-word;
}

.status {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.status.ok {
  border-color: rgba(84, 122, 42, 0.4);
  background: rgba(142, 177, 89, 0.16);
  color: #405d1b;
}

.status.bad {
  border-color: rgba(154, 64, 50, 0.42);
  background: rgba(212, 106, 83, 0.12);
  color: #7c2f21;
}

.status.warn {
  border-color: rgba(167, 119, 34, 0.42);
  background: rgba(215, 175, 72, 0.16);
  color: #6a4b12;
}

#syncOutput {
  white-space: pre-line;
}

.adminTableWrap {
  max-height: 320px;
  overflow: auto;
  border-radius: 12px;
  border: 2px solid rgba(73, 47, 22, 0.14);
  background: rgba(255, 255, 255, 0.26);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.86rem;
}

th,
td {
  border-bottom: 1px solid rgba(73, 47, 22, 0.14);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(244, 232, 208, 0.97);
  color: var(--ink-soft);
  font-family: "TF2 Build", Impact, sans-serif;
  font-size: 0.76rem;
  text-transform: uppercase;
}

tr.selected td {
  background: rgba(126, 171, 198, 0.16);
}

.mono {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
}

.hidden {
  display: none !important;
}

@media (max-width: 1100px) {
  .vipHero,
  .workshopGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .row,
  .row3,
  .teamPicker {
    grid-template-columns: 1fr;
  }

  .workshopEditor,
  .workshopPreview,
  .vipHero {
    padding: 16px;
  }
}