@import url('https://unpkg.com/open-props');
@import url('https://unpkg.com/open-props/normalize.min.css');

body {
  padding: var(--size-fluid-4);
  background-color: var(--surface-2);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}
.container {
  width: 100%;
  max-width: 800px;
  background: var(--surface-1);
  padding: var(--size-fluid-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}
.card {
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-2);
  padding: var(--size-fluid-3);
  margin-bottom: var(--size-fluid-3);
  background: var(--surface-1);
}
.btn {
  padding: var(--size-3) var(--size-5);
  border-radius: var(--radius-2);
  font-weight: var(--font-weight-6);
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-primary { background: var(--blue-6); color: white; }
.btn-danger { background: var(--red-6); color: white; }
.input {
  padding: var(--size-3);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-2);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--size-fluid-3);
}
.text-muted { color: var(--text-2); }
.banner {
  padding: var(--size-3);
  border-radius: var(--radius-2);
  background: var(--green-1);
  color: var(--green-8);
  font-weight: var(--font-weight-6);
  margin-bottom: var(--size-fluid-3);
}
.banner-danger {
  background: var(--red-1);
  color: var(--red-8);
}
.flex-row {
  display: flex;
  gap: var(--size-3);
  align-items: center;
}