@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.led { width: 7px; height: 7px; flex-shrink: 0; display: inline-block; border-radius: 0; }
.led.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.led.amber { background: var(--amber); }
.led.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.led.orange { background: var(--orange); box-shadow: 0 0 6px var(--o-glow); }
.led.dim { background: var(--dim); }

.sec-label {
  font-family: var(--f-dot);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--orange);
  color: #000;
  border: 1px solid var(--orange);
  border-radius: 0;
  font-family: var(--f-dot);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--fast), transform var(--fast);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.cta-primary:hover { background: var(--orange-hover); }
.cta-primary:active { transform: scale(0.98); }

.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-s);
  border-radius: 0;
  font-family: var(--f-dot);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color var(--fast), color var(--fast), transform var(--fast);
  cursor: pointer;
}
.cta-secondary:hover { border-color: var(--orange); color: var(--orange); }
.cta-secondary:active { transform: scale(0.98); }

.nav-cta {
  padding: 9px 16px;
  border: 1px solid var(--border-s);
  font-family: var(--f-dot);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--fast), color var(--fast);
}
.nav-cta:hover { border-color: var(--orange); color: var(--orange); }

.drop-zone {
  width: 100%;
  background: #020202;
  border: 1px dashed var(--border-s);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast);
  box-shadow: inset 0 3px 12px rgba(0,0,0,0.85);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--orange);
  box-shadow: inset 0 3px 12px rgba(0,0,0,0.85), 0 0 0 1px var(--o-dim);
}
.drop-zone.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.drop-zone.disabled:hover, .drop-zone.disabled.dragover {
  border-color: var(--border-s);
  box-shadow: inset 0 3px 12px rgba(0,0,0,0.85);
}
.drop-title { font-family: var(--f-dot); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.drop-sub { font-size: 10px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.drop-formats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.drop-fmt { font-family: var(--f-mono); font-size: 7px; padding: 3px 8px; border: 1px solid var(--border); color: var(--muted); }

.stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stage {
  background: var(--raised);
  border: 1px solid var(--border);
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
.stage::after {
  content: '';
  position: absolute;
  top: 5px; right: 5px;
  width: 3px; height: 3px;
  background: var(--dim);
}
.stage.active { border-color: var(--orange); background: var(--o-dim); }
.stage.active::after { background: var(--orange); animation: pulse 1.1s ease-in-out infinite; }
.stage.done { border-color: rgba(61,204,71,0.22); background: var(--g-dim); }
.stage.done::after { background: var(--green); }
.stage-name { font-family: var(--f-dot); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; }
.stage-state { font-family: var(--f-mono); font-size: 7px; color: var(--muted); margin-top: 4px; }

.sd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sd-card { background: var(--card); border: 1px solid var(--border); padding: 12px 8px; text-align: center; }
.sd-label { font-family: var(--f-dot); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sd-value { font-family: var(--f-dot); font-size: 18px; }
.sd-card.critical .sd-value { color: var(--red); }
.sd-card.medium .sd-value { color: var(--amber); }
.sd-card.low .sd-value { color: var(--green); }

.viol { background: var(--card); border: 1px solid var(--border); border-left: 2px solid var(--amber); padding: 10px 12px; }
.viol.high { border-left-color: var(--red); }
.viol-top { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.sev { font-family: var(--f-dot); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.rule-ref { font-family: var(--f-mono); font-size: 8px; color: var(--muted); border: 1px solid var(--border); padding: 2px 6px; }
.viol-desc { font-size: 9px; color: var(--muted); line-height: 1.5; }

.override-feed { background: var(--card); border: 1px solid var(--border); }
.override-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: 9px;
}
.override-row:last-child { border-bottom: none; }
.override-days { color: var(--amber); }
.override-days.overdue { color: var(--red); }

.lcd-panel {
  background: #000;
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--muted);
  line-height: 1.6;
}

.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.chip {
  font-family: var(--f-dot);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color var(--fast), background var(--fast);
}
.chip:hover { border-color: var(--border-s); }
.chip.selected { border-color: var(--orange); background: var(--o-dim); color: var(--orange); }

input[type="email"], input[type="text"] {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-body-sm);
  padding: 10px 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  overscroll-behavior: contain;
}
.modal-backdrop.show { display: flex; }
.modal-backdrop[hidden] { display: none !important; }
.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  max-width: 400px;
  width: 90%;
}
.modal-title {
  font-family: var(--f-dot);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.modal-sub { color: var(--muted); margin-bottom: 16px; font-size: 11px; }
.modal-msg { font-size: 10px; margin-top: 10px; min-height: 14px; }
.modal-msg.ok { color: var(--green); }
.modal-msg.err { color: var(--red); }