.demo-badge {
  padding: 7px 11px;
  border: 1px solid #f2d98a;
  border-radius: 999px;
  background: #fff8df;
  color: #946200;
  font-size: 11px;
  font-weight: 700;
}

.demo-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid #f2d98a;
  border-radius: 11px;
  background: #fff8df;
  color: #6f5300;
  font-size: 11px;
}

.demo-notice span { color: #8b701c; }

.demo-mode button:disabled,
.demo-mode input:disabled,
.demo-mode select:disabled,
.demo-mode textarea:disabled {
  cursor: not-allowed;
  opacity: .62;
}

@media (max-width: 720px) {
  .demo-badge { display: none; }
  .demo-notice { align-items: flex-start; flex-direction: column; gap: 3px; }
}