.stage{
  position:relative;
}

.stage-image{
  position:absolute;
  max-width:none;
  max-height:none;
  display:none;
  z-index:1;
}

.anchor-layer{
  position:absolute;
  inset:0;
  pointer-events:auto;
  z-index:2;
}

.anchor-dot{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:color-mix(in srgb,var(--color-primary) 25%,#ffffff 75%);
  border:2px solid var(--color-primary);
  box-shadow:0 6px 14px rgba(47,111,237,0.25);
  transform:translate(-50%, -50%);
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
}

.anchor-dot.dragging{
  cursor:grabbing;
}

.anchor-dot .anchor-label{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  background:#1e293b;
  color:#fff;
  font-size:10px;
  line-height:1;
  padding:1px 4px;
  border-radius:4px;
  white-space:nowrap;
}

.catalog-category{
  border-bottom:1px solid var(--color-border);
  padding:8px 0;
}

.catalog-category:last-of-type{
  border-bottom:none;
}

.catalog-category__header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  color:var(--color-heading);
  margin-bottom:6px;
}

.catalog-category__header input[type="checkbox"]{
  transform:scale(1.1);
}

.catalog-device{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  margin-left:24px;
  font-size:14px;
  color:var(--color-text);
}

.catalog-device__allow{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--color-text);
}

.catalog-device__allow small{
  color:var(--color-text-muted);
  font-weight:400;
}

.anchor-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 0;
  border-bottom:1px solid var(--color-border);
}

.anchor-row:last-of-type{
  border-bottom:none;
}

.anchor-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--color-text-muted);
}

.anchor-field__label{
  font-weight:600;
  color:var(--color-heading);
}

.anchor-field input[type="text"]{
  padding:8px 10px;
  border:1px solid var(--color-border);
  border-radius:10px;
  font-size:13px;
}

.anchor-accepts{
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--color-surface-muted);
}

.anchor-accepts legend{
  font-size:12px;
  font-weight:600;
  color:var(--color-heading);
  padding:0 4px;
  margin:0;
}

.anchor-accepts__option{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--color-text);
}

.anchor-accepts__empty{
  font-size:13px;
  color:var(--color-text-muted);
  margin:0;
}

.aim-row{
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
  background:var(--color-surface-muted);
}

.aim-row__fields{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.aim-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--color-text-muted);
}

.aim-field--wide textarea{
  resize:vertical;
}

.aim-field__label{
  font-weight:600;
  color:var(--color-heading);
}

.aim-field input[type="text"],
.aim-field textarea{
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:10px;
  font-size:13px;
  font-family:inherit;
}

@media (min-width:1080px){
  .grid.editor-grid{
    grid-template-columns:400px minmax(0,1fr);
  }
}

@media (max-width:1079px){
  .grid.editor-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

.aim-row__actions{
  display:flex;
  justify-content:flex-end;
}

.aim-row__actions button,
.aims-add,
.rulesets-add,
.rules-section > button{
  align-self:flex-start;
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
}

.aims-add{
  margin-top:8px;
  margin-bottom:12px;
}

.aims-limit-message{
  font-size:13px;
  color:#c2410c;
  margin:6px 0 0;
}

.aims-empty,
.rules-empty,
.rulesets-empty{
  font-size:13px;
  color:var(--color-text-muted);
  margin:8px 0;
}

.rulesets-actions{
  margin-top:8px;
}

.rulesets-add{
  margin-bottom:12px;
}

.pane .row{
  align-items:center;
}

#btnSaveScenario{
  padding:8px 18px;
  border-radius:999px;
  font-size:14px;
  flex:0 0 auto;
  white-space:nowrap;
  box-shadow:0 12px 24px color-mix(in srgb,var(--color-primary) 28%,transparent);
}

.ruleset-row{
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:16px;
  background:var(--color-surface-muted);
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}

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

.ruleset-id{
  font-size:12px;
  font-weight:600;
  color:var(--color-text-muted);
  padding:4px 10px;
  border-radius:999px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
}

.ruleset-row__header button{
  --btn-bg:#ef4444;
  --btn-bg-hover:#dc2626;
  --btn-border:transparent;
  padding:6px 14px;
  font-size:12px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 10px 20px color-mix(in srgb,#ef4444 28%,transparent);
}

.ruleset-row__header button:hover{
  box-shadow:0 12px 22px color-mix(in srgb,#dc2626 28%,transparent);
}

.ruleset-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--color-text-muted);
}

.ruleset-field__label{
  font-weight:600;
  color:var(--color-heading);
}

.ruleset-field textarea{
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:10px;
  font-size:13px;
  font-family:inherit;
  min-height:72px;
  resize:vertical;
}

.ruleset-field--toggle{
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.ruleset-field--toggle input[type="checkbox"]{
  transform:scale(1.1);
}

.rules-section{
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
  background:var(--color-surface-muted);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rules-section__header{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--color-heading);
}

.rules-section__header h3{
  font-size:16px;
  margin:0;
}

.rules-section__header small{
  font-size:12px;
  color:var(--color-text-muted);
}

.rules-section__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rule-group{
  border:1px solid var(--color-border);
  background:var(--color-surface);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rule-group:not(.rule-group--root){
  margin-left:16px;
}

.rule-group__header{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}

.rule-group__header button[data-action="delete-group"]{
  margin-left:auto;
  align-self:flex-start;
}

.rule-group__paren{
  font-size:18px;
  font-weight:700;
  color:var(--color-heading);
}

.rule-group__children{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:8px;
}

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

.rule-row{
  --clause-field-basis:260px;
  --clause-field-min:220px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px;
  width:100%;
}

.rule-row--clause{
  padding:8px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-sizing:border-box;
}

.rule-start{
  font-size:13px;
  font-weight:600;
  color:var(--color-heading);
}

.rule-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--color-text-muted);
}

.rule-row .rule-field{
  flex:1 1 var(--clause-field-basis);
  min-width:min(var(--clause-field-min), 100%);
}

.rule-row .rule-field--select{
  flex:0 0 auto;
  flex-direction:row;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.rule-row .rule-field--device,
.rule-row .rule-field--anchor{
  flex:1 1 var(--clause-field-basis);
  min-width:min(var(--clause-field-min), 100%);
}

.rule-field__label{
  font-weight:600;
  color:var(--color-heading);
}

.rule-field select{
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:10px;
  font-size:13px;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

.rule-field--operator select{
  min-width:80px;
}

.rule-row button[data-action="delete-clause"]{
  flex:0 0 auto;
  margin-left:auto;
  align-self:center;
}

@media (max-width: 640px){
  .rule-row{
    --clause-field-basis:220px;
    gap:10px;
  }

  .rule-row button[data-action="delete-clause"]{
    margin-left:0;
  }
}

.rules-section button[data-action="delete-clause"],
.rules-section button[data-action="delete-group"]{
  --btn-bg:#ef4444;
  --btn-bg-hover:#dc2626;
  --btn-border:transparent;
  padding:8px 16px;
  border-radius:999px;
  box-shadow:0 10px 20px color-mix(in srgb,#ef4444 28%,transparent);
}

.rules-section button[data-action="delete-clause"]:hover,
.rules-section button[data-action="delete-group"]:hover{
  box-shadow:0 12px 22px color-mix(in srgb,#dc2626 28%,transparent);
}

.rules-section button[data-action="add-clause"],
.rules-section button[data-action="add-group"],
.rules-section button[data-action="group-selected"]{
  padding:8px 20px;
  border-radius:999px;
  box-shadow:0 12px 24px color-mix(in srgb,var(--color-primary) 28%,transparent);
}

.rules-section button[data-action="add-clause"]:hover,
.rules-section button[data-action="add-group"]:hover,
.rules-section button[data-action="group-selected"]:hover{
  box-shadow:0 14px 26px color-mix(in srgb,var(--color-primary-strong) 28%,transparent);
}

.rules-section button[data-action="group-selected"]:disabled,
.rules-section button[data-action="delete-group"]:disabled{
  background:var(--color-surface-muted);
  border-color:var(--color-border);
  color:var(--color-text-muted);
  cursor:not-allowed;
}

.rules-empty--global{
  margin-top:4px;
}

.rules-message{
  margin:8px 0;
  padding:10px 12px;
  border-radius:4px;
  font-size:13px;
  border-left:4px solid transparent;
}

.rules-message--info{
  background:color-mix(in srgb,var(--color-primary) 12%,#ffffff 88%);
  border-color:var(--color-primary);
  color:var(--color-primary-strong);
}

.rules-message--warning{
  background:color-mix(in srgb,#f59e0b 14%,#ffffff 86%);
  border-color:#f59e0b;
  color:#92400e;
}

.rules-message--error{
  background:color-mix(in srgb,#ef4444 14%,#ffffff 86%);
  border-color:#ef4444;
  color:#991b1b;
}

.rules-message--success{
  background:color-mix(in srgb,#22c55e 12%,#ffffff 88%);
  border-color:#16a34a;
  color:#166534;
}

.rules-note{
  margin-top:8px;
  font-size:12px;
  color:#475569;
}