body {
   background: #f8fafc;
}

.field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.label {
   font-size: 0.9rem;
   color: #334155;
   font-weight: 600;
}

.input,
.textarea,
select {
   border: 1px solid #e2e8f0;
   border-radius: 0.6rem;
   padding: 10px 12px;
   background: #fff;
}

.grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

@media (max-width: 768px) {
   .grid-2 {
      grid-template-columns: 1fr;
   }
}

.card {
   max-width: 980px;
   margin: 28px auto;
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 1rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

.card-header {
   text-align: center;
   padding: 20px 20px 0 20px;
}

.card-body {
   padding: 20px;
}

.hr {
   height: 1px;
   background: #e5e7eb;
   margin: 16px 0;
}

.btn {
   background: #0f172a;
   color: #fff;
   padding: 10px 14px;
   border-radius: .7rem;
   font-weight: 600;
}

.btn[disabled] {
   opacity: .6;
   cursor: not-allowed;
}

.hint {
   font-size: 12px;
   color: #64748b;
}

canvas {
   width: 100%;
   height: 200px;
   border: 1px solid #e5e7eb;
   border-radius: .75rem;
   background: #fff;
}