:root {
  --bg: #2f2f32;
  --panel: #3b3b3f;
  --panel-soft: #47474d;
  --text: #f0f0f0;
  --muted: #c8c8c8;
  --accent: #b82626;
  --accent-soft: #8f1d1d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #2a2a2d 0%, #232326 100%);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.app-shell {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
}

.preview-pane, .controls-pane {
  background: var(--panel);
  border: 1px solid #57575d;
  border-radius: 10px;
  padding: 14px;
}

.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pane-header h1 {
  margin: 0;
  font-size: 1.3rem;
}

.preview-actions {
  display: flex;
  gap: 8px;
}

.preview-hint {
  margin: 0 0 10px;
  color: #cfd0d6;
  font-size: 0.82rem;
}

.accent-btn, .ghost-btn {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.accent-btn {
  background: var(--accent);
  color: #fff;
}

.accent-btn:hover {
  background: var(--accent-soft);
}

.ghost-btn {
  background: #2f2f35;
  border-color: #7a7b84;
  color: var(--text);
  width: 40px;
}

.preview-root {
  background: var(--panel-soft);
  border: 1px dashed #6f6f77;
  border-radius: 0;
  padding: 14px;
  min-height: 190px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.preview-root.export-rounded {
  border-radius: 8px;
}

.preview-root.export-capture {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.preview-root > * {
  width: var(--export-width, 1200px);
  min-height: var(--export-height, 360px);
}

.preview-stage {
  overflow: hidden;
  margin: 0 auto;
}

.preview-root.export-dark {
  background: var(--panel-soft);
}

.preview-root.export-white {
  background: #ffffff;
}

.preview-root.export-transparent {
  background-image: linear-gradient(45deg, #3c3c40 25%, transparent 25%), linear-gradient(-45deg, #3c3c40 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3c3c40 75%), linear-gradient(-45deg, transparent 75%, #3c3c40 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.controls-pane h2 {
  margin: 0 0 10px;
}

.acs-form {
  display: grid;
  gap: 10px;
}

.acs-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

.label-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.field-help-btn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #8a8b94;
  background: #2a2a30;
  color: #f4f4f4;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.field-help-btn:hover {
  border-color: #b2b3bb;
}

.row-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0;
  min-height: 42px;
}

#customBackgroundRow {
  display: none;
}

.acs-form select, .acs-form input {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #707078;
  background: #27272a;
  color: #f8f8f8;
  padding: 8px;
}

.help-dialog {
  max-width: 700px;
  width: 95%;
  border: 1px solid #69696f;
  border-radius: 8px;
  background: #2c2c2f;
  color: #fff;
}

.help-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.help-category {
  border-top: 1px solid #55555c;
  padding: 10px 0;
}

.help-category h4 {
  margin: 0 0 8px;
  color: #fff;
}

.help-category p {
  margin: 0 0 8px;
  color: #d9d9d9;
}

.help-category ul {
  margin: 0;
  padding-left: 20px;
}

.help-category li {
  margin: 2px 0;
}

.help-option-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.help-option-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #4f5058;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}

.help-option-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 20px;
}

.help-option-icon-shell {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #101014;
  background: #e6e6ea;
  flex: 0 0 30px;
}

.help-option-icon-shell .help-option-icon {
  width: 18px;
  height: 18px;
}

.help-option-icon-shell.is-containment-safe { background: #009f6b; }
.help-option-icon-shell.is-containment-euclid { background: #ffd300; }
.help-option-icon-shell.is-containment-keter { background: #c40233; }
.help-option-icon-shell.is-containment-pending { background: #111111; }
.help-option-icon-shell.is-containment-explained { background: #f2f2f2; }
.help-option-icon-shell.is-containment-esoteric { background: #f2f2f2; }
.help-option-icon-shell.is-containment-neutralized { background: #d0d2d8; }

.help-option-icon-shell.is-disruption-dark { background: #009f6b; }
.help-option-icon-shell.is-disruption-vlam { background: #0087bd; }
.help-option-icon-shell.is-disruption-keneq { background: #ffd300; }
.help-option-icon-shell.is-disruption-ekhi { background: #ff6d00; }
.help-option-icon-shell.is-disruption-amida { background: #c40233; }

.help-option-icon-shell.is-risk-notice { background: #009f6b; }
.help-option-icon-shell.is-risk-caution { background: #0087bd; }
.help-option-icon-shell.is-risk-warning { background: #ffd300; }
.help-option-icon-shell.is-risk-danger { background: #ff6d00; }
.help-option-icon-shell.is-risk-critical { background: #c40233; }

.help-option-detail {
  color: #d1d1d6;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.help-question-block {
  margin: 6px 0 10px;
  border: 1px solid #4f5058;
  border-radius: 6px;
  padding: 8px 10px;
  background: #2a2a30;
}

.help-question-block h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
}

.help-question-block ul {
  margin: 0;
  padding-left: 18px;
}

.acs-barebones {
  background: #efefef;
  color: #111;
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 10px;
}

.acs-lite-wrap .anom-bar-container {
  transform: scale(0.92);
  transform-origin: top left;
}

.acs-splitter-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #eee;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.acs-splitter-head .divider {
  height: 12px;
  width: 1px;
  background: #bbb;
}

/* Keep Item# and number on one line like the official examples. */
.top-left-box {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Remove the inherited top spacer and keep level text vertically grounded. */
.preview-root .anom-bar-container {
  padding-top: 0 !important;
}

.preview-root .anom-bar-container .top-right-box > .level {
  line-height: 0.9;
}

/* Align level-6 top row height with other levels. */
.anom-bar-container.clear-6 .anom-bar > .top-box {
  grid-template-columns: auto 1fr calc(5vw + 5rem) !important;
  padding-bottom: 1rem !important;
}

.anom-bar-container.clear-6 .top-right-box > .clearance::before {
  content: "Cosmic Top Secret";
  font-size: 0.78em !important;
  white-space: nowrap;
  line-height: 1.1;
}

/* Hide center clearance number in default ACS diamond. */
.danger-diamond > .center-circle::before {
  content: "" !important;
}

/* Secondary icon fallback map (Wikidot template placeholders are unresolved). */
.anom-bar-container.apollyon .text-part > .main-class::after,
.anom-bar-container.apollyon .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/apollyon-icon.svg");
}

.anom-bar-container.archon .text-part > .main-class::after,
.anom-bar-container.archon .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/archon-icon.svg");
}

.anom-bar-container.cernunnos .text-part > .main-class::after,
.anom-bar-container.cernunnos .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/cernunnos-icon.svg");
}

.anom-bar-container.decommissioned .text-part > .main-class::after,
.anom-bar-container.decommissioned .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/decommissioned-icon.svg");
}

.anom-bar-container.hiemal .text-part > .main-class::after,
.anom-bar-container.hiemal .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/hiemal-icon.svg");
}

.anom-bar-container.tiamat .text-part > .main-class::after,
.anom-bar-container.tiamat .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/tiamat-icon.svg");
}

.anom-bar-container.ticonderoga .text-part > .main-class::after,
.anom-bar-container.ticonderoga .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/ticonderoga-icon.svg");
}

.anom-bar-container.thaumiel .text-part > .main-class::after,
.anom-bar-container.thaumiel .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/thaumiel-icon.svg");
}

.anom-bar-container.uncontained .text-part > .main-class::after,
.anom-bar-container.uncontained .danger-diamond > .bottom-icon::before {
  background-image: url("../acs-icons/uncontained-icon.svg");
}

/* Patch missing center-circle rules from extracted ACS CSS. */
.danger-diamond > .center-circle {
  display: none !important;
}

.preview-root.export-white .anom-bar-container,
.preview-root.export-white .anom-bar-container * {
  color: #000 !important;
}

.preview-root .anom-bar-container.none .danger-diamond > .quadrants > .bottom-quad {
  background-color: transparent !important;
}

.preview-root .anom-bar-container:not(.esoteric) .danger-diamond > .bottom-icon,
.preview-root .anom-bar-container.none .danger-diamond > .bottom-icon {
  display: none !important;
}

/* Ensure dark/transparent previews keep visible class label backgrounds. */
/* Keep class color backgrounds visible in dark/transparent mode. */
.preview-root.export-dark .anom-bar-container.safe .text-part > .main-class,
.preview-root.export-transparent .anom-bar-container.safe .text-part > .main-class,
.preview-root.export-dark .anom-bar-container.dark .text-part > .disrupt-class,
.preview-root.export-transparent .anom-bar-container.dark .text-part > .disrupt-class,
.preview-root.export-dark .anom-bar-container.notice .text-part > .risk-class,
.preview-root.export-transparent .anom-bar-container.notice .text-part > .risk-class {
  background-color: rgba(0, 159, 107, 0.22) !important;
}

.preview-root.export-dark .anom-bar-container.euclid .text-part > .main-class,
.preview-root.export-transparent .anom-bar-container.euclid .text-part > .main-class,
.preview-root.export-dark .anom-bar-container.vlam .text-part > .disrupt-class,
.preview-root.export-transparent .anom-bar-container.vlam .text-part > .disrupt-class,
.preview-root.export-dark .anom-bar-container.caution .text-part > .risk-class,
.preview-root.export-transparent .anom-bar-container.caution .text-part > .risk-class {
  background-color: rgba(0, 135, 189, 0.22) !important;
}

.preview-root.export-dark .anom-bar-container.keter .text-part > .main-class,
.preview-root.export-transparent .anom-bar-container.keter .text-part > .main-class,
.preview-root.export-dark .anom-bar-container.amida .text-part > .disrupt-class,
.preview-root.export-transparent .anom-bar-container.amida .text-part > .disrupt-class,
.preview-root.export-dark .anom-bar-container.critical .text-part > .risk-class,
.preview-root.export-transparent .anom-bar-container.critical .text-part > .risk-class {
  background-color: rgba(196, 2, 51, 0.22) !important;
}

.preview-root.export-dark .anom-bar-container.keneq .text-part > .disrupt-class,
.preview-root.export-transparent .anom-bar-container.keneq .text-part > .disrupt-class,
.preview-root.export-dark .anom-bar-container.warning .text-part > .risk-class,
.preview-root.export-transparent .anom-bar-container.warning .text-part > .risk-class {
  background-color: rgba(255, 211, 0, 0.22) !important;
}

.preview-root.export-dark .anom-bar-container.ekhi .text-part > .disrupt-class,
.preview-root.export-transparent .anom-bar-container.ekhi .text-part > .disrupt-class,
.preview-root.export-dark .anom-bar-container.danger .text-part > .risk-class,
.preview-root.export-transparent .anom-bar-container.danger .text-part > .risk-class {
  background-color: rgba(255, 109, 0, 0.22) !important;
}

/* Keep arrow-diamond icon circles visible in dark/transparent mode. */
.preview-root.export-dark .anom-bar-container .danger-diamond > .top-icon,
.preview-root.export-dark .anom-bar-container .danger-diamond > .left-icon,
.preview-root.export-dark .anom-bar-container .danger-diamond > .right-icon,
.preview-root.export-dark .anom-bar-container .danger-diamond > .bottom-icon,
.preview-root.export-transparent .anom-bar-container .danger-diamond > .top-icon,
.preview-root.export-transparent .anom-bar-container .danger-diamond > .left-icon,
.preview-root.export-transparent .anom-bar-container .danger-diamond > .right-icon,
.preview-root.export-transparent .anom-bar-container .danger-diamond > .bottom-icon {
  background-color: #fcfcfc !important;
}

/* When a secondary icon is present, use neutral gray in the bottom quadrant. */
.anom-bar-container:not(.none) .danger-diamond > .quadrants > .bottom-quad {
  background-color: rgba(66, 66, 72, 0.25) !important;
}

.anom-bar-container:not(.none) .danger-diamond > .bottom-icon {
  background-color: #d0d2d8 !important;
}

/* Esoteric with empty secondary should still use esoteric-style gray in bottom slot. */
.anom-bar-container.esoteric.none .danger-diamond > .quadrants > .bottom-quad {
  background-color: rgba(66, 66, 72, 0.25) !important;
}

.anom-bar-container.esoteric.none .danger-diamond > .bottom-icon {
  background-color: #d0d2d8 !important;
}

.preview-root.export-white .anom-bar-container.none .danger-diamond > .quadrants > .bottom-quad {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
}