.scenario-filters {
  position: sticky;
  top: 8px;
  z-index: 6;
  background: #fff;
  border: 1px solid #c8dce9;
  border-radius: 12px;
  margin: 0 0 10px;
  padding: 13px 16px;
  box-shadow: 0 5px 18px #123e6210;
}

.filter-controls {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.filter-controls label {
  font-size: 13px;
  color: #416581;
}
.filter-controls select {
  font-size: 13px;
  background: #f4f8fc;
  border-color: #c6d8e6;
  min-height: 40px;
}
.filter-controls button {
  min-height: 40px;
  white-space: nowrap;
}
.filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  margin-top: 10px;
}
.filter-summary strong {
  color: #154c75;
}
.filter-summary span {
  font-size: 11px;
  color: #74899a;
}

@media (max-width: 950px) {
  .scenario-filters {
    top: 4px;
    padding: 10px;
  }
  .filter-controls {
    grid-template-columns: 1fr 1fr;
  }
  .filter-controls select {
    font-size: 12px;
  }
}
@font-face {
  font-family: BYekan;
  src: url('/karsha-scenario/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-display: swap;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #edf1f5;
  color: #193a58;
  font-family: BYekan, Tahoma, sans-serif;
  font-size: 14px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 1px solid #dbe4eb;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
button:hover {
  background: #eaf3fb;
  border-color: #9ec6e1;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #2598df;
  outline-offset: 2px;
}
.primary {
  background: #153e65;
  color: white;
  border-color: #153e65;
  box-shadow: 0 4px 10px #153e6514;
}
.primary:hover {
  background: #20567f;
  color: white;
}
.header {
  min-height: 88px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 24px;
  border-bottom: 1px solid #dce5ec;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.brand img {
  object-fit: contain;
}
.brand strong {
  display: block;
  font-size: 23px;
}
.brand small {
  display: block;
  letter-spacing: 2px;
  font-size: 10px;
  color: #63809b;
}
.header-description {
  border-right: 1px solid #d9e1e9;
  padding-right: 25px;
}
.header-description small {
  display: block;
  color: #6e8294;
  margin-top: 4px;
}
.header nav {
  margin-right: auto;
  display: flex;
  gap: 8px;
}
.projectbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
}
.tabs {
  display: flex;
  gap: 5px;
}
.tabs .active,
.lane-list .active {
  background: #153e65;
  color: #fff;
  border-color: #153e65;
}
.scalability {
  font-size: 11px;
  color: #718394;
  margin-left: auto;
}
.workspace {
  display: grid;
  grid-template-columns: 282px minmax(350px, 1fr) 226px;
  gap: 12px;
  padding: 0 14px;
  align-items: start;
}
.panel {
  background: #fff;
  border: 1px solid #e3eaf0;
  border-radius: 12px;
  padding: 15px;
  max-height: calc(100vh - 176px);
  overflow: auto;
  scrollbar-width: thin;
}
.library {
  grid-column: 3;
  grid-row: 1;
}
.settings {
  grid-column: 1;
  grid-row: 1;
}
.center {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.panel-heading,
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.panel-heading {
  margin-bottom: 8px;
}
.panel-heading span {
  font-size: 21px;
}
h2,
h3,
p {
  margin: 0;
}
h2 {
  font-size: 17px;
}
h3 {
  font-size: 15px;
}
.muted {
  color: #8795a2;
  font-size: 12px;
  margin: 3px 0 13px;
}
input:not([type='checkbox']),
select,
textarea {
  width: 100%;
  background: #fafcfd;
  border: 1px solid #d9e4eb;
  border-radius: 7px;
  padding: 8px;
  min-height: 36px;
}
input[type='checkbox'] {
  accent-color: #1665a5;
  width: 16px;
  height: 16px;
}
.panel label,
form label {
  display: block;
  color: #597087;
  font-size: 12px;
  margin: 10px 0 4px;
}
label input,
label select {
  display: block;
  margin-top: 5px;
}
label.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 8px 0;
}
label.check input {
  margin: 0;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.panel details {
  margin-top: 13px;
}
summary {
  cursor: pointer;
  background: #f1f5f8;
  padding: 9px;
  border-radius: 7px;
  font-weight: bold;
}
.equipment-item {
  width: 100%;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
  margin-top: 4px;
  padding: 6px;
  background: transparent;
}
.equipment-item .thumb {
  display: grid;
  place-items: center;
  width: 42px;
  height: 35px;
  border-radius: 6px;
  background: linear-gradient(140deg, #e7edf0, #f4f7f9);
  font-size: 24px;
  color: #58717f;
}
.equipment-item small {
  margin-right: auto;
  background: #e8eff5;
  border-radius: 20px;
  padding: 1px 6px;
  font-size: 10px;
}

.section-title small {
  color: #8696a4;
  font-size: 11px;
}
.preset-list {
  display: flex;
  gap: 8px;
  overflow: auto;
  margin-top: 10px;
  padding-bottom: 3px;
  scrollbar-width: thin;
}
.preset {
  flex: 0 0 114px;
  padding: 7px 5px;
  background: #f7f9fb;
  font-size: 11px;
}
.preset span {
  display: block;
  height: 40px;
  font: 32px Georgia;
  color: #708c9c;
  background: linear-gradient(145deg, #e2e9e9, #f2f4ef);
  margin-bottom: 6px;
  border-radius: 5px;
}
.viewport {
  height: clamp(380px, 57vh, 720px);
  position: relative;
  background: linear-gradient(#dbe4e9, #acb6ba);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dce4eb;
}
.viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.scene-title {
  position: absolute;
  top: 14px;
  right: 15px;
  left: 15px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  font-size: 13px;
  text-shadow: 0 1px 3px white;
}
.scene-title small {
  margin-right: auto;
  font-size: 10px;
  background: #ffffffa8;
  border-radius: 15px;
  padding: 4px 8px;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #188d6e;
  box-shadow: 0 0 0 4px #188d6e18;
}
.scene-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  background: #e9eff2;
  z-index: 4;
  padding: 30px;
  text-align: center;
}
.scene-status[hidden] {
  display: none;
}
.camera-tools {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  background: #ffffffea;
  border: 1px solid #ffffff;
  border-radius: 40px;
  padding: 5px;
  white-space: nowrap;
  box-shadow: 0 8px 25px #15334a1a;
}
.camera-tools button {
  border: 0;
  background: none;
  padding: 5px 10px;
  border-radius: 30px;
  font-size: 12px;
}
.camera-tools button:hover {
  background: #dbeaf5;
}
.view-note {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 4px #000;
}
.object-tooltip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: #123754ed;
  color: #fff;
  padding: 7px 14px;
  border-radius: 20px;
}
.event {
  position: absolute;
  top: 56px;
  left: 16px;
  right: 16px;
  text-align: center;
  background: #143c60eb;
  color: white;
  border-radius: 8px;
  padding: 10px;
  font-size: 15px;
  pointer-events: none;
}
#exit-interior {
  position: absolute;
  top: 56px;
  right: 15px;
  z-index: 2;
}
.workflow-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e0e7ee;
  margin-top: 10px;
  padding: 13px 16px;
}
.workflow-row {
  display: flex;
  gap: 15px;
  align-items: stretch;
  margin-top: 8px;
}
.run {
  min-width: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}
.run span {
  font-size: 11px;
}
.workflow {
  display: flex;
  gap: 7px;
  overflow: auto;
  flex: 1;
  padding: 2px 0 8px;
  scrollbar-width: thin;
}
.step {
  min-width: 92px;
  max-width: 110px;
  position: relative;
  text-align: center;
  font-size: 11px;
  padding: 4px;
  color: #62778b;
}
.step b {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin: 0 auto 6px;
  background: #eef3f7;
  border-radius: 10px;
  font-size: 15px;
}
.step.active {
  color: #146eb2;
}
.step.active b {
  background: #1686d2;
  color: #fff;
  box-shadow: 0 0 0 4px #1686d21c;
}
.step.done b {
  background: #e5f3eb;
  color: #238657;
}
.simulation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #edf1f5;
  padding-top: 8px;
  gap: 6px;
  font-size: 11px;
  color: #798b9b;
}
.simulation-footer button {
  font-size: 11px;
  padding: 5px 9px;
}
.lane-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 7px 0 12px;
}
.lane-list button {
  padding: 5px 8px;
  font-size: 12px;
}
.lane-remove {
  color: #ab6658;
}
.rules {
  margin-top: 10px;
}
.rule {
  background: #f9f5e9;
  border-right: 3px solid #d8b65a;
  padding: 8px;
  border-radius: 6px;
  margin: 5px 0;
  font-size: 11px;
  color: #806b42;
}
.rule.error {
  background: #fff0ee;
  border-color: #d77b6d;
  color: #965749;
}
.rule button {
  font-size: 10px;
  padding: 3px 7px;
  margin-top: 5px;
}
.details {
  margin-top: 12px;
  border: 1px solid #bed9ed;
  border-radius: 8px;
  padding: 10px;
  background: #f5faff;
}
.details:empty {
  display: none;
}
.details dl {
  display: grid;
  grid-template-columns: 70px 1fr;
  font-size: 11px;
  gap: 5px;
  margin: 10px 0;
}
.details dd {
  margin: 0;
  color: #67829a;
}
.details .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.details button {
  font-size: 11px;
  padding: 5px 7px;
}
.installed-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid #eff3f7;
  padding: 3px 0;
}
.installed-row button:first-child {
  flex: 1;
  text-align: right;
  border: 0;
  background: none;
  font-size: 11px;
  padding: 5px;
}
.installed-row button:last-child {
  padding: 2px 7px;
  border: 0;
  color: #8794a0;
}
.installed-row.selected {
  background: #e4f2fc;
}

.danger-text {
  border: 0;
  color: #a46a5e;
  font-size: 11px;
  margin-top: 10px;
}
.topology {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  font-size: 11px;
  color: #728494;
}
.topology span {
  padding: 5px 10px;
  background: #ffffffa8;
  border: 1px solid #dee6ed;
  border-radius: 6px;
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 25px;
  font-size: 11px;
  align-items: center;
}
.footer strong {
  font: 900 18px Arial;
  color: #163c5e;
}
.footer strong span {
  font-size: 10px;
  margin-left: 8px;
  border-left: 1px solid #829bac;
  padding-left: 8px;
}
.footer a {
  color: #54758b;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #143b5f;
  color: white;
  padding: 12px 22px;
  border-radius: 10px;
  z-index: 30;
  max-width: 90vw;
  box-shadow: 0 8px 35px #193b5630;
}
dialog {
  border: 1px solid #d4e1ec;
  border-radius: 16px;
  color: #1b3e5d;
  padding: 25px;
  width: min(580px, 92vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 100px #102c5840;
}
dialog::backdrop {
  background: #112f4c70;
  backdrop-filter: blur(3px);
}
dialog p {
  font-size: 13px;
  line-height: 1.9;
  color: #708395;
  margin: 15px 0;
}
dialog h2 {
  font-size: 21px;
}
dialog .primary {
  margin-top: 15px;
}
#lead-status {
  color: #a75a48;
}
.mobile-tabs {
  display: none;
}
.skip {
  position: absolute;
  top: -90px;
  background: white;
  padding: 10px;
  z-index: 100;
}
.skip:focus {
  top: 0;
}
[hidden] {
  display: none !important;
}
.viewport:fullscreen {
  height: 100vh;
  border-radius: 0;
}
.equipment-item,
.panel label,
form label,
.step,
.lane-list button {
  font-size: 13px;
}
.panel {
  scrollbar-gutter: stable;
}
.workflow {
  position: relative;
}
.move-hint {
  background: #fff3cf;
}
@media (min-width: 1700px) {
  .workspace {
    grid-template-columns: 315px minmax(350px, 1fr) 250px;
  }
  .panel {
    padding: 20px;
  }
  .viewport {
    height: 65vh;
  }
}
@media (max-width: 1200px) {
  .workspace {
    grid-template-columns: 250px minmax(300px, 1fr) 190px;
    gap: 8px;
    padding: 0 8px;
  }
  .header-description {
    display: none;
  }
  .scalability {
    display: none;
  }
  .panel {
    padding: 10px;
  }
  .projectbar {
    padding: 10px;
  }
  .projectbar button {
    font-size: 12px;
  }
  .preset {
    flex-basis: 105px;
  }
}
@media (max-width: 950px) {
  .workspace {
    display: block;
    padding: 0 10px;
  }
  .panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 72vh;
    border-radius: 18px 18px 0 0;
    z-index: 12;
    padding: 20px;
    box-shadow: 0 -15px 65px #102f5238;
  }
  .panel.open {
    display: block;
  }
  .mobile-tabs {
    display: flex;
    gap: 8px;
    padding: 0 10px 10px;
  }
  .mobile-tabs button {
    flex: 1;
  }
  .header {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .header nav {
    gap: 5px;
  }
  .header nav button {
    font-size: 11px;
    padding: 7px;
  }
  .brand strong {
    font-size: 20px;
  }
  .header nav {
    margin-right: auto;
  }
  .projectbar {
    flex-wrap: wrap;
  }
  .projectbar .tabs {
    margin-left: auto;
  }
  .projectbar button {
    font-size: 11px;
    padding: 6px 9px;
  }
  .viewport {
    height: 53vh;
    min-height: 370px;
  }
  .panel .two {
    gap: 15px;
  }
  .footer {
    padding: 14px;
  }
  .footer > span {
    display: none;
  }
  .topology {
    margin-bottom: 15px;
  }
  .simulation-footer {
    align-items: flex-start;
  }

  .workflow-panel {
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .header nav {
    width: 100%;
  }
  .header nav button {
    flex: 1;
  }
  .header .brand {
    margin: auto;
  }
  .brand img {
    width: 43px;
    height: 43px;
  }
  .brand small {
    font-size: 9px;
  }
  .projectbar button span {
    display: none;
  }
  .projectbar {
    gap: 4px;
  }
  .projectbar .tabs {
    width: 100%;
    overflow: auto;
  }
  .camera-tools button {
    padding: 5px 9px;
  }
  .scene-title small {
    display: none;
  }
  .section-title small {
    display: none;
  }
  .workflow-panel .section-title {
    flex-wrap: wrap;
  }
  .viewport {
    min-height: 380px;
  }
  .simulation-footer span {
    max-width: 52%;
  }
  .two {
    gap: 6px;
  }
  .view-note {
    font-size: 9px;
  }
}

.project-menu {
  position: relative;
  margin-inline-start: auto;
}
.project-menu > summary {
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid #d6e1eb;
  border-radius: 8px;
  background: white;
  white-space: nowrap;
}
.project-actions {
  position: absolute;
  z-index: 30;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  width: 250px;
  max-width: 85vw;
  padding: 12px;
  border: 1px solid #d6e1eb;
  border-radius: 12px;
  background: white;
  box-shadow: 0 12px 32px #12355426;
}
.project-actions > button {
  width: 100%;
  margin-bottom: 6px;
  text-align: right;
}
.project-actions summary {
  cursor: pointer;
  padding: 8px 0;
}
.project-actions .preset-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 300px;
  overflow: auto;
}
.project-actions .preset {
  min-width: 0;
}
.project-actions .preset span {
  display: none;
}
.override-badge {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  background: #fff0d2;
  color: #755319;
  font-size: 9px;
}
.simulation-speed {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.simulation-speed select {
  width: auto;
  margin: 0;
  padding: 4px 8px;
}
.camera-tools {
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 20px);
}
.camera-tools .check {
  margin: 0 5px;
  font-size: 11px;
  white-space: nowrap;
  color: #254762;
}
.camera-tools .check input {
  width: 14px;
  height: 14px;
}
.topology {
  display: block;
  padding: 10px 14px;
  border: 1px solid #dee6ed;
  border-radius: 10px;
}
.topology > summary {
  cursor: pointer;
}
#topology-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#details > .muted:only-child {
  margin: 0;
  font-size: 11px;
}
#details {
  margin-top: 0;
}
#advanced-lane .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
#reset-lane {
  font-size: 11px;
  width: 100%;
}
[hidden] {
  display: none !important;
}
[data-phase].workflow-phase {
  min-width: 0;
}
.phase-steps {
  display: flex;
}
#workflow.round-trip {
  display: grid;
  gap: 12px;
  overflow: visible;
  width: 100%;
}
.round-trip .workflow-phase {
  border: 1px solid #dde7ee;
  background: #f6f9fc;
  border-radius: 10px;
  padding: 10px;
}
.round-trip .workflow-phase.active {
  border-color: #218ac6;
  background: #eef8ff;
}
.workflow-phase h3 {
  font-size: 12px;
  color: #254967;
  margin: 0 0 8px;
}
.round-trip .phase-steps {
  flex-wrap: wrap;
  gap: 5px;
}
.round-trip .step {
  flex: 1 0 88px;
  min-width: 0;
  max-width: 145px;
  padding: 5px;
  font-size: 10px;
}
.round-trip .step b {
  width: 23px;
  height: 23px;
  margin: 0 auto 4px;
}
.workflow-row:has(.round-trip) {
  align-items: flex-start;
}
.workflow-row:has(.round-trip) .run {
  position: sticky;
  top: 140px;
}
#weight-results {
  padding: 12px;
  background: #eef6f0;
  color: #265840;
  border-radius: 8px;
  margin-top: 10px;
  font-size: 12px;
}
#graphics-recovery {
  position: absolute;
  inset: 36px 10px 65px;
  overflow: auto;
  background: #f8fafc;
  border: 1px solid #c9dbe7;
  border-radius: 12px;
  padding: 18px;
  z-index: 8;
}
#graphics-recovery h2 {
  font-size: 17px;
}
#graphics-recovery p {
  font-size: 12px;
  line-height: 1.9;
}
.recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}
.recovery-actions button {
  font-size: 11px;
}
.fallback-lanes {
  display: flex;
  gap: 10px;
}
.fallback-lanes article {
  flex: 1;
  min-width: 0;
  border: 1px solid #d1dce3;
  padding: 10px;
  border-radius: 8px;
  background: white;
}
.fallback-scale {
  margin: 12px 0;
  padding: 16px 5px;
  text-align: center;
  background: repeating-linear-gradient(0deg, #dfe5e7 0 12px, #c4cccf 12px 14px);
  border-inline: 4px solid #d9ad4a;
}
#graphics-quality {
  position: absolute;
  top: 40px;
  right: 12px;
  z-index: 4;
  padding: 5px 8px;
  border-radius: 8px;
  background: #ffffffdb;
  font-size: 10px;
}
.browser-download-link {
  display: block;
  padding: 12px;
  background: #eaf3fb;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .workflow-row:has(.round-trip) {
    display: flex;
    flex-direction: column;
  }
  .workflow-row:has(.round-trip) .run {
    position: static;
    min-height: 46px;
    width: 100%;
  }
  .round-trip .phase-steps {
    flex-direction: column;
  }
  .round-trip .step {
    flex: auto;
    max-width: none;
    display: flex;
    text-align: right;
    align-items: center;
    gap: 9px;
  }
  .round-trip .step b {
    margin: 0;
    flex: 0 0 23px;
  }
  .fallback-lanes {
    flex-direction: column;
  }
}

/* Official product/company identity; contact details stay outside the workspace. */
.export-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
#scenario-text{width:100%;height:55vh;resize:vertical;font:inherit;line-height:1.8}
#workflow-editor-dialog{width:min(1100px,96vw);max-width:96vw}
#workflow-editor-list{max-height:52vh;overflow:auto;padding:4px}
.workflow-edit-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px;margin:8px 0;border:1px solid #d5e1ec;border-radius:10px;background:#f7fafc}
.workflow-edit-row label{flex:1;min-width:110px}.workflow-edit-row input{width:100%}.workflow-edit-row .check input{width:auto}
.workflow-edit-row .wf-description{flex-basis:60%}.workflow-edit-row.disabled{opacity:.6}
.workflow-grab{cursor:grab;touch-action:none;font-size:24px}.workflow-add{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.workflow-add label{flex:1}
#workflow-editor-issues{color:#a52c25;padding:12px}#export-auth-status{color:#a52c25}
.drag-feedback{position:absolute;bottom:76px;left:12px;right:12px;z-index:7;padding:10px;border-radius:8px;background:#176744e8;color:white;text-align:center;pointer-events:none}.drag-feedback.invalid{background:#ad332be8}
.equipment-item{touch-action:pan-y}.equipment-item.dragging{opacity:.5}
.official-logo { object-fit: contain; flex: 0 0 auto; width: 56px; height: 50px; }
.contact-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 24px; background: #123554; color: #edf3f8; font-size: 11px; }
.contact-bar a { color: white; text-decoration: none; }
.contact-bar a:hover { text-decoration: underline; }
.contact-essential, #contact-more { display: flex; align-items: center; gap: 22px; }
.contact-bar span { white-space: nowrap; }
#contact-toggle { display: none; }
.header { min-height: 78px; padding-block: 10px; gap: 22px; }
.header .brand { margin: 0; }
.header .brand small { letter-spacing: 0; font-size: 11px; }
.parent-brand { display: flex; align-items: center; gap: 8px; border-right: 1px solid #dce5ec; padding-right: 20px; font-size: 12px; }
.parent-brand .official-logo { width: 34px; height: 34px; }
.parent-brand small, .dialog-brand small { display: block; color: #61778a; font-size: 11px; }
.footer { gap: 12px; padding-block: 10px; flex-wrap: wrap; }
.footer > div { display: flex; align-items: center; gap: 8px; }
.footer .official-logo { width: 28px; height: 28px; }
.dialog-brand { display: flex; align-items: center; gap: 12px; margin-block: 8px 14px; padding-bottom: 10px; border-bottom: 1px solid #e3eaf0; }
.dialog-brand .rasana-logo { width: 38px; height: 38px; }
.dialog-brand a { color: #153e65; }
@media (max-width: 1100px) {
 .contact-bar, .contact-essential, #contact-more { gap: 12px; }
 .contact-bar { padding-inline: 14px; font-size: 10px; }
 .header { gap: 14px; }
 .parent-brand { padding-right: 12px; }
}
@media (max-width: 950px) {
 .contact-bar { flex-wrap: wrap; gap: 0; }
 .contact-essential { width: 100%; justify-content: space-between; }
 #contact-toggle { display: inline-block; padding: 3px 7px; font: inherit; color: white; border-color: #68849a; background: transparent; }
 #contact-more { display: none; flex-wrap: wrap; padding-top: 8px; gap: 6px 16px; }
 .contact-bar.expanded #contact-more { display: flex; }
 #contact-more span:last-child { white-space: normal; }
 .header .brand strong { font-size: 19px; }
 .header .brand small { font-size: 9px; }
 .parent-brand { margin-right: auto; font-size: 10px; padding-right: 8px; gap: 5px; }
 .parent-brand .official-logo { width: 27px; height: 27px; }
 .header nav { width: 100%; }
 .header nav button { flex: 1; }
 .header nav { flex-wrap: wrap; }
 .header nav button { flex-basis: 42%; }
 .footer { font-size: 10px; }
}
@media (max-width: 480px) {
 .header { padding-inline: 10px; gap: 7px; }
 .header .brand { gap: 6px; }
 .header .brand img { width: 38px; height: 38px; }
 .header .brand strong { font-size: 17px; }
 .header .brand small { max-width: 130px; }
 .parent-brand { font-size: 9px; }
 .parent-brand small { font-size: 9px; }
 .dialog-brand { gap: 8px; font-size: 12px; }
}

.equipment-item[draggable="true"]{touch-action:none}#workflow-name-display{margin:.25rem 0;color:var(--muted);font-size:.85rem}